Merge branch 'master' into ReadersNotifications

2026-06-29 11:18:08 +08:00 · 2017-10-10 18:18:58 +01:00
parent bd73140f23 98f46409ca
commit 764d562497
18 changed files with 326 additions and 197 deletions
@@ -0,0 +1,13 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+:global {
+  .mdl-layout__drawer-button {
+    visibility: hidden;
+  }
+
+  @media (--table-viewport) {
+    .mdl-layout__drawer-button {
+      visibility: visible;
+    }
+  }
+}
@@ -6,8 +6,8 @@ import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';

-const CoralDrawer = ({handleLogout, auth}) => (
-  <Drawer className={styles.header}>
+const CoralDrawer = ({handleLogout, auth = {}}) => (
+  <Drawer className={styles.drawer}>
    { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
      <div>
        <Navigation className={styles.nav}>
@@ -57,7 +57,8 @@ const CoralDrawer = ({handleLogout, auth}) => (

 CoralDrawer.propTypes = {
  handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool // hide app elements from a logged out user
+  restricted: PropTypes.bool, // hide app elements from a logged out user
+  auth: PropTypes.object
 };

 export default CoralDrawer;
@@ -21,7 +21,6 @@

 .callToAction {
  position: fixed;
-  left: 10px;
  bottom: 10px;
  width: 280px;
  height: 200px;
@@ -29,6 +28,7 @@
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  z-index: 10;

  .ctaHeader {
    font-size: 16px;
@@ -15,10 +15,16 @@
  }
 }

+.headerWrapper {
+  background-color: #696969;
+}
+
 .header {
  box-shadow: none;
  min-height: 58px;
  display: block;
+  max-width: 1280px;
+  margin: 0 auto;
  background-color: #696969;
  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);
 }
@@ -15,93 +15,95 @@ const CoralHeader = ({
  root
 }) => {
  return (
-    <Header className={styles.header}>
-      <Logo className={styles.logo} />
-      <div> 
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-            <Navigation className={styles.nav}>
-              <IndexLink
-                id='dashboardNav'
-                className={styles.navLink}
-                to="/admin/dashboard"
-                activeClassName={styles.active}>
-                {t('configure.dashboard')}
-              </IndexLink>
-              {
-                can(auth.user, 'MODERATE_COMMENTS') && (
-                  <Link
-                    id='moderateNav'
-                    className={styles.navLink}
-                    to="/admin/moderate"
-                    activeClassName={styles.active}>
-                    {t('configure.moderate')}
-                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                  </Link>
-                )
-              }
-              <Link
-                id='streamsNav'
-                className={styles.navLink}
-                to="/admin/stories"
-                activeClassName={styles.active}>
-                {t('configure.stories')}
-              </Link>
+    <div className={styles.headerWrapper}>
+      <Header className={styles.header}>
+        <Logo className={styles.logo} />
+        <div> 
+          {
+            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+              <Navigation className={styles.nav}>
+                <IndexLink
+                  id='dashboardNav'
+                  className={styles.navLink}
+                  to="/admin/dashboard"
+                  activeClassName={styles.active}>
+                  {t('configure.dashboard')}
+                </IndexLink>
+                {
+                  can(auth.user, 'MODERATE_COMMENTS') && (
+                    <Link
+                      id='moderateNav'
+                      className={styles.navLink}
+                      to="/admin/moderate"
+                      activeClassName={styles.active}>
+                      {t('configure.moderate')}
+                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                    </Link>
+                  )
+                }
+                <Link
+                  id='streamsNav'
+                  className={styles.navLink}
+                  to="/admin/stories"
+                  activeClassName={styles.active}>
+                  {t('configure.stories')}
+                </Link>

-              <Link
-                id='communityNav'
-                className={styles.navLink}
-                to="/admin/community"
-                activeClassName={styles.active}>
-                {t('configure.community')}
-                {root.flaggedUsernamesCount !== 0 && <Indicator />}
-              </Link>
+                <Link
+                  id='communityNav'
+                  className={styles.navLink}
+                  to="/admin/community"
+                  activeClassName={styles.active}>
+                  {t('configure.community')}
+                  {root.flaggedUsernamesCount !== 0 && <Indicator />}
+                </Link>

-              {
-                can(auth.user, 'UPDATE_CONFIG') && (
-                  <Link
-                    id='configureNav'
-                    className={styles.navLink}
-                    to="/admin/configure"
-                    activeClassName={styles.active}>
-                    {t('configure.configure')}
-                  </Link>
-                )
-              }
-            </Navigation>
-            :
-            null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                        View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
-                        Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>
-              {`v${process.env.VERSION}`}
-            </li>
-          </ul>
+                {
+                  can(auth.user, 'UPDATE_CONFIG') && (
+                    <Link
+                      id='configureNav'
+                      className={styles.navLink}
+                      to="/admin/configure"
+                      activeClassName={styles.active}>
+                      {t('configure.configure')}
+                    </Link>
+                  )
+                }
+              </Navigation>
+              :
+              null
+          }
+          <div className={styles.rightPanel}>
+            <ul>
+              <li className={styles.settings}>
+                <div>
+                  <IconButton name="settings" id="menu-settings"/>
+                  <Menu target="menu-settings" align="right">
+                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                    <MenuItem>
+                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                          View latest version
+                      </a>
+                    </MenuItem>
+                    <MenuItem>
+                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                          Report a bug or give feedback
+                      </a>
+                    </MenuItem>
+                    <MenuItem onClick={handleLogout}>
+                      {t('configure.sign_out')}
+                    </MenuItem>
+                  </Menu>
+                </div>
+              </li>
+              <li>
+                {`v${process.env.VERSION}`}
+              </li>
+            </ul>
+          </div>
        </div>
-      </div>
-    </Header>
+      </Header>
+    </div>
  );
 };

@@ -1,4 +1,4 @@
 .layout {
-    margin: 0 auto;
-    background-color: #FAFAFA;
+  margin: 0 auto;
+  background-color: #FAFAFA;
 }
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from '../../containers/Header';
-import Drawer from './Drawer';
+import Drawer from '../Drawer';
 import styles from './Layout.css';

 const Layout = ({
@@ -21,6 +21,7 @@ const Layout = ({
    <Drawer 
      handleLogout={handleLogout}
      restricted={restricted}
+      auth={auth}
    />
    <div className={styles.layout}>
      {children}
@@ -20,7 +20,6 @@
  background: #696969;
  height: 100%;
  width: 128px;
-  z-index: 10;
  border-right: 1px #757575 solid;
 }

@@ -6,6 +6,8 @@
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
+  max-width: 1280px;
+  margin: 0 auto;

  h3 {
    color: black;
@@ -0,0 +1,13 @@
+@custom-media --desktop (max-width: 1280px);
+
+.container {
+  max-width: 1280px;
+  position: relative;
+  margin: 0 auto;
+
+  @media (--desktop) {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+
@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import key from 'keymaster';
-
+import cn from 'classnames';
+import styles from './Moderation.css';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import StorySearch from '../containers/StorySearch';
 import Slot from 'coral-framework/components/Slot';
+import ViewOptions from './ViewOptions';

 class Moderation extends Component {
  constructor(props) {
@@ -244,45 +246,48 @@ class Moderation extends Component {
          asset={asset}
          getModPath={getModPath}
          items={menuItems}
-          selectSort={this.props.setSortOrder}
-          sort={this.props.moderation.sortOrder}
          activeTab={activeTab}
        />
-        <ModerationQueue
-          key={`${activeTab}_${this.props.moderation.sortOrder}`}
-          data={this.props.data}
-          root={this.props.root}
-          currentAsset={asset}
-          comments={comments.nodes}
-          activeTab={activeTab}
-          singleView={moderation.singleView}
-          selectedCommentId={this.state.selectedCommentId}
-          bannedWords={settings.wordlist.banned}
-          suspectWords={settings.wordlist.suspect}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          acceptComment={props.acceptComment}
-          rejectComment={props.rejectComment}
-          loadMore={this.loadMore}
-          assetId={assetId}
-          sort={this.props.moderation.sortOrder}
-          commentCount={activeTabCount}
-          currentUserId={this.props.auth.user.id}
-          viewUserDetail={viewUserDetail}
-        />
-        <ModerationKeysModal
-          hideShortcutsNote={props.hideShortcutsNote}
-          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
-          open={moderation.modalOpen}
-          onClose={this.onClose}/>
-
+        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+          <ViewOptions
+            selectSort={this.props.setSortOrder}
+            sort={this.props.moderation.sortOrder}
+          />
+          <ModerationQueue
+            key={`${activeTab}_${this.props.moderation.sortOrder}`}
+            data={this.props.data}
+            root={this.props.root}
+            currentAsset={asset}
+            comments={comments.nodes}
+            activeTab={activeTab}
+            singleView={moderation.singleView}
+            selectedCommentId={this.state.selectedCommentId}
+            bannedWords={settings.wordlist.banned}
+            suspectWords={settings.wordlist.suspect}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            loadMore={this.loadMore}
+            assetId={assetId}
+            sort={this.props.moderation.sortOrder}
+            commentCount={activeTabCount}
+            currentUserId={this.props.auth.user.id}
+            viewUserDetail={viewUserDetail}
+          />
+          <ModerationKeysModal
+            hideShortcutsNote={props.hideShortcutsNote}
+            shortcutsNoteVisible={moderation.shortcutsNoteVisible}
+            open={moderation.modalOpen}
+            onClose={this.onClose}
+          />
+        </div>
        <StorySearch
          assetId={assetId}
          moderation={this.props.moderation}
          closeSearch={this.closeSearch}
          storySearchChange={this.props.storySearchChange}
        />
-
        <Slot
          data={data}
          queryData={{root, asset}}
@@ -7,12 +7,7 @@
  justify-content: space-between;
 }

-.tabBarPadding {
-  width: 150px;
-}
-
 .tab {
-  flex: 1;
  color: #BDBDBD;
  text-transform: capitalize;
  font-weight: 100;
@@ -22,9 +17,9 @@
  transition: color 200ms;
  padding: 0px 10px;
  margin-right: 20px;
+
  &:hover {
    color: white;
-    /*border-bottom: solid 2px #F36451;*/
    box-sizing: border-box;
  }
 }
@@ -48,55 +43,12 @@
  background: transparent !important;
 }

-.selectField {
-  position: relative;
-  width: 140px;
-  height: 36px;
-  top: 5px;
-  margin-right: 10px;
-  background: #FFF;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  bor
-  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);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-    border-bottom: 0px;
-  }
-
-  label {
-    top: -4px;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .tabIcon {
  position: relative;
  top: 3px;
  font-size: 16px;
 }

-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}
+.tabBarContainer {
+  margin: 0 auto;
+}
@@ -2,26 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 import styles from './ModerationMenu.css';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 import cn from 'classnames';

-import t from 'coral-framework/services/i18n';
-
 const ModerationMenu = ({
  asset = {},
  items,
-  selectSort,
-  sort,
  getModPath,
  activeTab
 }) => {
  return (
    <div className="mdl-tabs">
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div className={styles.tabBarPadding} />
-        <div>
+      <div className={cn('mdl-tabs__tab-bar', styles.tabBar, 'talk-admin-moderation-menu-tabbar')}>
+        <div className={cn(styles.tabBarContainer, 'talk-admin-moderation-menu-tabbar-container')}>
          {items.map((queue) =>
            <Link
              key={queue.key}
@@ -32,14 +26,6 @@ const ModerationMenu = ({
            </Link>
          )}
        </div>
-        <SelectField
-          className={styles.selectField}
-          label="Sort"
-          value={sort}
-          onChange={(sort) => selectSort(sort)}>
-          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
-        </SelectField>
      </div>
    </div>
  );
@@ -50,8 +36,6 @@ ModerationMenu.propTypes = {
  asset: PropTypes.shape({
    id: PropTypes.string
  }),
-  selectSort: PropTypes.func.isRequired,
-  sort: PropTypes.string.isRequired,
  getModPath: PropTypes.func.isRequired,
  activeTab: PropTypes.string.isRequired,
 };
@@ -0,0 +1,97 @@
+@custom-media --tablet (max-width: 1180px);
+
+.viewOptions {
+  display: inline-block;
+  width: 220px;
+  position: absolute;
+  padding: 0;
+  overflow: visible;
+  height: 144px;
+  min-height: auto;
+  z-index: 10;
+
+  @media (--tablet) {
+    width: 650px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+    height: 60px;
+  }
+}
+
+.headline {
+  margin: 0;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: 0 20px;
+
+  @media (--tablet) {
+    flex: 1;
+    display: inline-block;
+    border-bottom: none;
+    line-height: 60px;
+  }
+}
+
+.viewOptionsContent {
+  padding: 10px 20px;
+
+  @media (--tablet) {
+    display: inline-block;
+  }
+}
+
+.viewOptionsList {
+  padding: 0;
+  margin: 0;
+  color: rgba(0,0,0,.54);
+}
+
+.viewOptionsItem {
+  list-style: none;
+}
+
+.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);
+
+  @media (--tablet) {
+    display: inline-block;
+    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;
+   }
+}
@@ -0,0 +1,47 @@
+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';
+
+class ViewOptions extends React.Component {
+  render() {
+
+    const {
+      selectSort,
+      sort
+    } = this.props;
+
+    return (
+      <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
+        <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
+          View Options
+        </h2>
+        <div className={styles.viewOptionsContent}> 
+          <ul className={styles.viewOptionsList}>
+            <li className={styles.viewOptionsItem}>
+              Sort Comments
+              <SelectField
+                className={styles.selectField}
+                label="Sort"
+                value={sort}
+                onChange={(sort) => selectSort(sort)}>
+                <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
+                <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
+              </SelectField>
+            </li>
+          </ul>
+        </div>
+      </Card>
+    );
+  }
+}
+
+ViewOptions.propTypes = {
+  selectSort: PropTypes.func.isRequired,
+  sort: PropTypes.string.isRequired
+};
+
+export default ViewOptions;
@@ -30,5 +30,3 @@
 .shadow--3 {
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
 }
-
-
@@ -1,8 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Card.css';

-export default ({children, className, shadow = 2, ...props}) => (
+const Card = ({children, className, shadow = 2, ...props}) => (
  <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
    {children}
  </div>
 );
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  shadow: PropTypes.number,
+};
+
+export default Card;