The phone layout items from the #129 thread

webui-src/app/boards/board_view.js

@@ -417,7 +417,8 @@ function BoardView() {
             },
           }, [
             m('summary[aria-label=Board actions][title=Board actions]', icon('ellipsis-v')),
-            m('.board-mobile-actions__items', m('button.is-danger[type=button]', {
+            m('.board-mobile-actions__items', m('button[type=button]', {
+              class: bsubscribed ? 'is-danger' : '',
               onclick: (event) => {
                 const menu = event.currentTarget.closest('details');
                 menu.open = false;

webui-src/app/channels/channel_view.js

@@ -519,7 +519,8 @@ const ChannelView = () => {
           },
         }, [
           m('summary[aria-label=Channel actions][title=Channel actions]', icon('ellipsis-v')),
-          m('.channel-mobile-actions__items', m('button.is-danger[type=button]', {
+          m('.channel-mobile-actions__items', m('button[type=button]', {
+              class: csubscribed ? 'is-danger' : '',
             onclick: (event) => {
               const menu = event.currentTarget.closest('details');
               menu.open = false;

webui-src/app/chat/chat.js

@@ -395,18 +395,6 @@ const ChatRoomHeader = () => {
 };
 
 const ChatConversationView = () => {
-  let showAttachmentMenu = false;
-
-  function onDocClick(e) {
-    if (ChatHubState.showEmojiPicker && !e.target.closest('.emoji-picker-wrapper')) {
-      ChatHubState.showEmojiPicker = false;
-      m.redraw();
-    }
-    if (showAttachmentMenu && !e.target.closest('.mobile-chat-attachment')) {
-      showAttachmentMenu = false;
-      m.redraw();
-    }
-  }
   return {
     oninit: () => {
       //  The column is part of the layout on a wide screen and a sheet over
@@ -417,11 +405,7 @@ const ChatConversationView = () => {
       }
       scrollChatToBottom();
     },
-    oncreate: () => {
-      document.addEventListener('click', onDocClick, true);
-    },
     onremove: () => {
-      document.removeEventListener('click', onDocClick, true);
       //  The poll writes its file link into the textarea of this very view, so
       //  once the view is gone the answer has nowhere to land: leaving it
       //  running would only keep asking for a result nobody can use.

webui-src/app/chat/chat_composer.js

@@ -30,6 +30,15 @@ const { autoResizeTextarea } = require('chat/chat_state');
 
 const ChatComposer = () => {
   let emojiOpen = false;
+  //  The phone attach menu (File / Picture behind one paperclip). Closed by
+  //  any click outside it, like the picker.
+  let attachOpen = false;
+
+  function onDocClick(e) {
+    if (!attachOpen || e.target.closest('.chat-composer__attach')) return;
+    attachOpen = false;
+    m.redraw();
+  }
 
   //  Enter sends. Shift+Enter inserts a newline natively; Ctrl/Cmd+Enter has
   //  to insert one by hand, the browser does nothing with it in a textarea.
@@ -70,12 +79,14 @@ const ChatComposer = () => {
     disabled: attrs.disabled,
     title: opts.title,
     'aria-label': opts.title,
-    class: opts.on ? 'is-on' : '',
+    class: [opts.on ? 'is-on' : '', opts.class || ''].filter(Boolean).join(' '),
     'aria-pressed': opts.on === undefined ? undefined : String(opts.on),
     onclick: opts.onclick,
   }, icon(opts.icon));
 
   return {
+    oncreate: () => document.addEventListener('click', onDocClick, true),
+    onremove: () => document.removeEventListener('click', onDocClick, true),
     view: ({ attrs }) => [
       attrs.attachment && m('.chat-attachment-preview', [
         m('.chat-attachment-preview__item', [
@@ -98,17 +109,20 @@ const ChatComposer = () => {
 
       m('.chat-composer', [
         //  Attach, image, emoji -- one order, here and in the mail composer.
+        //  On a phone the two attach tools fold into one paperclip with a
+        //  File / Picture menu (`--wide` is hidden there, the menu shown).
         attrs.onAttachFile && tool(attrs, {
           icon: 'paperclip',
           title: 'Attach file link',
+          class: 'chat-composer__tool--wide',
           onclick: attrs.onAttachFile,
         }),
 
         //  A <label>, because it wraps the file input -- and `disabled` is not
         //  a valid attribute on one, so the browser ignores it. aria-disabled
         //  is what btn-base already styles, and the stylesheet takes the
         //  pointer events off it so it cannot be hovered or clicked either.
-        attrs.onImage && m('label.chat-composer__tool.chat-hub-action-btn', {
+        attrs.onImage && m('label.chat-composer__tool.chat-composer__tool--wide.chat-hub-action-btn', {
           title: 'Send image',
           'aria-disabled': attrs.disabled ? 'true' : undefined,
         }, [
@@ -123,6 +137,40 @@ const ChatComposer = () => {
           }),
         ]),
 
+        (attrs.onAttachFile || attrs.onImage) && m('.chat-composer__attach.mobile-chat-attachment', [
+          tool(attrs, {
+            icon: 'paperclip',
+            title: 'Add attachment',
+            on: attachOpen,
+            onclick: (e) => {
+              e.stopPropagation();
+              attachOpen = !attachOpen;
+              emojiOpen = false;
+            },
+          }),
+          attachOpen && m('.mobile-chat-attachment__menu', [
+            attrs.onAttachFile && m('button.mobile-chat-attachment__option[type=button]', {
+              onclick: () => {
+                attachOpen = false;
+                attrs.onAttachFile();
+              },
+            }, [icon('file'), ' File']),
+            attrs.onImage && m('label.mobile-chat-attachment__option', [
+              icon('image'),
+              ' Picture',
+              m('input[type=file][accept=image/*].chat-composer__file', {
+                disabled: attrs.disabled,
+                onchange: (e) => {
+                  const file = e.target.files && e.target.files[0];
+                  if (file) attrs.onImage(file);
+                  attachOpen = false;
+                  e.target.value = '';
+                },
+              }),
+            ]),
+          ]),
+        ]),
+
         m('.chat-composer__emoji', [
           tool(attrs, {
             icon: 'smile',

webui-src/app/files/friends_files.js

@@ -98,7 +98,9 @@ function displayfiles() {
               })
               : m('span.file-tree__twist.is-empty'),
             icon(
-              isId ? 'user-friends' : !isFile ? (parStruct.showChild ? 'folder-open' : 'folder') : 'file',
+              //  `users`, which has the duotone the friend row asks for
+              //  (`user-friends` maps to the same glyph but has no -duo).
+              isId ? 'users' : !isFile ? (parStruct.showChild ? 'folder-open' : 'folder') : 'file',
               {
                 // A friend node is the one icon here that carries reach, so it
                 // is the one that ships duotone.

webui-src/app/forums/forum_view.js

@@ -676,7 +676,8 @@ const ForumView = () => {
             },
           }, [
             m('summary[aria-label=Forum actions][title=Forum actions]', icon('ellipsis-v')),
-            m('.forum-mobile-actions__items', m('button.is-danger[type=button]', {
+            m('.forum-mobile-actions__items', m('button[type=button]', {
+              class: fsubscribed ? 'is-danger' : '',
               onclick: (event) => {
                 const menu = event.currentTarget.closest('details');
                 menu.open = false;

webui-src/app/main.js

@@ -2,7 +2,7 @@ const m = require('mithril');
 
 //  Bumped at every change of the web UI; shown in the rail, the phone header
 //  and the Debug page.
-const WEBUI_VERSION = 'v178';
+const WEBUI_VERSION = 'v179';
 
 const login = require('login');
 const rs = require('rswebui');

webui-src/app/network/network_chat_tab.js

@@ -101,19 +101,8 @@ function pollHashStatusForDirectChat(localpath, job) {
 }
 
 const ChatTab = () => {
-  let showAttachmentMenu = false;
-
-  function onDocClick(e) {
-    if (showAttachmentMenu && !e.target.closest('.mobile-chat-attachment')) {
-      showAttachmentMenu = false;
-      m.redraw();
-    }
-  }
-
   return {
-    oncreate: () => document.addEventListener('click', onDocClick, true),
     onremove: () => {
-      document.removeEventListener('click', onDocClick, true);
       cancelDirectChatHash();
     },
     view: () => {

webui-src/app/people/people_chat_tab.js

@@ -77,15 +77,6 @@ function formatChatImage(file, callback) {
 }
 
 const ChatTab = () => {
-  let showAttachmentMenu = false;
-
-  function onDocClick(e) {
-    if (showAttachmentMenu && !e.target.closest('.mobile-chat-attachment')) {
-      showAttachmentMenu = false;
-      m.redraw();
-    }
-  }
-
   function attachFileLink() {
     if (State.isHashing) return;
     //  The path is read by the RetroShare node, not by the browser, so a file
@@ -107,8 +98,6 @@ const ChatTab = () => {
   }
 
   return {
-    oncreate: () => document.addEventListener('click', onDocClick, true),
-    onremove: () => document.removeEventListener('click', onDocClick, true),
     view: () => {
       fetchIdDetails(State.selectedId);
       const details = State.selectedId ? State.gxsIdToDetailsMap[State.selectedId] : null;

webui-src/app/scss/components/_chat-composer.scss

@@ -79,6 +79,14 @@
     flex: none;
   }
 
+  //  The phone attach menu. Hidden on a pointer (the two wide tools show
+  //  instead); the menu's own rules are the shared .mobile-chat-attachment
+  //  ones in pages/_chat.scss.
+  &__attach {
+    position: relative;
+    flex: none;
+  }
+
   &__file {
     position: absolute;
     width: 1px;
@@ -94,6 +102,26 @@
 }
 
 @media (max-width: 700px) {
-  //  The field needs the width more than the action needs its label.
-  .chat-composer__send .btn-text { display: none; }
+  //  The field needs the width more than the action needs its label: the
+  //  send is a round glyph, the two attach tools one paperclip with a menu.
+  .chat-composer__send {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    justify-content: center;
+    border-radius: var(--r-full);
+
+    .btn-text { display: none; }
+  }
+  .chat-composer__tool--wide { display: none; }
+  .chat-composer .chat-composer__attach { display: block; }
+
+  //  The picker is anchored on the emoji tool, second in the strip: pulled
+  //  back by one tool so it opens at the strip's left padding, and capped so
+  //  it never leaves the viewport the panes clip to.
+  .chat-composer__emoji .emoji-picker {
+    left: calc(-1 * (36px + var(--s1)));
+    width: min(320px, calc(100vw - 2 * var(--s3) - 2px));
+    height: min(296px, calc(100dvh - 8rem));
+  }
 }

webui-src/app/scss/components/_navbar.scss

@@ -538,14 +538,16 @@
     }
   }
 
+  //  The header went from dark to --chrome; the pill's colours were written
+  //  for the dark one (near-white text over a white tint) and read 1.2:1.
   .mobile-status-trigger {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.3rem 0.5rem;
-    color: var(--line-soft);
-    background: rgba(255, 255, 255, 0.08);
-    border: 0;
+    color: var(--ink-dim);
+    background: var(--sunken);
+    border: 1px solid var(--line);
     border-radius: var(--r-full);
     box-shadow: none;
     font-size: var(--t-label);
@@ -555,7 +557,7 @@
       width: 0.65rem;
       height: 0.65rem;
       flex: 0 0 auto;
-      border: 2px solid rgba(255, 255, 255, 0.7);
+      border: 2px solid var(--surface);
       border-radius: var(--r-full);
     }
 

webui-src/app/scss/pages/_board.scss

@@ -1053,7 +1053,20 @@ button.board-card__vote-btn,
       grid-area: 1 / 1;
       width: 44px;
     }
-    > .widget__body { grid-area: 2 / 1; min-height: 0; }
+    //  Three children, three rows: the heading has to be placed too, or it
+    //  auto-places after the body and the board's name lands under the posts.
+    > .widget__heading { grid-area: 2 / 1; }
+    > .widget__body { grid-area: 3 / 1; min-height: 0; }
+
+    //  The view toggle keeps its glyphs only: with the labels, toggle plus
+    //  pagination outgrow a 360px toolbar by ~50px.
+    .board-toolbar__view-toggle .segmented__item {
+      width: var(--control);
+      padding: 0;
+      gap: 0;
+
+      span { display: none; }
+    }
 
     .posts { margin-top: 1px; }
 

webui-src/make-src/icons.js

@@ -60,6 +60,7 @@ const MAP = {
   'envelope-open-text': 'envelope-open',
   eraser: 'eraser',
   'exclamation-triangle': 'warning',
+  'external-link-alt': 'arrow-square-out',
   expand: 'corners-out',
   eye: 'eye',
   file: 'file',