From 215995de887bcb7dac9c1b13828baf8f79e33413 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:00:09 +0000 Subject: [PATCH 01/26] Resume reading default theme from config --- src/settings/handlers/ConfigSettingsHandler.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/settings/handlers/ConfigSettingsHandler.js b/src/settings/handlers/ConfigSettingsHandler.js index 67fff51e5b..a54ad1cef6 100644 --- a/src/settings/handlers/ConfigSettingsHandler.js +++ b/src/settings/handlers/ConfigSettingsHandler.js @@ -1,5 +1,6 @@ /* Copyright 2017 Travis Ralston +Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -27,7 +28,7 @@ export default class ConfigSettingsHandler extends SettingsHandler { // Special case themes if (settingName === "theme") { - return "dharma"; // config["default_theme"]; + return config["default_theme"]; } const settingsConfig = config["settingDefaults"]; From df2f520d72892126be008234a88582aba03b49f5 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:10:00 +0000 Subject: [PATCH 02/26] Fix up any unsupported themes when read from settings --- src/settings/Settings.js | 2 ++ src/settings/controllers/ThemeController.js | 33 +++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/settings/controllers/ThemeController.js diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 671f46b366..4b9918632d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -22,6 +22,7 @@ import { NotificationsEnabledController, } from "./controllers/NotificationControllers"; import CustomStatusController from "./controllers/CustomStatusController"; +import ThemeController from './controllers/ThemeController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config']; @@ -233,6 +234,7 @@ export const SETTINGS = { "theme": { supportedLevels: ['config'], default: "dharma", + controller: new ThemeController(), }, "webRtcForcePeerToPeer": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, diff --git a/src/settings/controllers/ThemeController.js b/src/settings/controllers/ThemeController.js new file mode 100644 index 0000000000..7feff9b7ae --- /dev/null +++ b/src/settings/controllers/ThemeController.js @@ -0,0 +1,33 @@ +/* +Copyright 2019 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import SettingController from "./SettingController"; + +const SUPPORTED_THEMES = [ + "dharma", + "dark", +]; + +export default class ThemeController extends SettingController { + getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) { + // Override in case some no longer supported theme is stored here + if (!SUPPORTED_THEMES.includes(calculatedValue)) { + return "dharma"; + } + + return null; // no override + } +} From e401b8f77ae60efd42c0aa6d9064228d4a0c760d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:10:42 +0000 Subject: [PATCH 03/26] Make default and dark the only theme options --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 5 +---- src/i18n/strings/en_EN.json | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index bfcc7b945c..f368ce93f0 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -138,17 +138,14 @@ export default class GeneralUserSettingsTab extends React.Component { } _renderThemeSection() { - // TODO: Re-enable theme selection once the themes actually work const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); return (
{_t("Theme")} - + - -
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7376b35fe5..74c32e2b30 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -522,10 +522,8 @@ "Phone numbers": "Phone numbers", "Language and region": "Language and region", "Theme": "Theme", - "Light theme": "Light theme", + "Default theme": "Default theme", "Dark theme": "Dark theme", - "2018 theme": "2018 theme", - "Status.im theme": "Status.im theme", "Account management": "Account management", "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", "Close Account": "Close Account", From 204d6e2c3d31cb40d86bd5cc530c4412a51277e1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:11:28 +0000 Subject: [PATCH 04/26] Enable theme setting --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index f368ce93f0..ab5b46bb7a 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -142,7 +142,7 @@ export default class GeneralUserSettingsTab extends React.Component { return (
{_t("Theme")} - From f5e56708d59aea9ee35e301311b3993566130d72 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 11 Feb 2019 18:15:57 +0000 Subject: [PATCH 05/26] Re-enable dynamic theme changes --- src/components/structures/MatrixChat.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 4bb4e34033..e534ced577 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -654,11 +654,9 @@ export default React.createClass({ }); break; } - // case 'set_theme': - // disable changing the theme for now - // as other themes are not compatible with dharma - // this._onSetTheme(payload.value); - // break; + case 'set_theme': + this._onSetTheme(payload.value); + break; case 'on_logging_in': // We are now logging in, so set the state to reflect that // NB. This does not touch 'ready' since if our dispatches From 3b200705ed0b9b37158ff758268a4531e8b5b29d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 08:48:27 +0000 Subject: [PATCH 06/26] Remove light theme --- res/themes/dark/css/dark.scss | 6 +- res/themes/{light => dharma}/css/_paths.scss | 0 res/themes/dharma/css/dharma.scss | 2 +- res/themes/light/css/_base.scss | 276 ------------------- res/themes/light/css/_fonts.scss | 67 ----- res/themes/light/css/light.scss | 4 - 6 files changed, 4 insertions(+), 351 deletions(-) rename res/themes/{light => dharma}/css/_paths.scss (100%) delete mode 100644 res/themes/light/css/_base.scss delete mode 100644 res/themes/light/css/_fonts.scss delete mode 100644 res/themes/light/css/light.scss diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index a7d18fa1a6..a869dc39e3 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -1,5 +1,5 @@ -@import "../../light/css/_paths.scss"; -@import "../../light/css/_fonts.scss"; -@import "../../light/css/_base.scss"; +@import "../../dharma/css/_paths.scss"; +@import "../../dharma/css/_fonts.scss"; +@import "../../dharma/css/_dharma.scss"; @import "_dark.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_paths.scss b/res/themes/dharma/css/_paths.scss similarity index 100% rename from res/themes/light/css/_paths.scss rename to res/themes/dharma/css/_paths.scss diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/dharma/css/dharma.scss index 24dc0ce18d..032154f999 100644 --- a/res/themes/dharma/css/dharma.scss +++ b/res/themes/dharma/css/dharma.scss @@ -1,4 +1,4 @@ -@import "../../light/css/_paths.scss"; +@import "_paths.scss"; @import "_fonts.scss"; @import "_dharma.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss deleted file mode 100644 index e2aa005b68..0000000000 --- a/res/themes/light/css/_base.scss +++ /dev/null @@ -1,276 +0,0 @@ -/* Open Sans lacks combining diacritics, so these will fall through - to the next font. Helevetica's diacritics however do not combine - nicely with Open Sans (on OSX, at least) and result in a huge - horizontal mess. Arial empirically gets it right, hence prioritising - Arial here. */ -$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #454545; -$primary-bg-color: #ffffff; - -// used for dialog box text -$light-fg-color: #747474; - -// used for focusing form controls -$focus-bg-color: #dddddd; - -// button UI (white-on-green in light skin) -$accent-fg-color: #ffffff; -$accent-color: #76CFA6; -$accent-color-alt: $accent-color; -$accent-color-50pct: #76CFA67F; - -$selection-fg-color: $primary-bg-color; - -$focus-brightness: 125%; - -// red warning colour -$warning-color: #ff0064; -// background colour for warnings -$warning-bg-color: #DF2A8B; -$info-bg-color: #2A9EDF; -$mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); - -// pinned events indicator -$pinned-unread-color: #ff0064; // $warning-color -$pinned-color: #888; - -// informational plinth -$info-plinth-bg-color: #f7f7f7; -$info-plinth-fg-color: #888; - -$preview-bar-bg-color: #f7f7f7; - -// left-panel style muted accent color -$secondary-accent-color: #eaf5f0; -$tertiary-accent-color: #d3efe1; - -$tagpanel-bg-color: $tertiary-accent-color; - -// used by RoomDirectory permissions -$plinth-bg-color: $secondary-accent-color; - -// used by RoomDropTarget -$droptarget-bg-color: rgba(255,255,255,0.5); - -// used by AddressSelector -$selected-color: $secondary-accent-color; - -// selected for hoverover & selected event tiles -$event-selected-color: #f7f7f7; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #e5e5e5; - -// used for the border of input text fields -$input-border-color: #f0f0f0; -$input-border-dark-color: #b8b8b8; - -$input-darker-bg-color: #c1c9d6; -$input-darker-fg-color: #9fa9ba; -$button-bg-color: #7ac9a1; -$button-fg-color: white; -// apart from login forms, which have stronger border -$strong-input-border-color: #c7c7c7; -$input-focused-border-color: #238cf5; -$input-valid-border-color: #7ac9a1; - -$field-focused-label-bg-color: #ffffff; - -// used for UserSettings EditableText -$input-underline-color: rgba(151, 151, 151, 0.5); -$input-fg-color: rgba(74, 74, 74, 0.9); -// scrollbars -$scrollbar-thumb-color: rgba(0, 0, 0, 0.2); -$scrollbar-track-color: transparent; -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #f6f6f6; -$menu-selected-color: #f5f8fa; - -$avatar-initial-color: #ffffff; -$avatar-bg-color: #ffffff; - -$h3-color: #3d3b39; - -$dialog-title-fg-color: #454545; -$dialog-backdrop-color: rgba(46, 48, 51, 0.38); -$dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #9fa9ba; - -$dialog-background-bg-color: #e9e9e9; -$lightbox-background-bg-color: #000; - -$greyed-fg-color: #888; - -$neutral-badge-color: #dbdbdb; - -$preview-widget-bar-color: #ddd; -$preview-widget-fg-color: $greyed-fg-color; - -$blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; - -$settings-grey-fg-color: #a2a2a2; -$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-subsection-fg-color: #61708b; - -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; - -$rte-bg-color: #e9e9e9; -$rte-code-bg-color: rgba(0, 0, 0, 0.04); -$rte-room-pill-color: #aaa; -$rte-group-pill-color: #aaa; - -$topleftmenu-color: $primary-fg-color; -$roomheader-color: $primary-fg-color; -$roomheader-addroom-color: $primary-bg-color; -$roomtopic-color: $settings-grey-fg-color; -$eventtile-meta-color: $roomtopic-color; - -$composer-e2e-icon-color: #c9ced6; -$header-divider-color: #e6eaee; -// ******************** - -$roomtile-name-color: rgba(69, 69, 69, 0.8); -$roomtile-selected-color: $roomtile-name-color; -$roomtile-notified-color: $roomtile-name-color; -$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); - -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; - -$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); - -$roomsublist-background: rgba(0, 0, 0, 0.05); -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: $tertiary-accent-color; -$roomsublist-chevron-color: $accent-color; - -$panel-divider-color: rgba(118, 207, 166, 0.2); - -// ******************** - -$widget-menu-bar-bg-color: $tertiary-accent-color; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-fg-color: #e2e2e2; -$event-redacted-border-color: #cccccc; - -// event timestamp -$event-timestamp-color: #acacac; - -$edit-button-url: "$(res)/img/icon_context_message.svg"; -$copy-button-url: "$(res)/img/icon_copy_message.svg"; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -$imagebody-giflabel: rgba(0, 0, 0, 0.7); -$imagebody-giflabel-border: rgba(0, 0, 0, 0.2); -$imagebody-giflabel-color: rgba(255, 255, 255, 1); - -// Tabbed views -$tab-label-fg-color: #45474a; -$tab-label-active-fg-color: #ffffff; -$tab-label-bg-color: transparent; -$tab-label-active-bg-color: #7ac9a1; -$tab-label-icon-bg-color: #454545; -$tab-label-active-icon-bg-color: #ffffff; - -// Buttons -$button-primary-fg-color: #ffffff; -$button-primary-bg-color: #7ac9a1; -$button-primary-disabled-fg-color: #ffffff; -$button-primary-disabled-bg-color: #bce4d0; -$button-danger-fg-color: #ffffff; -$button-danger-bg-color: #f56679; -$button-danger-disabled-fg-color: #ffffff; -$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color - -// Toggle switch -$togglesw-off-color: #c1c9d6; -$togglesw-on-color: #7ac9a1; -$togglesw-ball-color: #fff; - -// unused? -$progressbar-color: #000; - -$room-warning-bg-color: #fff8e3; - -$memberstatus-placeholder-color: $roomtile-name-color; - -$authpage-bg-color: #2e3649; -$authpage-modal-bg-color: rgba(255, 255, 255, 0.59); -$authpage-body-bg-color: #ffffff; -$authpage-lang-color: #4e5054; -$authpage-body-color: #61708b; - -// ***** Mixins! ***** - -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 36px; - font-family: $font-family; - font-size: 14px; - color: $accent-fg-color; - background-color: $accent-color; - width: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; - display: inline-block; - outline: none; -} - -@define-mixin mx_DialogButton_danger { - background-color: $warning-color; -} - -@define-mixin mx_DialogButton_hover { -} - -@define-mixin mx_DialogButton_small { - @mixin mx_DialogButton; - font-size: 15px; - padding: 0px 1.5em 0px 1.5em; -} - -@define-mixin mx_DialogButton_secondary { - // flip colours for the secondary ones - font-weight: 600; - border: 1px solid $accent-color ! important; - color: $accent-color; - background-color: $accent-fg-color; -} diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss deleted file mode 100644 index c080663acf..0000000000 --- a/res/themes/light/css/_fonts.scss +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Open Sans - * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets - */ - -/* the 'src' links are relative to the bundle.css, which is in a subdirectory. - */ -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); - font-weight: 600; - font-style: italic; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} - -@font-face { - font-family: 'Open Sans'; - src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; -} - -/* - * Fira Mono - * Used for monospace copy, i.e. code - */ - -@font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; -} diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss deleted file mode 100644 index 6ac8d0feba..0000000000 --- a/res/themes/light/css/light.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "_paths.scss"; -@import "_fonts.scss"; -@import "_base.scss"; -@import "../../../../res/css/_components.scss"; From 19e94b9e323edac73568608d9dd97f812417cd55 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 09:13:39 +0000 Subject: [PATCH 07/26] Allow storing the theme settting again --- src/settings/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 4b9918632d..6ab3cab80c 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -232,7 +232,7 @@ export const SETTINGS = { invertedSettingName: 'TagPanel.disableTagPanel', }, "theme": { - supportedLevels: ['config'], + supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: "dharma", controller: new ThemeController(), }, From fb7913580e9347f6d2e035b5221dbff261ddc6c5 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 09:17:24 +0000 Subject: [PATCH 08/26] Theme setting needs to update local state --- src/components/views/settings/tabs/GeneralUserSettingsTab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index ab5b46bb7a..6109f74f35 100644 --- a/src/components/views/settings/tabs/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralUserSettingsTab.js @@ -54,6 +54,7 @@ export default class GeneralUserSettingsTab extends React.Component { if (this.state.theme === newTheme) return; SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme); + this.setState({theme: newTheme}); dis.dispatch({action: 'set_theme', value: newTheme}); }; From dda755dd5a98a3d5d92c292cd921602ff1499af9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 10:03:42 +0000 Subject: [PATCH 09/26] Fix up syntax in default theme --- res/themes/dharma/css/_dharma.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 424532a609..c1abf1bb09 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -271,9 +271,9 @@ $authpage-body-color: #61708b; border: none; flex: 1; color: $primary-fg-color; - }, + } input::placeholder { - color: $roomsublist-label-fg-color; + color: $roomsublist-label-fg-color; } } } From 6e2cef10d99939ddf9ab660a947df93de0444c78 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 10:35:50 +0000 Subject: [PATCH 10/26] Remove incorrect unused comment --- res/themes/dharma/css/_dharma.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c1abf1bb09..2800b7767d 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -225,7 +225,6 @@ $togglesw-off-color: #c1c9d6; $togglesw-on-color: #7ac9a1; $togglesw-ball-color: #fff; -// unused? $progressbar-color: #000; $room-warning-bg-color: #fff8e3; From f2db509394bc89a2c342b7de7acdeaa60043410a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 12:38:55 +0000 Subject: [PATCH 11/26] Update username variants --- res/themes/dharma/css/_dharma.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 2800b7767d..87e2983c80 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -153,14 +153,14 @@ $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; $roomtile-focused-bg-color: #fff; -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; +$username-variant1-color: #368bd6; +$username-variant2-color: #ac3ba8; +$username-variant3-color: #03b381; +$username-variant4-color: #e64f7a; +$username-variant5-color: #ff812d; +$username-variant6-color: #2dc2c5; +$username-variant7-color: #5c56f5; +$username-variant8-color: #74d12c; $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); From fe364d414023a97d946c237a75d1c258dc997245 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 13:02:21 +0000 Subject: [PATCH 12/26] Update global colors in default theme --- res/themes/dharma/css/_dharma.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 87e2983c80..9ae5cf71dd 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -6,6 +6,12 @@ Arial here. */ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif; +// unified palette +// try to use these colors when possible +$accent-color: #03b381; +$notice-primary-color: #ff4b55; +$notice-secondary-color: #61708b; + // typical text (dark-on-white in light skin) $primary-fg-color: #454545; $primary-bg-color: #ffffff; @@ -18,7 +24,6 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color: #7ac9a1; $accent-color-50pct: #92caad; $accent-color-alt: #238CF5; @@ -35,8 +40,8 @@ $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // pinned events indicator -$pinned-unread-color: #ff0064; // $warning-color -$pinned-color: #888; +$pinned-unread-color: $notice-primary-color; +$pinned-color: $notice-secondary-color; // informational plinth $info-plinth-bg-color: #f7f7f7; @@ -72,11 +77,11 @@ $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; $input-lighter-fg-color: $input-darker-fg-color; $input-focused-border-color: #238cf5; -$input-valid-border-color: #7ac9a1; +$input-valid-border-color: $accent-color; $field-focused-label-bg-color: #ffffff; -$button-bg-color: #7ac9a1; +$button-bg-color: $accent-color; $button-fg-color: white; // apart from login forms, which have stronger border @@ -206,13 +211,13 @@ $lightbox-border-color: #ffffff; $tab-label-fg-color: #45474a; $tab-label-active-fg-color: #ffffff; $tab-label-bg-color: transparent; -$tab-label-active-bg-color: #7ac9a1; +$tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; $tab-label-active-icon-bg-color: #ffffff; // Buttons $button-primary-fg-color: #ffffff; -$button-primary-bg-color: #7ac9a1; +$button-primary-bg-color: $accent-color; $button-primary-disabled-fg-color: #ffffff; $button-primary-disabled-bg-color: #bce4d0; $button-danger-fg-color: #ffffff; @@ -222,7 +227,7 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color // Toggle switch $togglesw-off-color: #c1c9d6; -$togglesw-on-color: #7ac9a1; +$togglesw-on-color: $accent-color; $togglesw-ball-color: #fff; $progressbar-color: #000; From d7fb39fd08d8d1f0e531b10b40bd715a73def9c8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 15:40:06 +0000 Subject: [PATCH 13/26] First pass at dark theme colors --- res/css/_common.scss | 2 +- res/css/structures/_ContextualMenu.scss | 2 +- res/css/views/elements/_AccessibleButton.scss | 8 +- res/css/views/elements/_Field.scss | 1 + res/themes/dark/css/_dark.scss | 325 ++++++++---------- res/themes/dharma/css/_dharma.scss | 6 +- 6 files changed, 155 insertions(+), 189 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index aaefb859e4..cd2b0c09cd 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -242,7 +242,7 @@ textarea { font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } .mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover { diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 001c405e15..3788929bf3 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_ContextualMenu { border-radius: 4px; - box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);; + box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index 8de0b82554..25ad51a3fb 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -40,8 +40,7 @@ limitations under the License. } .mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled { - color: $button-primary-disabled-fg-color; - background-color: $button-primary-disabled-bg-color; + opacity: 0.4; } .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm { @@ -51,8 +50,7 @@ limitations under the License. } .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled { - color: $button-primary-disabled-fg-color; - background-color: $button-primary-disabled-bg-color; + opacity: 0.4; } .mx_AccessibleButton_kind_danger { @@ -74,4 +72,4 @@ limitations under the License. .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { color: $button-danger-disabled-fg-color; background-color: $button-danger-disabled-bg-color; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 6ce6b33a05..de6636e116 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -31,6 +31,7 @@ limitations under the License. transition: border-color 0.25s; border: 1px solid $input-border-color; padding: 8px 9px; + color: $primary-fg-color; background-color: $primary-bg-color; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index ee5e1cf5d6..09510244a5 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -1,186 +1,188 @@ +// unified palette +// try to use these colors when possible +$bg-color: #181b21; +$base-color: #15171b; +$base-text-color: #edf3ff; +$header-panel-bg-color: #181b21; +$header-panel-border-color: #1c212b; +$header-panel-text-primary-color: #a1b2d1; +$header-panel-text-secondary-color: #c8c8cd; +$text-primary-color: #edf3ff; +$text-secondary-color: #a1b2d1; +$search-bg-color: #22262e; +$search-placeholder-color: #61708b; +$room-highlight-color: #22262e; // typical text (dark-on-white in light skin) -$primary-fg-color: #212121; -$primary-bg-color: #2d2d2d; - -// used for focusing form controls -$focus-bg-color: #101010; +$primary-fg-color: $text-primary-color; +$primary-bg-color: $bg-color; // used for dialog box text -$light-fg-color: #747474; +$light-fg-color: $header-panel-text-secondary-color; -// button UI (white-on-green in light skin) -$accent-fg-color: $primary-bg-color; -$accent-color: #76CFA6; -$accent-color-alt: $accent-color; -$accent-color-50pct: #76CFA67F; +// used for focusing form controls +$focus-bg-color: $room-highlight-color; -$selection-fg-color: $primary-fg-color; +// informational plinth +$info-plinth-bg-color: $header-panel-bg-color; +$info-plinth-fg-color: #888; -$focus-brightness: 200%; +$preview-bar-bg-color: $header-panel-bg-color; -// red warning colour -$warning-color: #ff0064; -$warning-bg-color: #DF2A8B; -$info-bg-color: #2A9EDF; - -// groups -$info-plinth-bg-color: #454545; - -$other-user-pill-bg-color: rgba(255, 255, 255, 0.1); - -$preview-bar-bg-color: #333; - -// left-panel style muted accent color -$secondary-accent-color: $primary-bg-color; -$tertiary-accent-color: #454545; - -// stop the tinter trying to change the secondary accent color -// by overriding the key to something untintable -// XXX: this is a bit of a hack. -#mx_theme_secondaryAccentColor { - color: #c0ffee ! important; -} - -#mx_theme_tertiaryAccentColor { - color: #c0ffee ! important; -} - -// used by RoomDirectory permissions -$plinth-bg-color: #474747; - -// used by RoomDropTarget -$droptarget-bg-color: rgba(45,45,45,0.5); - -// used by AddressSelector -$selected-color: #000000; +$tagpanel-bg-color: $base-color; // selected for hoverover & selected event tiles -$event-selected-color: #353535; +$event-selected-color: $search-bg-color; // used for the hairline dividers in RoomView -$primary-hairline-color: #474747; +$primary-hairline-color: $header-panel-border-color; // used for the border of input text fields -$input-border-color: #3a3a3a; +$input-border-color: #e7e7e7; +$input-darker-bg-color: $search-bg-color; +$input-darker-fg-color: $search-placeholder-color; +$input-lighter-bg-color: #f2f5f8; +$input-lighter-fg-color: $input-darker-fg-color; +$input-focused-border-color: #238cf5; +$input-valid-border-color: $accent-color; -$input-darker-bg-color: #c1c9d6; -$input-darker-fg-color: #9fa9ba; -$button-bg-color: #7ac9a1; -$button-fg-color: white; -// apart from login forms, which have stronger border -$strong-input-border-color: #656565; +$field-focused-label-bg-color: $bg-color; -// used for UserSettings EditableText -$input-underline-color: $primary-fg-color; -$input-fg-color: $primary-fg-color; // scrollbars $scrollbar-thumb-color: rgba(255, 255, 255, 0.2); $scrollbar-track-color: transparent; + // context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #373737; -$menu-selected-color: #f5f8fa; +$menu-border-color: $header-panel-border-color; +$menu-bg-color: $header-panel-bg-color; +$menu-box-shadow-color: $menu-bg-color; +$menu-selected-color: $room-highlight-color; -$avatar-initial-color: #2d2d2d; -$avatar-bg-color: #ffffff; -$menu-selected-color: #f5f8fa; +$avatar-initial-color: #ffffff; +$avatar-bg-color: $bg-color; -$h3-color: $primary-fg-color; - -$dialog-background-bg-color: #000; +$dialog-background-bg-color: $header-panel-bg-color; $lightbox-background-bg-color: #000; -$greyed-fg-color: #888; - -$neutral-badge-color: #888; - -$preview-widget-bar-color: $menu-bg-color; -$preview-widget-fg-color: $greyed-fg-color; - -$blockquote-bar-color: #ddd; -$blockquote-fg-color: #777; - $settings-grey-fg-color: #a2a2a2; +$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-subsection-fg-color: $text-secondary-color; -$voip-decline-color: #f48080; -$voip-accept-color: #80f480; +$topleftmenu-color: $text-primary-color; +$roomheader-color: $text-primary-color; +$roomheader-addroom-color: $header-panel-text-primary-color; +$roomtopic-color: $text-secondary-color; +$eventtile-meta-color: $roomtopic-color; -$rte-bg-color: #353535; -$rte-code-bg-color: #000; +$roomtile-name-color: $header-panel-text-primary-color; +$roomtile-selected-color: $text-primary-color; +$roomtile-notified-color: $text-primary-color; +$roomtile-selected-bg-color: $room-highlight-color; +$roomtile-focused-bg-color: $room-highlight-color; -$room-warning-bg-color: #2d2d2d; +$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); -// ******************** +$panel-divider-color: $header-panel-border-color; -$roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: #333; -$roomtile-focused-bg-color: rgba(255, 255, 255, 0.2); - -$username-variant1-color: #1e7ddc; -$username-variant2-color: #a756a8; -$username-variant3-color: #7ac9a1; -$username-variant4-color: #f2809d; -$username-variant5-color: #ffc666; -$username-variant6-color: #76ddd7; -$username-variant7-color: #45529b; -$username-variant8-color: #bfd251; - -$roomsublist-background: rgba(0, 0, 0, 0.2); -$roomsublist-label-fg-color: $h3-color; -$roomsublist-label-bg-color: $tertiary-accent-color; -$roomsublist-chevron-color: $accent-color; - -$panel-divider-color: rgba(118, 207, 166, 0.2); - -// ******************** - -$widget-menu-bar-bg-color: $tertiary-accent-color; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: rgba(171, 221, 188, 0.4); -$event-sending-color: #888; -$event-notsent-color: #f44; - -// event redaction -$event-redacted-fg-color: #606060; -$event-redacted-border-color: #000000; +$widget-menu-bar-bg-color: $search-bg-color; // event timestamp -$event-timestamp-color: #acacac; +$event-timestamp-color: $text-secondary-color; -$edit-button-url: "$(res)/img/icon_context_message_dark.svg"; -$copy-button-url: "$(res)/img/icon_copy_message_dark.svg"; +// Tabbed views +$tab-label-fg-color: $text-primary-color; +$tab-label-active-fg-color: $text-primary-color; +$tab-label-bg-color: transparent; +$tab-label-active-bg-color: $accent-color; +$tab-label-icon-bg-color: $text-primary-color; +$tab-label-active-icon-bg-color: $text-primary-color; -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; +// Buttons +$button-primary-fg-color: #ffffff; +$button-primary-bg-color: $accent-color; +$button-secondary-bg-color: transparent; +$button-danger-fg-color: #ffffff; +$button-danger-bg-color: #f56679; +$button-danger-disabled-fg-color: #ffffff; +$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; +$room-warning-bg-color: $header-panel-bg-color; -$imagebody-giflabel: rgba(1, 1, 1, 0.7); -$imagebody-giflabel-border: rgba(1, 1, 1, 0.2); -$imagebody-giflabel-color: rgba(0, 0, 0, 1); +/*** form elements ***/ -// unused? -$progressbar-color: #000; +// .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: $primary-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; + } +} + +.input[type=text]::-webkit-input-placeholder, +.input[type=text]::-moz-placeholder, +.input[type=search]::-webkit-input-placeholder, +.input[type=search]::-moz-placeholder { + color: #a5aab2; +} + +// ***** Mixins! ***** -// XXX: copypasted from _base in order to pick up the right FG color... @define-mixin mx_DialogButton { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; - border-radius: 36px; + border-radius: 4px; font-family: $font-family; font-size: 14px; - color: $accent-fg-color; - background-color: $accent-color; + color: $button-fg-color; + background-color: $button-bg-color; width: auto; padding: 7px; padding-left: 1.5em; @@ -190,50 +192,15 @@ $progressbar-color: #000; outline: none; } +@define-mixin mx_DialogButton_danger { + background-color: $accent-color; +} + @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } -// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it -// better match the theme. Typically applied to dark grey 'off' buttons or -// light grey 'on' buttons. -.mx_filterFlipColor { - filter: invert(1); -} - -.gm-scrollbar .thumb { - filter: invert(1); -} - -// markdown overrides: -.mx_EventTile_content .markdown-body pre:hover { - border-color: #808080 !important; // inverted due to rules below -} -.mx_EventTile_content .markdown-body { - pre, code { - filter: invert(1); - } - - pre code { - filter: none; - } - - table { - tr { - background-color: #000000; - } - - tr:nth-child(2n) { - background-color: #080808; - } - } -} - -// Add a line to the right side of the left panel to distinguish it from the middle panel -.mx_LeftPanel { - border-right: 1px solid $tertiary-accent-color; -} diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 9ae5cf71dd..bd4f525050 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -96,6 +96,7 @@ $scrollbar-track-color: transparent; // context menus $menu-border-color: #ebedf8; $menu-bg-color: #fff; +$menu-box-shadow-color: rgba(118, 131, 156, 0.6); $menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; @@ -218,8 +219,7 @@ $tab-label-active-icon-bg-color: #ffffff; // Buttons $button-primary-fg-color: #ffffff; $button-primary-bg-color: $accent-color; -$button-primary-disabled-fg-color: #ffffff; -$button-primary-disabled-bg-color: #bce4d0; +$button-secondary-bg-color: $accent-fg-color; $button-danger-fg-color: #ffffff; $button-danger-bg-color: #f56679; $button-danger-disabled-fg-color: #ffffff; @@ -391,5 +391,5 @@ textarea::placeholder { font-weight: 600; border: 1px solid $accent-color ! important; color: $accent-color; - background-color: $accent-fg-color; + background-color: $button-secondary-bg-color; } From c00495304ff1be2f37d6aeaf4d5c67dd37db68e3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 16:05:31 +0000 Subject: [PATCH 14/26] Explicit color for tagpanel buttons --- res/css/structures/_TagPanelButtons.scss | 2 +- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss index f7cb189e25..323d77a405 100644 --- a/res/css/structures/_TagPanelButtons.scss +++ b/res/css/structures/_TagPanelButtons.scss @@ -38,7 +38,7 @@ limitations under the License. height: 40px; width: 40px; border-radius: 20px; - background-color: $roomheader-addroom-color; + background-color: $tagpanel-button-color; position: relative; /* overwrite mx_RoleButton inline-block */ display: block !important; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 09510244a5..74ce28d491 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -75,6 +75,7 @@ $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; +$tagpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index bd4f525050..86b90ff6d7 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -145,6 +145,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; +$tagpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; From 8652a094f35f985296210fa6ab055cde63b9565a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 16:42:11 +0000 Subject: [PATCH 15/26] Allow theming room header buttons --- res/css/views/rooms/_RoomHeader.scss | 32 +++++++++++++++---- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + .../views/elements/ManageIntegsButton.js | 8 +++-- src/components/views/rooms/RoomHeader.js | 26 +++++++++------ 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 1359bc5f57..2e3a5e5ef6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -58,7 +58,6 @@ limitations under the License. .mx_RoomHeader_buttons { display: flex; - align-items: center; background-color: $primary-bg-color; padding-right: 5px; } @@ -116,10 +115,6 @@ limitations under the License. opacity: 0.6; } -.mx_RoomHeader_settingsButton object { - pointer-events: none; -} - .mx_RoomHeader_name, .mx_RoomHeader_avatar, .mx_RoomHeader_avatarPicker, @@ -199,10 +194,32 @@ limitations under the License. .mx_RoomHeader_button { margin-left: 10px; cursor: pointer; + height: 20px; + width: 20px; + background-color: $roomheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_RoomHeader_button object { - pointer-events: none; +.mx_RoomHeader_settingsButton { + mask-image: url('$(res)/img/feather-icons/settings.svg'); +} + +.mx_RoomHeader_forgetButton { + mask-image: url('$(res)/img/leave.svg'); + width: 26px; +} + +.mx_RoomHeader_searchButton { + mask-image: url('$(res)/img/feather-icons/search.svg'); +} + +.mx_RoomHeader_shareButton { + mask-image: url('$(res)/img/feather-icons/share.svg'); +} + +.mx_RoomHeader_manageIntegsButton { + mask-image: url('$(res)/img/feather-icons/grid.svg'); } .mx_RoomHeader_showPanel { @@ -219,6 +236,7 @@ limitations under the License. .mx_RoomHeader_pinnedButton { position: relative; + mask-image: url('$(res)/img/icons-pin.svg'); } .mx_RoomHeader_pinsIndicator { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 74ce28d491..ab636e4218 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -76,6 +76,7 @@ $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; +$roomheader-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 86b90ff6d7..3a20cc8f0c 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -146,6 +146,7 @@ $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; +$roomheader-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js index e5cc21d85e..3240050b6a 100644 --- a/src/components/views/elements/ManageIntegsButton.js +++ b/src/components/views/elements/ManageIntegsButton.js @@ -24,7 +24,6 @@ import ScalarMessaging from '../../../ScalarMessaging'; import Modal from "../../../Modal"; import { _t } from '../../../languageHandler'; import AccessibleButton from './AccessibleButton'; -import TintableSvg from './TintableSvg'; export default class ManageIntegsButton extends React.Component { constructor(props) { @@ -76,6 +75,7 @@ export default class ManageIntegsButton extends React.Component { if (this.scalarClient !== null) { const integrationsButtonClasses = classNames({ mx_RoomHeader_button: true, + mx_RoomHeader_manageIntegsButton: true, mx_ManageIntegsButton_error: !!this.state.scalarError, }); @@ -94,8 +94,10 @@ export default class ManageIntegsButton extends React.Component { } integrationsButton = ( - - + { integrationsWarningTriangle } { integrationsErrorPopup } diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 6e5ccab7f9..5e56f59425 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -154,7 +154,6 @@ module.exports = React.createClass({ render: function() { const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const EmojiText = sdk.getComponent('elements.EmojiText'); let searchStatus = null; @@ -228,8 +227,10 @@ module.exports = React.createClass({ if (this.props.onSettingsClick) { settingsButton = - - + ; } @@ -245,7 +246,6 @@ module.exports = React.createClass({ { pinsIndicator } - ; } @@ -260,24 +260,30 @@ module.exports = React.createClass({ let forgetButton; if (this.props.onForgetClick) { forgetButton = - - + ; } let searchButton; if (this.props.onSearchClick && this.props.inRoom) { searchButton = - - + ; } let shareRoomButton; if (this.props.inRoom) { shareRoomButton = - - + ; } From 3cba5edd6f367d31fd401fd5070cc6e290658d58 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 17:31:47 +0000 Subject: [PATCH 16/26] Allow theming right panel header buttons --- res/css/structures/_RightPanel.scss | 33 ++++++++++++++----- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + .../views/right_panel/GroupHeaderButtons.js | 6 ++-- .../views/right_panel/HeaderButton.js | 11 +++---- .../views/right_panel/RoomHeaderButtons.js | 9 +++-- 6 files changed, 42 insertions(+), 19 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 592eea067e..895382d714 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -25,9 +25,7 @@ limitations under the License. .mx_RightPanel_header { order: 1; - border-bottom: 1px solid $primary-hairline-color; - flex: 0 0 52px; } @@ -45,16 +43,35 @@ limitations under the License. cursor: pointer; flex: 0 0 auto; vertical-align: top; - margin-top: 4px; - padding-left: 5px; - padding-right: 5px; + margin-left: 5px; + margin-right: 5px; text-align: center; - position: relative; border-bottom: 2px solid transparent; + height: 20px; + width: 20px; + background-color: $rightpanel-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_RightPanel_headerButton object { - pointer-events: none; +.mx_RightPanel_membersButton { + mask-image: url('$(res)/img/feather-icons/user.svg'); +} + +.mx_RightPanel_filesButton { + mask-image: url('$(res)/img/feather-icons/files.svg'); +} + +.mx_RightPanel_notifsButton { + mask-image: url('$(res)/img/feather-icons/notifications.svg'); +} + +.mx_RightPanel_groupMembersButton { + mask-image: url('$(res)/img/icons-people.svg'); +} + +.mx_RightPanel_roomsButton { + mask-image: url('$(res)/img/icons-room-nobg.svg'); } .mx_RightPanel_headerButton_highlight { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index ab636e4218..d281476e37 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; +$rightpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 3a20cc8f0c..c90ffe77a9 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -147,6 +147,7 @@ $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; +$rightpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js index 6867b0bb9d..13379d49e3 100644 --- a/src/components/views/right_panel/GroupHeaderButtons.js +++ b/src/components/views/right_panel/GroupHeaderButtons.js @@ -65,12 +65,14 @@ export default class GroupHeaderButtons extends HeaderButtons { ]; return [ - , - - - ; + onClick={this.onClick}> + ; } } @@ -62,14 +61,14 @@ HeaderButton.propTypes = { isHighlighted: PropTypes.bool.isRequired, // The phase to swap to when the button is clicked clickPhase: PropTypes.string.isRequired, - // The source file of the icon to display - iconSrc: PropTypes.string.isRequired, // The badge to display above the icon badge: PropTypes.node, // The parameters to track the click event analytics: PropTypes.arrayOf(PropTypes.string).isRequired, + // Button name + name: PropTypes.string.isRequired, // Button title title: PropTypes.string.isRequired, }; diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js index 1985909f4a..8d10094637 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.js +++ b/src/components/views/right_panel/RoomHeaderButtons.js @@ -52,17 +52,20 @@ export default class RoomHeaderButtons extends HeaderButtons { ]; return [ - , - , - Date: Tue, 12 Feb 2019 17:48:27 +0000 Subject: [PATCH 17/26] Allow theming group header buttons --- res/css/structures/_GroupView.scss | 17 +++++++++++++---- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + src/components/structures/GroupView.js | 23 +++++++++++++++-------- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index ace310ee5b..1c477a959a 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -44,13 +44,22 @@ limitations under the License. } .mx_GroupHeader_button { - margin-left: 12px; + margin-left: 5px; + margin-right: 5px; cursor: pointer; + height: 20px; + width: 20px; + background-color: $groupheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; } -.mx_GroupHeader_button object { - // prevents clicks from being swallowed by svg in 'object' tag - pointer-events: none; +.mx_GroupHeader_editButton { + mask-image: url('$(res)/img/icons-settings-room.svg'); +} + +.mx_GroupHeader_shareButton { + mask-image: url('$(res)/img/icons-share.svg'); } .mx_GroupView_editable { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index d281476e37..41aaeae50a 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color; $roomheader-addroom-color: $header-panel-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; $rightpanel-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c90ffe77a9..7cc6a2ce88 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -147,6 +147,7 @@ $roomheader-color: #45474a; $roomheader-addroom-color: #91A1C0; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; +$groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 530a200a18..89fce9c718 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1157,7 +1157,6 @@ export default React.createClass({ render: function() { const GroupAvatar = sdk.getComponent("avatars.GroupAvatar"); const Spinner = sdk.getComponent("elements.Spinner"); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); if (this.state.summaryLoading && this.state.error === null || this.state.saving) { @@ -1248,13 +1247,17 @@ export default React.createClass({ if (this.state.editing) { rightButtons.push( { _t('Save') } , ); rightButtons.push( - + {_t("Cancel")} , @@ -1262,16 +1265,20 @@ export default React.createClass({ } else { if (summary.user && summary.user.membership === 'join') { rightButtons.push( - - , ); } rightButtons.push( - - + , ); } From 6c954dadc852dcccd8a46d1e8d3527d7d52985cb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 12 Feb 2019 18:05:19 +0000 Subject: [PATCH 18/26] Allow theming message composer buttons --- res/css/views/rooms/_MessageComposer.scss | 43 +++++++++++-------- res/themes/dark/css/_dark.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + src/components/views/rooms/MessageComposer.js | 30 ++++++++----- src/components/views/rooms/Stickerpicker.js | 13 +++--- 5 files changed, 54 insertions(+), 34 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 7ee7efcaff..db8eb4995d 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -180,27 +180,36 @@ limitations under the License. color: $accent-color; } -.mx_MessageComposer_upload, -.mx_MessageComposer_hangup, -.mx_MessageComposer_voicecall, -.mx_MessageComposer_videocall, -.mx_MessageComposer_apps, -.mx_MessageComposer_stickers { - /*display: table-cell;*/ - /*vertical-align: middle;*/ - /*padding-left: 10px;*/ - padding-right: 12px; +.mx_MessageComposer_button { + margin-right: 12px; cursor: pointer; padding-top: 4px; + height: 20px; + width: 20px; + background-color: $composer-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; } -.mx_MessageComposer_upload object, -.mx_MessageComposer_hangup object, -.mx_MessageComposer_voicecall object, -.mx_MessageComposer_videocall object, -.mx_MessageComposer_apps object, -.mx_MessageComposer_stickers object { - pointer-events: none; +.mx_MessageComposer_upload { + mask-image: url('$(res)/img/feather-icons/paperclip.svg'); +} + +.mx_MessageComposer_hangup { + mask-image: url('$(res)/img/hangup.svg'); +} + +.mx_MessageComposer_voicecall { + mask-image: url('$(res)/img/feather-icons/phone.svg'); +} + +.mx_MessageComposer_videocall { + mask-image: url('$(res)/img/feather-icons/video.svg'); +} + +.mx_MessageComposer_stickers { + mask-image: url('$(res)/img/feather-icons/face.svg'); } .mx_MessageComposer_formatting { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 41aaeae50a..a8f1ae49e2 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -79,6 +79,7 @@ $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color; +$composer-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 7cc6a2ce88..b4626eb7c3 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -149,6 +149,7 @@ $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0; $rightpanel-button-color: #91A1C0; +$composer-button-color: #91A1C0; $roomtopic-color: #9fa9ba; $eventtile-meta-color: $roomtopic-color; diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 7117825d76..10142b2b4b 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -306,7 +306,6 @@ export default class MessageComposer extends React.Component { render() { const uploadInputStyle = {display: 'none'}; const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); - const TintableSvg = sdk.getComponent("elements.TintableSvg"); const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput"); const controls = []; @@ -335,17 +334,26 @@ export default class MessageComposer extends React.Component { // Call buttons if (this.props.callState && this.props.callState !== 'ended') { hangupButton = - - {_t('Hangup')} + ; } else { callButton = - - + ; videoCallButton = - - + ; } @@ -385,9 +393,11 @@ export default class MessageComposer extends React.Component { // check separately for whether we can call, but this is slightly // complex because of conference calls. const uploadButton = ( - - + - + title={_t("Hide Stickers")} + > ; } else { // Show show-stickers button @@ -360,10 +359,10 @@ export default class Stickerpicker extends React.Component { - + title={_t("Show Stickers")} + > ; } return
From b0d08b9a251635cbcf1e9136e199ea95d84aff7c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 09:45:20 +0000 Subject: [PATCH 19/26] Rename dharma theme to light theme --- res/css/views/elements/_Field.scss | 2 +- res/themes/dark/css/dark.scss | 6 +++--- res/themes/{dharma => light}/css/_fonts.scss | 0 .../{dharma/css/_dharma.scss => light/css/_light.scss} | 0 res/themes/{dharma => light}/css/_paths.scss | 0 res/themes/{dharma/css/dharma.scss => light/css/light.scss} | 2 +- .../views/settings/tabs/GeneralUserSettingsTab.js | 2 +- src/settings/Settings.js | 2 +- src/settings/controllers/ThemeController.js | 4 ++-- 9 files changed, 9 insertions(+), 9 deletions(-) rename res/themes/{dharma => light}/css/_fonts.scss (100%) rename res/themes/{dharma/css/_dharma.scss => light/css/_light.scss} (100%) rename res/themes/{dharma => light}/css/_paths.scss (100%) rename res/themes/{dharma/css/dharma.scss => light/css/light.scss} (79%) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index de6636e116..075bd28a11 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* TODO: Consider unifying with general input styles in _dharma.scss */ +/* TODO: Consider unifying with general input styles in _light.scss */ .mx_Field { position: relative; diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index a869dc39e3..e7ae7c8cf8 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -1,5 +1,5 @@ -@import "../../dharma/css/_paths.scss"; -@import "../../dharma/css/_fonts.scss"; -@import "../../dharma/css/_dharma.scss"; +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; @import "_dark.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/dharma/css/_fonts.scss b/res/themes/light/css/_fonts.scss similarity index 100% rename from res/themes/dharma/css/_fonts.scss rename to res/themes/light/css/_fonts.scss diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/light/css/_light.scss similarity index 100% rename from res/themes/dharma/css/_dharma.scss rename to res/themes/light/css/_light.scss diff --git a/res/themes/dharma/css/_paths.scss b/res/themes/light/css/_paths.scss similarity index 100% rename from res/themes/dharma/css/_paths.scss rename to res/themes/light/css/_paths.scss diff --git a/res/themes/dharma/css/dharma.scss b/res/themes/light/css/light.scss similarity index 79% rename from res/themes/dharma/css/dharma.scss rename to res/themes/light/css/light.scss index 032154f999..6acb2d9d94 100644 --- a/res/themes/dharma/css/dharma.scss +++ b/res/themes/light/css/light.scss @@ -1,4 +1,4 @@ @import "_paths.scss"; @import "_fonts.scss"; -@import "_dharma.scss"; +@import "_light.scss"; @import "../../../../res/css/_components.scss"; diff --git a/src/components/views/settings/tabs/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/GeneralUserSettingsTab.js index 6109f74f35..378a54a51a 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/settings/Settings.js b/src/settings/Settings.js index 6ab3cab80c..bd9d81996d 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -233,7 +233,7 @@ export const SETTINGS = { }, "theme": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: "dharma", + default: "light", controller: new ThemeController(), }, "webRtcForcePeerToPeer": { diff --git a/src/settings/controllers/ThemeController.js b/src/settings/controllers/ThemeController.js index 7feff9b7ae..615fc4c192 100644 --- a/src/settings/controllers/ThemeController.js +++ b/src/settings/controllers/ThemeController.js @@ -17,7 +17,7 @@ limitations under the License. import SettingController from "./SettingController"; const SUPPORTED_THEMES = [ - "dharma", + "light", "dark", ]; @@ -25,7 +25,7 @@ export default class ThemeController extends SettingController { getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) { // Override in case some no longer supported theme is stored here if (!SUPPORTED_THEMES.includes(calculatedValue)) { - return "dharma"; + return "light"; } return null; // no override From 932b377dc5f31b17da358c493fe2014b2f312834 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:06:18 +0000 Subject: [PATCH 20/26] Restore color inversion from old dark theme --- res/themes/dark/css/_dark.scss | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index a8f1ae49e2..6782322cbe 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -209,3 +209,37 @@ $room-warning-bg-color: $header-panel-bg-color; background-color: $button-secondary-bg-color; } +// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it +// better match the theme. Typically applied to dark grey 'off' buttons or +// light grey 'on' buttons. +.mx_filterFlipColor { + filter: invert(1); +} + +.gm-scrollbar .thumb { + filter: invert(1); +} + +// markdown overrides: +.mx_EventTile_content .markdown-body pre:hover { + border-color: #808080 !important; // inverted due to rules below +} +.mx_EventTile_content .markdown-body { + pre, code { + filter: invert(1); + } + + pre code { + filter: none; + } + + table { + tr { + background-color: #000000; + } + + tr:nth-child(2n) { + background-color: #080808; + } + } +} From a7bae3083795b8244aeecff72b9b2d6e0abc78c1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:16:01 +0000 Subject: [PATCH 21/26] Tweak create community for dark theme --- res/css/views/dialogs/_CreateGroupDialog.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss index 500e12ee49..128eacc3ce 100644 --- a/res/css/views/dialogs/_CreateGroupDialog.scss +++ b/res/css/views/dialogs/_CreateGroupDialog.scss @@ -43,10 +43,9 @@ limitations under the License. .mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix { - height: 35px; padding: 0px 5px; line-height: 37px; - background-color: $input-border-color; + background-color: $input-darker-bg-color; border: 1px solid $input-border-color; text-align: center; } From b13baf89269deb178700d1cef8d7a2c8271e4d9c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:30:38 +0000 Subject: [PATCH 22/26] Tweak start a chat for dark theme --- res/css/_common.scss | 1 + res/themes/dark/css/_dark.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index cd2b0c09cd..8d18eac931 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -62,6 +62,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { /* Required by Firefox */ textarea { font-family: $font-family; + color: $primary-fg-color; } /* Prevent ugly dotted highlight around selected elements in Firefox */ diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6782322cbe..63aff91806 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -31,6 +31,9 @@ $preview-bar-bg-color: $header-panel-bg-color; $tagpanel-bg-color: $base-color; +// used by AddressSelector +$selected-color: $room-highlight-color; + // selected for hoverover & selected event tiles $event-selected-color: $search-bg-color; From 72f1b79b1db29e8fbb117f0cb81e4d51ca7c87a9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:33:30 +0000 Subject: [PATCH 23/26] Tweak create key backup input for dark theme --- res/css/_common.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/_common.scss b/res/css/_common.scss index 8d18eac931..1f973c28d2 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -52,6 +52,7 @@ a:visited { input[type=text], input[type=password], textarea { background-color: transparent; + color: $primary-fg-color; } input[type=text]:focus, input[type=password]:focus, textarea:focus { From 7bad8d594daee57c8697971ba39c185bc9dbc524 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:39:10 +0000 Subject: [PATCH 24/26] Move common input styles out of themes --- res/css/_common.scss | 45 ++++++++++++++++++++++++++++++++ res/themes/dark/css/_dark.scss | 7 ----- res/themes/light/css/_light.scss | 13 +-------- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1f973c28d2..4399fb224e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -50,6 +50,51 @@ a:visited { color: $accent-color-alt; } +input[type=text], +input[type=search], +input[type=password] { + padding: 9px; + font-family: $font-family; + font-size: 14px; + font-weight: 600; + min-width: 0; +} + +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; +} + input[type=text], input[type=password], textarea { background-color: transparent; color: $primary-fg-color; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 63aff91806..8a4e25d689 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -173,13 +173,6 @@ $room-warning-bg-color: $header-panel-bg-color; } } -.input[type=text]::-webkit-input-placeholder, -.input[type=text]::-moz-placeholder, -.input[type=search]::-webkit-input-placeholder, -.input[type=search]::-moz-placeholder { - color: #a5aab2; -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index b4626eb7c3..9911f30d7b 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -287,16 +287,6 @@ $authpage-body-color: #61708b; } } -input[type=text], -input[type=search], -input[type=password] { - padding: 9px; - font-family: $font-family; - font-size: 14px; - font-weight: 600; - min-width: 0; -} - /*** panels ***/ .dark-panel { background-color: $secondary-accent-color; @@ -329,7 +319,6 @@ input[type=search].mx_textinput_icon { 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 { @@ -342,7 +331,7 @@ 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; + display: none; } .input[type=text]::-webkit-input-placeholder, From 1359ac62cbc68a32e65029c24588ba257c2a5631 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 10:52:03 +0000 Subject: [PATCH 25/26] Tweak header divider line --- res/css/structures/_HeaderButtons.scss | 2 +- res/themes/dark/css/_dark.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index 3c33b325ff..a93cd0336a 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_HeaderButtons::before { content: ""; background-color: $header-divider-color; - margin: 2px 20px 5px 15px ; + margin: 0 15px; border-radius: 2px; width: 2px; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8a4e25d689..1ec289645f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -86,6 +86,8 @@ $composer-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; +$header-divider-color: $header-panel-border-color; + $roomtile-name-color: $header-panel-text-primary-color; $roomtile-selected-color: $text-primary-color; $roomtile-notified-color: $text-primary-color; From 59b58cbbaceed9596beb15fccec25d24bf3fb364 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 13 Feb 2019 11:31:30 +0000 Subject: [PATCH 26/26] Restore highlighted right panel marker --- res/css/structures/_RightPanel.scss | 30 ++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 895382d714..474040a626 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -49,33 +49,49 @@ limitations under the License. border-bottom: 2px solid transparent; height: 20px; width: 20px; + position: relative; +} + +.mx_RightPanel_headerButton::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; background-color: $rightpanel-button-color; mask-repeat: no-repeat; mask-size: contain; } -.mx_RightPanel_membersButton { +.mx_RightPanel_membersButton::before { mask-image: url('$(res)/img/feather-icons/user.svg'); } -.mx_RightPanel_filesButton { +.mx_RightPanel_filesButton::before { mask-image: url('$(res)/img/feather-icons/files.svg'); } -.mx_RightPanel_notifsButton { +.mx_RightPanel_notifsButton::before { mask-image: url('$(res)/img/feather-icons/notifications.svg'); } -.mx_RightPanel_groupMembersButton { +.mx_RightPanel_groupMembersButton::before { mask-image: url('$(res)/img/icons-people.svg'); } -.mx_RightPanel_roomsButton { +.mx_RightPanel_roomsButton::before { mask-image: url('$(res)/img/icons-room-nobg.svg'); } -.mx_RightPanel_headerButton_highlight { - border-color: $button-bg-color; +.mx_RightPanel_headerButton_highlight::after { + content: ''; + position: absolute; + bottom: -6px; + left: 0; + right: 0; + height: 2px; + background-color: $button-bg-color; } .mx_RightPanel_headerButton_badge {