Skip to content

Commit 4dfc79b

Browse files
kevzlou7979kevzlou7979
committed
WIP - Banner Widget.
1 parent 0ebfcff commit 4dfc79b

File tree

7 files changed

+330
-0
lines changed

7 files changed

+330
-0
lines changed

‎src/main/java/gwt/material/design/addins/client/banner/MaterialBanner.java‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
package gwt.material.design.addins.client.banner;
2+
3+
import com.google.gwt.dom.client.Document;
4+
import com.google.gwt.event.logical.shared.CloseEvent;
5+
import com.google.gwt.event.logical.shared.CloseHandler;
6+
import com.google.gwt.event.logical.shared.OpenEvent;
7+
import com.google.gwt.event.logical.shared.OpenHandler;
8+
import com.google.gwt.event.shared.HandlerRegistration;
9+
import com.google.gwt.user.client.ui.Widget;
10+
import gwt.material.design.addins.client.MaterialAddins;
11+
import gwt.material.design.addins.client.banner.event.HasBannerHandlers;
12+
import gwt.material.design.client.MaterialDesignBase;
13+
import gwt.material.design.client.base.HasOpenClose;
14+
import gwt.material.design.client.base.MaterialWidget;
15+
import gwt.material.design.client.base.mixin.ToggleStyleMixin;
16+
import gwt.material.design.client.constants.IconType;
17+
import gwt.material.design.client.ui.MaterialIcon;
18+
import gwt.material.design.client.ui.MaterialLabel;
19+
import gwt.material.design.client.ui.MaterialPanel;
20+
21+
import static gwt.material.design.jquery.client.api.JQuery.$;
22+
23+
public class MaterialBanner extends MaterialWidget implements HasOpenClose, HasBannerHandlers {
24+
25+
private final MaterialIcon icon;
26+
private final MaterialLabel messageLabel;
27+
private final MaterialPanel actions;
28+
private int translateY = 0;
29+
private int durationInMillis = 300;
30+
private MaterialWidget targetContainer;
31+
32+
private ToggleStyleMixin<MaterialBanner> openMixin;
33+
34+
static {
35+
if (MaterialAddins.isDebug()) {
36+
MaterialDesignBase.injectCss(MaterialBannerDebugClientBundle.INSTANCE.bannerDebugCss());
37+
} else {
38+
MaterialDesignBase.injectCss(MaterialBannerClientBundle.INSTANCE.bannerCss());
39+
}
40+
}
41+
42+
public MaterialBanner() {
43+
super(Document.get().createDivElement(), "banner");
44+
45+
icon = new MaterialIcon();
46+
icon.setVisible(false);
47+
icon.addStyleName("banner-icon");
48+
49+
messageLabel = new MaterialLabel();
50+
messageLabel.addStyleName("message");
51+
52+
actions = new MaterialPanel();
53+
actions.addStyleName("actions");
54+
}
55+
56+
@Override
57+
protected void onLoad() {
58+
super.onLoad();
59+
60+
add(icon);
61+
add(messageLabel);
62+
add(actions);
63+
64+
calculateTranslateY();
65+
updateTransition();
66+
}
67+
68+
@Override
69+
public void add(Widget child) {
70+
if (child instanceof MaterialBannerActions) {
71+
actions.add(child);
72+
} else {
73+
super.add(child);
74+
}
75+
}
76+
77+
@Override
78+
public void open() {
79+
getOpenMixin().setOn(true);
80+
OpenEvent.fire(this, getMessage());
81+
pushTargetContainer(translateY);
82+
}
83+
84+
@Override
85+
public void close() {
86+
getOpenMixin().setOn(false);
87+
CloseEvent.fire(this, getMessage());
88+
pushTargetContainer(0);
89+
}
90+
91+
@Override
92+
public boolean isOpen() {
93+
return false;
94+
}
95+
96+
protected void calculateTranslateY() {
97+
translateY = $(getElement()).outerHeight(true);
98+
setTransform("translateY(" + -translateY + "px)");
99+
}
100+
101+
protected void pushTargetContainer(int translateY) {
102+
if (targetContainer != null) {
103+
targetContainer.setTransform("translateY(" + translateY + "px)");
104+
}
105+
}
106+
107+
protected void updateTransition() {
108+
$(getElement()).css("transition", "all " + durationInMillis + "ms ease");
109+
if (targetContainer != null) {
110+
$(targetContainer).css("transition", "all " + durationInMillis + "ms ease");
111+
}
112+
}
113+
114+
public int getDurationInMillis() {
115+
return durationInMillis;
116+
}
117+
118+
public void setDurationInMillis(int durationInMillis) {
119+
this.durationInMillis = durationInMillis;
120+
}
121+
122+
public String getMessage() {
123+
return messageLabel.getText();
124+
}
125+
126+
public void setMessage(String message) {
127+
if (message != null && !message.isEmpty()) {
128+
messageLabel.setText(message);
129+
} else {
130+
messageLabel.setText("");
131+
}
132+
}
133+
134+
public IconType getIconType() {
135+
return icon.getIconType();
136+
}
137+
138+
public void setIconType(IconType iconType) {
139+
if (iconType != null) {
140+
icon.setIconType(iconType);
141+
icon.setVisible(true);
142+
} else {
143+
icon.setVisible(false);
144+
}
145+
}
146+
147+
public MaterialIcon getIcon() {
148+
return icon;
149+
}
150+
151+
public MaterialLabel getMessageLabel() {
152+
return messageLabel;
153+
}
154+
155+
public MaterialWidget getTargetContainer() {
156+
return targetContainer;
157+
}
158+
159+
public void setTargetContainer(MaterialWidget targetContainer) {
160+
this.targetContainer = targetContainer;
161+
}
162+
163+
public ToggleStyleMixin<MaterialBanner> getOpenMixin() {
164+
if (openMixin == null) {
165+
openMixin = new ToggleStyleMixin<>(this, "open");
166+
}
167+
return openMixin;
168+
}
169+
170+
@Override
171+
public HandlerRegistration addCloseHandler(CloseHandler handler) {
172+
return addHandler(handler, CloseEvent.getType());
173+
}
174+
175+
@Override
176+
public HandlerRegistration addOpenHandler(OpenHandler handler) {
177+
return addHandler(handler, OpenEvent.getType());
178+
}
179+
}

