Merge pull request #682 from vincentbavitz/brand-redesign

Created generalised icon button component

images/session/icon-back.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M442.27 0L122.27 320L442.27 640L517.73 564.53L273.2 320L517.73 75.47L442.27 0Z" id="cuPeB5UrI"></path></defs><g><g><g><use xlink:href="#cuPeB5UrI" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#cuPeB5UrI" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

images/session/icon-exit.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M628.27 68.33C643.91 52.71 643.91 27.36 628.27 11.74C612.64 -3.9 587.31 -3.9 571.68 11.74C554.9 28.52 471.01 112.41 320.01 263.41C169 112.41 85.1 28.52 68.32 11.74C52.69 -3.9 27.36 -3.9 11.73 11.74C-3.91 27.36 -3.91 52.71 11.73 68.33C28.51 85.11 112.4 169 263.41 320.01C112.4 471.01 28.51 554.9 11.73 571.68C-3.91 587.3 -3.91 612.65 11.73 628.27C19.55 636.08 29.79 639.99 40.02 639.99C50.26 639.99 60.5 636.08 68.32 628.26C85.1 611.48 169 527.59 320.01 376.59C471.01 527.59 554.9 611.48 571.68 628.26C579.5 636.08 589.74 639.99 599.98 639.99C610.21 639.99 620.45 636.08 628.27 628.26C643.91 612.64 643.91 587.29 628.27 571.67C611.49 554.89 527.6 471 376.6 320.01C527.6 169 611.49 85.11 628.27 68.33Z" id="a1PlFlmK0C"></path></defs><g><g><g><use xlink:href="#a1PlFlmK0C" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#a1PlFlmK0C" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

images/session/icon-favorite.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="-1 14.665305563793144 644 612.6693888724137" width="640" height="608.67"><defs><path d="M640 248.16L494.82 408.93L517.77 624.33L320 535.94L122.23 624.33L145.18 408.93L0 248.16L211.96 203.42L320 15.67L428.04 203.42L640 248.16ZM75.93 272.83L186.66 395.45L169.16 559.75L320 492.33L470.84 559.75L453.34 395.45L564.07 272.83L402.41 238.71L320 95.5L237.59 238.71L75.93 272.83Z" id="b34DkQmvT"></path></defs><g><g><use xlink:href="#b34DkQmvT" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#b34DkQmvT" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></svg>

images/session/icon-menu.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M320 240C275.82 240 240 275.82 240 320C240 364.18 275.82 400 320 400C364.18 400 400 364.18 400 320C400 275.82 364.18 240 320 240Z" id="aHLiD5Eyx"></path><path d="M320 480C275.82 480 240 515.82 240 560C240 604.18 275.82 640 320 640C364.18 640 400 604.18 400 560C400 515.82 364.18 480 320 480Z" id="c3xckQkYml"></path><path d="M320 0C275.82 0 240 35.82 240 80C240 124.18 275.82 160 320 160C364.18 160 400 124.18 400 80C400 35.82 364.18 0 320 0Z" id="i1WFOiY6Kf"></path></defs><g><g><g><use xlink:href="#aHLiD5Eyx" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#aHLiD5Eyx" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#c3xckQkYml" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#c3xckQkYml" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#i1WFOiY6Kf" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#i1WFOiY6Kf" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

js/modules/loki_app_dot_net_api.js

@@ -1308,11 +1308,16 @@ class LokiPublicChannelAPI {
     // filter out invalid messages
     pendingMessages = pendingMessages.filter(messageData => !!messageData);
     // separate messages coming from primary and secondary devices
-    const [primaryMessages, slaveMessages] = _.partition(pendingMessages, message => !(message.source in slavePrimaryMap));
+    const [primaryMessages, slaveMessages] = _.partition(
+      pendingMessages,
+      message => !(message.source in slavePrimaryMap)
+    );
     // process primary devices' message directly
-    primaryMessages.forEach(message => this.serverAPI.chatAPI.emit('publicMessage', {
-      message,
-    }));
+    primaryMessages.forEach(message =>
+      this.serverAPI.chatAPI.emit('publicMessage', {
+        message,
+      })
+    );
 
     pendingMessages = []; // allow memory to be freed
 

stylesheets/_session.scss

@@ -1,44 +1,106 @@
-$session-color-green: #00F782;
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
+  font-style: italic;
+}
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+$session-font-family: 'SpaceMono';
+
+$session-color-green: #00f782;
 $session-color-white: #fff;
 $session-color-black: #000;
 
+$session-transition-duration: 0.25s;
 
