Merge pull request #235 from tahnik/theme

Theme
tahnik · Jan 3, 2018 · 2a9c602 · 2a9c602
2 parents 8c22cab + 5c86eea
commit 2a9c602
Show file tree

Hide file tree

Showing 58 changed files with 3,976 additions and 2,613 deletions.
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -6,6 +6,25 @@ engines:
     enabled: true
     config:
       config: .eslintrc
+checks:
+  argument-count:
+    config:
+      threshold: 4
+  complex-logic:
+    config:
+      threshold: 6
+  file-lines:
+    config:
+      threshold: 500
+  method-complexity:
+    config:
+      threshold: 10
+  method-count:
+    config:
+      threshold: 20
+  method-lines:
+    config:
+      threshold: 200
 ratings:
   paths:
   - "**.js"

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -26,13 +26,16 @@
 				"everything-else",
 				"render"
 			]
-		}],
+    }],
+    "prefer-destructuring": 0,
 		"react/jsx-filename-extension": [1, {
 			"extensions": [".js", ".jsx"]
-		}],
+    }],
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,
     "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }],
 		"import/no-dynamic-require": 0,
 		"import/no-extraneous-dependencies": "off",

diff --git a/app/src/app.js b/app/src/app.js
@@ -29,7 +29,6 @@ const {
   REDUX_DEVTOOLS,
 } = require('electron-devtools-installer');
 
-
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;

