Merge pull request #3192 from withspectrum/desktop-polish

Desktop polish

Author: brianlovin

desktop/src/config.js

@@ -19,7 +19,7 @@ module.exports = {
 
   WINDOW_MIN_HEIGHT: 500,
   WINDOW_MIN_WIDTH: 770,
-  WINDOW_BG_COLOR: '#FFFFFF',
+  WINDOW_BG_COLOR: '#F5F8FC',
 
   ICON: resolve(__dirname, '../resources/icons/png/icon-512x512.png'),
 };

desktop/src/main.js

@@ -1,5 +1,6 @@
 // @flow
-const { app, BrowserWindow } = require('electron');
+const electron = require('electron');
+const { app, BrowserWindow } = electron;
 const isDev = require('electron-is-dev');
 
 const checkForUpdates = require('./autoUpdate');
@@ -10,7 +11,6 @@ const CONFIG = require('./config');
 // be closed automatically when the JavaScript object is garbage collected.
 // eslint-disable-next-line
 let win;
-let splash;
 let mainWindow;
 
 const startUrl = isDev ? CONFIG.APP_DEV_URL : CONFIG.APP_REMOTE_URL;
@@ -21,20 +21,13 @@ function createWindow() {
     checkForUpdates();
   }
 
-  // create a `splash` window
-  splash = new BrowserWindow({
-    width: 768,
-    height: 408,
-    transparent: true,
-    frame: false,
-    alwaysOnTop: true,
-  });
-  splash.loadURL(`file://${__dirname}/splash.html`);
+  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
 
   // Create the main browser window.
   mainWindow = new BrowserWindow({
-    height: 800,
-    width: 1300,
+    width,
+    height,
+    titleBarStyle: 'hiddenInset',
     minHeight: CONFIG.WINDOW_MIN_HEIGHT,
     minWidth: CONFIG.WINDOW_MIN_WIDTH,
     backgroundColor: CONFIG.WINDOW_BG_COLOR,
@@ -59,12 +52,13 @@ function createWindow() {
 
   mainWindow.on('closed', () => {
     win = null;
+    mainWindow = null;
   });
 
-  // if main window is ready to show, then destroy the splash window and show up the main window
+  // if main window is ready to show, show up the main window
   mainWindow.once('ready-to-show', () => {
-    splash.destroy();
-    mainWindow.show();
+    mainWindow && mainWindow.maximize();
+    mainWindow && mainWindow.show();
   });
 }
 
@@ -85,7 +79,21 @@ app.on('window-all-closed', () => {
 app.on('activate', () => {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
+  if (mainWindow !== null) mainWindow.show();
+
+  if (win === null && mainWindow === null) {
     createWindow();
   }
 });
+
+app.on('web-contents-created', (event, wc) => {
+  wc.on('before-input-event', (event, input) => {
+    if (input.key === ']' && input.meta && !input.shift && !input.control) {
+      if (wc.canGoForward()) wc.goForward();
+    }
+
+    if (input.key === '[' && input.meta && !input.shift && !input.control) {
+      if (wc.canGoBack()) wc.goBack();
+    }
+  });
+});

desktop/src/menu.js

@@ -25,6 +25,7 @@ const template = [
         },
       },
       { type: 'separator' },
+      { role: 'hide' },
       { role: 'quit' },
     ],
   },

desktop/src/splash.html

@@ -1,12 +1,7 @@
 // @flow
 import styled, { css } from 'styled-components';
-import {
-  Transition,
-  Shadow,
-  zIndex,
-  hexa,
-  Gradient,
-} from '../../components/globals';
+import { Transition, Shadow, zIndex, hexa } from '../../components/globals';
+import { isDesktopApp } from 'src/helpers/is-desktop-app';
 
 export const Wrapper = styled.div`
   display: inline-block;
@@ -58,14 +53,14 @@ export const MenuContainer = styled.div`
   left: 0;
   top: 0;
   bottom: 0;
-  height: ${props => (props.hasTabBar ? 'calc(100% - 48px)' : '100%')};
+  height: ${props =>
+    props.hasTabBar ? (isDesktopApp() ? '100%' : 'calc(100% - 48px)') : '100%'};
   width: 300px;
   color: ${props => props.theme.brand.alt};
-  background-color: ${props => props.theme.bg.default};
-  background-image: ${props =>
-    Gradient(props.theme.bg.default, props.theme.bg.wash)};
+  background-color: ${props => props.theme.bg.wash};
   box-shadow: ${Shadow.high} ${props => hexa(props.theme.bg.reverse, 0.25)};
-  padding-top: ${props => (props.hasNavBar ? '48px' : '0')};
+  padding-top: ${props =>
+    props.hasNavBar ? '48px' : isDesktopApp() ? '40px' : '0'};
   z-index: ${zIndex.fullscreen + 1};
 `;
 

src/components/menu/style.js

@@ -241,6 +241,7 @@ export const CommunityListScroller = styled.div`
   overflow: hidden;
   overflow-y: auto;
   position: relative;
+  padding-top: 1px;
 `;
 
 export const CommunityListWrapper = styled.div`

src/views/dashboard/style.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
-import Icon from '../../../components/icons';
-import { isDesktopApp } from '../../../helpers/is-desktop-app';
-import viewNetworkHandler from '../../../components/viewNetworkHandler';
-import { updateNotificationsCount } from '../../../actions/notifications';
+import Icon from 'src/components/icons';
+import { isDesktopApp } from 'src/helpers/is-desktop-app';
+import viewNetworkHandler from 'src/components/viewNetworkHandler';
+import { updateNotificationsCount } from 'src/actions/notifications';
 import getUnreadDMQuery from 'shared/graphql/queries/notification/getDirectMessageNotifications';
 import type { GetDirectMessageNotificationsType } from 'shared/graphql/queries/notification/getDirectMessageNotifications';
 import markDirectMessageNotificationsSeenMutation from 'shared/graphql/mutations/notification/markDirectMessageNotificationsSeen';
@@ -223,6 +223,7 @@ class MessagesTab extends React.Component<Props, State> {
         <Icon
           glyph={count > 0 ? 'message-fill' : 'message'}
           count={count > 10 ? '10+' : count > 0 ? count.toString() : null}
+          size={isDesktopApp() ? 28 : 32}
         />
         <Label>Messages</Label>
       </Tab>

src/views/navbar/components/messagesTab.js

@@ -4,10 +4,10 @@ import { withApollo } from 'react-apollo';
 import { connect } from 'react-redux';
 import queryString from 'query-string';
 import compose from 'recompose/compose';
-import { isDesktopApp } from '../../../helpers/is-desktop-app';
-import Icon from '../../../components/icons';
-import viewNetworkHandler from '../../../components/viewNetworkHandler';
-import { updateNotificationsCount } from '../../../actions/notifications';
+import { isDesktopApp } from 'src/helpers/is-desktop-app';
+import Icon from 'src/components/icons';
+import viewNetworkHandler from 'src/components/viewNetworkHandler';
+import { updateNotificationsCount } from 'src/actions/notifications';
 import { NotificationDropdown } from './notificationDropdown';
 import getNotifications from 'shared/graphql/queries/notification/getNotifications';
 import type { GetNotificationsType } from 'shared/graphql/queries/notification/getNotifications';
@@ -407,6 +407,7 @@ class NotificationsTab extends React.Component<Props, State> {
           <Icon
             glyph={count > 0 ? 'notification-fill' : 'notification'}
             count={count > 10 ? '10+' : count > 0 ? count.toString() : null}
+            size={isDesktopApp() ? 28 : 32}
           />
           <Label hideOnDesktop>Notifications</Label>
         </Tab>

src/views/navbar/components/notificationsTab.js

@@ -24,6 +24,7 @@ import {
 } from './style';
 import { track, events } from 'src/helpers/analytics';
 import { isViewingMarketingPage } from 'src/helpers/is-viewing-marketing-page';
+import { isDesktopApp } from 'src/helpers/is-desktop-app';
 
 type Props = {
   isLoading: boolean,
@@ -184,7 +185,7 @@ class Navbar extends React.Component<Props, State> {
             onClick={() => this.trackNavigationClick('home')}
             data-cy="navbar-home"
           >
-            <Icon glyph="home" />
+            <Icon glyph="home" size={isDesktopApp() ? 28 : 32} />
             <Label>Home</Label>
           </HomeTab>
 
@@ -198,7 +199,7 @@ class Navbar extends React.Component<Props, State> {
             onClick={() => this.trackNavigationClick('explore')}
             data-cy="navbar-explore"
           >
-            <Icon glyph="explore" />
+            <Icon glyph="explore" size={isDesktopApp() ? 28 : 32} />
             <Label>Explore</Label>
           </ExploreTab>
 

src/views/navbar/index.js

@@ -1,21 +1,26 @@
 import styled, { css } from 'styled-components';
 import Link from 'src/components/link';
-import { Transition, FlexRow, hexa, zIndex } from '../../components/globals';
-import Avatar from '../../components/avatar';
+import { Transition, FlexRow, hexa, zIndex } from 'src/components/globals';
+import Avatar from 'src/components/avatar';
+import { isDesktopApp } from 'src/helpers/is-desktop-app';
 
 export const Nav = styled.nav`
   display: grid;
   grid-template-columns: repeat(4, auto) 1fr repeat(2, auto);
   grid-template-rows: 1fr;
   grid-template-areas: 'logo home messages explore . notifications profile';
   align-items: stretch;
-  padding: 0 32px;
   width: 100%;
-  flex: 0 0 48px;
+  flex: 0 0 ${isDesktopApp() ? '38px' : '48px'};
   padding: 0 16px;
   line-height: 1;
   box-shadow: 0 4px 8px ${({ theme }) => hexa(theme.bg.reverse, 0.15)};
   z-index: ${zIndex.navBar};
+  ${isDesktopApp() &&
+    css`
+      -webkit-app-region: drag;
+      user-select: none;
+    `}
   background: ${({ theme }) =>
     process.env.NODE_ENV === 'production' ? theme.bg.reverse : theme.warn.alt};
 
@@ -51,17 +56,17 @@ export const Nav = styled.nav`
         grid-template-areas: 'home explore support pricing';
       }
     `} ${props =>
-    props.hideOnMobile &&
-    css`
-      @media (max-width: 768px) {
-        display: none;
-      }
-    `};
+  props.hideOnMobile &&
+  css`
+    @media (max-width: 768px) {
+      display: none;
+    }
+  `};
 `;
 
 export const Label = styled.span`
   font-size: 14px;
-  font-weight: 700;
+  font-weight: ${isDesktopApp() ? '500' : '700'};
   margin-left: 12px;
 
   ${props =>
@@ -87,7 +92,7 @@ export const Tab = styled(Link)`
   grid-template-areas: 'icon label';
   align-items: center;
   justify-items: center;
-  padding: 0 16px;
+  padding: ${isDesktopApp() ? '0 12px' : '0 16px'};
   color: ${({ theme }) =>
     process.env.NODE_ENV === 'production'
       ? theme.text.placeholder
@@ -104,20 +109,26 @@ export const Tab = styled(Link)`
 
   @media (min-width: 768px) {
     &[data-active~='true'] {
-      box-shadow: inset 0 -4px 0 ${({ theme }) => theme.text.reverse};
+      box-shadow: inset 0 ${isDesktopApp() ? '-2px' : '-4px'} 0
+        ${({ theme }) => theme.text.reverse};
       color: ${props => props.theme.text.reverse};
       transition: ${Transition.hover.on};
 
       &:hover,
       &:focus {
-        box-shadow: inset 0 -6px 0 ${({ theme }) => theme.text.reverse};
+        box-shadow: inset 0 ${isDesktopApp() ? '-2px' : '-4px'} 0
+          ${({ theme }) => theme.text.reverse};
         transition: ${Transition.hover.on};
       }
     }
 
     &:hover,
     &:focus {
-      box-shadow: inset 0 -4px 0 ${({ theme }) => (process.env.NODE_ENV === 'production' ? theme.text.placeholder : theme.warn.border)};
+      box-shadow: inset 0 ${isDesktopApp() ? '-2px' : '-4px'} 0
+        ${({ theme }) =>
+          process.env.NODE_ENV === 'production'
+            ? theme.text.placeholder
+            : theme.warn.border};
       color: ${props => props.theme.text.reverse};
       transition: ${Transition.hover.on};
     }
@@ -200,11 +211,14 @@ export const DropTab = styled(FlexRow)`
 
 export const Logo = styled(Tab)`
   grid-area: logo;
-  padding: 0 24px 0 4px;
+  padding: ${isDesktopApp() ? '0 32px 0 4px' : '0 24px 0 4px'};
   color: ${({ theme }) => theme.text.reverse};
   opacity: 1;
 
-  &:hover {
+  ${isDesktopApp() &&
+    css`
+      visibility: hidden;
+    `} &:hover {
     box-shadow: none;
   }