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