From 330a070fdf2be04a414b8cf9afde00e1f815a41a Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 13:51:35 +1100 Subject: [PATCH 1/9] Height params adjusted to fit modals --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index ca2a1558a..a555c3b7c 100644 --- a/main.js +++ b/main.js @@ -198,10 +198,10 @@ function captureClicks(window) { window.webContents.on('new-window', handleUrl); } -const DEFAULT_WIDTH = 800; +const DEFAULT_WIDTH = 880; const DEFAULT_HEIGHT = 720; const MIN_WIDTH = 880; -const MIN_HEIGHT = 580; +const MIN_HEIGHT = 720; const BOUNDS_BUFFER = 100; function isVisible(window, bounds) { From 513fe8f9777cab91a514fd0d80d33a6211a352ac Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:03:58 +1100 Subject: [PATCH 2/9] Updated nulled modal buttons --- js/views/create_group_dialog_view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/views/create_group_dialog_view.js b/js/views/create_group_dialog_view.js index 8a5cb9e30..a2bc8d78e 100644 --- a/js/views/create_group_dialog_view.js +++ b/js/views/create_group_dialog_view.js @@ -165,9 +165,9 @@ props: { titleText: this.titleText, groupName: this.groupName, - okText: this.okText, + okText: i18n('ok'), + cancelText: i18n('cancel'), isPublic: this.isPublic, - cancelText: this.cancelText, existingMembers: this.existingMembers, friendList: this.friendsAndMembers, isAdmin: this.isAdmin, From b1f93a0c2508b81efa92daa12167ca0cb62e2695 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:04:48 +1100 Subject: [PATCH 3/9] Group timer options scroll unification --- stylesheets/_session.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index c9110eb91..5cd6b1fd6 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -963,7 +963,7 @@ label { list-style: none; padding: 0px; margin: 0px; - max-height: 450px; + max-height: 40vh; overflow-y: auto; } From e5390d54f45c866f59b41be814c4773b46a7e835 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:12:12 +1100 Subject: [PATCH 4/9] memberlist item alignment --- stylesheets/_session.scss | 4 ++++ ts/components/conversation/UpdateGroupMembersDialog.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 5cd6b1fd6..0f973477c 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1872,6 +1872,10 @@ input { margin-left: 5px; opacity: 0.8; } + + &__avatar > div { + margin-bottom: 0; + } } .invite-friends-container { diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx index 215c52ca7..6ce0f302b 100644 --- a/ts/components/conversation/UpdateGroupMembersDialog.tsx +++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx @@ -124,6 +124,7 @@ export class UpdateGroupMembersDialog extends React.Component { 'noMembersInThisGroup' )})`}

+
From 1fd0c8168f1870efe2338ef491c1cf0be105f3e7 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:30:53 +1100 Subject: [PATCH 5/9] Memberlist modal strict styling --- stylesheets/_mentions.scss | 4 +--- stylesheets/_session.scss | 19 ++++++++++++++++--- ts/components/DevicePairingDialog.tsx | 6 +++--- .../conversation/UpdateGroupMembersDialog.tsx | 15 +++++++++++++-- ts/components/session/SessionConfirm.tsx | 4 ++-- .../session/SessionGroupSettings.tsx | 2 +- ts/components/session/SessionQRModal.tsx | 2 +- ts/components/session/SessionSeedModal.tsx | 2 +- 8 files changed, 38 insertions(+), 16 deletions(-) diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 104164dea..eded63c8b 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -82,7 +82,7 @@ .error-faded { opacity: 0; - margin-top: -20px; + margin-top: -5px; transition: all 100ms linear; } @@ -96,8 +96,6 @@ max-height: 240px; overflow-y: auto; margin: 4px; - border-top: 1px solid #2f2f2f; - border-bottom: 1px solid #2f2f2f; .check-mark { float: right; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 0f973477c..f17490060 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -140,11 +140,11 @@ div.spacer-lg { transition: filter 0.1s; } -.text-subtle { +.subtle { opacity: 0.6; } -.text-soft { +.soft { opacity: 0.4; } @@ -848,6 +848,12 @@ label { .friend-selection-list { width: unset; } + + .create-group-dialog__member-count { + text-align: center; + margin-top: -25px; + opacity: 0.6; + } } .session-confirm { @@ -1845,6 +1851,13 @@ input { justify-content: space-between; transition: $session-transition-duration; + &:first-child { + border-top: 1px solid rgba($session-shade-8, 0.6); + } + &:last-child { + border-bottom: 1px solid rgba($session-shade-8, 0.6); + } + &.selected { background-color: $session-shade-4; } @@ -1874,7 +1887,7 @@ input { } &__avatar > div { - margin-bottom: 0; + margin-bottom: 0px !important; } } diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx index 1cbb71131..c19640f86 100644 --- a/ts/components/DevicePairingDialog.tsx +++ b/ts/components/DevicePairingDialog.tsx @@ -120,7 +120,7 @@ export class DevicePairingDialog extends React.Component {
-
{secretWords}
+
{secretWords}
@@ -148,7 +148,7 @@ export class DevicePairingDialog extends React.Component {
{this.renderErrors()}

{window.i18n('waitingForDeviceToRegister')}

- + {window.i18n('pairNewDevicePrompt')}
@@ -199,7 +199,7 @@ export class DevicePairingDialog extends React.Component {

{window.i18n('confirmUnpairingTitle')}
- {description} + {description}

diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx index 6ce0f302b..98ef15e0e 100644 --- a/ts/components/conversation/UpdateGroupMembersDialog.tsx +++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx @@ -93,7 +93,7 @@ export class UpdateGroupMembersDialog extends React.Component { noFriendsClasses = classNames('no-friends', 'hidden'); } else { // private group - titleText = `${this.props.titleText} (Members: ${checkMarkedCount})`; + titleText = this.props.titleText; noFriendsClasses = this.state.friendList.length === 0 ? 'no-friends' @@ -114,6 +114,16 @@ export class UpdateGroupMembersDialog extends React.Component { onOk={() => null} >
+ + {!this.props.isPublic && ( + <> + + {`${checkMarkedCount} members`} + +
+ + )} +

{errorMsg}

@@ -124,7 +134,8 @@ export class UpdateGroupMembersDialog extends React.Component { 'noMembersInThisGroup' )})`}

