web: don't show text on action icons on tablet/mobile

web/src/state.rs

@@ -42,7 +42,6 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
         context: Context::None,
         query: "".to_string(),
         refreshing_state: RefreshingState::None,
-        ui_error: UIError::NoError,
         tags: None,
     }
 }
@@ -450,7 +449,6 @@ pub struct Model {
     pub query: String,
     pub context: Context,
     pub refreshing_state: RefreshingState,
-    pub ui_error: UIError,
     pub tags: Option<Vec<Tag>>,
 }
 

web/src/view/desktop.rs

@@ -9,20 +9,28 @@ use crate::{
 
 #[topo::nested]
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    let show_icon_text = true;
     // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
             thread,
             open_messages,
-        } => view::thread(thread, open_messages),
+        } => view::thread(thread, open_messages, show_icon_text),
         Context::SearchResult {
             query,
             results,
             count,
             pager,
             selected_threads,
-        } => view_search_results(&query, results.as_slice(), *count, pager, selected_threads),
+        } => view_search_results(
+            &query,
+            results.as_slice(),
+            *count,
+            pager,
+            selected_threads,
+            show_icon_text,
+        ),
     };
     fn view_tag_li(display_name: &str, indent: usize, t: &Tag, search_unread: bool) -> Node<Msg> {
         let href = if search_unread {

web/src/view/mobile.rs

@@ -10,19 +10,27 @@ use crate::{
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    let show_icon_text = false;
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
             thread,
             open_messages,
-        } => view::thread(thread, open_messages),
+        } => view::thread(thread, open_messages, show_icon_text),
         Context::SearchResult {
             query,
             results,
             count,
             pager,
             selected_threads,
-        } => search_results(&query, results.as_slice(), *count, pager, selected_threads),
+        } => search_results(
+            &query,
+            results.as_slice(),
+            *count,
+            pager,
+            selected_threads,
+            show_icon_text,
+        ),
     };
     div![
         view_header(&model.query, &model.refreshing_state),
@@ -37,6 +45,7 @@ fn search_results(
     count: usize,
     pager: &FrontPageQuerySearchPageInfo,
     selected_threads: &HashSet<String>,
+    show_icon_text: bool,
 ) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -96,8 +105,8 @@ fn search_results(
     let show_bulk_edit = !selected_threads.is_empty();
     div![
         C!["search-results"],
-        search_toolbar(count, pager, show_bulk_edit),
+        search_toolbar(count, pager, show_bulk_edit, show_icon_text),
         div![C!["index"], rows],
-        search_toolbar(count, pager, show_bulk_edit),
+        search_toolbar(count, pager, show_bulk_edit, show_icon_text),
     ]
 }

web/src/view/mod.rs

@@ -116,6 +116,7 @@ fn view_search_results(
     count: usize,
     pager: &FrontPageQuerySearchPageInfo,
     selected_threads: &HashSet<String>,
+    show_icon_text: bool,
 ) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -203,7 +204,7 @@ fn view_search_results(
 
     div![
         C!["search-results"],
-        search_toolbar(count, pager, show_bulk_edit),
+        search_toolbar(count, pager, show_bulk_edit, show_icon_text),
         table![
             C![
                 "table",
@@ -239,7 +240,7 @@ fn view_search_results(
             ]],
             tbody![rows]
         ],
-        search_toolbar(count, pager, show_bulk_edit)
+        search_toolbar(count, pager, show_bulk_edit, show_icon_text)
     ]
 }
 
@@ -247,6 +248,7 @@ fn search_toolbar(
     count: usize,
     pager: &FrontPageQuerySearchPageInfo,
     show_bulk_edit: bool,
+    show_icon_text: bool,
 ) -> Node<Msg> {
     let start = pager
         .start_cursor
@@ -254,36 +256,42 @@ fn search_toolbar(
         .map(|i| i.parse().unwrap_or(0))
         .unwrap_or(0);
     nav![
-        C!["level"],
+        C!["level", "is-mobile"],
+        IF!(show_bulk_edit =>
             div![
                 C!["level-left"],
-            IF!(show_bulk_edit =>
-            span![
-                // TODO(wathiede): add "Mark as spam"
-                C!["level-item", "buttons", "has-addons"],
+                div![
+                    C!["level-item"],
+                    div![C!["buttons", "has-addons"],
                     button![
-                    C!["button"],
+                        C!["button", "spam"],
                         attrs!{At::Title => "Mark as spam"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-hand"]]],
-                        span!["Spam"],
+                        IF!(show_icon_text=>span!["Spam"]),
                         ev(Ev::Click, |_| Msg::SelectionAddTag("Spam".to_string()))
                     ],
+                    ],
+                ],
+                div![
+                    C!["level-item"],
+                    div![C!["buttons", "has-addons"],
                     button![
-                    C!["button"],
+                        C!["button", "mark-read"],
                         attrs!{At::Title => "Mark as read"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]],
-                        span!["Read"],
+                        IF!(show_icon_text=>span!["Read"]),
                         ev(Ev::Click, |_| Msg::SelectionMarkAsRead)
                     ],
                     button![
-                    C!["button"],
+                        C!["button", "mark-unread"],
                         attrs!{At::Title => "Mark as unread"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]],
-                        span!["Unread"],
+                        IF!(show_icon_text=>span!["Unread"]),
                         ev(Ev::Click, |_| Msg::SelectionMarkAsUnread)
                     ]
+                ]
+                ]
         ]),
-        ],
         div![
             C!["level-right"],
             nav![
@@ -704,7 +712,11 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
 }
 
 #[topo::nested]
-fn thread(thread: &ShowThreadQueryThread, open_messages: &HashSet<String>) -> Node<Msg> {
+fn thread(
+    thread: &ShowThreadQueryThread,
+    open_messages: &HashSet<String>,
+    show_icon_text: bool,
+) -> Node<Msg> {
     // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
     let subject = if thread.subject.is_empty() {
         "(no subject)"
@@ -733,39 +745,51 @@ fn thread(thread: &ShowThreadQueryThread, open_messages: &HashSet<String>) -> No
         C!["thread"],
         h3![C!["is-size-5"], subject],
         span![C!["tags"], tags_chiclet(&tags, false)],
-        span![
-            C!["level-item", "buttons", "has-addons"],
+        div![
+            C!["level", "is-mobile"],
+            div![
+                C!["level-item"],
+                div![
+                    C!["buttons", "has-addons"],
                     button![
-                C!["button"],
+                        C!["button", "spam"],
                         attrs! {At::Title => "Spam"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-hand"]]],
-                span!["Spam"],
+                        IF!(show_icon_text=>span!["Spam"]),
                         ev(Ev::Click, move |_| Msg::AddTag(
                             format!("thread:{spam_thread_id}"),
                             "Spam".to_string()
                         )),
                     ],
+                ],
+            ],
+            div![
+                C!["level-item"],
+                div![
+                    C!["buttons", "has-addons"],
                     button![
-                C!["button"],
+                        C!["button", "mark-read"],
                         attrs! {At::Title => "Mark as read"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]],
-                span!["Read"],
+                        IF!(show_icon_text=>span!["Read"]),
                         ev(Ev::Click, move |_| Msg::SetUnread(
                             format!("thread:{read_thread_id}"),
                             false
                         )),
                     ],
                     button![
-                C!["button"],
+                        C!["button", "mark-unread"],
                         attrs! {At::Title => "Mark as unread"},
                         span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]],
-                span!["Unread"],
+                        IF!(show_icon_text=>span!["Unread"]),
                         ev(Ev::Click, move |_| Msg::SetUnread(
                             format!("thread:{unread_thread_id}"),
                             true
                         )),
                     ],
                 ],
+            ],
+        ],
         messages,
         /* TODO(wathiede): plumb in orignal id
         a![

web/src/view/tablet.rs

@@ -6,20 +6,28 @@ use crate::{
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    let show_icon_text = false;
     // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
         Context::ThreadResult {
             thread,
             open_messages,
-        } => view::thread(thread, open_messages),
+        } => view::thread(thread, open_messages, show_icon_text),
         Context::SearchResult {
             query,
             results,
             count,
             pager,
             selected_threads,
-        } => view_search_results(&query, results.as_slice(), *count, pager, selected_threads),
+        } => view_search_results(
+            &query,
+            results.as_slice(),
+            *count,
+            pager,
+            selected_threads,
+            show_icon_text,
+        ),
     };
     div![
         C!["main-content"],

web/static/style.css

@@ -282,3 +282,7 @@ display: none;
 .attachment .card-content {
     padding: 0.5rem 1.5rem;
 }
+
+.button.spam {
+  color: #f00;
+}