From f46df2ddd9c800ac806be9a31291a9f97d706e93 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 14 Feb 2019 11:09:37 -0700 Subject: [PATCH 01/22] Add a bit of safety around reading events for room settings Fixes https://github.com/vector-im/riot-web/issues/8530 and maybe https://github.com/vector-im/riot-web/issues/8641 --- .../settings/tabs/RolesRoomSettingsTab.js | 6 +++-- .../settings/tabs/SecurityRoomSettingsTab.js | 24 ++++++++++++++++--- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/views/settings/tabs/RolesRoomSettingsTab.js b/src/components/views/settings/tabs/RolesRoomSettingsTab.js index 2195017782..d223e8f2e9 100644 --- a/src/components/views/settings/tabs/RolesRoomSettingsTab.js +++ b/src/components/views/settings/tabs/RolesRoomSettingsTab.js @@ -116,7 +116,8 @@ export default class RolesRoomSettingsTab extends React.Component { _onPowerLevelsChanged = (value, powerLevelKey) => { const client = MatrixClientPeg.get(); const room = client.getRoom(this.props.roomId); - let plContent = room.currentState.getStateEvents('m.room.power_levels', '').getContent() || {}; + const plEvent = room.currentState.getStateEvents('m.room.power_levels', ''); + let plContent = plEvent ? (plEvent.getContent() || {}) : {}; // Clone the power levels just in case plContent = Object.assign({}, plContent); @@ -151,7 +152,8 @@ export default class RolesRoomSettingsTab extends React.Component { const client = MatrixClientPeg.get(); const room = client.getRoom(this.props.roomId); - const plContent = room.currentState.getStateEvents('m.room.power_levels', '').getContent() || {}; + const plEvent = room.currentState.getStateEvents('m.room.power_levels', ''); + const plContent = plEvent ? (plEvent.getContent() || {}) : {}; const canChangeLevels = room.currentState.mayClientSendStateEvent('m.room.power_levels', client); const powerLevelDescriptors = { diff --git a/src/components/views/settings/tabs/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/SecurityRoomSettingsTab.js index 593e8151d2..698f67dd18 100644 --- a/src/components/views/settings/tabs/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/SecurityRoomSettingsTab.js @@ -43,13 +43,31 @@ export default class SecurityRoomSettingsTab extends React.Component { const room = MatrixClientPeg.get().getRoom(this.props.roomId); const state = room.currentState; - const joinRule = state.getStateEvents("m.room.join_rules", "").getContent()['join_rule']; - const guestAccess = state.getStateEvents("m.room.guest_access", "").getContent()['guest_access']; - const history = state.getStateEvents("m.room.history_visibility", "").getContent()['history_visibility']; + + const joinRule = this._pullContentPropertyFromEvent( + state.getStateEvents("m.room.join_rules", ""), + 'join_rule', + 'invite', + ); + const guestAccess = this._pullContentPropertyFromEvent( + state.getStateEvents("m.room.guest_access", ""), + 'guest_access', + 'forbidden', + ); + const history = this._pullContentPropertyFromEvent( + state.getStateEvents("m.room.history_visibility", ""), + 'history_visibility', + 'shared', + ); const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId); this.setState({joinRule, guestAccess, history, encrypted}); } + _pullContentPropertyFromEvent(event, key, defaultValue) { + if (!event || !event.getContent()) return defaultValue; + return event.getContent()[key] || defaultValue; + } + componentWillUnmount(): void { MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent); } From 3f8ff77b7e9163547a56aca75f743a7743c6361b Mon Sep 17 00:00:00 2001 From: Ben Parsons Date: Fri, 15 Feb 2019 15:55:16 +0000 Subject: [PATCH 02/22] make mx_SenderProfile inline-block, stops accidental name inserting --- res/css/views/rooms/_EventTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 24a23a0f98..848c2aa3ff 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -45,14 +45,14 @@ limitations under the License. .mx_EventTile .mx_SenderProfile { color: $primary-fg-color; font-size: 14px; - display: block; /* anti-zalgo, with overflow hidden */ + display: inline-block; /* anti-zalgo, with overflow hidden */ overflow-y: hidden; cursor: pointer; padding-left: 65px; /* left gutter */ padding-bottom: 0px; padding-top: 0px; margin: 0px; - line-height: 22px; + line-height: 17px; } .mx_EventTile .mx_SenderProfile .mx_Flair { From eb908dbd0d3b1ebcc5b246823a701ab1fe4a8db9 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Fri, 15 Feb 2019 21:28:26 -0600 Subject: [PATCH 03/22] Make pre use the same text color as code Signed-off-by: Aaron Raimist --- res/css/views/rooms/_EventTile.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 6a847e58bc..d2a2afbba0 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -408,7 +408,12 @@ limitations under the License. .mx_EventTile_content .markdown-body code { // deliberate constants as we're behind an invert filter background-color: #f8f8f8; - color: #333; +} + +.mx_EventTile_content .markdown-body { + pre, code { + color: #333; + } } .mx_EventTile_pre_container { From 9bc0ae7fc51b27e782d1df103a8e0030875f10d0 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Sat, 16 Feb 2019 12:28:35 -0600 Subject: [PATCH 04/22] Add comment Signed-off-by: Aaron Raimist --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d2a2afbba0..3880c480de 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -412,6 +412,7 @@ limitations under the License. .mx_EventTile_content .markdown-body { pre, code { + // deliberate constants as we're behind an invert filter color: #333; } } From 9318c4ec787131966ca28d4f016b42fb704b107a Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Fri, 15 Feb 2019 20:26:27 -0600 Subject: [PATCH 05/22] Update dark theme bg-color to show hover effect on messages Signed-off-by: Aaron Raimist --- res/themes/dark/css/_dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 11a6b5e728..5b4b791804 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -38,7 +38,7 @@ $tagpanel-bg-color: $base-color; $selected-color: $room-highlight-color; // selected for hoverover & selected event tiles -$event-selected-color: $search-bg-color; +$event-selected-color: #111316; // used for the hairline dividers in RoomView $primary-hairline-color: $header-panel-border-color; From fa3662257dbaa41118601af2a8c3cf4733ea4c99 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Feb 2019 17:20:02 +0000 Subject: [PATCH 06/22] Tweak widget bar color for dark theme --- res/themes/dark/css/_dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 5b4b791804..1ffd337a3b 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -103,7 +103,7 @@ $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); $panel-divider-color: $header-panel-border-color; -$widget-menu-bar-bg-color: $search-bg-color; +$widget-menu-bar-bg-color: $header-panel-bg-color; // event redaction $event-redacted-fg-color: #606060; From c490606f155aa0d613621d61985df99ee142e214 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Feb 2019 17:34:39 +0000 Subject: [PATCH 07/22] Revert back to previous base color on dark theme --- res/themes/dark/css/_dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 1ffd337a3b..6f32157c48 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,7 +1,7 @@ // unified palette // try to use these colors when possible $bg-color: #181b21; -$base-color: #1b1f25; +$base-color: #15171b; $base-text-color: #edf3ff; $header-panel-bg-color: #22262e; $header-panel-border-color: #000000; From 402992cee457655c51583d63ec1f2fe5f27cfe1a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 15 Feb 2019 18:16:10 +0000 Subject: [PATCH 08/22] Adjust add room button for dark theme --- res/css/structures/_MyGroups.scss | 4 ++-- res/css/structures/_RoomSubList.scss | 21 +++++++++++++++------ res/themes/dark/css/_dark.scss | 3 ++- res/themes/light/css/_light.scss | 3 ++- 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss index b3a5c4f473..4428eadc48 100644 --- a/res/css/structures/_MyGroups.scss +++ b/res/css/structures/_MyGroups.scss @@ -49,11 +49,11 @@ limitations under the License. height: 40px; width: 40px; border-radius: 20px; - background-color: $roomheader-addroom-color; + background-color: $roomheader-addroom-bg-color; position: relative; &:before { - background-color: $accent-fg-color; + background-color: $roomheader-addroom-fg-color; mask: url('$(res)/img/icons-create-room.svg'); mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index f76df1f683..235e636c35 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -83,15 +83,24 @@ limitations under the License. } .mx_RoomSubList_addRoom { - background-color: $roomheader-addroom-color; - color: $roomsublist-background; - background-image: url('$(res)/img/icons-room-add.svg'); - background-repeat: no-repeat; - background-position: center; + background-color: $roomheader-addroom-bg-color; border-radius: 10px; // 16/2 + 2 padding height: 16px; flex: 0 0 16px; - background-clip: content-box; + position: relative; + + &:before { + background-color: $roomheader-addroom-fg-color; + mask: url('$(res)/img/icons-room-add.svg'); + mask-repeat: no-repeat; + mask-position: center; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } } .mx_RoomSubList_badgeHighlight { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6f32157c48..535e43e93e 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -82,7 +82,8 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; -$roomheader-addroom-color: $header-panel-text-primary-color; +$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity +$roomheader-addroom-fg-color: $text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 7bd84d6191..0eb136e5d9 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -145,7 +145,8 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; -$roomheader-addroom-color: #91A1C0; +$roomheader-addroom-bg-color: #91A1C0; +$roomheader-addroom-fg-color: $accent-fg-color; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0; From 52bd1edd7285d9544d97a37c20ec8e70b9a767ff Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 11:41:23 +0000 Subject: [PATCH 09/22] Tweak room and group pill color for dark theme --- res/themes/dark/css/_dark.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 535e43e93e..31e9aa7434 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -25,6 +25,8 @@ $focus-bg-color: $room-highlight-color; $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: $room-highlight-color; +$rte-room-pill-color: $room-highlight-color; +$rte-group-pill-color: $room-highlight-color; // informational plinth $info-plinth-bg-color: $header-panel-bg-color; From e16f29b1e03f514860c26f30615b3c8085177391 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 12:14:55 +0000 Subject: [PATCH 10/22] Use darker color of photo lightboxes for dialogs on dark theme --- res/themes/dark/css/_dark.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 31e9aa7434..3122951034 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -71,6 +71,11 @@ $avatar-bg-color: $bg-color; $h3-color: $primary-fg-color; +$dialog-title-fg-color: #454545; +$dialog-backdrop-color: #000; +$dialog-shadow-color: rgba(0, 0, 0, 0.48); +$dialog-close-fg-color: #9fa9ba; + $dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; From 3475b6faedea2fe4bf919cf8a4cca205c1312a15 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 12:19:46 +0000 Subject: [PATCH 11/22] Remove light styles that duplicate common --- res/themes/light/css/_light.scss | 35 -------------------------------- 1 file changed, 35 deletions(-) diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 0eb136e5d9..e13784b4fa 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -317,41 +317,6 @@ $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); } } -input[type=text].mx_textinput_icon, -input[type=search].mx_textinput_icon { - padding-left: 36px; - background-repeat: no-repeat; - background-position: 10px center; -} - -// FIXME THEME - Tint by CSS rather than referencing a duplicate asset -input[type=text].mx_textinput_icon.mx_textinput_search, -input[type=search].mx_textinput_icon.mx_textinput_search { - background-image: url('$(res)/img/feather-icons/search-input.svg'); -} - -// dont search UI as not all browsers support it, -// we implement it ourselves where needed instead -input[type=search]::-webkit-search-decoration, -input[type=search]::-webkit-search-cancel-button, -input[type=search]::-webkit-search-results-button, -input[type=search]::-webkit-search-results-decoration { - display: none; -} - -.input[type=text]::-webkit-input-placeholder, -.input[type=text]::-moz-placeholder, -.input[type=search]::-webkit-input-placeholder, -.input[type=search]::-moz-placeholder { - color: #a5aab2; -} - -// Override Firefox's UA style so we get a consistent look across browsers -input::placeholder, -textarea::placeholder { - opacity: initial; -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { From 96f1538420a93c3d21145c9e0941f3e2ac9540ad Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 12:20:47 +0000 Subject: [PATCH 12/22] Remove bad syntax for input placeholder styles --- res/css/_common.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 4399fb224e..c6c924c6c4 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -82,13 +82,6 @@ input[type=search]::-webkit-search-results-decoration { display: none; } -.input[type=text]::-webkit-input-placeholder, -.input[type=text]::-moz-placeholder, -.input[type=search]::-webkit-input-placeholder, -.input[type=search]::-moz-placeholder { - color: #a5aab2; -} - // Override Firefox's UA style so we get a consistent look across browsers input::placeholder, textarea::placeholder { From 98a3ecbcb569300ce6fbf4c2563da6a0c96fd65f Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 13:34:25 +0000 Subject: [PATCH 13/22] Tweak placeholder styles to also affect member search --- res/themes/light/css/_light.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e13784b4fa..e52f62b044 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -286,9 +286,12 @@ $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); flex: 1; color: $primary-fg-color; } - input::placeholder { - color: $roomsublist-label-fg-color; - } + } + + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, + .mx_textinput input::placeholder { + color: $roomsublist-label-fg-color; } } From fdd88b60a6f996951b00e7af7032d782e6645079 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 13:43:18 +0000 Subject: [PATCH 14/22] Lift panel input styling up to common --- res/css/_common.scss | 65 ++++++++++++++++++++++++++++++ res/themes/dark/css/_dark.scss | 49 +---------------------- res/themes/light/css/_light.scss | 68 -------------------------------- 3 files changed, 66 insertions(+), 116 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index c6c924c6c4..4769df1c33 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -104,6 +104,71 @@ textarea { color: $primary-fg-color; } +// .mx_textinput is a container for a text input +// + some other controls like buttons, ... +// it has the appearance of a text box so the controls +// appear to be part of the input + +.mx_Dialog, .mx_MatrixChat { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + display: block; + box-sizing: border-box; + background-color: transparent; + color: $input-darker-fg-color; + border-radius: 4px; + border: 1px solid #c1c1c1; + // these things should probably not be defined + // globally + margin: 9px; + flex: 0 0 auto; + } + + .mx_textinput { + display: flex; + align-items: center; + + > input[type=text], + > input[type=search] { + border: none; + flex: 1; + color: $primary-fg-color; + } + } + + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, + .mx_textinput input::placeholder { + color: $roomsublist-label-fg-color; + } +} + +/*** panels ***/ +.dark-panel { + background-color: $secondary-accent-color; +} + +.dark-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-darker-fg-color; + background-color: $input-darker-bg-color; + border: none; + } +} + +.light-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-lighter-fg-color; + background-color: $input-lighter-bg-color; + border: none; + } +} + /* Prevent ugly dotted highlight around selected elements in Firefox */ ::-moz-focus-inner { border: 0; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 3122951034..8542e617c0 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -141,59 +141,12 @@ $room-warning-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); -/*** form elements ***/ - -// .mx_textinput is a container for a text input -// + some other controls like buttons, ... -// it has the appearance of a text box so the controls -// appear to be part of the input - -.mx_Dialog, .mx_MatrixChat { - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - background-color: transparent; - color: $input-darker-fg-color; - border: 1px solid #c1c1c1; - } - - .mx_textinput { - > input[type=text], - > input[type=search] { - color: $primary-fg-color; - } - input::placeholder { - color: $roomsublist-label-fg-color; - } - } -} - /*** panels ***/ + .dark-panel { background-color: $header-panel-bg-color; } -.dark-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-darker-fg-color; - background-color: $input-darker-bg-color; - border: none; - } -} - -.light-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-lighter-fg-color; - background-color: $input-lighter-bg-color; - border: none; - } -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e52f62b044..2b3f3a33ca 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -252,74 +252,6 @@ $authpage-secondary-color: #61708b; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); -/*** form elements ***/ - -// .mx_textinput is a container for a text input -// + some other controls like buttons, ... -// it has the appearance of a text box so the controls -// appear to be part of the input - -.mx_Dialog, .mx_MatrixChat { - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - display: block; - box-sizing: border-box; - background-color: transparent; - color: $input-darker-fg-color; - border-radius: 4px; - border: 1px solid #c1c1c1; - // these things should probably not be defined - // globally - margin: 9px; - flex: 0 0 auto; - } - - .mx_textinput { - display: flex; - align-items: center; - - > input[type=text], - > input[type=search] { - border: none; - flex: 1; - color: $primary-fg-color; - } - } - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, - .mx_textinput input::placeholder { - color: $roomsublist-label-fg-color; - } -} - -/*** panels ***/ -.dark-panel { - background-color: $secondary-accent-color; -} - -.dark-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-darker-fg-color; - background-color: $input-darker-bg-color; - border: none; - } -} - -.light-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-lighter-fg-color; - background-color: $input-lighter-bg-color; - border: none; - } -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { From 19977b052fc6fe568106d78d717cca1281c1d5df Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 13:50:17 +0000 Subject: [PATCH 15/22] Add new var for dark panel bg color --- res/css/_common.scss | 2 +- res/themes/dark/css/_dark.scss | 7 +------ res/themes/light/css/_light.scss | 1 + 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 4769df1c33..fd93c8c967 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -146,7 +146,7 @@ textarea { /*** panels ***/ .dark-panel { - background-color: $secondary-accent-color; + background-color: $dark-panel-bg-color; } .dark-panel { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8542e617c0..35ba1ce53c 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -139,14 +139,9 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $room-warning-bg-color: $header-panel-bg-color; +$dark-panel-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); -/*** panels ***/ - -.dark-panel { - background-color: $header-panel-bg-color; -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 2b3f3a33ca..acf2340013 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -250,6 +250,7 @@ $authpage-lang-color: #4e5054; $authpage-primary-color: #454545; $authpage-secondary-color: #61708b; +$dark-panel-bg-color: $secondary-accent-color; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); // ***** Mixins! ***** From 09ed795c7966718fa1f7c377d782ef6e67f32bc3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 15:49:36 +0000 Subject: [PATCH 16/22] Allow theming member info minimise button --- res/css/views/rooms/_MemberInfo.scss | 4 ++++ src/components/views/rooms/MemberInfo.js | 7 ++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 707c186518..60faf3ef13 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -34,6 +34,10 @@ limitations under the License. height: 16px; padding: 10px 15px; cursor: pointer; + mask-image: url('$(res)/img/minimise.svg'); + mask-repeat: no-repeat; + mask-position: center; + background-color: $rightpanel-button-color; } .mx_MemberInfo_name h2 { diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index f4c600af8d..c7ea54a4c8 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -983,9 +983,10 @@ module.exports = withMatrixClient(React.createClass({ return (
- - {_t('Close')} - + { e2eIconElement } { memberName }
From 5fb990eb5f7d429e06a05da8a96a97d3166cb277 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 18:26:40 +0000 Subject: [PATCH 17/22] Convert Markdown button to SVG mask This makes it easier to theme via CSS, which helps with the dark theme. --- res/css/views/rooms/_MessageComposer.scss | 19 ++++++++++-- res/img/button-md-false.png | Bin 569 -> 0 bytes res/img/button-md-false.svg | 29 ------------------ res/img/button-md-false@2x.png | Bin 1086 -> 0 bytes res/img/button-md-false@3x.png | Bin 1548 -> 0 bytes res/img/button-md-true.png | Bin 483 -> 0 bytes res/img/button-md-true.svg | 14 --------- res/img/button-md-true@2x.png | Bin 906 -> 0 bytes res/img/button-md-true@3x.png | Bin 1201 -> 0 bytes res/img/markdown.svg | 3 ++ src/components/views/rooms/MessageComposer.js | 17 +++++----- .../views/rooms/MessageComposerInput.js | 14 ++++++--- 12 files changed, 39 insertions(+), 57 deletions(-) delete mode 100644 res/img/button-md-false.png delete mode 100644 res/img/button-md-false.svg delete mode 100644 res/img/button-md-false@2x.png delete mode 100644 res/img/button-md-false@3x.png delete mode 100644 res/img/button-md-true.png delete mode 100644 res/img/button-md-true.svg delete mode 100644 res/img/button-md-true@2x.png delete mode 100644 res/img/button-md-true@3x.png create mode 100644 res/img/markdown.svg diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index db8eb4995d..89115669d3 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -255,14 +255,29 @@ limitations under the License. } .mx_MessageComposer_formatbar_markdown { + height: 17px; + width: 30px; margin-right: 64px; } .mx_MessageComposer_input_markdownIndicator { - cursor: pointer; height: 10px; + width: 12px; padding: 4px 4px 4px 0; - opacity: 0.8; +} + +.mx_MessageComposer_formatbar_markdown, +.mx_MessageComposer_input_markdownIndicator { + cursor: pointer; + mask-image: url('$(res)/img/markdown.svg'); + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + background-color: $composer-button-color; + + &.mx_MessageComposer_markdownDisabled { + opacity: 0.2; + } } .mx_MatrixChat_useCompactLayout { diff --git a/res/img/button-md-false.png b/res/img/button-md-false.png deleted file mode 100644 index 6debbccc937a75e1a07a2a36518e221efb696823..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 569 zcmV-90>=G`P)Px$^GQTOR5%f>lTAwkQ51&nI5U20n$SW62`sRMghb#f7w+1H`X`irKr45x3;Gkf zOl*-LxR6$YU$_&bjn+a?upCi)&)^-#VcLWT4)@G^&w1vYJ9h*I%VaWQDwVQOybr5Z ztLsv!v=W-lX4>g=mIOiA2UlY(m&>$dv)S&fRx2alv*j%?3ASf0V>k(U=bS}ROol=s zo7?R^#O5b|BO16Tog8|d>sS??{-)E_a0d?M3&o1h=bMbj2|wM09|qjtvDJdyjQE$+*~gd3esw|dY{kdVXplNr-VQtFu;G1gY$g- zdK8I7nw3h0HZ9p~_7z8RVYl1q5~z7Q7aZLr+wHc9v67sE2`IDcCGCQ&us*)}2Ja=8+8&U!HINf2k- zBz2KxnUNcffHbn18KIN|?o`6%&*P7LM6uVb@IRUgmZaP-lh~_%7EU=y00000NkvXX Hu0mjflU)I? diff --git a/res/img/button-md-false.svg b/res/img/button-md-false.svg deleted file mode 100644 index 6414933d96..0000000000 --- a/res/img/button-md-false.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - D335F9E8-C813-47D7-B1BE-C8DEF2C8214F - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-false@2x.png b/res/img/button-md-false@2x.png deleted file mode 100644 index 497f5385d140cfda7cd24c5b79cf3871a700b017..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1086 zcmV-E1i|}>P)Px&_(?=TR9FesS6@g|VHDqgbz`!J%|BC;>|v;E;Db;?U>5DAmmq?C>q&%q2#O$l zis-?hw+bJkmx_X(5=TBn3`R}d5SdbIMk+e7hat{suDSI)mwlJ-UU% zc&`=!mcwv(c=)iduWwvGH#awAx7$B42fbdeGZ+j^tVxSw$?@$h+}8=iDB945X5jSZipS%F0Fq^qk)eUMwzdqDc?tk}0*y()s}=cdHftdJa#`05oKE!n z{l8MF)Hw={EMM#F?EJ2XPuj z#7|94SzB9MXNj+50l*mmdIwvjk`uzr&(Dvb`5$L8867?H_dr#^5!r&d9iEw)v2}NM ze}L?w(<;5Fp;Ruft*ucxlms7*Mu(f4nqE;%TDTS*xw%#goZ_A8?d?q=`)5g@j}IIs z{Xc0#VZnZEWo2a?+Y<2MaM*|Y_DAN1_`;Q&$&CIBaC-Sz=;MPx6NSv;Rz%Sk_W}Mo zGY*A9Cmaq(l*#msK)_2aO;e>*00N6lYX;3?0sQmj<>gI0vreZo2EBj@dZ9#^ot!EH zM-yGdD0)jxf#wjtGLYHx^6sX9T&CURLpF3-Djp`8Kym;iqRURVM*uyV5bof>-0i`!ZgI77X}nzNr}0@w6yI01q7Z{+`rz{BLDyZ07*qoM6N<$ Ef*aWjwEzGB diff --git a/res/img/button-md-false@3x.png b/res/img/button-md-false@3x.png deleted file mode 100644 index 1184e6b351ec17fb2e1f8cdaa866ea3d81d5cb07..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1548 zcmV+n2J`ueP)Px)#z{m$RA>e5T3t+IMHIfbEzt58HUUzK6=jjlVvQRkAgq56ZcKRa!A%JA6I zqdpj4HmQjTlI)8QMq;eClwXk{!G`xHTO4Om186mfcb`X&JBE;JzI{sNeR zmX?+taddRFv8JZxZ@GXdiUNR=lTZBn>gwvFrqa^VCs|JkjFOTP!DKSAb(a4ets*c%VO_?7AMj->9?;+8@#Hk_78{sKjT3UJ&1ltMzvUJtpYM z3KU(YPknv;T{!s~&p4I_nJAXLRwY1K*?iV@0fig@FgLfix4*_TO6SiDb#-;&bOP(^ z>xP}39f5wB0_jB4^48YYjM?hZ4HQ@ycez||!;o>FwTO;u0B(%OV`%`^h?A>8zy1Av zmZhn_v9V#uR*#;b2!n%z`?IsNFYfN{rsN&~@*M#AM3Yx}6xJ0K@}sM(>mCkO&q$*T zKq#>~^XQ}Iu5|~6ENE+M^C34}L4G+FiB*nTPC%hf91h1fi;IhoWlF4agO0*`&Om{4 z@s5s;e~yBaT5UKqD8s|UWkW+lm0CI;A0NM$FGB3;Ir=!;B3nfN%P*%8^?%_ZAbH&94vadGjDxw*M>YzGH* z(d+eogmceJ9G)r?qU9X`^MNX1j!+;FI0GHiI3$`-3et}ws{i*CeDwDCe7=;=2on<% zmjKv@JOi}Q;L!E?`S~}rv>{nq3^q46eUV6{9NT|E`q9~l_vjia)B#4IysE0|HgZft z_d#O)k=J=PG{(U@?`Z)c*<6A`BT>nY2#pY&VQtL1j%YMgR#y5v z9#1t#iHMc(bM$|iNe$BWYx$QYmCvqtw;`OexM*caXQ(#4aMyyKu?( zE~|(7#imi!RdCKhA;Ty_$RIrdksJmv*5>AB4<%HhVd=ku{_guIP7y)_qvlb)qs50K zTPPF?l2U|hQaeJ}uBIayAQtFKjBYp_7O;m%>Vw?FYV@%(0Onk0XXmeokk0^!o8?iR z0HJ|V`=|y53hx4#gx;p6CINc}wSDm9&O+BZF)Au51e~3CGFoXDF+dl$wzg7i%jVAl z$q~|O!BLc_Xk-&9C3RZuv_4uQC8=9!ZYt4}4LKEZM5&z;ouej6qBfMj=q4cBl`bn# zXf*VC2o!AQ^ir45L%?JU2q`#G(?>644anSygr}Fn9LhL*b~a2- yPPSB6S3eF$MP4m@fSpqgfxljyq5K30b^RY({^*N^6Hc%I0000Px$ok>JNR5%f}Q@=~YP!R4*qDv@tQgBgpu#<=o2mb*jZDSmCaQDZigR9Wpx;VJ_ zCj?Yd(o(nn8C}Iq$0}-)#_!TxcuzVg#0SZD_uakk-Q7z>k|d(hXv`aiF;yyP#c@1r zx7)9xR;%6NfZc+0a~Vz3&NO&CIa8o98jTzcRnr0gv2;aP*Y!ipzAA*+#}o63uy2UZ zVqX&fB=PUeGa76V;v$|qoz4K}0C%wfyu{PDEbFw{Y(}t4wrwYbw9s|v`#$9>Jo&Vg z%E#3B9RxuO60PP>s zCJ3*vCoN}Q|5@tzVAi3$Kk--c6To{Ir=xh^QIf|k#A;$?7aa3#9>-9x!T$7W) zSHPbThw5~WA#VvC^x%`|Ec1*){Uei&w|7h8Fc$WW4VBFgcg+%DVcwCp!bF? Zt#3CFoq7f*3)uhw002ovPDHLkV1lx_+k^lB diff --git a/res/img/button-md-true.svg b/res/img/button-md-true.svg deleted file mode 100644 index 2acc4f675c..0000000000 --- a/res/img/button-md-true.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - 2A63B135-4281-4FBB-A88C-012AE22E9594 - Created with sketchtool. - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-true@2x.png b/res/img/button-md-true@2x.png deleted file mode 100644 index ad9067f385b2fbb975c6df7a006adab817800751..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 906 zcmV;519kj~P)Px&L`g(JR9Fesmpf=vQ5eU2la^>xMT0}ZL8l5na4B}Ex+o}plA(jtpjaq~RK%g9 zwnM>+2t`Fid_ZxK^g(Jae~KP!xe-|ufpCX)}~TWS@w z;4%y&13wlHhtCG<&wHjDc)A8ghHV= zOm>W9Sv?`TsMqT~QVd%6`PaNH;A-;u`T1Fw%QYrI0R5dZ@&h_9y49ezfh$n0t*z$) z99BH^#N6E6E5)zos0ui5n+)~b59rgJ!2Q((EOS`~t{!4TLqi@3q%^*Av95@$XkTAn zlP>>H-ZJpT#l@y*Goa%}$CI02wq4*Ri z6AjR=Ua-^G3rd*5!NG=DEEa_QqU(!!Kty~#-+{@=$waYDWO8p6p3T?-|BP?5=!9C{ zaR~tYL{CpoyU2L)z#IN zOUMZfko=@dW@X@en1$Yk=KjQ(#RLKYFE2pVwYHhrm984#bxhjKH_cJ*hnB4SQj-#M zlm%Zhv#ZnKRHpISV`dj!Rlrp+iQA~zr?7=iBS|gNvz*$n?n_RC)3^gYr0dQ2s)4Iy zOyD+4YE?%$jB{$o#h-;-CTG9M<*2Q$QZCV7*luzWms!LPK%cRi$6&=P9!wHQ87#xc zM25Oayi=3S*l)zWFEZ>RuF}b>7op{ntoWwIlV}8S9DLZ6_e_YZ4 zS98>nz_|~(+FPo*?W_QZd$dHIyRKI7t0^;}KLThr_p?i9383(!*jQ62H85QI3>aT~ gJf4d)GczB41OD$WoQHsRivR!s07*qoM6N<$g6lN16951J diff --git a/res/img/button-md-true@3x.png b/res/img/button-md-true@3x.png deleted file mode 100644 index d615867dc4604e2f898fb0f15e4e2b19e5bd0bf5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1201 zcmV;i1Wx;jP)Px(Ye_^wRA>e5noCGjQ5eUaM^>7c^rSWg8AJ<%#%L2E5rMCqXre`i77;`S6>XwG z6c;UeLPgNV$_NApQHK&*v=RhcL_sC40$WHyj~SEH>34>%-VW#FnVCB|dFR66p7XuV z`TqAi-~H|*FE4lG5HLZ&V+n;qp{3*FiAJc0j> zhp)Phj*hQ7nQWmu0*Y{k?KR}}dQWN`BhusbJv}{dHTz9$LSXM19muae`ShzYF33mA3u zzsQqj``ENjN!kyQc#~Gj5{0xQg<|ViQ&ZDoQ-63Dyo|!C-c)`*8JZG8apWG+C2u4ABJYZ0xJ#jh8J?FY0{7SlmXc|LS+l8X-6?IzP_ z+up;*eiNOP7pXGNq-$th_QWd^E3`0exk|^BhQ60=_Yi>hnCe(^L~tAW$F1>PXGcL1 zlQH>B;-#NRtelfgtjcv`C!ZF^$?Zx31(E1FgU&?-OG|Pbl;1NovhY(})kI>|&Yl7T z2a9Nt+S=MpbE&h2!^qs2OHSrz3KS7BH<_$Op3tH3YCiM!69sE^_5f`!yms2m_i~-A zOwSl7OymccjM>NbMsmzka#peI6o3Q(tqYlanP)Q2*rH7)Pge$~%c9X}x2QiXTfty( z^W@}Y1fJ0=O-s*ycB*)@+x*x4-P9kCiI~vD#Kan!_*p=_Gfw$10);SL!tWY8RkKi7 zCH?yb_SWg_5%!|qN$Mafg47}RIg7i}hNP4g!XA>9@~yf;))gckDJuT!oRX=llmkV9 zYz~whC<+7=B=L|HQ_x*Y0*|Qplj)Uf5s(}QkSR!SL{7OQ@!ULY=PPE+%WJ!bpm2@m z>UxDJd0tRZa85+T%oC(|h@v{(ODjcShAxB_@ + + diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 10142b2b4b..7eef868ef7 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -499,15 +499,16 @@ export default class MessageComposer extends React.Component {
{ formatButtons } -
- +
+ + onClick={this.onToggleFormattingClicked} + className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor" + src={require("../../../../res/img/icon-text-cancel.svg")} + />
; } diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index ab89e402ae..1954ca0d84 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -60,6 +60,7 @@ import ReplyPreview from "./ReplyPreview"; import RoomViewStore from '../../../stores/RoomViewStore'; import ReplyThread from "../elements/ReplyThread"; import {ContentHelpers} from 'matrix-js-sdk'; +import AccessibleButton from '../elements/AccessibleButton'; const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort(); const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$'); @@ -1582,6 +1583,11 @@ export default class MessageComposerInput extends React.Component { placeholder = undefined; } + const markdownClasses = classNames({ + mx_MessageComposer_input_markdownIndicator: true, + mx_MessageComposer_markdownDisabled: this.state.isRichTextEnabled, + }); + return (
@@ -1596,10 +1602,10 @@ export default class MessageComposerInput extends React.Component { />
- + Date: Tue, 19 Feb 2019 11:49:49 +0000 Subject: [PATCH 18/22] Tweak light theme color values --- res/themes/light/css/_light.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 7bd84d6191..45bfc715a3 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -14,7 +14,7 @@ $notice-secondary-color: #61708b; $header-panel-bg-color: #f2f5f8; // typical text (dark-on-white in light skin) -$primary-fg-color: #454545; +$primary-fg-color: #2e2f32; $primary-bg-color: #ffffff; // used for dialog box text @@ -54,7 +54,7 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; -$tagpanel-bg-color: #2e3649; +$tagpanel-bg-color: #27303a; // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -105,7 +105,7 @@ $avatar-bg-color: #ffffff; $h3-color: #3d3b39; -$dialog-title-fg-color: #454545; +$dialog-title-fg-color: #2e2f32; $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-close-fg-color: #9fa9ba; @@ -132,7 +132,7 @@ $settings-profile-placeholder-bg-color: #e7e7e7; $settings-profile-overlay-bg-color: #000; $settings-profile-overlay-placeholder-bg-color: transparent; $settings-profile-overlay-fg-color: #fff; -$settings-profile-overlay-placeholder-fg-color: #454545; +$settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-subsection-fg-color: #61708b; $voip-decline-color: #f48080; @@ -246,7 +246,7 @@ $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-body-bg-color: #ffffff; $authpage-lang-color: #4e5054; -$authpage-primary-color: #454545; +$authpage-primary-color: #232f32; $authpage-secondary-color: #61708b; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); From 4c83d898bd558ad16cf54325958db21cdb0cf9eb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Feb 2019 13:10:10 +0000 Subject: [PATCH 19/22] Show link to login even during UI auth This gives users an escape hatch in case something goes wrong with the UI auth step, and they'd like to go somewhere else in the auth process. --- src/components/structures/auth/Registration.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index 6b578f0f68..03c7645721 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -505,14 +505,9 @@ module.exports = React.createClass({ errorText =
{ err }
; } - let signIn; - if (!this.state.doingUIAuth) { - signIn = ( - - { _t('Sign in instead') } - - ); - } + const signIn = + { _t('Sign in instead') } + ; return ( From 198dee9abdb15d12fe29bfb3431eb4b931579c1c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Feb 2019 13:27:35 +0000 Subject: [PATCH 20/22] Rename default theme to light theme --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 2 +- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index 2364475239..fd3274c9e0 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -145,7 +145,7 @@ export default class GeneralUserSettingsTab extends React.Component { {_t("Theme")} - + diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9afcc07147..0f5a875f0d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -522,7 +522,7 @@ "Phone numbers": "Phone numbers", "Language and region": "Language and region", "Theme": "Theme", - "Default theme": "Default theme", + "Light theme": "Light theme", "Dark theme": "Dark theme", "Account management": "Account management", "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", From 3c156218da9b8978b5e656182c5610d05f8577f6 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Feb 2019 13:57:31 +0000 Subject: [PATCH 21/22] Allow captchas on Riot desktop builds --- src/components/views/auth/CaptchaForm.js | 29 ++++++------------------ src/i18n/strings/en_EN.json | 1 - 2 files changed, 7 insertions(+), 23 deletions(-) diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js index ca450c5df4..d3b7d0bfe5 100644 --- a/src/components/views/auth/CaptchaForm.js +++ b/src/components/views/auth/CaptchaForm.js @@ -17,7 +17,6 @@ limitations under the License. 'use strict'; import React from 'react'; -import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; @@ -61,29 +60,15 @@ module.exports = React.createClass({ } else { console.log("Loading recaptcha script..."); window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();}; - const protocol = global.location.protocol; + let protocol = global.location.protocol; if (protocol === "vector:") { - const warning = document.createElement('div'); - // XXX: fix hardcoded app URL. Better solutions include: - // * jumping straight to a hosted captcha page (but we don't support that yet) - // * embedding the captcha in an iframe (if that works) - // * using a better captcha lib - ReactDOM.render(_t( - "Robot check is currently unavailable on desktop - please use a web browser", - {}, - { - 'a': (sub) => { - return { sub }; - }, - }), warning); - this.refs.recaptchaContainer.appendChild(warning); - } else { - const scriptTag = document.createElement('script'); - scriptTag.setAttribute( - 'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit", - ); - this.refs.recaptchaContainer.appendChild(scriptTag); + protocol = "https:"; } + const scriptTag = document.createElement('script'); + scriptTag.setAttribute( + 'src', `${protocol}//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`, + ); + this.refs.recaptchaContainer.appendChild(scriptTag); } }, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9afcc07147..57a9501c5e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1224,7 +1224,6 @@ "Sign in": "Sign in", "Login": "Login", "powered by Matrix": "powered by Matrix", - "Robot check is currently unavailable on desktop - please use a web browser": "Robot check is currently unavailable on desktop - please use a web browser", "This homeserver would like to make sure you are not a robot.": "This homeserver would like to make sure you are not a robot.", "Custom Server Options": "Custom Server Options", "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.", From 1cde4abe6a703f813e010a561ede24378b750ec9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Feb 2019 13:59:15 +0000 Subject: [PATCH 22/22] Improve text layout above captcha --- src/components/views/auth/CaptchaForm.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js index d3b7d0bfe5..bb4785f299 100644 --- a/src/components/views/auth/CaptchaForm.js +++ b/src/components/views/auth/CaptchaForm.js @@ -126,8 +126,9 @@ module.exports = React.createClass({ return (
- { _t("This homeserver would like to make sure you are not a robot.") } -
+

{_t( + "This homeserver would like to make sure you are not a robot.", + )}

{ error }