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_with_leading_icon("input", "Inputs").into(),
48 material::widget::list::one_line_with_leading_icon("tune", "Controls").into(),
49 material::widget::list::one_line_with_leading_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
64 app_bar::bottom(
65 app_bar::icon_actions([
66 ("menu", Message::MenuPressed),
67 ("search", Message::Increment),
68 ("info", Message::Increment),
69 ]),
70 Some(material::widget::button::primary_fab_action(
71 "add",
72 Message::Increment,
73 )),
74 )
75 .into()
76}
77
78fn toolbars() -> material::Element<'static, Message> {
79 use material::widget::toolbar;
80
81 let docked = toolbar::docked(toolbar::icon_actions([
82 ("arrow_back", Message::Decrement),
83 ("arrow_forward", Message::Increment),
84 ("add", Message::Increment),
85 ("tab", Message::Increment),
86 ("star", Message::Increment),
87 ("search", Message::Increment),
88 ]));
89
90 let docked_vibrant = toolbar::docked_vibrant([
91 toolbar::vibrant_icon_action("edit", Message::Increment),
92 toolbar::selected_vibrant_icon_action("check", Message::Increment),
93 toolbar::vibrant_icon_action("delete", Message::Decrement),
94 toolbar::vibrant_icon_action("more_vert", Message::MenuPressed),
95 ]);
96
97 let floating = toolbar::floating([
98 toolbar::selected_icon_action("format_bold", Message::Increment),
99 toolbar::icon_action("format_italic", Message::Increment),
100 toolbar::icon_action("format_underlined", Message::Increment),
101 toolbar::icon_action("format_color_text", Message::Increment),
102 ]);
103
104 let floating_vibrant = toolbar::floating_with_fab(
105 toolbar::floating_vibrant(toolbar::vibrant_icon_actions([
106 ("share", Message::Increment),
107 ("add", Message::Increment),
108 ("edit", Message::Increment),
109 ])),
110 material::widget::button::primary_fab("search").on_press(Message::Increment),
111 );
112
113 let vertical = toolbar::vertical_floating([
114 toolbar::icon_action("undo", Message::Decrement),
115 toolbar::icon_action("redo", Message::Increment),
116 toolbar::selected_icon_action("palette", Message::Increment),
117 ]);
118
119 page::component_stack([
120 docked.into(),
121 docked_vibrant.into(),
122 page::row([floating.into(), vertical.into()]).into(),
123 floating_vibrant.into(),
124 ])
125 .into()
126}
127
128fn bottom_sheets(state: &Showcase) -> material::Element<'static, Message> {
129 let width = page::preview_width(state.window_size.width);
130 let standard = material::widget::sheet::standard_bottom(sheet_content(
131 "Standard bottom sheet",
132 "Coexists with the page and keeps secondary content available.",
133 ));
134
135 let modal_preview = page::preview_pane(material::widget::sheet::modal_overlay(sheet_content(
136 "Modal bottom sheet",
137 "Uses a scrim and blocks interaction behind the sheet.",
138 )));
139
140 page::component_stack([
141 page::centered_preview(width, standard).into(),
142 page::centered_preview(width, modal_preview).into(),
143 ])
144 .into()
145}
146
147fn side_sheets(state: &Showcase) -> material::Element<'static, Message> {
148 let width = page::preview_width(state.window_size.width);
149 let standard = page::aligned_preview_pane(
150 alignment::Horizontal::Right,
151 material::widget::sheet::standard_side(side_sheet_content(
152 "Standard side sheet",
153 "Coexists with the page while supporting content remains visible.",
154 )),
155 );
156
157 let modal = page::preview_pane(material::widget::sheet::modal_side_overlay(
158 material::widget::sheet::Side::Right,
159 side_sheet_content(
160 "Modal side sheet",
161 "Uses a scrim and keeps focus on a temporary side task.",
162 ),
163 ));
164
165 page::component_stack([
166 page::centered_preview(width, standard).into(),
167 page::centered_preview(width, modal).into(),
168 ])
169 .into()
170}
171
172fn sheet_content(
173 title: &'static str,
174 supporting: &'static str,
175) -> material::Element<'static, Message> {
176 material::widget::sheet::bottom_content(page::compact_stack([
177 material::text::title_medium(title).into(),
178 material::text::body_medium(supporting).into(),
179 page::row([
180 material::widget::button::text_action("Dismiss", Message::Decrement),
181 material::widget::button::filled_action("Apply", Message::Increment),
182 ])
183 .into(),
184 ]))
185 .into()
186}
187
188fn side_sheet_content(
189 title: &'static str,
190 supporting: &'static str,
191) -> material::Element<'static, Message> {
192 material::widget::sheet::side_content(page::compact_stack([
193 material::text::title_medium(title).into(),
194 material::text::body_medium(supporting).into(),
195 page::row([
196 material::widget::button::text_action("Dismiss", Message::Decrement),
197 material::widget::button::filled_action("Apply", Message::Increment),
198 ])
199 .into(),
200 ]))
201 .into()
202}