-
+
+
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 1e3595499..2b43cc543 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -48,7 +48,7 @@ export class SessionConfirm extends React.Component { const messageSubText = messageSub ? 'session-confirm-main-message' - : 'text-subtle'; + : 'subtle'; return ( {
{message} {messageSub && ( - + {messageSub} )} diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index 123f17d23..919cf0876 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -240,7 +240,7 @@ export class SessionGroupSettings extends React.Component { {showMemberCount && ( <>
-
+
{window.i18n('members', memberCount)}
diff --git a/ts/components/session/SessionQRModal.tsx b/ts/components/session/SessionQRModal.tsx index 97f613c8d..dc71ee4cd 100644 --- a/ts/components/session/SessionQRModal.tsx +++ b/ts/components/session/SessionQRModal.tsx @@ -29,7 +29,7 @@ export class SessionQRModal extends React.Component { >
-
+
diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx index e9d461bd9..ed5fdb242 100644 --- a/ts/components/session/SessionSeedModal.tsx +++ b/ts/components/session/SessionSeedModal.tsx @@ -121,7 +121,7 @@ export class SessionSeedModal extends React.Component {

{i18n('seedSavePromptMain')}
- {i18n('seedSavePromptAlt')} + {i18n('seedSavePromptAlt')}

From 866196315e80737ef2296fcd36fc53fb012803ef Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:42:49 +1100 Subject: [PATCH 6/9] Password screen fullheigt --- stylesheets/_password.scss | 50 ----------------- stylesheets/_session.scss | 86 ----------------------------- stylesheets/_session_password.scss | 88 ++++++++++++++++++++++++++++++ stylesheets/manifest.scss | 9 ++- 4 files changed, 95 insertions(+), 138 deletions(-) delete mode 100644 stylesheets/_password.scss create mode 100644 stylesheets/_session_password.scss diff --git a/stylesheets/_password.scss b/stylesheets/_password.scss deleted file mode 100644 index 46a9f0dd0..000000000 --- a/stylesheets/_password.scss +++ /dev/null @@ -1,50 +0,0 @@ -.password { - .content-wrapper { - display: flex; - align-items: center; - justify-content: center; - color: $color-dark-05; - width: 100%; - height: 100%; - } - - .content { - margin: 3em; - } - - .inputs { - display: flex; - flex-direction: column; - } - - input { - width: 30em; - } - - .error { - font-weight: bold; - font-size: 16px; - margin-top: 1em; - } - - .reset { - font-size: 15px; - margin-top: 1em; - cursor: pointer; - user-select: none; - - a { - color: #78be20; - font-weight: bold; - } - } - - .overlay { - color: $color-dark-05; - background: $color-dark-85; - - .step { - padding: 0; - } - } -} diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index f17490060..a70be1e63 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1642,92 +1642,6 @@ input { } } -.clear-data, -.password-prompt { - &-wrapper { - display: flex; - justify-content: center; - align-items: center; - - background-color: $session-color-black; - - width: 100%; - height: 100%; - - padding: 3 * $session-margin-lg; - } - - &-error-section { - width: 100%; - color: $session-color-white; - margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px; - - .session-label { - &.primary { - background-color: rgba($session-color-primary, 0.3); - } - padding: $session-margin-xs $session-margin-sm; - font-size: $session-font-xs; - text-align: center; - } - } - - &-container { - font-family: 'SF Pro Text'; - color: $session-color-white; - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 600px; - min-width: 420px; - padding: 3 * $session-margin-lg 2 * $session-margin-lg; - box-sizing: border-box; - background-color: $session-shade-4; - border: 1px solid $session-shade-8; - border-radius: 2px; - - .warning-info-area, - .password-info-area { - display: inline-flex; - justify-content: center; - align-items: center; - - h1 { - color: $session-color-white; - } - svg { - margin-right: $session-margin-lg; - } - } - - p, - input { - margin: $session-margin-lg 0px; - } - - .button-group { - display: inline-flex; - } - - #password-prompt-input { - width: 100%; - color: #fff; - background-color: #2e2e2e; - margin-top: 2 * $session-margin-lg; - padding: $session-margin-xs $session-margin-lg; - outline: none; - border: none; - border-radius: 2px; - text-align: center; - font-size: 24px; - letter-spacing: 5px; - font-family: 'SF Pro Text'; - } - } -} - .onboarding-message-section { display: flex; flex-grow: 1; diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss new file mode 100644 index 000000000..ecd391bb8 --- /dev/null +++ b/stylesheets/_session_password.scss @@ -0,0 +1,88 @@ +.password { + height: 100vh; + + .clear-data, .password-prompt { + &-wrapper { + display: flex; + justify-content: center; + align-items: center; + + background-color: $session-color-black; + + width: 100%; + height: 100%; + + padding: 3 * $session-margin-lg; + } + + &-error-section { + width: 100%; + color: $session-color-white; + margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px; + + .session-label { + &.primary { + background-color: rgba($session-color-primary, 0.3); + } + padding: $session-margin-xs $session-margin-sm; + font-size: $session-font-xs; + text-align: center; + } + } + + &-container { + font-family: 'SF Pro Text'; + color: $session-color-white; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 600px; + min-width: 420px; + padding: 3 * $session-margin-lg 2 * $session-margin-lg; + box-sizing: border-box; + background-color: $session-shade-4; + border: 1px solid $session-shade-8; + border-radius: 2px; + + .warning-info-area, + .password-info-area { + display: inline-flex; + justify-content: center; + align-items: center; + + h1 { + color: $session-color-white; + } + svg { + margin-right: $session-margin-lg; + } + } + + p, + input { + margin: $session-margin-lg 0px; + } + + .button-group { + display: inline-flex; + } + + #password-prompt-input { + width: 100%; + color: #fff; + background-color: #2e2e2e; + margin-top: 2 * $session-margin-lg; + padding: $session-margin-xs $session-margin-lg; + outline: none; + border: none; + border-radius: 2px; + text-align: center; + font-size: 24px; + letter-spacing: 5px; + font-family: 'SF Pro Text'; + } + } + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index d4657b295..4961f65a3 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -12,7 +12,6 @@ @import 'emoji'; @import 'mentions'; @import 'settings'; -@import 'password'; // Build the main view @import 'index'; @@ -22,10 +21,16 @@ @import 'ios'; @import 'theme_dark'; -// Session +// /////////////////// // +// ///// Session ///// // +// /////////////////// // @import 'modules'; @import 'session'; + +// Separate screens @import 'session_signin'; +@import 'session_password'; + @import 'session_theme'; @import 'session_left_pane'; @import 'session_group_panel'; From 0b16f5965bd380425935a97f49cd0b988b74c474 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 14:49:54 +1100 Subject: [PATCH 7/9] replace jQuery selectors with Refs --- ts/components/session/SessionPasswordPrompt.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ts/components/session/SessionPasswordPrompt.tsx b/ts/components/session/SessionPasswordPrompt.tsx index 4ef1ae48d..2c8926dfd 100644 --- a/ts/components/session/SessionPasswordPrompt.tsx +++ b/ts/components/session/SessionPasswordPrompt.tsx @@ -15,6 +15,8 @@ interface State { } export class SessionPasswordPrompt extends React.PureComponent<{}, State> { + private readonly inputRef: React.RefObject; + constructor(props: any) { super(props); @@ -29,10 +31,12 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { this.initLogin = this.initLogin.bind(this); this.initClearDataView = this.initClearDataView.bind(this); + + this.inputRef = React.createRef(); } public componentDidMount() { - setTimeout(() => $('#password-prompt-input').focus(), 100); + (this.inputRef.current as HTMLInputElement).focus(); } public render() { @@ -65,6 +69,7 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { onKeyUp={this.onKeyUp} maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH} onPaste={this.onPaste} + ref={this.inputRef} /> ); const infoIcon = this.state.clearDataView ? ( @@ -137,7 +142,7 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { }); } - // Prevent pating into input + // Prevent pasting into input return false; } @@ -157,7 +162,7 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { } private async initLogin() { - const passPhrase = String($('#password-prompt-input').val()); + const passPhrase = String((this.inputRef.current as HTMLInputElement).value); await this.onLogin(passPhrase); } From a75e0a94290d4ba10820622a6a7d1ed97caf1190 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 15:58:34 +1100 Subject: [PATCH 8/9] Password prompt fixes --- ts/components/session/SessionPasswordPrompt.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/components/session/SessionPasswordPrompt.tsx b/ts/components/session/SessionPasswordPrompt.tsx index 2c8926dfd..a7a218616 100644 --- a/ts/components/session/SessionPasswordPrompt.tsx +++ b/ts/components/session/SessionPasswordPrompt.tsx @@ -147,10 +147,10 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { } public async onLogin(passPhrase: string) { - const trimmed = passPhrase ? passPhrase.trim() : passPhrase; + const passPhraseTrimmed = passPhrase.trim(); try { - await window.onLogin(trimmed); + await window.onLogin(passPhraseTrimmed); } catch (error) { // Increment the error counter and show the button if necessary this.setState({ From 86bcee58ce2da75064a54a95950cc3eccaf5edd9 Mon Sep 17 00:00:00 2001 From: Vincent Date: Tue, 31 Mar 2020 16:08:52 +1100 Subject: [PATCH 9/9] lint --- stylesheets/_session_password.scss | 5 +++-- ts/components/DevicePairingDialog.tsx | 4 +--- ts/components/conversation/UpdateGroupMembersDialog.tsx | 4 ++-- ts/components/session/SessionPasswordPrompt.tsx | 6 ++++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index ecd391bb8..98d548277 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -1,7 +1,8 @@ .password { height: 100vh; - - .clear-data, .password-prompt { + + .clear-data, + .password-prompt { &-wrapper { display: flex; justify-content: center; diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx index c19640f86..b87d43b6e 100644 --- a/ts/components/DevicePairingDialog.tsx +++ b/ts/components/DevicePairingDialog.tsx @@ -148,9 +148,7 @@ export class DevicePairingDialog extends React.Component {
{this.renderErrors()}

{window.i18n('waitingForDeviceToRegister')}

- - {window.i18n('pairNewDevicePrompt')} - + {window.i18n('pairNewDevicePrompt')}
diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx index 98ef15e0e..00b51ddea 100644 --- a/ts/components/conversation/UpdateGroupMembersDialog.tsx +++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx @@ -120,7 +120,7 @@ export class UpdateGroupMembersDialog extends React.Component { {`${checkMarkedCount} members`} -
+
)} @@ -135,7 +135,7 @@ export class UpdateGroupMembersDialog extends React.Component { )})`}

- +
diff --git a/ts/components/session/SessionPasswordPrompt.tsx b/ts/components/session/SessionPasswordPrompt.tsx index a7a218616..01bb0f9e1 100644 --- a/ts/components/session/SessionPasswordPrompt.tsx +++ b/ts/components/session/SessionPasswordPrompt.tsx @@ -16,7 +16,7 @@ interface State { export class SessionPasswordPrompt extends React.PureComponent<{}, State> { private readonly inputRef: React.RefObject; - + constructor(props: any) { super(props); @@ -162,7 +162,9 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> { } private async initLogin() { - const passPhrase = String((this.inputRef.current as HTMLInputElement).value); + const passPhrase = String( + (this.inputRef.current as HTMLInputElement).value + ); await this.onLogin(passPhrase); }