Adding dropdown to ViewOptions

client/coral-admin/src/routes/Community/components/Table.js

@@ -3,7 +3,6 @@ import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {Dropdown, Option} from 'coral-ui';
-import capitalize from 'lodash/capitalize';
 import cn from 'classnames';
 
 const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (

client/coral-admin/src/routes/Moderation/components/ViewOptions.css

@@ -55,43 +55,13 @@
 
 .selectField {
   position: relative;
-  width: 140px;
-  height: 36px;
-  top: 5px;
-  margin-right: 10px;
   background: #7B7B7B;
   color: white;
-  padding: 6px 15px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  margin-top: 5px;
 
   @media (--tablet) {
     display: inline-block;
+    margin-top: 0px;
     margin-left: 10px;
   }
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    font-size: 1rem;
-    border-bottom: 0px;
-    font-family: inherit;
-  }
-
-  label {
-    top: -4px;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
 }

client/coral-admin/src/routes/Moderation/components/ViewOptions.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './ViewOptions.css';
-import {Card} from 'coral-ui';
 import cn from 'classnames';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
+import {Card, Dropdown, Option} from 'coral-ui';
 
 class ViewOptions extends React.Component {
   render() {
@@ -23,14 +22,14 @@ class ViewOptions extends React.Component {
           <ul className={styles.viewOptionsList}>
             <li className={styles.viewOptionsItem}>
               Sort Comments
-              <SelectField
+              <Dropdown
                 className={styles.selectField}
-                label="Sort"
+                placeholder={t('modqueue.sort')}
                 value={sort}
                 onChange={(sort) => selectSort(sort)}>
-                <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-                <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
-              </SelectField>
+                <Option value={'DESC'} label={t('modqueue.newest_first')} />
+                <Option value={'ASC'} label={t('modqueue.oldest_first')} />
+              </Dropdown>
             </li>
           </ul>
         </div>

client/coral-admin/src/routes/Stories/components/Stories.js

@@ -67,7 +67,6 @@ class Stories extends Component {
     return (
       <Dropdown 
         value={closed}
-        label={closed ? t('streams.closed') : t('streams.open')}
         onChange={(value) => this.onStatusClick(!value, id)}>     
         <Option value={null} label={t('streams.closed')} />
         <Option value={true} label={t('streams.open')} />

client/coral-ui/components/Dropdown.js

@@ -79,9 +79,10 @@ class Dropdown extends React.Component {
   }
 
   render() {
+    const {className = ''} = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={styles.dropdown} onClick={this.handleClick} onKeyDown={this.handleKeyDown} role="button" aria-label="Dropdown" aria-haspopup="true" tabIndex="0">
+        <div className={cn(styles.dropdown, className)} onClick={this.handleClick} onKeyDown={this.handleKeyDown} role="button" aria-label="Dropdown" aria-haspopup="true" tabIndex="0">
           {this.props.icon && <Icon name={this.props.icon} className={styles.icon} />}
           <span className={styles.label}>{this.renderLabel()}</span>
           {this.state.isOpen ? <Icon name="keyboard_arrow_up" className={styles.arrow} /> : <Icon name="keyboard_arrow_down" className={styles.arrow} />}
@@ -101,6 +102,7 @@ class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
+  className: PropTypes.string,
   placeholder: PropTypes.string,
   icon: PropTypes.string,
   onChange: PropTypes.func.isRequired,

locales/en.yml

@@ -289,6 +289,7 @@ en:
     select_stream: "Select Stream"
     shift_key: "⇧"
     shortcuts: "Shortcuts"
+    sort: "Sort"
     show_shortcuts: "Show Shortcuts"
     singleview: "Toggle single comment edit view"
     thismenu: "Open this menu"

locales/es.yml

@@ -281,6 +281,7 @@ es:
     select_stream: "Seleccionar hilo de comentarios"
     shift_key: ⇧
     shortcuts: Atajos
+    sort: "Ordenar"
     show_shortcuts: "Mostrar Atajos"
     singleview: "Colocar vista de edición de comentario único"
     thismenu: "Abrir este menu"