From 8ff53a434a5948b4591b2821c8214186e515b6ce Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 26 Aug 2020 16:12:07 +1000 Subject: [PATCH] refactor quote styles --- stylesheets/_avatar.scss | 4 +- stylesheets/_conversation.scss | 18 +- stylesheets/_global.scss | 3 - stylesheets/_modal.scss | 8 +- stylesheets/_modules.scss | 238 --------------------- stylesheets/_quote.scss | 353 ++++++++++++++++++++++++++++++++ stylesheets/_session.scss | 6 - stylesheets/_session_theme.scss | 6 +- stylesheets/_theme_dark.scss | 86 -------- stylesheets/_variables.scss | 2 - stylesheets/manifest.scss | 1 + stylesheets/themes.scss | 14 +- 12 files changed, 376 insertions(+), 363 deletions(-) create mode 100644 stylesheets/_quote.scss diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index e21c40298..02efb2fe3 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -1,4 +1,3 @@ - // Module: Avatar .module-avatar { @@ -168,7 +167,6 @@ @include color-svg('../images/note-28.svg', $color-white); } - // Module: Avatar .module-avatar__label { @@ -195,4 +193,4 @@ @include themify($themes) { background-color: themed('steelColorShade'); } -} \ No newline at end of file +} diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 92050084d..f4a7c0069 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -328,12 +328,6 @@ padding-bottom: 40px; } -.bottom-bar .module-quote { - margin: 0; - - border-left-style: none; -} - // We need to use the wrapper because the conversation view calculates the height of all // things in the composition area. A margin on an inner div won't be included in that // height calculation. @@ -464,7 +458,6 @@ &[disabled='disabled'] { cursor: not-allowed; } - } .capture-audio { float: right; @@ -496,7 +489,6 @@ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08); } - .module-last-seen-indicator { padding-top: 25px; padding-bottom: 35px; @@ -504,7 +496,9 @@ margin-right: 28px; &__bar { - background-color: $color-light-60; + @include themify($themes) { + background-color: themed('lastSeenIndicatorColor'); + } width: 100%; height: 2px; } @@ -515,9 +509,9 @@ line-height: 16px; letter-spacing: 0.3px; text-transform: uppercase; - + @include themify($themes) { + color: themed('lastSeenIndicatorTextColor'); + } text-align: center; - color: $color-light-90; } } - diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 9fb7e1653..36684af8f 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -15,10 +15,8 @@ body { margin: 0; font-family: $session-font-default; font-size: 14px; - } - // scrollbars ::-webkit-scrollbar { width: 9px; @@ -672,7 +670,6 @@ $loading-height: 16px; margin-top: 12px; } - input { border: 1px solid $color-light-60; border-radius: 4px; diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 0fa146325..945b65afa 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -79,9 +79,6 @@ } } - - - .loki-dialog { display: flex; align-items: center; @@ -171,7 +168,6 @@ } } - .loki-dialog { & ~ .index.inbox { filter: blur(2px); @@ -191,8 +187,6 @@ } } - - .edit-profile-dialog { .session-modal__header__title { font-size: $session-font-lg; @@ -296,4 +290,4 @@ } } } -} \ No newline at end of file +} diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index ba6848d38..41800ed43 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -657,242 +657,6 @@ background-color: $color-white; } -// Module: Quoted Reply - -.module-quote-container { - margin-left: -6px; - margin-right: -6px; - margin-top: -4px; - margin-bottom: 5px; -} - -.module-quote-container--with-content-above { - margin-top: 3px; -} - -.module-quote { - position: relative; - border-radius: 4px; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - - cursor: pointer; - display: flex; - flex-direction: row; - align-items: stretch; - overflow: hidden; - - border-left-width: 4px; - border-left-style: solid; -} - -.module-quote--no-click { - cursor: auto; -} - -.module-quote--with-content-above { - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -.module-quote--with-reference-warning { - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; -} - - -.module-quote__primary { - flex-grow: 1; - padding-left: 8px; - padding-right: 8px; - padding-top: 7px; - padding-bottom: 7px; - - max-width: 100%; -} - -.module-quote__primary__author { - font-size: 13px; - line-height: 18px; - font-weight: 300; - color: $color-gray-90; - - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.module-quote__primary__profile-name { - font-style: italic; -} - -.module-quote__primary__text { - font-size: 14px; - line-height: 18px; - color: $color-gray-90; - text-align: start; - - a { - color: $color-gray-90; - } - - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - white-space: pre-wrap; - - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - - // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use - // ... as the truncation indicator. That's not a solution that works well for - // all languages. More resources: - // - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ - // - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 -} - -.module-quote__primary__type-label { - font-style: italic; - color: $color-gray-90; - font-size: 13px; - line-height: 18px; -} - -.module-quote__primary__filename-label { - font-size: 12px; -} - -.module-quote__close-container { - position: absolute; - top: 4px; - right: 4px; - height: 16px; - width: 16px; - - background-color: rgba(255, 255, 255, 0.75); - border-radius: 50%; -} - -.module-quote__close-button { - width: 100%; - height: 100%; - cursor: pointer; - @include color-svg('../images/x.svg', $grey); -} - -.module-quote__icon-container { - flex: initial; - min-width: 54px; - width: 54px; - max-height: 54px; - position: relative; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } -} - -.module-quote__icon-container__inner { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - text-align: center; - display: flex; - align-items: center; - justify-content: center; -} - -.module-quote__icon-container__circle-background { - display: flex; - align-items: center; - justify-content: center; - - height: 32px; - width: 32px; - border-radius: 50%; - background-color: $color-white; -} - -.module-quote__icon-container__icon { - width: 24px; - height: 24px; -} - -.module-quote__icon-container__icon--file { - @include color-svg('../images/file.svg', $color-loki-green); -} -.module-quote__icon-container__icon--image { - @include color-svg('../images/image.svg', $color-loki-green); -} -.module-quote__icon-container__icon--microphone { - @include color-svg('../images/microphone.svg', $color-loki-green); -} -.module-quote__icon-container__icon--play { - @include color-svg('../images/play.svg', $color-loki-green); -} -.module-quote__icon-container__icon--movie { - @include color-svg('../images/movie.svg', $color-loki-green); -} - -.module-quote__generic-file { - display: flex; - flex-direction: row; - align-items: center; -} -.module-quote__generic-file__icon { - background: url('../images/file-gradient.svg'); - background-size: 75%; - background-repeat: no-repeat; - height: 28px; - width: 36px; - margin-left: -4px; - margin-right: -6px; - margin-bottom: 5px; -} -.module-quote__generic-file__text { - font-size: 14px; - line-height: 18px; - color: $color-gray-90; - - max-width: calc(100% - 26px); - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.module-quote__reference-warning { - height: 26px; - display: flex; - flex-direction: row; - align-items: center; - - background-color: $color-white-085; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - padding-left: 8px; - padding-right: 8px; -} - -.module-quote__reference-warning__icon { - height: 16px; - width: 16px; - @include color-svg('../images/broken-link.svg', $color-gray-60); -} - -.module-quote__reference-warning__text { - margin-left: 6px; - color: $color-gray-90; - font-size: 13px; - line-height: 18px; -} - // Module: Embedded Contact .module-embedded-contact { @@ -1905,8 +1669,6 @@ @include color-svg('../images/error.svg', $session-color-danger); } - - // Module: Main Header .module-main-header { diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss new file mode 100644 index 000000000..c026e4ec7 --- /dev/null +++ b/stylesheets/_quote.scss @@ -0,0 +1,353 @@ +// This is related to all quote logics +.module-quote { + position: relative; + + cursor: pointer; + display: flex; + flex-direction: row; + align-items: stretch; + overflow: hidden; + + border-left-width: 4px; + border-left-style: solid; + + @include themify($themes) { + border-color: themed('accent'); + } + + &__primary__type-label { + @include themify($themes) { + border-color: themed('textColor'); + } + } +} + +// This is related to the bottomBar quote&mention logic +.bottom-bar .module-quote { + margin: 0; + border-left-style: none; + @include themify($themes) { + background: themed('quoteBottomBarBackground'); + } + + .module-quote__primary__author { + @include themify($themes) { + color: themed('textColor'); + } + } + .module-quote__primary__text { + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } + a { + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } + } + } + + // close button when quoting a message + &__close { + &-container { + @include themify($themes) { + background: themed('backgroundPrimary'); + } + } + + &-button { + @include themify($themes) { + @include color-svg('../images/x.svg', themed('foregroundPrimary')); + } + } + } +} + +// This is related to the quote logic inside messages +.module-quote { + &--outgoing { + .module-quote__primary__author { + @include themify($themes) { + color: themed('sentMessageText'); + font-weight: bold; + } + } + .module-quote__primary__text { + @include themify($themes) { + @include session-color-subtle(themed('sentMessageText')); + } + a { + @include themify($themes) { + @include session-color-subtle(themed('sentMessageText')); + } + } + } + } + + &--incoming { + .module-quote__primary__author { + @include themify($themes) { + color: themed('receivedMessageText'); + font-weight: bold; + } + } + .module-quote__primary__text { + @include themify($themes) { + @include session-color-subtle(themed('receivedMessageText')); + } + a { + @include themify($themes) { + @include session-color-subtle(themed('receivedMessageText')); + } + } + } + } +} + +.module-quote__icon-container__icon--file { + @include color-svg('../images/file.svg', $color-loki-green); +} +.module-quote__icon-container__icon--image { + @include color-svg('../images/image.svg', $color-loki-green); +} +.module-quote__icon-container__icon--microphone { + @include color-svg('../images/microphone.svg', $color-loki-green); +} +.module-quote__icon-container__icon--play { + @include color-svg('../images/play.svg', $color-loki-green); +} +.module-quote__icon-container__icon--movie { + @include color-svg('../images/movie.svg', $color-loki-green); +} + +.module-quote__generic-file__text { + color: $color-dark-05; +} + +.module-quote__reference-warning { + background-color: $color-black-06; +} + +.module-quote__reference-warning__icon { + @include color-svg('../images/broken-link.svg', $color-dark-30); +} + +.module-quote__reference-warning__text { + color: $color-dark-05; +} + +.module-quote-container { + margin-left: -6px; + margin-right: -6px; + margin-top: -4px; + margin-bottom: 5px; +} + +.module-quote-container--with-content-above { + margin-top: 3px; +} + +.module-quote--no-click { + cursor: auto; +} + +.module-quote__primary { + flex-grow: 1; + padding-left: 8px; + padding-right: 8px; + padding-top: 7px; + padding-bottom: 7px; + + max-width: 100%; +} + +.module-quote__primary__author { + font-size: 13px; + line-height: 18px; + font-weight: 300; + color: $color-gray-90; + + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.module-quote__primary__profile-name { + font-style: italic; +} + +.module-quote__primary__text { + font-size: 14px; + line-height: 18px; + color: $color-gray-90; + text-align: start; + + a { + color: $color-gray-90; + } + + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + white-space: pre-wrap; + + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use + // ... as the truncation indicator. That's not a solution that works well for + // all languages. More resources: + // - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ + // - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 +} + +.module-quote__primary__type-label { + font-style: italic; + color: $color-gray-90; + font-size: 13px; + line-height: 18px; +} + +.module-quote__primary__filename-label { + font-size: 12px; +} + +.module-quote__close-container { + position: absolute; + top: 4px; + right: 4px; + height: 16px; + width: 16px; + + background-color: rgba(255, 255, 255, 0.75); + border-radius: 50%; +} + +.module-quote__close-button { + width: 100%; + height: 100%; + cursor: pointer; + @include color-svg('../images/x.svg', $grey); +} + +.module-quote__icon-container { + flex: initial; + min-width: 54px; + width: 54px; + max-height: 54px; + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__inner { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } +} + +.module-quote__icon-container__circle-background { + display: flex; + align-items: center; + justify-content: center; + + height: 32px; + width: 32px; + border-radius: 50%; + background-color: $color-white; +} + +.module-quote__icon-container__icon { + width: 24px; + height: 24px; + + &--file { + @include color-svg('../images/file.svg', $color-loki-green); + } + &--image { + @include color-svg('../images/image.svg', $color-loki-green); + } + &--microphone { + @include color-svg('../images/microphone.svg', $color-loki-green); + } + &--play { + @include color-svg('../images/play.svg', $color-loki-green); + } + &--movie { + @include color-svg('../images/movie.svg', $color-loki-green); + } +} + +.module-quote__generic { + &-file { + display: flex; + flex-direction: row; + align-items: center; + } + &-file__icon { + background: url('../images/file-gradient.svg'); + background-size: 75%; + background-repeat: no-repeat; + height: 28px; + width: 36px; + margin-left: -4px; + margin-right: -6px; + margin-bottom: 5px; + } + &-file__text { + font-size: 14px; + line-height: 18px; + color: $color-gray-90; + + max-width: calc(100% - 26px); + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} + +.module-quote__reference { + &-warning { + height: 26px; + display: flex; + flex-direction: row; + align-items: center; + + background-color: $color-white-085; + padding-left: 8px; + padding-right: 8px; + } + + &-warning__icon { + height: 16px; + width: 16px; + @include color-svg('../images/broken-link.svg', $color-gray-60); + } + + &-warning__text { + margin-left: 6px; + color: $color-gray-90; + font-size: 13px; + line-height: 18px; + } +} + +.bottom-bar .member-item { + &:hover { + @include themify($themes) { + background: themed('clickableHovered'); + } + } +} diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 55253f563..1acd54512 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -8,7 +8,6 @@ div.spacer-lg { height: $session-margin-lg; } - .subtle { opacity: 0.6; } @@ -907,7 +906,6 @@ label { } } - .image-upload-section { display: flex; align-items: center; @@ -1347,8 +1345,6 @@ input { } } - - .friend-selection-list { width: 20vw; } @@ -1364,9 +1360,7 @@ input { } } - .module-scroll-down { - } .module-scroll-down { diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 7320dd4e5..a43518ef2 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -114,6 +114,11 @@ &-read-receipt-container { margin-left: 5px; + .session-icon.check { + @include themify($themes) { + fill: themed('sentMessageText'); + } + } } } @@ -128,7 +133,6 @@ background: none; } - @mixin session-h-title { @include fontAccentBold(); } diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index a07fbfda4..d8847fac1 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -18,14 +18,6 @@ } } - .module-last-seen-indicator__bar { - background-color: #353535; - } - - .module-last-seen-indicator__text { - color: $color-dark-30; - } - // _debugLog .debug-log { @@ -595,81 +587,6 @@ background-color: $color-dark-05; } - // Module: Quoted Reply - .module-quote--outgoing { - @include themify($themes) { - border-left-color: themed('steelColor'); - background-color: themed('steelColorShade'); - } - } - - .module-quote--incoming { - @include themify($themes) { - border-left-color: themed('steelColor'); - background-color: themed('steelColorShade'); - } - } - - .module-quote__primary__author { - color: $color-dark-05; - } - - .module-quote__primary__text { - color: $color-dark-05; - - a { - color: $color-dark-05; - } - } - - .module-quote__primary__type-label { - color: $color-dark-05; - } - - .module-quote__close-container { - background-color: rgba(255, 255, 255, 0.75); - } - - .module-quote__close-button { - @include color-svg('../images/x.svg', $grey); - } - - .module-quote__icon-container__circle-background { - background-color: $color-white; - } - - .module-quote__icon-container__icon--file { - @include color-svg('../images/file.svg', $color-loki-green); - } - .module-quote__icon-container__icon--image { - @include color-svg('../images/image.svg', $color-loki-green); - } - .module-quote__icon-container__icon--microphone { - @include color-svg('../images/microphone.svg', $color-loki-green); - } - .module-quote__icon-container__icon--play { - @include color-svg('../images/play.svg', $color-loki-green); - } - .module-quote__icon-container__icon--movie { - @include color-svg('../images/movie.svg', $color-loki-green); - } - - .module-quote__generic-file__text { - color: $color-dark-05; - } - - .module-quote__reference-warning { - background-color: $color-black-06; - } - - .module-quote__reference-warning__icon { - @include color-svg('../images/broken-link.svg', $color-dark-30); - } - - .module-quote__reference-warning__text { - color: $color-dark-05; - } - // Module: Embedded Contact .module-embedded-contact__contact-name { @@ -977,7 +894,6 @@ background-color: $color-white-015; } - // Module: Typing Animation .module-typing-animation__dot { @@ -1141,8 +1057,6 @@ color: $color-gray-05; } - - .capture-audio { .microphone { &:before { diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 3fb821fda..a0a90bd42 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -23,7 +23,6 @@ $color-gray-90: #17191d; $color-gray-95: #0f1012; $color-black: #000000; - $color-white-015: rgba($color-white, 0.15); $color-white-02: rgba($color-white, 0.2); $color-white-04: rgba($color-white, 0.4); @@ -60,7 +59,6 @@ $color-black-02: rgba($color-black, 0.2); $color-black-04: rgba($color-black, 0.4); $color-black-06: rgba($color-black, 0.6); - // Old colors $blue_l: #a2d2f4; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 2719e2e55..47246ef0c 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -26,6 +26,7 @@ // /////////////////// // @import 'modules'; @import 'session'; +@import 'quote'; // Separate screens @import 'session_signin'; diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 7707d0749..8dc2cf236 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -48,10 +48,12 @@ $themes: ( // context menu contextMenuBackground: #f5f5f5, filterSessionText: brightness(0) saturate(100%), - steelColor: #6b6b78, - steelColorShage: #5a5a63, - ), + steelColorShade: #5a5a63, + lastSeenIndicatorColor: #62656a, + lastSeenIndicatorTextColor: #070c14, + quoteBottomBarBackground: #f0f0f0, + ), dark: ( accent: #00f782, destructive: #ff453a, @@ -100,8 +102,10 @@ $themes: ( contextMenuBackground: #212121, filterSessionText: none, steelColor: #6b6b78, - steelColorShage: #5a5a63, - + steelColorShade: #5a5a63, + lastSeenIndicatorColor: #353535, + lastSeenIndicatorTextColor: #a8a9aa, + quoteBottomBarBackground: #404040, ), );