From 1be63b52b2d35cf8d6e8a6600d25a0c0893a6e07 Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 09:21:46 +1100 Subject: [PATCH 1/9] Show contact name on main header. --- stylesheets/_modules.scss | 15 ++++++++++++++- ts/components/MainHeader.tsx | 9 ++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index a2ecc0b96..6b373e578 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2182,13 +2182,19 @@ .module-main-header { height: $header-height; - margin-left: 16px; + padding-left: 16px; display: flex; flex-direction: row; align-items: center; + cursor: pointer; } +.module-main-header:hover { + background-color: $color-dark-75; +} + + .module-main-header__app-name { font-size: 16px; line-height: 24px; @@ -2197,6 +2203,13 @@ color: $color-dark-05; } +.module-main-header__contact-name { + font-weight: 300; + margin-left: 12px; + color: $color-dark-05; + overflow-x: auto; +} + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index d49911daa..35813f4dc 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Avatar } from './Avatar'; +import { ContactName } from './conversation/ContactName'; import { Localizer } from '../types/Util'; @@ -39,7 +40,13 @@ export class MainHeader extends React.Component { profileName={profileName} size={28} /> -
Loki Messenger
+
+ +
); } From cb3599eea8c41a02a86aab6a443e16e2af5bafde Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 09:30:31 +1100 Subject: [PATCH 2/9] Removed IdentityKeyHeader. --- background.html | 1 - js/modules/signal.js | 2 -- js/views/inbox_view.js | 24 ---------------- stylesheets/_index.scss | 44 +---------------------------- stylesheets/_theme_dark.scss | 10 ------- ts/components/IdentityKeyHeader.tsx | 38 ------------------------- 6 files changed, 1 insertion(+), 118 deletions(-) delete mode 100644 ts/components/IdentityKeyHeader.tsx diff --git a/background.html b/background.html index f5a05f2e8..865269d81 100644 --- a/background.html +++ b/background.html @@ -71,7 +71,6 @@ -
diff --git a/js/modules/signal.js b/js/modules/signal.js index 4ed80eba7..b7755f25b 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -43,7 +43,6 @@ const { MediaGallery, } = require('../../ts/components/conversation/media-gallery/MediaGallery'); const { MainHeader } = require('../../ts/components/MainHeader'); -const { IdentityKeyHeader } = require('../../ts/components/IdentityKeyHeader'); const { Message } = require('../../ts/components/conversation/Message'); const { MessageBody } = require('../../ts/components/conversation/MessageBody'); const { @@ -185,7 +184,6 @@ exports.setup = (options = {}) => { Lightbox, LightboxGallery, MainHeader, - IdentityKeyHeader, MediaGallery, Message, MessageBody, diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 74980bae6..cd3c13c56 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -115,16 +115,6 @@ this.listenTo(me, 'change', update); this.$('.main-header-placeholder').append(this.mainHeaderView.el); - this.identityKeyView = new Whisper.ReactWrapperView({ - className: 'identity-key-wrapper', - Component: Signal.Components.IdentityKeyHeader, - props: this._getIdentityKeyViewProps(), - }); - this.on('updateProfile', () => { - this.identityKeyView.update(this._getIdentityKeyViewProps()); - }) - this.$('.identity-key-placeholder').append(this.identityKeyView.el); - this.conversation_stack = new Whisper.ConversationStack({ el: this.$('.conversation-stack'), model: { window: options.window }, @@ -221,20 +211,6 @@ this.$el.addClass('expired'); } }, - _getIdentityKeyViewProps() { - const identityKey = textsecure.storage.get('identityKey').pubKey; - const pubKey = StringView.arrayBufferToHex(identityKey); - const profile = storage.getLocalProfile(); - const name = profile && profile.name && profile.name.displayName; - - return { - identityKey: pubKey, - name, - onEditProfile: async () => { - window.Whisper.events.trigger('onEditProfile'); - }, - } - }, render_attributes() { return { welcomeToSignal: i18n('welcomeToSignal'), diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 711ee8152..d9711c1d4 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -142,51 +142,9 @@ } } -.identity-key-wrapper { - background-color: $color-black-008-no-tranparency; - display: flex; - flex: 1; - height: $header-height; - padding-left: 16px; - padding-right: 16px; -} - -.identity-key-container { - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - justify-content: space-around; - white-space: nowrap; - overflow-x: hidden; -} - -.identity-key-text-container { - flex: 1; - text-align: center; - flex-direction: column; -} - -.identity-key-container div { - overflow-x: hidden; - text-overflow: ellipsis; -} - -.identity-key_bold { - font-weight: bold; -} - -.identity-key-wrapper__pencil-icon { - @include color-svg('../images/lead-pencil.svg', $color-gray-60); - height: 20px; - width: 20px; - margin-left: 4px; - cursor: pointer; -} - .underneathIdentityWrapper { position: absolute; - top: $header-height; + top: 0; bottom: 0; left: 300px; right: 0; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 8cfea9fe2..7d9137355 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -6,16 +6,6 @@ body.dark-theme { } .dark-theme { - // identity key - .identity-key-wrapper { - background-color:$color-gray-85; - } - - .identity-key-wrapper__pencil-icon { - @include color-svg('../images/lead-pencil.svg', $color-gray-25); - } - - // _conversation .conversation { diff --git a/ts/components/IdentityKeyHeader.tsx b/ts/components/IdentityKeyHeader.tsx deleted file mode 100644 index a345cef0e..000000000 --- a/ts/components/IdentityKeyHeader.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -interface Props { - identityKey: string; - name?: string; - onEditProfile: () => void; -} - -export class IdentityKeyHeader extends React.Component { - public render() { - const { - name, - identityKey, - onEditProfile, - } = this.props; - - return ( -
-
-
- Your identity key: {identityKey} -
- {!!name && -
- Your display name: {name} -
- } -
-
-
- ); - } -} From c6d1c8303e3a9c9200495c79717e536eaae30fca Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 09:54:09 +1100 Subject: [PATCH 3/9] Added a validation to check if a pubkey is prefixed by 05. --- js/models/conversations.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/models/conversations.js b/js/models/conversations.js index 54478ff9d..b5574d5a1 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -869,6 +869,11 @@ this.set({ id: this.id }); return 'Invalid ID Length'; } + + // Check if the id is prefixed by 05 + if (!/^05/.test(this.id)) { + return 'Invalid Pubkey Format'; + } } return null; From a807b6eacdd8252124163bd2cf96cc05a8c01630 Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 10:20:47 +1100 Subject: [PATCH 4/9] Show expand icon on main header. --- stylesheets/_modules.scss | 26 ++++++++++++++++++++++++++ ts/components/MainHeader.tsx | 6 +++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 6b373e578..ac9184013 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2194,6 +2194,31 @@ background-color: $color-dark-75; } +.module-main-header__expand-icon { + width: 3em; + line-height: 3em; + font-weight: bold; + overflow: hidden; + user-select: none; + color: white; + text-align: center; +} + +.module-main-header__expand-icon::after { + -webkit-transition: all .35s; + -o-transition: all .35s; + transition: all .35s; + width: 3em; + line-height: 3em; + height: 3em; + content: '\25BE'; + display: inline-block; +} + +.module-main-header__expanded::after { + transform: rotate(180deg); +} + .module-main-header__app-name { font-size: 16px; @@ -2208,6 +2233,7 @@ margin-left: 12px; color: $color-dark-05; overflow-x: auto; + flex: 1; } // Third-party module: react-contextmenu diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index 35813f4dc..da0a358d8 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -26,10 +26,11 @@ export class MainHeader extends React.Component { name, phoneNumber, profileName, + onClick } = this.props; return ( -
+
{ i18n={i18n} />
+
); } From 14ecbc3f3522a2715284c437f0817dbd2d67b482 Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 10:28:43 +1100 Subject: [PATCH 5/9] Moved MainHeader into its own Backbone View. --- background.html | 7 +++++++ js/views/inbox_view.js | 11 ++--------- js/views/main_header_view.js | 38 ++++++++++++++++++++++++++++++++++++ stylesheets/_modules.scss | 28 ++++++++++++++++++-------- test/index.html | 1 + ts/components/MainHeader.tsx | 3 --- 6 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 js/views/main_header_view.js diff --git a/background.html b/background.html index 865269d81..c39cdce82 100644 --- a/background.html +++ b/background.html @@ -87,6 +87,12 @@
+ + diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index cd3c13c56..a99011d8e 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -104,16 +104,9 @@ // eslint-disable-next-line no-new new Whisper.FontSizeView({ el: this.$el }); - const ourNumber = textsecure.storage.user.getNumber(); - const me = ConversationController.getOrCreate(ourNumber, 'private'); - this.mainHeaderView = new Whisper.ReactWrapperView({ - className: 'main-header-wrapper', - Component: Signal.Components.MainHeader, - props: me.format(), + this.mainHeaderView = new Whisper.MainHeaderView({ + el: this.$('.main-header-placeholder'), }); - const update = () => this.mainHeaderView.update(me.format()); - this.listenTo(me, 'change', update); - this.$('.main-header-placeholder').append(this.mainHeaderView.el); this.conversation_stack = new Whisper.ConversationStack({ el: this.$('.conversation-stack'), diff --git a/js/views/main_header_view.js b/js/views/main_header_view.js new file mode 100644 index 000000000..7c41053b9 --- /dev/null +++ b/js/views/main_header_view.js @@ -0,0 +1,38 @@ +/* global Whisper, textsecure, ConversationController, Signal */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.MainHeaderView = Whisper.View.extend({ + templateName: 'main-header-placeholder', + events: { + 'click .main-header-title-wrapper': 'onClick', + }, + initialize() { + const ourNumber = textsecure.storage.user.getNumber(); + const me = ConversationController.getOrCreate(ourNumber, 'private'); + + this.mainHeaderView = new Whisper.ReactWrapperView({ + className: 'main-header-wrapper', + Component: Signal.Components.MainHeader, + props: me.format(), + }); + const update = () => this.mainHeaderView.update(me.format()); + this.listenTo(me, 'change', update); + + this.render(); + + this.$('.main-header-title-wrapper').prepend(this.mainHeaderView.el); + this.$content = this.$('.main-header-content-wrapper'); + this.$toggle = this.$('.main-header-content-toggle'); + }, + onClick() { + // Toggle section visibility + this.$content.slideToggle('fast'); + this.$toggle.toggleClass('main-header-content-toggle-visible'); + }, + }); + })(); diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index ac9184013..9804c617d 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2180,6 +2180,23 @@ // Module: Main Header +.main-header-title-wrapper { + flex: 1; + flex-direction: row; + display: flex; + align-items: center; + cursor: pointer; +} + +.main-header-title-wrapper:hover { + background-color: $color-dark-75; +} + +.main-header-wrapper { + overflow-x: hidden; + flex: 1; +} + .module-main-header { height: $header-height; padding-left: 16px; @@ -2187,14 +2204,9 @@ display: flex; flex-direction: row; align-items: center; - cursor: pointer; -} - -.module-main-header:hover { - background-color: $color-dark-75; } -.module-main-header__expand-icon { +.main-header-content-toggle{ width: 3em; line-height: 3em; font-weight: bold; @@ -2204,7 +2216,7 @@ text-align: center; } -.module-main-header__expand-icon::after { +.main-header-content-toggle::after { -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; @@ -2215,7 +2227,7 @@ display: inline-block; } -.module-main-header__expanded::after { +.main-header-content-toggle-visible::after { transform: rotate(180deg); } diff --git a/test/index.html b/test/index.html index 9dbcf2fa2..fdf60a6cc 100644 --- a/test/index.html +++ b/test/index.html @@ -374,6 +374,7 @@ + diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index da0a358d8..0f81533bb 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -48,9 +48,6 @@ export class MainHeader extends React.Component { i18n={i18n} />
-
); } From 1cb09cad2a23e5e0f4297884f6bdbf3bcaa510e6 Mon Sep 17 00:00:00 2001 From: Mikunj Date: Mon, 3 Dec 2018 11:19:45 +1100 Subject: [PATCH 6/9] Add header options. --- _locales/en/messages.json | 13 ++++++++++++ background.html | 6 +++++- js/views/inbox_view.js | 29 ++++++++++++++++++++++--- js/views/main_header_view.js | 31 +++++++++++++++++++++------ js/views/toast_view.js | 9 ++++++++ preload.js | 3 +++ stylesheets/_index.scss | 5 +++++ stylesheets/_modules.scss | 41 ++++++++++++++++++++++++------------ stylesheets/_variables.scss | 1 + 9 files changed, 115 insertions(+), 23 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f431e22ce..15c65f464 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1656,5 +1656,18 @@ "editProfileDisplayNameWarning": { "message": "Note: Your display name will be visible to your contacts", "description": "Shown to the user as a warning about setting display name" + }, + + "copyPublicKey": { + "message": "Copy public key", + "description": "Button action that the user can click to copy their public keys" + }, + "copiedPublicKey": { + "message": "Copied public key", + "description": "A toast message telling the user that the key was copied" + }, + "editDisplayName": { + "message": "Edit display name", + "description": "Button action that the user can click to edit their display name" } } diff --git a/background.html b/background.html index c39cdce82..d011f79f9 100644 --- a/background.html +++ b/background.html @@ -91,7 +91,11 @@
-
+
+ {{ #items }} +
{{ text }}
+ {{ /items }} +