feat(search bars): add clear button to forums, boards, people, network search (#42, #65)

webui-src/app/boards/board_view.js

@@ -257,7 +257,7 @@ const BoardView = () => {
           {
             style: 'display:' + (bsubscribed ? 'flex' : 'none'),
           },
-          m('.posts__heading', m('h3', 'Posts')),
+          m('.posts__heading', m('h3', `Posts (${Object.keys(plist).filter(k => plist[k].isSearched).length})`)),
           m(
             '.posts-container',
             Object.keys(plist).map((key, index) => [
@@ -281,7 +281,10 @@ const BoardView = () => {
                         : 'data:image/png;base64,' + plist[key].post.mThumbnail.mData.base64,
                     alt: 'No Thumbnail',
                   }),
-                  m('p', plist[key].post.mMeta.mMsgName),
+                  m('p.title', plist[key].post.mMeta.mMsgName),
+                  m('p.date', (plist[key].post.mMeta.mPublishTs && typeof plist[key].post.mMeta.mPublishTs === 'object')
+                    ? new Date(plist[key].post.mMeta.mPublishTs.xint64 * 1000).toLocaleDateString()
+                    : ''),
                 ]
               ),
             ])

webui-src/app/boards/boards_util.js

@@ -149,19 +149,28 @@ const SearchBar = () => {
   let searchString = '';
   return {
     view: (v) =>
-      m('input[type=text][id=searchboard][placeholder=Search Subject].searchbar', {
-        value: searchString,
-        oninput: (e) => {
-          searchString = e.target.value.toLowerCase();
-          for (const hash in Data.DisplayBoards) {
-            if (Data.DisplayBoards[hash].name.toLowerCase().indexOf(searchString) > -1) {
+      m('.searchbar-container', [
+        m('input[type=text][id=searchboard][placeholder=Search Subject].searchbar', {
+          value: searchString,
+          oninput: (e) => {
+            searchString = e.target.value.toLowerCase();
+            for (const hash in Data.DisplayBoards) {
+              Data.DisplayBoards[hash].isSearched = searchString === '' || Data.DisplayBoards[hash].name.toLowerCase().indexOf(searchString) > -1;
+            }
+          },
+        }),
+        m('button.searchbar-clear', {
+          title: 'Clear search',
+          style: 'display: ' + (searchString ? 'inline-block' : 'none'),
+          onclick: () => {
+            searchString = '';
+            for (const hash in Data.DisplayBoards) {
               Data.DisplayBoards[hash].isSearched = true;
-            } else {
-              Data.DisplayBoards[hash].isSearched = false;
             }
-          }
-        },
-      }),
+            m.redraw();
+          },
+        }, m('i.fas.fa-times')),
+      ]),
   };
 };
 

webui-src/app/channels/channel_view.js

@@ -414,7 +414,7 @@ const ChannelView = () => {
           },
           [
             m('.posts__heading', [
-              m('h3', 'Posts'),
+              m('h3', `Posts (${Object.keys(plist).filter(k => plist[k].isSearched).length})`),
               mychannel &&
                 m(
                   'button',
@@ -441,11 +441,14 @@ const ChannelView = () => {
                     m('img', {
                       src:
                         plist[key].post.mThumbnail.mData.base64 === ''
-                          ? 'data/streaming.png'
+                          ? 'data:streaming.png'
                           : 'data:image/png;base64,' + plist[key].post.mThumbnail.mData.base64,
                       alt: 'No Thumbnail',
                     }),
-                    m('p', plist[key].post.mMeta.mMsgName),
+                    m('p.title', plist[key].post.mMeta.mMsgName),
+                    m('p.date', (plist[key].post.mMeta.mPublishTs && typeof plist[key].post.mMeta.mPublishTs === 'object')
+                      ? new Date(plist[key].post.mMeta.mPublishTs.xint64 * 1000).toLocaleDateString()
+                      : ''),
                   ]
                 ),
               ])

webui-src/app/chat/chat.js

@@ -406,9 +406,11 @@ const ChatLobbyModel = {
         }
         names.sort((a, b) => a.localeCompare(b));
         this.users = [];
-        names.forEach((name) => (this.users = this.users.concat([m('.user', name)])));
+        names.forEach((name) => (this.users = this.users.concat([m('.user', [m('i.fas.fa-user'), name]))));
+        this.userCount = m('.user-count', names.length + ' member' + (names.length !== 1 ? 's' : ''));
       } else {
         this.users = [m('.user', detail.lobby_name)];
+        this.userCount = null;
       }
       m.redraw();
     };
@@ -691,7 +693,8 @@ const LayoutSingle = () => {
             [
               m('textarea.chatMsg', {
                 placeholder: 'Type a message...',
-                enterkeyhint: 'send',
+                enterkeyhint: 'send',,
+                inputmode: 'emoji',
                 onkeydown: (e) => {
                   if ((e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey) {
                     const msg = e.target.value;

webui-src/app/forums/forums_util.js

@@ -236,19 +236,28 @@ const SearchBar = () => {
   let searchString = '';
   return {
     view: (v) =>
-      m('input[type=text][id=searchforum][placeholder=Search Subject].searchbar', {
-        value: searchString,
-        oninput: (e) => {
-          searchString = e.target.value.toLowerCase();
-          for (const hash in Data.DisplayForums) {
-            if (Data.DisplayForums[hash].name.toLowerCase().indexOf(searchString) > -1) {
+      m('.searchbar-container', [
+        m('input[type=text][id=searchforum][placeholder=Search Subject].searchbar', {
+          value: searchString,
+          oninput: (e) => {
+            searchString = e.target.value.toLowerCase();
+            for (const hash in Data.DisplayForums) {
+              Data.DisplayForums[hash].isSearched = searchString === '' || Data.DisplayForums[hash].name.toLowerCase().indexOf(searchString) > -1;
+            }
+          },
+        }),
+        m('button.searchbar-clear', {
+          title: 'Clear search',
+          style: 'display: ' + (searchString ? 'inline-block' : 'none'),
+          onclick: () => {
+            searchString = '';
+            for (const hash in Data.DisplayForums) {
               Data.DisplayForums[hash].isSearched = true;
-            } else {
-              Data.DisplayForums[hash].isSearched = false;
             }
-          }
-        },
-      }),
+            m.redraw();
+          },
+        }, m('i.fas.fa-times')),
+      ]),
   };
 };
 function popupmessage(message) {

webui-src/app/network/network.js

@@ -107,14 +107,21 @@ const SearchBar = () => {
         oninput: (e) => {
           searchString = e.target.value.toLowerCase();
           for (const id in Data.gpgDetails) {
-            if (Data.gpgDetails[id].name.toLowerCase().indexOf(searchString) > -1) {
-              Data.gpgDetails[id].isSearched = true;
-            } else {
-              Data.gpgDetails[id].isSearched = false;
-            }
+            Data.gpgDetails[id].isSearched = searchString === '' || Data.gpgDetails[id].name.toLowerCase().indexOf(searchString) > -1;
           }
         },
       }),
+      m('button.searchbar-clear', {
+        title: 'Clear search',
+        style: 'display: ' + (searchString ? 'inline-block' : 'none'),
+        onclick: () => {
+          searchString = '';
+          for (const id in Data.gpgDetails) {
+            Data.gpgDetails[id].isSearched = true;
+          }
+          m.redraw();
+        },
+      }, m('i.fas.fa-times')),
   };
 };
 
@@ -123,9 +130,15 @@ const FriendsList = () => {
     oninit: () => {
       Data.refreshGpgDetails();
     },
-    view: () =>
-      m('.widget', [
-        m('.widget__heading', [m('h3', 'Friend nodes'), m(SearchBar)]),
+    view: () => {
+      const onlineCount = Object.values(Data.gpgDetails).filter(p => p.isOnline).length;
+      const totalCount = Object.keys(Data.gpgDetails).length;
+      return m('.widget', [
+        m('.widget__heading', [
+          m('h3', 'Friend nodes'),
+          m('span.friend-count', `(${onlineCount} online / ${totalCount} total)`),
+          m(SearchBar),
+        ]),
         m('.widget__body', [
           Object.entries(Data.gpgDetails)
             .sort((a, b) => {
@@ -136,7 +149,8 @@ const FriendsList = () => {
               return m(Friend, { id });
             }),
         ]),
-      ]),
+      ]);
+    },
   };
 };
 

webui-src/app/people/people_util.js

@@ -74,22 +74,28 @@ const SearchBar = () => {
 
   return {
     view: () =>
-      m('input.searchbar', {
-        type: 'text',
-        placeholder: 'search',
-        value: searchString,
-        oninput: (e) => {
-          searchString = e.target.value.toLowerCase();
-
-          rs.userList.users.map((id) => {
-            if (id.mGroupName.toLowerCase().indexOf(searchString) > -1) {
-              id.isSearched = true;
-            } else {
-              id.isSearched = false;
-            }
-          });
-        },
-      }),
+      m('.searchbar-container', [
+        m('input.searchbar', {
+          type: 'text',
+          placeholder: 'search',
+          value: searchString,
+          oninput: (e) => {
+            searchString = e.target.value.toLowerCase();
+            rs.userList.users.map((id) => {
+              id.isSearched = searchString === '' || id.mGroupName.toLowerCase().indexOf(searchString) > -1;
+            });
+          },
+        }),
+        m('button.searchbar-clear', {
+          title: 'Clear search',
+          style: 'display: ' + (searchString ? 'inline-block' : 'none'),
+          onclick: () => {
+            searchString = '';
+            rs.userList.users.map((id) => { id.isSearched = true; });
+            m.redraw();
+          },
+        }, m('i.fas.fa-times')),
+      ]),
   };
 };
 
@@ -143,17 +149,19 @@ const regularcontactInfo = () => {
                 : 'undefiend'
             ),
           ]),
-          m(
-            'button',
-            {
-              onclick: () =>
-                m.route.set('/chat/:userid/createdistantchat', {
-                  userid: v.attrs.id.mGroupId,
-                }),
-            },
-            'Chat'
-          ),
-          m('button.red', {}, 'Mail'),
+          m('.identity-actions', [
+            m(
+              'button',
+              {
+                onclick: () =>
+                  m.route.set('/chat/:userid/createdistantchat', {
+                    userid: v.attrs.id.mGroupId,
+                  }),
+              },
+              m('i.fas.fa-comment')
+            ),
+            m('button.red', {}, m('i.fas.fa-envelope')),
+          ]),
         ]
       ),
   };