1use iced::alignment;
2use material::widget::page;
3use material_ui_rs as material;
4
5use super::super::{Message, Showcase};
6
7pub(super) fn view(state: &Showcase) -> material::Element<'_, Message> {
8 page::sections([
9 page::section("Top app bars", top_app_bars()).into(),
10 page::section("Search view", search_view(state)).into(),
11 page::section("Toolbars", toolbars()).into(),
12 page::section("Bottom app bar", bottom_app_bar()).into(),
13 page::section("Bottom sheets", bottom_sheets(state)).into(),
14 page::section("Side sheets", side_sheets(state)).into(),
15 ])
16 .into()
17}
18
19fn top_app_bars() -> material::Element<'static, Message> {
20 use material::widget::app_bar;
21
22 page::component_stack([
23 app_bar::with_status_bar(app_bar::small(
24 "Small",
25 Some(app_bar::icon_action("menu", Message::MenuPressed)),
26 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
27 ))
28 .into(),
29 app_bar::with_status_bar(app_bar::medium(
30 "Medium",
31 Some(app_bar::icon_action("menu", Message::MenuPressed)),
32 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
33 ))
34 .into(),
35 app_bar::with_status_bar(app_bar::large(
36 "Large",
37 Some(app_bar::icon_action("menu", Message::MenuPressed)),
38 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
39 ))
40 .into(),
41 ])
42 .into()
43}
44
45fn search_view(state: &Showcase) -> material::Element<'_, Message> {
46 let results = material::widget::list::group([
47 material::widget::list::one_line_icon("input", "Inputs").into(),
48 material::widget::list::one_line_icon("tune", "Controls").into(),
49 material::widget::list::one_line_icon("info", "Feedback").into(),
50 ]);
51
52 material::widget::search::docked_view(
53 "Search components",
54 &state.search_query,
55 Message::SearchChanged,
56 results,
57 )
58 .into()
59}
60
61fn bottom_app_bar() -> material::Element<'static, Message> {
62 use material::widget::app_bar;
63 use material::widget::button::{self, FabSize, FabVariant};
64
65 app_bar::bottom(
66 app_bar::icon_actions([
67 ("menu", Message::MenuPressed),
68 ("search", Message::Increment),
69 ("info", Message::Increment),
70 ]),
71 Some(button::action(
72 button::fab("add", FabVariant::Primary, FabSize::Standard),
73 Message::Increment,
74 )),
75 )
76 .into()
77}
78
79fn toolbars() -> material::Element<'static, Message> {
80 use material::widget::button::{self, FabSize, FabVariant};
81 use material::widget::toolbar;
82
83 let docked = toolbar::docked(toolbar::icon_actions([
84 ("arrow_back", Message::Decrement),
85 ("arrow_forward", Message::Increment),
86 ("add", Message::Increment),
87 ("tab", Message::Increment),
88 ("star", Message::Increment),
89 ("search", Message::Increment),
90 ]));
91
92 let docked_vibrant = toolbar::docked_vibrant([
93 toolbar::vibrant_icon_action("edit", Message::Increment),
94 toolbar::selected_vibrant_icon_action("check", Message::Increment),
95 toolbar::vibrant_icon_action("delete", Message::Decrement),
96 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
97 ]);
98
99 let floating = toolbar::floating([
100 toolbar::selected_icon_action("format_bold", Message::Increment),
101 toolbar::icon_action("format_italic", Message::Increment),
102 toolbar::icon_action("format_underlined", Message::Increment),
103 toolbar::icon_action("format_color_text", Message::Increment),
104 ]);
105
106 let floating_vibrant = toolbar::floating_with_fab(
107 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
108 ("share", Message::Increment),
109 ("add", Message::Increment),
110 ("edit", Message::Increment),
111 ])),
112 button::fab("search", FabVariant::Primary, FabSize::Standard).on_press(Message::Increment),
113 );
114
115 let vertical = toolbar::vertical_floating([
116 toolbar::icon_action("undo", Message::Decrement),
117 toolbar::icon_action("redo", Message::Increment),
118 toolbar::selected_icon_action("palette", Message::Increment),
119 ]);
120
121 page::component_stack([
122 docked.into(),
123 docked_vibrant.into(),
124 page::row([floating.into(), vertical.into()]).into(),
125 floating_vibrant.into(),
126 ])
127 .into()
128}
129
130fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
131 let width = page::preview_width(state.window_size.width);
132 let standard = material::widget::sheet::standard_bottom(sheet_content(
133 "Standard bottom sheet",
134 "Coexists with the page and keeps secondary content available.",
135 ));
136
137 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
138 "Modal bottom sheet",
139 "Uses a scrim and blocks interaction behind the sheet.",
140 )));
141
142 page::component_stack([
143 page::centered_preview(width, standard).into(),
144 page::centered_preview(width, modal_preview).into(),
145 ])
146 .into()
147}
148
149fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
150 let width = page::preview_width(state.window_size.width);
151 let standard = page::aligned_preview_pane(
152 alignment::Horizontal::Right,
153 material::widget::sheet::standard_side(side_sheet_content(
154 "Standard side sheet",
155 "Coexists with the page while supporting content remains visible.",
156 )),
157 );
158
159 let modal = page::preview_pane(material::widget::sheet::modal_side_overlay(
160 material::widget::sheet::Side::Right,
161 side_sheet_content(
162 "Modal side sheet",
163 "Uses a scrim and keeps focus on a temporary side task.",
164 ),
165 ));
166
167 page::component_stack([
168 page::centered_preview(width, standard).into(),
169 page::centered_preview(width, modal).into(),
170 ])
171 .into()
172}
173
174fn sheet_content(
175 title: &'static str,
176 supporting: &'static str,
177) -> material::Element<'static, Message> {
178 use material::widget::button::{self, ButtonVariant};
179
180 material::widget::sheet::bottom_content(page::compact_stack([
181 material::text::title_medium(title).into(),
182 material::text::body_medium(supporting).into(),
183 page::row([
184 button::action(
185 button::button("Dismiss", ButtonVariant::Text),
186 Message::Decrement,
187 ),
188 button::action(
189 button::button("Apply", ButtonVariant::Filled),
190 Message::Increment,
191 ),
192 ])
193 .into(),
194 ]))
195 .into()
196}
197
198fn side_sheet_content(
199 title: &'static str,
200 supporting: &'static str,
201) -> material::Element<'static, Message> {
202 use material::widget::button::{self, ButtonVariant};
203
204 material::widget::sheet::side_content(page::compact_stack([
205 material::text::title_medium(title).into(),
206 material::text::body_medium(supporting).into(),
207 page::row([
208 button::action(
209 button::button("Dismiss", ButtonVariant::Text),
210 Message::Decrement,
211 ),
212 button::action(
213 button::button("Apply", ButtonVariant::Filled),
214 Message::Increment,
215 ),
216 ])
217 .into(),
218 ]))
219 .into()
220}