1use iced::widget::{Column, Row, Space, Stack};
2use iced::{Length, alignment};
3use material::widget::page;
4use material_ui_rs as material;
5
6use super::super::{Message, Showcase};
7
8pub(super) fn view(state: &Showcase) -> material::Element<'_, Message> {
9 page::sections([
10 page::section("Log viewer", log_viewer(state)).into(),
11 page::section("Top app bars", top_app_bars()).into(),
12 page::section("Search view", search_view(state)).into(),
13 page::section("Toolbars", toolbars()).into(),
14 page::section("Bottom app bar", bottom_app_bar()).into(),
15 page::section("Bottom sheets", bottom_sheets(state)).into(),
16 page::section("Side sheets", side_sheets(state)).into(),
17 ])
18 .into()
19}
20
21fn log_viewer(state: &Showcase) -> material::Element<'_, Message> {
22 use iced::Length;
23 use iced::widget::Container;
24 use material::widget::log_viewer;
25
26 Container::new(
27 log_viewer::view(&state.log_entries, &state.log_viewer, Message::LogViewer)
28 .width(Length::Fill)
29 .height(Length::Fill),
30 )
31 .width(Length::Fill)
32 .height(Length::Fixed(620.0))
33 .into()
34}
35
36fn top_app_bars() -> material::Element<'static, Message> {
37 use material::widget::app_bar;
38
39 page::component_stack([
40 app_bar::with_status_bar(app_bar::small(
41 "Small",
42 Some(app_bar::icon_action("menu", Message::MenuPressed)),
43 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
44 ))
45 .into(),
46 app_bar::with_status_bar(app_bar::medium(
47 "Medium",
48 Some(app_bar::icon_action("menu", Message::MenuPressed)),
49 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
50 ))
51 .into(),
52 app_bar::with_status_bar(app_bar::large(
53 "Large",
54 Some(app_bar::icon_action("menu", Message::MenuPressed)),
55 app_bar::icon_actions([("search", Message::Increment), ("info", Message::Increment)]),
56 ))
57 .into(),
58 ])
59 .into()
60}
61
62fn search_view(state: &Showcase) -> material::Element<'_, Message> {
63 let results = material::widget::list::group([
64 material::widget::list::one_line_icon("input", "Inputs").into(),
65 material::widget::list::one_line_icon("tune", "Controls").into(),
66 material::widget::list::one_line_icon("info", "Feedback").into(),
67 ]);
68
69 material::widget::search::docked_view(
70 "Search components",
71 &state.search_query,
72 Message::SearchChanged,
73 results,
74 )
75 .into()
76}
77
78fn bottom_app_bar() -> material::Element<'static, Message> {
79 use material::widget::app_bar;
80 use material::widget::button::{self, FabSize, FabVariant};
81
82 app_bar::bottom(
83 app_bar::icon_actions([
84 ("menu", Message::MenuPressed),
85 ("search", Message::Increment),
86 ("info", Message::Increment),
87 ]),
88 Some(button::action(
89 button::fab("add", FabVariant::Primary, FabSize::Standard),
90 Message::Increment,
91 )),
92 )
93 .into()
94}
95
96fn toolbars() -> material::Element<'static, Message> {
97 use material::widget::button::{self, FabSize, FabVariant};
98 use material::widget::toolbar;
99
100 let docked = toolbar::docked(toolbar::icon_actions([
101 ("arrow_back", Message::Decrement),
102 ("arrow_forward", Message::Increment),
103 ("add", Message::Increment),
104 ("tab", Message::Increment),
105 ("star", Message::Increment),
106 ("search", Message::Increment),
107 ]));
108
109 let docked_vibrant = toolbar::docked_vibrant([
110 toolbar::vibrant_icon_action("edit", Message::Increment),
111 toolbar::selected_vibrant_icon_action("check", Message::Increment),
112 toolbar::vibrant_icon_action("delete", Message::Decrement),
113 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
114 ]);
115
116 let floating = toolbar::floating([
117 toolbar::selected_icon_action("format_bold", Message::Increment),
118 toolbar::icon_action("format_italic", Message::Increment),
119 toolbar::icon_action("format_underlined", Message::Increment),
120 toolbar::icon_action("format_color_text", Message::Increment),
121 ]);
122
123 let floating_vibrant = toolbar::floating_with_fab(
124 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
125 ("share", Message::Increment),
126 ("add", Message::Increment),
127 ("edit", Message::Increment),
128 ])),
129 button::fab("search", FabVariant::Primary, FabSize::Standard).on_press(Message::Increment),
130 );
131
132 let vertical = toolbar::vertical_floating([
133 toolbar::icon_action("undo", Message::Decrement),
134 toolbar::icon_action("redo", Message::Increment),
135 toolbar::selected_icon_action("palette", Message::Increment),
136 ]);
137
138 page::component_stack([
139 docked.into(),
140 docked_vibrant.into(),
141 page::row([floating.into(), vertical.into()]).into(),
142 floating_vibrant.into(),
143 ])
144 .into()
145}
146
147fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
148 let width = page::preview_width(state.window_size.width);
149 let standard = material::widget::sheet::standard_bottom(sheet_content(
150 "Standard bottom sheet",
151 "Coexists with the page and keeps secondary content available.",
152 ));
153
154 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
155 "Modal bottom sheet",
156 "Uses a scrim and blocks interaction behind the sheet.",
157 )));
158
159 page::component_stack([
160 page::centered_preview(width, standard).into(),
161 page::centered_preview(width, modal_preview).into(),
162 ])
163 .into()
164}
165
166fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
167 let width = page::preview_width(state.window_size.width);
168 let standard = page::preview_pane(
169 Row::new()
170 .push(side_sheet_preview_content())
171 .push(material::widget::sheet::standard_side(side_sheet_content(
172 "Standard side sheet",
173 "Coexists with the page while supporting content remains visible.",
174 )))
175 .width(Length::Fill)
176 .height(Length::Fill),
177 );
178
179 let modal = page::preview_pane(
180 Stack::with_children([
181 side_sheet_preview_content(),
182 material::widget::sheet::modal_side_overlay(
183 material::widget::sheet::Side::Right,
184 side_sheet_content(
185 "Modal side sheet",
186 "Uses a scrim and keeps focus on a temporary side task.",
187 ),
188 )
189 .into(),
190 ])
191 .width(Length::Fill)
192 .height(Length::Fill),
193 );
194
195 page::component_stack([
196 page::centered_preview(width, standard).into(),
197 page::centered_preview(width, modal).into(),
198 ])
199 .into()
200}
201
202fn side_sheet_preview_content() -> material::Element<'static, Message> {
203 let supporting_items = material::widget::list::group([
204 material::widget::list::one_line_icon("description", "Project brief").into(),
205 material::widget::list::one_line_icon("schedule", "Recent activity").into(),
206 ]);
207
208 material::widget::container::surface_container_highest(
209 Column::new()
210 .push(material::text::title_medium("Supporting page"))
211 .push(material::text::body_medium(
212 "Primary content remains visible beside the standard sheet.",
213 ))
214 .push(Space::new().height(Length::Fixed(page::STACK_SPACING)))
215 .push(supporting_items)
216 .spacing(page::COMPACT_STACK_SPACING),
217 )
218 .width(Length::Fill)
219 .height(Length::Fill)
220 .padding(page::CARD_PADDING)
221 .into()
222}
223
224fn sheet_content(
225 title: &'static str,
226 supporting: &'static str,
227) -> material::Element<'static, Message> {
228 use material::widget::button::{self, ButtonVariant};
229
230 material::widget::sheet::bottom_content(page::compact_stack([
231 material::text::title_medium(title).into(),
232 material::text::body_medium(supporting).into(),
233 page::row([
234 button::action(
235 button::button("Dismiss", ButtonVariant::Text),
236 Message::Decrement,
237 ),
238 button::action(
239 button::button("Apply", ButtonVariant::Filled),
240 Message::Increment,
241 ),
242 ])
243 .into(),
244 ]))
245 .into()
246}
247
248fn side_sheet_content(
249 title: &'static str,
250 supporting: &'static str,
251) -> material::Element<'static, Message> {
252 use material::widget::button::{self, ButtonVariant, IconButtonVariant};
253
254 let header = Row::new()
255 .push(material::text::title_medium(title).width(Length::Fill))
256 .push(button::action(
257 button::icon_button("close", IconButtonVariant::Standard),
258 Message::Decrement,
259 ))
260 .align_y(alignment::Vertical::Center);
261 let actions = Row::new()
262 .push(Space::new().width(Length::Fill))
263 .push(button::action(
264 button::button("Apply", ButtonVariant::Filled),
265 Message::Increment,
266 ))
267 .spacing(page::ROW_SPACING)
268 .align_y(alignment::Vertical::Center);
269
270 material::widget::sheet::side_content(
271 Column::new()
272 .push(header)
273 .push(material::text::body_medium(supporting))
274 .push(Space::new().height(Length::Fill))
275 .push(actions)
276 .spacing(page::COMPACT_STACK_SPACING)
277 .height(Length::Fill),
278 )
279 .into()
280}