From e4b225b4c2d2d6b3f57ede0525761fe83568443e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 6 Oct 2017 10:10:08 -0300
Subject: [PATCH] ViewingOptions, Cards, Proptypes and MediaQueries

---
 .../src/components/ModerationKeysModal.css    |  1 -
 .../Moderation/components/Moderation.css      | 13 ++++
 .../Moderation/components/Moderation.js       | 64 ++++++++++---------
 .../Moderation/components/ViewOptions.css     | 35 ++++++++++
 .../Moderation/components/ViewOptions.js      | 28 ++++++++
 .../Moderation/containers/ViewOptions.js      |  0
 client/coral-ui/components/Card.css           |  2 -
 client/coral-ui/components/Card.js            | 11 +++-
 8 files changed, 120 insertions(+), 34 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Moderation/components/Moderation.css
 create mode 100644 client/coral-admin/src/routes/Moderation/components/ViewOptions.css
 create mode 100644 client/coral-admin/src/routes/Moderation/components/ViewOptions.js
 create mode 100644 client/coral-admin/src/routes/Moderation/containers/ViewOptions.js

diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css
index 73697d930..f4007237b 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.css
+++ b/client/coral-admin/src/components/ModerationKeysModal.css
@@ -21,7 +21,6 @@
 
 .callToAction {
   position: fixed;
-  left: 10px;
   bottom: 10px;
   width: 280px;
   height: 200px;
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.css b/client/coral-admin/src/routes/Moderation/components/Moderation.css
new file mode 100644
index 000000000..94b1754cc
--- /dev/null
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.css
@@ -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;
+  }
+}
+
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 668d013b0..169c1b3b0 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -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) {
@@ -226,41 +228,43 @@ class Moderation extends Component {
           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 />
+          <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}}
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
new file mode 100644
index 000000000..79fdc9b44
--- /dev/null
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
@@ -0,0 +1,35 @@
+@custom-media --tablet (max-width: 1024px);
+
+.viewOptions {
+  display: inline-block;
+  width: 220px;
+  position: absolute;
+  padding: 0;
+  @media (--tablet) {
+    width: 650px;
+    margin: 0 auto;
+    position: relative;
+    display: block;
+  }
+}
+
+.headline {
+  margin: 0;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: 0 20px;
+}
+
+.viewOptionsContent {
+  padding: 10px 20px;
+}
+
+.viewOptionsList {
+  padding: 0;
+  margin: 0;
+  color: rgba(0,0,0,.54);
+}
+
+.viewOptionsItem {
+  list-style: none;
+}
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
new file mode 100644
index 000000000..3343d1401
--- /dev/null
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ViewOptions.css';
+import {Card} from 'coral-ui';
+import cn from 'classnames';
+
+class ViewOptions extends React.Component {
+  render() {
+    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
+            </li>
+          </ul>
+        </div>
+      </Card>
+    );
+  }
+}
+
+ViewOptions.propTypes = {};
+
+export default ViewOptions;
diff --git a/client/coral-admin/src/routes/Moderation/containers/ViewOptions.js b/client/coral-admin/src/routes/Moderation/containers/ViewOptions.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-ui/components/Card.css b/client/coral-ui/components/Card.css
index ef1f2626d..b6e772697 100644
--- a/client/coral-ui/components/Card.css
+++ b/client/coral-ui/components/Card.css
@@ -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);
 }
-
-
diff --git a/client/coral-ui/components/Card.js b/client/coral-ui/components/Card.js
index 0bdb490e7..aaf31d080 100644
--- a/client/coral-ui/components/Card.js
+++ b/client/coral-ui/components/Card.js
@@ -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;