-$session-font-family: Waza;
+$session-icon-size-sm: 15px;
+$session-icon-size-md: 20px;
+$session-icon-size-lg: 30px;
 
 .session-button {
-    min-width: 165px;
-    width: auto;
-    height: 45px;
-    line-height: 45px;
-    padding: 0 35px 0 35px;
-    font-size: 15px;
-    font-family: $session-font-family;
-    font-weight: 700;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    border-radius: 500px;
-
-    @mixin transparent-background($textAndBorderColor) {
-        background-color: Transparent;
-        background-repeat:no-repeat;
-        overflow: hidden;
-        outline:none;
-        color: $textAndBorderColor;
-        border: 2px solid $textAndBorderColor;
-    }
-  
-    &.full-green {
-        background-color: $session-color-green;
-        color: $session-color-white;
-    }
-  
-    &.green {
-        @include transparent-background($session-color-green);
+  min-width: 165px;
+  width: auto;
+  height: 45px;
+  line-height: 45px;
+  padding: 0 35px 0 35px;
+  font-size: 15px;
+  font-family: $session-font-family;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  border-radius: 500px;
+
+  @mixin transparent-background($textAndBorderColor) {
+    background-color: Transparent;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    outline: none;
+    color: $textAndBorderColor;
+    border: 2px solid $textAndBorderColor;
+  }
+
+  &.full-green {
+    background-color: $session-color-green;
+    color: $session-color-white;
+  }
+
+  &.green {
+    @include transparent-background($session-color-green);
+  }
+
+  &.white {
+    @include transparent-background($session-color-white);
+  }
+}
+
+.session-icon-button {
+  fill: $session-color-white;
+  opacity: 0.4;
+  cursor: pointer;
+  display: inline-block;
+  transition: opacity $session-transition-duration;
+
+  @mixin adjust-icon-size($size) {
+    line-height: $size;
+    height: $size;
+    width: $size;
+
+    margin: $size / 3;
+
+    img {
+      height: $size;
+      width: $size;
     }
-      
-    &.white {
-        @include transparent-background($session-color-white);
-      }
   }
-  
+
+  &.small {
+    @include adjust-icon-size($session-icon-size-sm);
+  }
+
+  &.medium {
+    @include adjust-icon-size($session-icon-size-md);
+  }
+
+  &.large {
+    @include adjust-icon-size($session-icon-size-lg);
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}

stylesheets/manifest.scss

@@ -26,6 +26,5 @@
 @import 'modules';
 @import 'session';
 
-
 // Installer
 @import 'options';

ts/components/session/SessionButton.tsx

@@ -15,27 +15,22 @@ interface Props {
   buttonType: SessionButtonTypes;
 }
 
-
 export class SessionButton extends React.PureComponent<Props> {
-
   public render() {
-    const {
-      buttonType,
-      text
-    } = this.props;
+    const { buttonType, text } = this.props;
 
     return (
-        <div  
-          className={classNames(
-            'session-button',
-            buttonType === SessionButtonTypes.green? 'green' : '',
-            buttonType === SessionButtonTypes.fullGreen? 'full-green' : '',
-            buttonType === SessionButtonTypes.white? 'white' : '',
-            )}
-            role='button'
-        >
-          {text}
-        </div>
+      <div
+        className={classNames(
+          'session-button',
+          buttonType === SessionButtonTypes.green ? 'green' : '',
+          buttonType === SessionButtonTypes.fullGreen ? 'full-green' : '',
+          buttonType === SessionButtonTypes.white ? 'white' : ''
+        )}
+        role="button"
+      >
+        {text}
+      </div>
     );
   }
 }

ts/components/session/SessionIconButton.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import classNames from 'classnames';
+import { exists } from 'fs';
+
+export enum SessionIconButtonTypes {
+  'exit' = 'exit',
+  'search' = 'search',
+  'back' = 'back',
+  'attachment' = 'attachment',
+  'emoji' = 'emoji',
+  'favorite' = 'favorite',
+  'group' = 'group',
+  'menu' = 'menu',
+  'message' = 'message',
+  'microphone' = 'microphone',
+  'network' = 'network',
+  'options' = 'options',
+  'theme' = 'theme',
+}
+
+export enum SessionIconButtonSizes {
+  'small' = 'small',
+  'medium' = 'medium',
+  'large' = 'large',
+}
+
+interface Props {
+  iconType: SessionIconButtonTypes;
+  iconSize: SessionIconButtonSizes;
+  onClick: any;
+}
+
+export class SessionIconButton extends React.PureComponent<Props> {
+  constructor(props: any) {
+    super(props);
+    this.clickHandler = this.clickHandler.bind(this);
+  }
+
+  public render() {
+    const { iconType, iconSize } = this.props;
+
+    const iconPath = `./images/session/icon-${iconType}.svg`;
+
+    return (
+      <div
+        className={classNames(
+          'session-icon-button',
+          iconType === SessionIconButtonTypes.exit ? 'exit' : '',
+          iconType === SessionIconButtonTypes.search ? 'search' : '',
+          iconType === SessionIconButtonTypes.back ? 'back' : '',
+          iconSize === SessionIconButtonSizes.small ? 'small' : '',
+          iconSize === SessionIconButtonSizes.medium ? 'medium' : '',
+          iconSize === SessionIconButtonSizes.large ? 'large' : ''
+        )}
+        role="button"
+        onClick={e => {
+          this.clickHandler(e);
+        }}
+      >
+        <img src={iconPath} alt="Icon Button" />
+      </div>
+    );
+  }
+
+  private clickHandler(e: any) {
+    if (this.props.onClick) {
+      e.stopPropagation();
+      this.props.onClick();
+    }
+  }
+}