Add more sort options and improve styling

2026-07-08 11:59:10 +08:00 · 2017-08-25 20:15:07 +07:00
parent 9e2f6f1f63
commit e51e8c543f
32 changed files with 314 additions and 87 deletions
@@ -13,6 +13,9 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-replied

 node_modules
@@ -29,6 +29,9 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-replied

 **/node_modules/*
@@ -1,8 +1,12 @@
-.input {
+.label {
+  display: block;
  cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
 }

-.label {
+.input {
  cursor: pointer;
-  padding-left: 4px;
+  margin-right: 6px;
 }
@@ -4,12 +4,15 @@ import styles from './SortOption.css';
 export default class SortOption extends React.Component {
  render() {
    return (
-      <div className={styles.viewingOption}>
-        <input type="radio" onChange={this.props.setSort} checked={this.props.active} className={styles.input}/>
-        <label className={styles.label} onClick={this.props.setSort}>
-          {this.props.label}
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="radio"
+          onChange={this.props.setSort}
+          checked={this.props.active}
+          className={styles.input}
+        />
+        {this.props.label}
+      </label>
    );
  }
 }
@@ -0,0 +1,8 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicCheckbox.css';

 import {t} from 'plugin-api/beta/client/services';

@@ -0,0 +1,16 @@
+.label {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
+}
+
+.input {
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicFilter.css';

 export default class OffTopicFilter extends React.Component {

@@ -20,12 +20,15 @@ export default class OffTopicFilter extends React.Component {

  render() {
    return (
-      <div className={styles.viewingOption}>
-        <label>
-          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
-          Hide Off-Topic Comments
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="checkbox"
+          onChange={this.handleChange}
+          checked={this.props.checked}
+          className={styles.input}
+        />
+        Hide Off-Topic Comments
+      </label>
    );
  }
 }
@@ -1,12 +1,3 @@
-.offTopic {
-  height: 100%;
-}
-
-.offTopicLabel {
-  padding: 10px 20px;
-  display: block;
-}
-
 .tag {
  background: #D2D7D3;
  font-size: 12px;
@@ -17,10 +8,3 @@
  padding: 5px 5px;
  border-radius: 2px;
 }
-
-.viewingOption {
-}
-
-:global(.talk-plugin-off-topic-comment) {
-  display: none;
-}
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-liked.label'),
+  {sortBy: 'LIKES', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-liked:
+    label: Most liked first
+es:
+  talk-plugin-sort-most-liked:
@@ -0,0 +1,2 @@
+module.exports = {
+};
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-replied.label'),
+  {sortBy: 'REPLIES', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-replied:
+    label: Most replied first
+es:
+  talk-plugin-sort-most-replied:
@@ -0,0 +1,2 @@
+module.exports = {
+};
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-newest.label'),
+  {sortBy: 'CREATED_AT', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-newest:
+    label: Newest first
+es:
+  talk-plugin-sort-newest:
@@ -0,0 +1,2 @@
+module.exports = {
+};
@@ -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;
 }
@@ -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>
@@ -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;
+}
+
@@ -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;
@@ -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;
  }
 }
@@ -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>
    );
@@ -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"