diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 918ee0a5863..a315b627af2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1143,9 +1143,13 @@ } } }, - "themeAndroidDark": { - "message": "Android (dark)", - "description": "Label text for dark Android theme" + "themeLight": { + "message": "Light", + "description": "Label text for light theme (normal)" + }, + "themeDark": { + "message": "Dark", + "description": "Label text for dark theme" }, "hideMenuBar": { "message": "Hide menu bar", diff --git a/js/background.js b/js/background.js index 0627797dc46..1b786ddad77 100644 --- a/js/background.js +++ b/js/background.js @@ -114,6 +114,17 @@ } }); + function mapOldThemeToNew(theme) { + switch (theme) { + case 'android-dark': + return 'dark'; + case 'android': + case 'ios': + default: + return 'light'; + } + } + // We need this 'first' check because we don't want to start the app up any other time // than the first time. And storage.fetch() will cause onready() to fire. let first = true; @@ -171,6 +182,10 @@ }, }; + const themeSetting = window.Events.getThemeSetting(); + const newThemeSetting = mapOldThemeToNew(themeSetting); + window.Events.setThemeSetting(newThemeSetting); + try { await ConversationController.load(); } finally { diff --git a/js/debug_log_start.js b/js/debug_log_start.js index 77143076e8e..24b12e2a716 100644 --- a/js/debug_log_start.js +++ b/js/debug_log_start.js @@ -5,7 +5,7 @@ $(document).on('keyup', function(e) { }); const $body = $(document.body); -$body.addClass(window.theme); +$body.addClass(`${window.theme}-theme`); // got.js appears to need this to successfully submit debug logs to the cloud window.setImmediate = window.nodeSetImmediate; diff --git a/js/permissions_popup_start.js b/js/permissions_popup_start.js index 397f1626fd8..c66b63bf778 100644 --- a/js/permissions_popup_start.js +++ b/js/permissions_popup_start.js @@ -5,7 +5,7 @@ $(document).on('keyup', function(e) { }); const $body = $(document.body); -$body.addClass(window.theme); +$body.addClass(`${window.theme}-theme`); window.view = new Whisper.ConfirmationDialogView({ message: i18n('audioPermissionNeeded'), diff --git a/js/settings_start.js b/js/settings_start.js index 2cf1cc97b50..ef588678557 100644 --- a/js/settings_start.js +++ b/js/settings_start.js @@ -5,7 +5,7 @@ $(document).on('keyup', function(e) { }); const $body = $(document.body); -$body.addClass(window.theme); +$body.addClass(`${window.theme}-theme`); const getInitialData = async () => ({ deviceName: await window.getDeviceName(), diff --git a/js/views/app_view.js b/js/views/app_view.js index c11c08eefc2..eff7b1a2e1d 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -16,12 +16,11 @@ openInbox: 'openInbox', }, applyTheme: function() { - var theme = storage.get('theme-setting') || 'android'; + var theme = storage.get('theme-setting') || 'light'; this.$el - .removeClass('ios') - .removeClass('android-dark') - .removeClass('android') - .addClass(theme); + .removeClass('light-theme') + .removeClass('dark-theme') + .addClass(`${theme}-theme`); }, applyHideMenu: function() { var hideMenuBar = storage.get('hide-menu-bar', false); diff --git a/js/views/settings_view.js b/js/views/settings_view.js index 686b2ea7cea..6b15ae96931 100644 --- a/js/views/settings_view.js +++ b/js/views/settings_view.js @@ -85,10 +85,9 @@ value: window.initialData.themeSetting, setFn: theme => { $(document.body) - .removeClass('android') - .removeClass('android-dark') - .removeClass('ios') - .addClass(theme); + .removeClass('dark-theme') + .removeClass('light-theme') + .addClass(`${theme}-theme`); window.setThemeSetting(theme); }, }); @@ -132,7 +131,8 @@ nameOnly: i18n('nameOnly'), audioNotificationDescription: i18n('audioNotificationDescription'), isAudioNotificationSupported: Settings.isAudioNotificationSupported(), - themeAndroidDark: i18n('themeAndroidDark'), + themeLight: i18n('themeLight'), + themeDark: i18n('themeDark'), hideMenuBar: i18n('hideMenuBar'), clearDataHeader: i18n('clearDataHeader'), clearDataButton: i18n('clearDataButton'), diff --git a/settings.html b/settings.html index a5f0beb54f0..39cc6f9fded 100644 --- a/settings.html +++ b/settings.html @@ -45,16 +45,12 @@

{{ theme }}

- - + +
- - -
-
- - + +

diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss deleted file mode 100644 index 2f1a0b93742..00000000000 --- a/stylesheets/_ios.scss +++ /dev/null @@ -1,488 +0,0 @@ -$ios-header-border-color: rgba(0, 0, 0, 0.05); -$ios-border-color: rgba(0, 0, 0, 0.1); - -.ios { - #header { - height: $header-height; - border-bottom: 1px solid $ios-header-border-color; - border-width: 0 1px 1px 0; - background-color: $grey_l; - color: $grey_d; - h1 { - display: none; - } - } - .gutter { - border-right: 1px solid $ios-border-color; - .content { - height: calc(100% - #{$header-height}); - background: $ios-border-color; - } - .contact { - background: $grey_l; - margin-right: 0; - - &.selected { - background: $blue; - color: white; - .last-timestamp { - color: white; - } - } - } - } - .banner { - top: 15px; - } - - .tool-bar { - float: left; - padding: 15px; - } - input[type='text']:active, - input[type='text']:focus, - input[type='search']:active, - input[type='search']:focus, - input[type='search'].active, - form.active { - outline-offset: 0; - outline: -webkit-focus-ring-color auto 5px; - } - input.search { - border-radius: 5px; - width: 220px; - height: 34px; - padding-left: $search-padding-left-ios; - line-height: 34px; - background-color: #dddddd; - &.active.rtl { - background-position: left $search-padding-left-ios center; - } - } - .conversation-header { - background-color: $grey_l; - color: $grey_d; - border-color: $ios-header-border-color; - text-align: left; - - // Without this, it interacts poorly with 100% height placeholder shown on startup - position: absolute; - top: 0; - width: 100%; - z-index: 1; - - .conversation-title { - line-height: $header-height; - - .verified-icon { - @include color-svg('../images/verified-check.svg', #454545); - } - } - - .avatar { - display: none; - } - } - - .conversation .panel, - .conversation .react-wrapper { - position: absolute; - top: $header-height; - bottom: 0; - width: 100%; - } - - .settings h3, - .menu-list li { - text-transform: capitalize; - } - .bottom-bar { - padding: 15px; - min-height: 30px; - border-top: 1px solid $ios-border-color; - form.send { - border-radius: 5px; - border: 1px solid $ios-border-color; - } - } - - .error-message.content, - .control .content { - padding: 10px; - } - - .message-container, - .message-list { - .bubble .content { - margin-top: 0px; - } - } - - .embedded-contact { - margin: 0; - color: white; - - .first-line { - margin: 0; - padding: 10px; - - .text-container { - .contact-name { - color: white; - } - } - } - - .send-message { - font-weight: normal; - border-bottom: none; - margin-top: 0; - color: white; - - .bubble-icon { - @include color-svg('../images/chat-bubble-outline.svg', white); - } - } - } - - .incoming .embedded-contact { - .first-line { - .text-container { - .contact-name { - color: $blue; - } - } - } - - color: black; - - .send-message { - color: $blue; - - .bubble-icon { - @include color-svg('../images/chat-bubble-outline.svg', $blue); - } - } - } - - .embedded-contact + .content { - border-bottom: 1px solid white; - } - - .quoted-message { - // Not ideal, but necessary to override the specificity of the android theme color - // classes used in conversations.scss - background-color: white !important; - border: none !important; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - - margin-top: 0px !important; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - - .primary { - padding: 10px; - - .text, - .filename-label, - .type-label { - border-left: 2px solid $grey_l1; - padding: 5px; - padding-left: 7px; - // Without this smaller bottom padding, text beyond four lines still shows up! - padding-bottom: 2px; - color: black; - a { - color: $blue; - } - } - - .author { - display: none; - } - - .ios-label { - display: block; - color: $grey_l1; - font-size: smaller; - margin-bottom: 3px; - } - } - - .icon-container { - height: 61px; - width: 61px; - min-width: 61px; - - .circle-background { - left: 12px; - right: 12px; - top: 12px; - bottom: 12px; - - background-color: $blue !important; - } - - .icon { - left: 18px; - right: 18px; - top: 18px; - bottom: 18px; - - background-color: white !important; - } - - .inner { - padding: 12px; - height: 61px; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - } - } - - .close-container { - flex: initial; - min-width: 32px; - width: 32px; - height: 50px; - position: relative; - - top: auto; - right: auto; - - display: flex; - align-items: center; - justify-content: center; - - -webkit-mask: none; - background: none; - - .close-button { - height: 20px; - width: 20px; - - @include color-svg('../images/close-circle.svg', $grey_l4); - } - } - - .from-me { - .primary { - .text, - .filename-label, - .type-label { - border-left: 2px solid $blue; - } - } - } - } - - .incoming .quoted-message { - border-bottom: 1px solid lightgray !important; - } - - .quoted-message.from-me .primary { - .text, - .filename-label, - .type-label { - border-left: 2px solid $blue; - } - } - - .outgoing .quoted-message, - .private .incoming .quoted-message { - margin-top: 0px; - } - - .outgoing .quoted-message .icon-container .circle-background { - background-color: lightgray !important; - } - - .bottom-bar { - .quote-wrapper { - margin-right: 0px; - margin-bottom: 15px; - } - - .quoted-message { - background: none !important; - border-radius: 0; - - .primary { - padding: 0px; - - .ios-label { - color: $grey_l4; - } - } - - .icon-container { - height: 50px; - width: 50px; - min-width: 50px; - - .circle-background { - left: 6px; - right: 6px; - top: 6px; - bottom: 6px; - - background-color: $blue !important; - } - - .icon { - left: 12px; - right: 12px; - top: 12px; - bottom: 12px; - } - - .inner { - padding: 0px; - height: 50px; - } - } - } - } - - .attachments .bubbled { - border-radius: 15px; - - padding: 10px; - padding-top: 0px; - padding-bottom: 5px; - - video, - audio { - margin-bottom: 5px; - } - - position: relative; - } - - .tail-wrapper { - margin-bottom: 5px; - } - .inner-bubble { - border-radius: 15px; - overflow: hidden; - - .body { - margin-top: 0; - display: inline-block; - padding: 10px; - position: relative; - word-break: break-word; - } - } - - .tail-wrapper.with-tail { - position: relative; - - &:before, - &:after { - content: ''; - display: block; - border-radius: 20px; - position: absolute; - width: 10px; - } - &:before { - right: -1px; - bottom: -3px; - height: 10px; - border-radius: 20px; - background: $blue; - } - &:after { - height: 11px; - right: -6px; - bottom: -3px; - background: #eee; - } - } - - .meta { - clear: both; - } - - .outgoing .tail-wrapper { - float: right; - - .inner-bubble { - max-width: 100%; - } - } - - .incoming .tail-wrapper { - float: left; - - .inner-bubble { - max-width: 100%; - } - } - - // The browser doesn't always clip the border-radius properly, so we can get a - // partial-pixel halo effect. Sadly, it is still needed because a quote can force the - // bubble wider than an attached image, and we need a background color on the bottom - // section if the image doesn't cover it all. - .outgoing .tail-wrapper { - .inner-bubble { - background-color: $blue; - } - - &, - .body, - a { - @include invert-text-color; - } - } - - .incoming .tail-wrapper { - &.with-tail { - &:before { - left: -1px; - background-color: white; - } - &:after { - left: -6px; - } - } - - .inner-bubble { - background-color: white; - color: black; - } - } - - .outgoing .attachments .fileView .icon { - @include color-svg('../images/file.svg', white); - &.audio { - @include color-svg('../images/audio.svg', white); - } - &.video { - @include color-svg('../images/video.svg', white); - } - &.voice { - @include color-svg('../images/voice.svg', white); - } - } - - .attachment { - a { - border-radius: 15px; - } - img { - margin-right: auto; - margin-left: auto; - } - } - .hourglass { - @include hourglass(#999); - } -} diff --git a/stylesheets/android-dark.scss b/stylesheets/_theme_dark.scss similarity index 99% rename from stylesheets/android-dark.scss rename to stylesheets/_theme_dark.scss index 48c9cb3ecf3..4e2a462c29c 100644 --- a/stylesheets/android-dark.scss +++ b/stylesheets/_theme_dark.scss @@ -6,11 +6,11 @@ $button-dark: #ccc; $text-dark: #cccccc; $text-dark_l2: darken($text-dark, 30%); -body.android-dark { +body.dark-theme { background-color: $grey-dark; } -.android-dark { +.dark-theme { .app-loading-screen { background-color: $grey-dark; } diff --git a/stylesheets/_android.scss b/stylesheets/_theme_light.scss similarity index 99% rename from stylesheets/_android.scss rename to stylesheets/_theme_light.scss index cf4c70ef068..7a3aa043e5b 100644 --- a/stylesheets/_android.scss +++ b/stylesheets/_theme_light.scss @@ -1,4 +1,4 @@ -.android { +.light-theme { #header { background-color: $blue; color: white; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index b7467f21aa6..0674c7fca5f 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -16,9 +16,8 @@ // Build the main view @import 'index'; @import 'conversation'; -@import 'ios'; -@import 'android'; -@import 'android-dark'; +@import 'theme_light'; +@import 'theme_dark'; // Installer @import 'options'; diff --git a/test/fixtures_test.js b/test/fixtures_test.js index 42611d537bd..ecf815ffe6d 100644 --- a/test/fixtures_test.js +++ b/test/fixtures_test.js @@ -20,17 +20,12 @@ describe('Fixtures', function() { .then(function() { var view = new Whisper.InboxView({ window: window }); view.onEmpty(); - view.$el.prependTo($('#render-android')); + view.$el.prependTo($('#render-light-theme')); var view = new Whisper.InboxView({ window: window }); - view.$el.removeClass('android').addClass('ios'); + view.$el.removeClass('light-theme').addClass('dark-theme'); view.onEmpty(); - view.$el.prependTo($('#render-ios')); - - var view = new Whisper.InboxView({ window: window }); - view.$el.removeClass('android').addClass('android-dark'); - view.onEmpty(); - view.$el.prependTo($('#render-android-dark')); + view.$el.prependTo($('#render-dark-theme')); }) .then(done, done); }); diff --git a/test/index.html b/test/index.html index 44e25acf420..63704f5252e 100644 --- a/test/index.html +++ b/test/index.html @@ -11,11 +11,10 @@
-
+
-
+
-
- - - - - -