‎src/main/java/gwt/material/design/addins/client/banner/MaterialBannerActions.java‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package gwt.material.design.addins.client.banner;
2+
3+
import gwt.material.design.client.ui.MaterialPanel;
4+
5+
public class MaterialBannerActions extends MaterialPanel {
6+
7+
public MaterialBannerActions() {
8+
super();
9+
}
10+
}

‎src/main/java/gwt/material/design/addins/client/banner/MaterialBannerClientBundle.java‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
* #%L
3+
* GwtMaterial
4+
* %%
5+
* Copyright (C) 2015 - 2017 GwtMaterialDesign
6+
* %%
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
* #L%
19+
*/
20+
package gwt.material.design.addins.client.banner;
21+
22+
import com.google.gwt.core.client.GWT;
23+
import com.google.gwt.resources.client.ClientBundle;
24+
import com.google.gwt.resources.client.TextResource;
25+
26+
/**
27+
* Client Bundle for Avatar component
28+
*
29+
* @author kevzlou7979
30+
*/
31+
public interface MaterialBannerClientBundle extends ClientBundle {
32+
33+
MaterialBannerClientBundle INSTANCE = GWT.create(MaterialBannerClientBundle.class);
34+
35+
@Source("resources/css/banner.min.css")
36+
TextResource bannerCss();
37+
}

‎src/main/java/gwt/material/design/addins/client/banner/MaterialBannerDebugClientBundle.java‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
* #%L
3+
* GwtMaterial
4+
* %%
5+
* Copyright (C) 2015 - 2017 GwtMaterialDesign
6+
* %%
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
* #L%
19+
*/
20+
package gwt.material.design.addins.client.banner;
21+
22+
import com.google.gwt.core.client.GWT;
23+
import com.google.gwt.resources.client.ClientBundle;
24+
import com.google.gwt.resources.client.TextResource;
25+
26+
/**
27+
* Client Bundle for Avatar component
28+
*
29+
* @author kevzlou7979
30+
*/
31+
public interface MaterialBannerDebugClientBundle extends ClientBundle {
32+
33+
MaterialBannerDebugClientBundle INSTANCE = GWT.create(MaterialBannerDebugClientBundle.class);
34+
35+
@Source("resources/css/banner.css")
36+
TextResource bannerDebugCss();
37+
}

‎src/main/java/gwt/material/design/addins/client/banner/event/HasBannerHandlers.java‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package gwt.material.design.addins.client.banner.event;
2+
3+
import com.google.gwt.event.logical.shared.HasCloseHandlers;
4+
import com.google.gwt.event.logical.shared.HasOpenHandlers;
5+
6+
public interface HasBannerHandlers extends HasOpenHandlers<String>, HasCloseHandlers<String> {
7+
}

‎src/main/resources/gwt/material/design/addins/client/banner/resources/css/banner.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.banner {
2+
padding: 20px;
3+
border: 1px solid #e9e9e9;
4+
background: white;
5+
clear: both;
6+
opacity: 0;
7+
visibility: hidden;
8+
overflow: hidden;
9+
box-sizing: border-box;
10+
position: sticky !important;
11+
z-index: 999;
12+
width: 100%;
13+
top: 0;
14+
}
15+
16+
.banner.open {
17+
opacity: 1;
18+
visibility: visible;
19+
transform: translateY(0px) !important;
20+
}
21+
22+
.banner i.banner-icon {
23+
padding: 8px;
24+
border-radius: 100%;
25+
background: #42a5f5;
26+
color: white;
27+
display: inline-block;
28+
vertical-align: middle;
29+
}
30+
31+
.banner span.material-label {
32+
max-width: 70%;
33+
margin-left: 12px;
34+
display: inline-block;
35+
vertical-align: middle;
36+
}
37+
38+
.banner .actions {
39+
float: right;
40+
}
41+
42+
.banner button,
43+
.banner button:hover,
44+
.banner button:focus {
45+
cursor: pointer;
46+
background: transparent;
47+
color: #42a5f5;
48+
box-shadow: none;
49+
padding-left: 8px;
50+
padding-right: 8px;
51+
margin-left: 12px;
52+
}

‎src/main/resources/gwt/material/design/addins/client/banner/resources/css/banner.min.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.banner {
2+
padding: 12px;
3+
border: 1px solid #e9e9e9;
4+
background: #FFFFFF;
5+
position: sticky;
6+
transition: transform 0.3s ease;
7+
}
8+

0 commit comments

Comments
 (0)