diff --git a/fonts/SpaceMono-Bold.ttf b/fonts/SpaceMono-Bold.ttf new file mode 100644 index 000000000..4acd36ac3 Binary files /dev/null and b/fonts/SpaceMono-Bold.ttf differ diff --git a/fonts/SpaceMono-BoldItalic.ttf b/fonts/SpaceMono-BoldItalic.ttf new file mode 100644 index 000000000..070247553 Binary files /dev/null and b/fonts/SpaceMono-BoldItalic.ttf differ diff --git a/fonts/SpaceMono-Italic.ttf b/fonts/SpaceMono-Italic.ttf new file mode 100644 index 000000000..87997387f Binary files /dev/null and b/fonts/SpaceMono-Italic.ttf differ diff --git a/fonts/SpaceMono-Regular.ttf b/fonts/SpaceMono-Regular.ttf new file mode 100644 index 000000000..28d7ff717 Binary files /dev/null and b/fonts/SpaceMono-Regular.ttf differ diff --git a/images/session/icon-attachment.svg b/images/session/icon-attachment.svg new file mode 100644 index 000000000..4bad555ff --- /dev/null +++ b/images/session/icon-attachment.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-back.svg b/images/session/icon-back.svg new file mode 100644 index 000000000..7a9bdeeab --- /dev/null +++ b/images/session/icon-back.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-exit.svg b/images/session/icon-exit.svg new file mode 100644 index 000000000..183e31b3f --- /dev/null +++ b/images/session/icon-exit.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-favorite.svg b/images/session/icon-favorite.svg new file mode 100644 index 000000000..13b82fbb5 --- /dev/null +++ b/images/session/icon-favorite.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-group.svg b/images/session/icon-group.svg new file mode 100644 index 000000000..98452d2cf --- /dev/null +++ b/images/session/icon-group.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-menu.svg b/images/session/icon-menu.svg new file mode 100644 index 000000000..96c42f086 --- /dev/null +++ b/images/session/icon-menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-message.svg b/images/session/icon-message.svg new file mode 100644 index 000000000..1ced1a524 --- /dev/null +++ b/images/session/icon-message.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-microphone.svg b/images/session/icon-microphone.svg new file mode 100644 index 000000000..1018297e3 --- /dev/null +++ b/images/session/icon-microphone.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-network.svg b/images/session/icon-network.svg new file mode 100644 index 000000000..62d545075 --- /dev/null +++ b/images/session/icon-network.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-options.svg b/images/session/icon-options.svg new file mode 100644 index 000000000..d007b5530 --- /dev/null +++ b/images/session/icon-options.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-search.svg b/images/session/icon-search.svg new file mode 100644 index 000000000..408a25ce3 --- /dev/null +++ b/images/session/icon-search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/session/icon-theme.svg b/images/session/icon-theme.svg new file mode 100644 index 000000000..95f578573 --- /dev/null +++ b/images/session/icon-theme.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js index cc6f756e0..433ff9632 100644 --- a/js/modules/loki_app_dot_net_api.js +++ b/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 diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 9ad4bfc25..fc84eb69b 100644 --- a/stylesheets/_session.scss +++ b/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); - } } - \ No newline at end of file + + &.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; + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 430d34384..4743fd005 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -26,6 +26,5 @@ @import 'modules'; @import 'session'; - // Installer @import 'options'; diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx index dba3a9731..858689c00 100644 --- a/ts/components/session/SessionButton.tsx +++ b/ts/components/session/SessionButton.tsx @@ -15,27 +15,22 @@ interface Props { buttonType: SessionButtonTypes; } - export class SessionButton extends React.PureComponent { - public render() { - const { - buttonType, - text - } = this.props; + const { buttonType, text } = this.props; return ( -
- {text} -
+
+ {text} +
); } } diff --git a/ts/components/session/SessionIconButton.tsx b/ts/components/session/SessionIconButton.tsx new file mode 100644 index 000000000..7e3ea82fb --- /dev/null +++ b/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 { + 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 ( +
{ + this.clickHandler(e); + }} + > + Icon Button +
+ ); + } + + private clickHandler(e: any) { + if (this.props.onClick) { + e.stopPropagation(); + this.props.onClick(); + } + } +}