diff --git a/app/src/js/actions/fetch.js b/app/src/js/actions/fetch.js
@@ -241,7 +241,9 @@ const fetchFeed =
   if (page === 0) {
     dispatch({
       type: COLUMN.FETCH,
-      column: { ...currentColumn, items: [], page: 0, state: STATE.LOADING },
+      column: {
+        ...currentColumn, items: [], page: 0, state: STATE.LOADING,
+      },
     });
   } else {
     dispatch({

diff --git a/app/src/js/actions/settings.js b/app/src/js/actions/settings.js
@@ -187,8 +187,12 @@ const changeGeneral = (primaryKey, secondaryKey, value) => (dispatch) => {
  * We will use this for theming in future
  *
  */
-const changeTheme = () => () => {
-
+const changeTheme = (key, values = null) => (dispatch) => {
+  dispatch({
+    type: SETTINGS.ACTION.CHANGE_THEME,
+    key: values ? null : key,
+    values,
+  });
 };
 
 

diff --git a/app/src/js/components/auth/login.js b/app/src/js/components/auth/login.js
@@ -71,7 +71,8 @@ class Login extends Component {
               this.state.password,
             )}
             disabled={auth.state === 'STATE_LOADING'}
-          >Login</button>
+          >Login
+          </button>
           <p onClick={() => noLogin(true)}><u>Not now</u></p>
         </div>
       </div>

diff --git a/app/src/js/components/columns/column.js b/app/src/js/components/columns/column.js
@@ -75,7 +75,8 @@ class Column extends Component {
   }
   getItemsContainer() {
     const {
-      column, theme, vote, fetch, open, itemType, auth, showToast, custom, modal } = this.props;
+      column, theme, vote, fetch, open, itemType, auth, showToast, custom, modal,
+    } = this.props;
     const { divID } = this.state;
     if (column.items.length === 0 && column.state === STATE.SUCCESS && !custom) {
       return (
@@ -115,7 +116,8 @@ class Column extends Component {
   }
   render() {
     const {
-      column, theme, fetch, filters, removeColumn } = this.props;
+      column, theme, fetch, filters, removeColumn,
+    } = this.props;
     const { divID } = this.state;
     return (
       <div

diff --git a/app/src/js/components/columns/column_topbar.js b/app/src/js/components/columns/column_topbar.js
@@ -212,7 +212,10 @@ class ColumnTopBar extends Component {
       <div
         className="column_topbar"
         onMouseLeave={() => this.handleHoverLeave()}
-        style={{ width: `${theme.column.width}px` }}
+        style={{
+          width: `${theme.column.width}px`,
+          color: theme.item_card.color,
+        }}
       >
         <div className="left_navs">
           <div
@@ -227,7 +230,8 @@ class ColumnTopBar extends Component {
                   className={`${isActive}`}
                   onClick={() => this.handlePri(primaryFilters[key])}
                   onMouseOver={() => this.handleHover(primaryFilters[key])}
-                >{primaryFilters[key]}</span>
+                >{primaryFilters[key]}
+                </span>
               );
             })}
           </div>
@@ -243,7 +247,8 @@ class ColumnTopBar extends Component {
                     key={key}
                     className={`${isActive}`}
                     onClick={() => this.handleSec(secondaryFilters[key])}
-                  >{secondaryFilters[key]}</span>
+                  >{secondaryFilters[key]}
+                  </span>
                 );
               })}
           </div>

diff --git a/app/src/js/components/comments/comment_post.js b/app/src/js/components/comments/comment_post.js
@@ -111,6 +111,7 @@ class CommentPost extends Component {
           onChange={text => this.setState({ content: text })}
           ref={(node) => { this.smartArea = node; }}
           editing={this.state.editID !== 0}
+          theme={theme}
         />
       </div>
     );

diff --git a/app/src/js/components/comments/comments.js b/app/src/js/components/comments/comments.js
@@ -11,11 +11,14 @@ class Comments extends Component {
   constructor() {
     super();
     this.state = {
+      // eslint-disable-next-line
       item: null,
     };
   }
   render() {
-    const { theme, vote, comments, auth, open, addMention, showToast, fetchitem } = this.props;
+    const {
+      theme, vote, comments, auth, open, addMention, showToast, fetchitem,
+    } = this.props;
     return (
       <div
         className="comments_container"

diff --git a/app/src/js/components/emoji_picker/emoji_picker.js b/app/src/js/components/emoji_picker/emoji_picker.js
@@ -23,7 +23,7 @@ const allEmojis = [];
 class EmojiPicker extends Component {
   constructor(props) {
     super(props);
-    this.state = { activeTab: 'people', search: '' };
+    this.state = { activeTab: 'people' };
   }
   componentWillMount() {
     emojiData.categories = [];
@@ -59,7 +59,8 @@ class EmojiPicker extends Component {
                 onClick={() => { this.setState({ activeTab: object.name }); }}
                 key={object.name}
                 className="category"
-              >{object.icon}</Twemoji>
+              >{object.icon}
+              </Twemoji>
             ))}
           </div>
         </div>

diff --git a/app/src/js/components/item/bottom_bar.js b/app/src/js/components/item/bottom_bar.js
@@ -16,6 +16,8 @@ class BottomBar extends Component {
       triggerActive: false,
       favorited: false,
       subscribed: false,
+      plusHover: false,
+      minusHover: false,
     };
   }
   componentWillMount() {
@@ -83,20 +85,57 @@ class BottomBar extends Component {
     }
     return <div />;
   }
+  togglePlusHover() {
+    this.setState({ plusHover: !this.state.plusHover });
+  }
+  toggleMinusHover() {
+    this.setState({ minusHover: !this.state.minusHover });
+  }
   render() {
-    const { type, item, onDelete } = this.props;
-    const { favorited, subscribed } = this.state;
+    const {
+      type, item, onDelete, theme,
+    } = this.props;
+    const { favorited } = this.state;
     const disabled = this.props.isUser ? 'disabled' : '';
+    const backgroundColor = type === ITEM.COMMENT.NAME ?
+      theme.comment_card.backgroundColor : theme.item_card.backgroundColor;
+    const color = type === ITEM.COMMENT.NAME ?
+      theme.comment_card.color : theme.item_card.color;
+    const voteColor = theme.plus_notif.backgroundColor;
+    let plusColor = theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.color;
+    let minusColor = theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.color;
+    if (this.state.isVoted > 0) {
+      plusColor = theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor;
+    } else if (this.state.isVoted < 0) {
+      minusColor = theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor;
+    }
     return (
-      <div className="bottom_bar_container" >
+      <div
+        className="bottom_bar_container"
+        style={{ backgroundColor, color }}
+      >
         <div className="left_items">
           <div
             className={`upvote ${disabled} ${this.state.isVoted > 0 ? 'upvoted' : ''}`}
             disabled={disabled}
+            style={{
+              backgroundColor: this.state.plusHover ? theme.backgroundColor : '',
+              color: plusColor,
+            }}
+            onMouseEnter={() => { this.togglePlusHover(); }}
+            onMouseLeave={() => { this.togglePlusHover(); }}
             onClick={() => this.vote(1)}
           >
+            <div
+              style={{ backgroundColor: voteColor }}
+              className={`before ${this.state.isVoted > 0 ? 'votebefore' : ''}`}
+            />
             <span className="ud_icon">+</span>
             <span className="ud_icon">+</span>
+            <div
+              style={{ borderColor: this.state.isVoted > 0 ? `${voteColor}` : 'rgba(0,0,0,0)' }}
+              className={`${this.state.isVoted > 0 ? 'voteafter' : ''} after`}
+            />
           </div>
           <div className="score" >
             <span>{ this.state.score }</span>
@@ -105,9 +144,23 @@ class BottomBar extends Component {
             onClick={() => this.vote(-1)}
             disabled={disabled}
             className={`downvote ${disabled} ${this.state.isVoted < 0 ? 'downvoted' : ''}`}
+            style={{
+              backgroundColor: this.state.minusHover ? theme.backgroundColor : '',
+              color: minusColor,
+            }}
+            onMouseEnter={() => { this.toggleMinusHover(); }}
+            onMouseLeave={() => { this.toggleMinusHover(); }}
           >
+            <div
+              style={{ backgroundColor: voteColor }}
+              className={`before ${this.state.isVoted < 0 ? 'votebefore' : ''}`}
+            />
             <span className="ud_icon">-</span>
             <span className="ud_icon">-</span>
+            <div
+              style={{ borderColor: this.state.isVoted < 0 ? `${voteColor}` : 'rgba(0,0,0,0)' }}
+              className={`${this.state.isVoted < 0 ? 'voteafter' : ''} after`}
+            />
           </div>
         </div>
         <div
@@ -117,6 +170,7 @@ class BottomBar extends Component {
           <div className="togglable">
             <div
               className={`trigger ${this.state.triggerActive ? 'active' : ''}`}
+              onClick={() => this.setState({ triggerActive: true })}
               onMouseEnter={() => this.setState({ triggerActive: true })}
             >
               <p><i className="ion-android-more-horizontal" /></p>
@@ -134,7 +188,7 @@ class BottomBar extends Component {
                 </div>
                 : null
               }
-              {
+              {/* {
                 !this.props.isUser ?
                   <div
                     className={`toggle_item subscribe ${subscribed ? 'active' : null}`}
@@ -143,7 +197,7 @@ class BottomBar extends Component {
                     <p><i className="ion-social-rss-outline" /></p>
                   </div>
                   : null
-              }
+              } */}
               { !item.rant_id && !item.c_type ?
                 <div
                   className={`toggle_item favorite ${favorited ? 'active' : null}`}
@@ -203,6 +257,7 @@ BottomBar.propTypes = {
   onCommentsClick: PropTypes.func,
   copyToClip: PropTypes.func.isRequired,
   item: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
   onFavorite: PropTypes.func.isRequired,
   onSubscribe: PropTypes.func.isRequired,
 };

diff --git a/app/src/js/components/item/item.js b/app/src/js/components/item/item.js
@@ -135,15 +135,18 @@ class Item extends Component {
   }
   getItemCard() {
     const { item } = this.state;
-    const { theme, vote, cardItem, auth, open, showToast } = this.props;
+    const {
+      theme, vote, cardItem, auth, open, showToast,
+    } = this.props;
+    const type = item.rant.rt === 2 ? ITEM.COLLAB.NAME : cardItem.type;
     return (
       <ItemCard
         modal
         item={item.rant}
         key={item.rant.id}
         theme={theme}
         vote={vote}
-        itemType={cardItem.type}
+        itemType={type}
         auth={auth}
         open={open}
         showToast={showToast}
@@ -154,7 +157,9 @@ class Item extends Component {
   }
   getComments() {
     const { item } = this.state;
-    const { theme, vote, auth, open, showToast } = this.props;
+    const {
+      theme, vote, auth, open, showToast,
+    } = this.props;
     return (
       <Comments
         comments={item.comments}