Skip to content

Commit d221981

Browse files
kevzlou7979kevzlou7979
committed
Added multiple modal instances Manual test and demo showcase.
1 parent a4d7093 commit d221981

File tree

2 files changed

+95
-2
lines changed

2 files changed

+95
-2
lines changed

‎src/main/java/gwt/material/design/demo/client/application/components/dialogs/DialogsView.java‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,46 @@ interface Binder extends UiBinder<Widget, DialogsView> {
3737
}
3838

3939
@UiField
40-
MaterialModal modal, modalFixed, modalBottomSheet, modalClosable;
40+
MaterialModal modal, modalFixed, modalBottomSheet, modalClosable, modalEvents,
41+
modal1, modal2, modal3;
42+
4143

4244
@Inject
4345
DialogsView(Binder uiBinder) {
4446
initWidget(uiBinder.createAndBindUi(this));
47+
48+
modalEvents.addOpenHandler(openEvent -> MaterialToast.fireToast("Opened"));
49+
modalEvents.addCloseHandler(closeEvent -> MaterialToast.fireToast("Closed"));
50+
}
51+
52+
@UiHandler("btnOpenModal1")
53+
void onOpenModal1(ClickEvent e) {
54+
modal1.open();
55+
}
56+
57+
@UiHandler("btnOpenModal2")
58+
void onOpenModal2(ClickEvent e) {
59+
modal2.open();
60+
}
61+
62+
@UiHandler("btnOpenModal3")
63+
void onOpenModal3(ClickEvent e) {
64+
modal3.open();
65+
}
66+
67+
@UiHandler("btnCloseModal1")
68+
void onCloseModal1(ClickEvent e) {
69+
modal1.close();
70+
}
71+
72+
@UiHandler("btnCloseModal2")
73+
void onCloseModal2(ClickEvent e) {
74+
modal2.close();
75+
}
76+
77+
@UiHandler("btnCloseModal3")
78+
void onCloseModal3(ClickEvent e) {
79+
modal3.close();
4580
}
4681

4782
@UiHandler("btnToast")
@@ -93,11 +128,21 @@ void onClosable(ClickEvent e) {
93128
modalClosable.open();
94129
}
95130

131+
@UiHandler("btnEvents")
132+
void onEvents(ClickEvent e) {
133+
modalEvents.open();
134+
}
135+
96136
@UiHandler("btnCloseModal")
97137
void onCloseModal(ClickEvent e){
98138
modal.close();
99139
}
100140

141+
@UiHandler("btnCloseModalEvents")
142+
void onCloseEvents(ClickEvent e) {
143+
modalEvents.close();
144+
}
145+
101146
@UiHandler("btnCloseFixedModal")
102147
void onCloseFixedModal(ClickEvent e) {
103148
modalFixed.close();

‎src/main/java/gwt/material/design/demo/client/application/components/dialogs/DialogsView.ui.xml‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</m:MaterialRow>
4040

4141
<m:MaterialRow addStyleNames="code">
42-
<m:MaterialTitle title="Toast with Action" description="rovides an advance toast with any widget (MaterialLink) for declaration of actions when toast is applied."/>
42+
<m:MaterialTitle title="Toast with Action" description="Provides an advance toast with any widget (MaterialLink) for declaration of actions when toast is applied."/>
4343
<m:MaterialButton text="Toast Me" waves="LIGHT" ui:field="btnToastAction" addStyleNames="{style.btn}"/>
4444
<demo:PrettyPre addStyleNames="lang-java">
4545
&emsp;MaterialLink link = new MaterialLink("UNDO");<br/>
@@ -158,6 +158,54 @@
158158
&lt;/m:MaterialModal><br/>
159159
</demo:PrettyPre>
160160
</m:MaterialRow>
161+
162+
<m:MaterialRow addStyleNames="code">
163+
<m:MaterialTitle title="Modal : Events" description="We have provided an open / close events for modal component." />
164+
<m:MaterialModal ui:field="modalEvents" type="FIXED_FOOTER" dismissible="true" inDuration="500" outDuration="500">
165+
<m:MaterialModalContent>
166+
<m:MaterialTitle title="Modal with Events" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" />
167+
</m:MaterialModalContent>
168+
<m:MaterialModalFooter>
169+
<m:MaterialButton text="Close Modal" type="FLAT" ui:field="btnCloseModalEvents"/>
170+
</m:MaterialModalFooter>
171+
</m:MaterialModal>
172+
<m:MaterialButton text="Modal with Events" ui:field="btnEvents" waves="LIGHT"/>
173+
</m:MaterialRow>
174+
175+
<m:MaterialRow addStyleNames="code">
176+
<m:MaterialTitle title="Modal : Multiple Instances" description="You can easily add multiple instances of modal. And we handle the z-index throught ModalManager for the calculation." />
177+
<!-- Modal 1 -->
178+
<m:MaterialModal ui:field="modal1" type="FIXED_FOOTER">
179+
<m:MaterialModalContent>
180+
<m:MaterialTitle title="Modal 1" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" />
181+
</m:MaterialModalContent>
182+
<m:MaterialModalFooter>
183+
<m:MaterialButton text="Open Modal 2" type="FLAT" ui:field="btnOpenModal2"/>
184+
<m:MaterialButton text="Close Modal 1" type="FLAT" ui:field="btnCloseModal1"/>
185+
</m:MaterialModalFooter>
186+
</m:MaterialModal>
187+
<!-- Modal 2 -->
188+
<m:MaterialModal ui:field="modal2" type="FIXED_FOOTER">
189+
<m:MaterialModalContent>
190+
<m:MaterialTitle title="Modal 2" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" />
191+
</m:MaterialModalContent>
192+
<m:MaterialModalFooter>
193+
<m:MaterialButton text="Open Modal 3" type="FLAT" ui:field="btnOpenModal3"/>
194+
<m:MaterialButton text="Close Modal 2" type="FLAT" ui:field="btnCloseModal2"/>
195+
</m:MaterialModalFooter>
196+
</m:MaterialModal>
197+
<!-- Modal 3 -->
198+
<m:MaterialModal ui:field="modal3" type="FIXED_FOOTER">
199+
<m:MaterialModalContent>
200+
<m:MaterialTitle title="Modal 3" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" />
201+
</m:MaterialModalContent>
202+
<m:MaterialModalFooter>
203+
<m:MaterialButton text="Close Modal 3" type="FLAT" ui:field="btnCloseModal3"/>
204+
</m:MaterialModalFooter>
205+
</m:MaterialModal>
206+
207+
<m:MaterialButton text="Open Modal 1" ui:field="btnOpenModal1" waves="LIGHT"/>
208+
</m:MaterialRow>
161209

162210
<m:MaterialRow addStyleNames="code">
163211
<m:MaterialTitle title="Tooltip" description="Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function."/>

0 commit comments

Comments
 (0)