Merge pull request #242 from tahnik/vulner

Vulner
tahnik · Jan 24, 2018 · 76753e8 · 76753e8
2 parents b3520ca + b662386
commit 76753e8
Show file tree

Hide file tree

Showing 28 changed files with 2,388 additions and 1,916 deletions.
diff --git a/app/src/app.js b/app/src/app.js
@@ -1,6 +1,8 @@
 const electron = require('electron');
 
-const { app, BrowserWindow, Menu, Tray, ipcMain, shell } = electron;
+const {
+  app, BrowserWindow, Menu, Tray, ipcMain, shell,
+} = electron;
 
 const https = require('https');
 const os = require('os');
@@ -83,7 +85,7 @@ function createWindow() {
 
   // Send usage data to firebase
   if (process.env.NODE_ENV !== 'development') {
-    let plat = '';
+    let plat = 'linux';
 
     if (/^win/.test(process.platform)) { plat = 'windows'; }
     if (/^dar/.test(process.platform)) { plat = 'osx'; }
@@ -103,7 +105,7 @@ function createWindow() {
     width: 1024,
     height: 600,
     minHeight: 600,
-    minWidth: 1024,
+    minWidth: 590,
     show: false,
   });
 
@@ -235,6 +237,28 @@ ipcMain.on('showQRNotif', (sender, n) => {
   notify.show(n);
 });
 
+let compact = false;
+let prevBounds = {};
+
+ipcMain.on('toggleCompact', () => {
+  compact = !compact;
+  const screenSize = electron.screen.getPrimaryDisplay().workArea;
+  if (compact) {
+    prevBounds = mainWindow.getBounds();
+
+    mainWindow.setBounds({
+      x: screenSize.width - 600, y: 0, width: 600, height: screenSize.height,
+    });
+  } else {
+    mainWindow.setBounds({
+      x: prevBounds.x,
+      y: prevBounds.y,
+      width: prevBounds.width,
+      height: prevBounds.height,
+    });
+  }
+});
+
 module.exports.sendReply = (i, m) => {
   mainWindow.webContents.send('notifReply', { rantid: i, message: m });
 };

diff --git a/app/src/js/actions/fetch.js b/app/src/js/actions/fetch.js
@@ -258,7 +258,7 @@ const fetchFeed =
     sort,
     range,
     type,
-    page: currentColumn.page + 1,
+    page: page === 0 ? 1 : currentColumn.page + 1,
     state: STATE.SUCCESS,
     filters,
     itemType,

diff --git a/app/src/js/components/item/item.js b/app/src/js/components/item/item.js
@@ -212,6 +212,9 @@ class Item extends Component {
     return (
       <div
         className="item_compact_column"
+        style={{
+          width: `${parseInt(this.props.theme.column.width, 10) + 18}px`,
+        }}
         ref={(node) => { this.compactCol = node; }}
       >
         {this.getItemCard()}

diff --git a/app/src/js/components/item/item_card.js b/app/src/js/components/item/item_card.js
@@ -267,6 +267,7 @@ class ItemCard extends Component {
       theme.comment_card.backgroundColor : theme.item_card.backgroundColor;
     const color = isComment ?
       theme.comment_card.color : theme.item_card.color;
+    const showAvatar = typeof theme.showAvatar !== 'undefined' ? theme.showAvatar : true;
     return (
       <div
         className={`item_card ${modal || isComment ? null : 'shadow'}`}
@@ -282,15 +283,21 @@ class ItemCard extends Component {
           onPos={() => { this.setState({ popup: { ...this.state.popup, className: 'closeAnim' } }); setTimeout(() => { this.onDelete(false); }); }}
           onNeg={() => { this.setState({ popup: { ...this.state.popup, className: 'closeAnim' } }); setTimeout(() => { this.setState({ popup: { ...this.state.popup, visible: false } }); }, 300); }}
         />
-        <UserBadge
-          user={user}
-          theme={theme}
-          open={open}
-        />
-        <span
-          className="timesince"
-        >{timeSince(item.created_time * 1000)}
-        </span>
+        {
+          !modal && !showAvatar && !isComment ?
+            null :
+            <div>
+              <UserBadge
+                user={user}
+                theme={theme}
+                open={open}
+              />
+              <span
+                className="timesince"
+              >{timeSince(item.created_time * 1000)}
+              </span>
+            </div>
+        }
         <div
           className="body_container"
           onClick={() => this.open()}

diff --git a/app/src/js/components/navigation/sidenav.js b/app/src/js/components/navigation/sidenav.js
@@ -7,7 +7,20 @@ import { ITEM } from '../../consts/types';
 const { ipcRenderer } = require('electron');
 
 class SideNav extends Component {
+  constructor() {
+    super();
+    this.state = {
+      hidden: false,
+    };
+  }
   componentDidMount() {
+    this.handleResize();
+    this.listener = () => {
+      this.handleResize();
+    };
+    window.addEventListener('resize', this.listener);
+
+    const { theme } = this.props;
     ipcRenderer.on('compose_rant', () => { this.props.open(); });
     document.addEventListener('keydown', (e) => {
       if (e.which === 13 && e.ctrlKey) {
@@ -16,23 +29,42 @@ class SideNav extends Component {
         }
       }
     });
+    const thumbColor = theme.comment_card.backgroundColor;
+    const styleElement = document.createElement('style');
+    styleElement.appendChild(document.createTextNode(`div ::-webkit-scrollbar-thumb {background: ${thumbColor}}`));
+    document.getElementsByTagName('head')[0].appendChild(styleElement);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.listener);
+  }
+  handleResize() {
+    const windowWidth = window.innerWidth;
+    if (windowWidth < 1000) {
+      this.setState({ hidden: true });
+    } else {
+      this.setState({ hidden: false });
+    }
   }
   getUserCard() {
     const {
-      user, logout, login, fetchUser, open,
+      user, logout, login, fetchUser, open, theme,
     } = this.props;
     return (<CompactUserCard
       user={user}
       login={login}
       logout={logout}
       fetchUser={fetchUser}
       open={open}
+      theme={theme}
     />);
   }
   render() {
     const {
       sideNavItems, history, location, resetColumn, open, settings, theme,
     } = this.props;
+    if (this.state.hidden) {
+      return null;
+    }
     return (
       <div
         className="sidenav_container"

diff --git a/app/src/js/components/notifs/notif_bubble.js b/app/src/js/components/notifs/notif_bubble.js
@@ -53,7 +53,12 @@ class Notification extends Component {
         className="notif_bubble"
       >
         <div className={`notif_badge ${notif.read === 1 ? 'read' : ''}`}>
-          <img alt="" src={imageSource} className="notif_image" style={{ background: `#${avatarBack}` }} />
+          <img
+            alt=""
+            src={imageSource}
+            className="notif_image"
+            style={{ background: `#${avatarBack}` }}
+          />
           <i
             className={`${icon} ${notif.read === 1 || unread === 0 ? 'read' : ''}`}
           />

diff --git a/app/src/js/components/notifs/notifs.js b/app/src/js/components/notifs/notifs.js
@@ -86,6 +86,7 @@ class Notifs extends Component {
         className={`notifs_container ${this.state.active ? 'active' : ''}`}
         onClick={e => this.toggleNotif(e)}
       >
+        <div className="notifs_back" />
         <button
           className="notifs_ball"
           style={{

diff --git a/app/src/js/components/settings/theme.js b/app/src/js/components/settings/theme.js
@@ -3,6 +3,7 @@ import { SliderPicker } from 'react-color';
 import PropTypes from 'prop-types';
 import Twemoji from 'react-twemoji';
 import { THEMES } from '../../consts/types';
+import Toggle from './toggle';
 
 class Theme extends Component {
   constructor() {
@@ -31,6 +32,7 @@ class Theme extends Component {
         plus_notif: {
           backgroundColor: '#D55161',
         },
+        showAvatar: true,
       },
     };
   }
@@ -43,6 +45,13 @@ class Theme extends Component {
     if (prevProps.theme !== this.props.theme) {
       const { theme } = this.props;
       const sharableTheme = `${theme.backgroundColor}, ${theme.item_card.backgroundColor}, ${theme.item_card.color}, ${theme.comment_card.backgroundColor}, ${theme.comment_card.color}, ${theme.plus_notif.backgroundColor}`;
+
+      const thumbColor = theme.comment_card.backgroundColor;
+
+      const styleElement = document.createElement('style');
+      styleElement.appendChild(document.createTextNode(`div ::-webkit-scrollbar-thumb {background: ${thumbColor}}`));
+      document.getElementsByTagName('head')[0].appendChild(styleElement);
+
       /**
        * Under if statement so it's okay to use
        */
@@ -84,8 +93,12 @@ class Theme extends Component {
       plus_notif: {
         backgroundColor: themeVals[5].replace(' ', ''),
       },
+      showAvatar: true,
     });
   }
+  handleAvatarChange(value) {
+    this.props.changeTheme(null, { ...this.state.theme, showAvatar: value });
+  }
   getTheme(key) {
     const { theme } = this.props;
     const selectedTheme = THEMES[key];
@@ -138,6 +151,7 @@ class Theme extends Component {
   }
   render() {
     const { theme } = this.state;
+    const showAvatar = typeof theme.showAvatar !== 'undefined' ? theme.showAvatar : true;
     return (
       <div
         className="theme_container"
@@ -146,6 +160,13 @@ class Theme extends Component {
         <div className="items_container">
           { this.getThemes() }
         </div>
+        <Toggle
+          setting={{ text: 'Show User Details on Rant Card in Feeds', value: showAvatar }}
+          handleChange={() => {
+            this.handleAvatarChange(!showAvatar);
+          }}
+          theme={this.props.theme}
+        />
         <div className="custom_theme">
           <div className="theme_settings">
             <h4>Custom</h4>

diff --git a/app/src/js/components/user/compact_user_card.js b/app/src/js/components/user/compact_user_card.js
@@ -66,7 +66,8 @@ class CompactUserCard extends Component {
     }
   }
   render() {
-    const { user, login } = this.props;
+    const { user, login, theme } = this.props;
+    const scoreback = theme.comment_card.backgroundColor === '#FFFFFF' ? '#000000' : theme.comment_card.backgroundColor;
     if (!user.profile) {
       return (
         <div className="devRant_placeholder">
@@ -106,7 +107,10 @@ class CompactUserCard extends Component {
           <div className="name">
             {profile.username}
           </div>
-          <div className="score">
+          <div
+            className="score"
+            style={{ backgroundColor: scoreback }}
+          >
             <p>+{profile.score}</p>
           </div>
         </div>
@@ -122,6 +126,7 @@ CompactUserCard.propTypes = {
   open: PropTypes.func.isRequired,
   user: PropTypes.object.isRequired,
   fetchUser: PropTypes.func.isRequired,
+  theme: PropTypes.object.isRequired,
 };
 
 export default CompactUserCard;
diff --git a/app/src/js/components/user/user_badge.js b/app/src/js/components/user/user_badge.js
@@ -22,10 +22,6 @@ class UserBadge extends Component {
       imageSource = `https://avatars.devrant.io/${user.avatar.i}`;
     }
 
-    // const c =
-    // ['dGFobmlr', 'RGFjZXhp', 'ZGZveA==', 'dHJvZ3Vz'].indexOf(btoa(user.username)) > -1 ?
-    // `#${user.avatar.b}` : '#ffffff';
-
     return (
       <div className="user_badge">
         <div className="image" onClick={() => this.openCard()}>
@@ -37,6 +33,7 @@ class UserBadge extends Component {
             userID={user.id}
             closeCard={() => this.closeCard()}
             open={open}
+            theme={theme}
           /> : null}
         <div className="details" onClick={() => this.openCard()}>
           <p>{user.username}</p>

diff --git a/app/src/js/components/user/user_card.js b/app/src/js/components/user/user_card.js
@@ -42,6 +42,7 @@ class UserCard extends Component {
   }
   getUser() {
     const user = this.state.user;
+    const { theme } = this.props;
 
     let imageSource = 'res/images/invis.png';
     if (user.avatar.i) {
@@ -63,7 +64,7 @@ class UserCard extends Component {
             <p>{user.username}</p>
             <span
               className="score"
-              style={{ backgroundColor: 'rgb(84, 85, 110)' }}
+              style={{ backgroundColor: theme.backgroundColor }}
             >{user.score}
             </span>
             {user.dpp === 1 &&
@@ -114,8 +115,17 @@ class UserCard extends Component {
     if (!this.state.user) {
       return <div />;
     }
+    const { theme } = this.props;
     return (
-      <div className="user_card" id="user_card" style={{ background: 'url(./res/images/profile_banner.png)' }}>
+      <div
+        className="user_card"
+        id="user_card"
+        style={{ background: 'url(./res/images/profile_banner.png)' }}
+      >
+        <div
+          className="background"
+          style={{ backgroundColor: theme.backgroundColor }}
+        />
         <div
           className="close"
           onClick={() => this.props.closeCard()}
@@ -133,6 +143,7 @@ UserCard.propTypes = {
   userID: PropTypes.number.isRequired,
   closeCard: PropTypes.func.isRequired,
   open: PropTypes.func.isRequired,
+  theme: PropTypes.object.isRequired,
 };
 
 export default UserCard;