Add more sort options and improve styling

plugins/talk-plugin-viewing-options/client/components/Category.css

@@ -1,6 +1,14 @@
+.root {
+  padding-bottom: 12px;
+
+  &:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+
 .title {
   font-weight: bold;
-  padding: 12px 8px 0px 8px;
+  padding: 12px 8px 4px 8px;
 }
 
 .list {
@@ -9,7 +17,6 @@
 }
 
 .listItem {
-  padding: 10px;
   list-style: none;
   white-space: nowrap;
 }

plugins/talk-plugin-viewing-options/client/components/Category.js

@@ -6,7 +6,7 @@ const childFactory = (child) => <li className={styles.listItem} key={child.key}>
 
 const ViewingOptions = ({slot, title}) => {
   return (
-    <IfSlotIsNotEmpty slot={slot}>
+    <IfSlotIsNotEmpty slot={slot} className={styles.root}>
       <div className={styles.title}>{title}</div>
       <Slot fill={slot} childFactory={childFactory} className={styles.list} component={'ul'}/>
     </IfSlotIsNotEmpty>

plugins/talk-plugin-viewing-options/client/components/Menu.css

@@ -0,0 +1,11 @@
+.menu {
+  background: white;
+  position: absolute;
+  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  right: 0px;
+  top: 20px;
+  z-index: 10;
+  min-height: 32px;
+  min-width: 64px;
+}
+

plugins/talk-plugin-viewing-options/client/components/Menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Menu.css';
+import {capitalize} from 'plugin-api/beta/client/utils';
+import Category from './Category';
+import {t} from 'plugin-api/beta/client/services';
+
+class Menu extends React.Component {
+  categories = {
+    sort: t('talk-plugin-viewing-options.sort'),
+    filter: t('talk-plugin-viewing-options.filter'),
+  };
+
+  render() {
+    return (
+      <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
+        {
+          Object.keys(this.categories).map((category) =>
+            <Category
+              key={category}
+              slot={`viewingOptions${capitalize(category)}`}
+              title={this.categories[category]}
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default Menu;

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css

@@ -9,29 +9,7 @@
   cursor: pointer;
 }
 
-.menu {
-  background: white;
-  position: absolute;
-  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 0px;
-  top: 20px;
-  z-index: 10;
-  min-height: 32px;
-  min-width: 64px;
-}
-
-.list > ul, .list > ul > li {
-  padding: 0;
-  margin: 0;
-}
-
-.list > ul > li {
-  padding: 10px;
-  list-style: none;
-  white-space: nowrap;
-}
-
-.icon {
+.arrowIcon {
   font-size: 14px;
   vertical-align: middle;
 }
@@ -39,20 +17,20 @@
 
 @custom-media --small-viewport (max-width: 425px);
 
-.filterText {
+.label {
   display: inline-block;
 }
 
-.filterIcon {
+.icon {
   vertical-align: middle;
   display: none;
 }
 
 @media (--small-viewport) {
-  .filterText {
+  .label {
     display: none;
   }
-  .filterIcon {
+  .icon {
     display: inline-block;
   }
 }

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js

@@ -4,16 +4,10 @@ import styles from './ViewingOptions.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {ClickOutside} from 'plugin-api/beta/client/components';
-import {capitalize} from 'plugin-api/beta/client/utils';
-import Category from './Category';
+import Menu from './Menu';
 
 class ViewingOptions extends React.Component {
 
-  categories = {
-    sort: t('talk-plugin-viewing-options.sort'),
-    filter: t('talk-plugin-viewing-options.filter'),
-  };
-
   toggleOpen = () => {
     const {open, openMenu, closeMenu} = this.props;
     if (!open) {
@@ -37,22 +31,15 @@ class ViewingOptions extends React.Component {
         <div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
           <div>
             <button className={styles.button} onClick={this.toggleOpen}>
-              <Icon className={styles.filterIcon} name="filter_list" />
-              <span className={styles.filterText}>{t('talk-plugin-viewing-options.viewing_options')}</span>
-              {open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
+              <Icon className={styles.icon} name="filter_list" />
+              <span className={styles.label}>{t('talk-plugin-viewing-options.viewing_options')}</span>
+              {open
+                ? <Icon name="arrow_drop_up" className={styles.arrowIcon}/>
+                : <Icon name="arrow_drop_down" className={styles.arrowIcon}/>
+              }
             </button>
           </div>
-          {
-            open ? (
-              <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
-                {
-                  Object.keys(this.categories).map((category) =>
-                    <Category key={category} slot={`viewingOptions${capitalize(category)}`} title={this.categories[category]} />
-                  )
-                }
-              </div>
-            ) : null
-          }
+          {open && <Menu />}
         </div>
       </ClickOutside>
     );

plugins/talk-plugin-viewing-options/client/translations.yml

@@ -1,8 +1,8 @@
 en:
   talk-plugin-viewing-options:
     viewing_options: "Viewing Options"
-    sort: Sort
-    filter: Filter
+    sort: Sorting
+    filter: Filtering
 es:
   talk-plugin-viewing-options:
     viewing_options: "Opciones de visualización"