From 7e09d50e68eda2aeb303cdedb3666b63a89fc06f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:33:22 +0200 Subject: [PATCH 1/6] add padding to timeline --- res/css/structures/_RoomView.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index e83f802012b..1b73576246b 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -139,9 +139,8 @@ limitations under the License. } .mx_RoomView_MessageList { - width: 100%; list-style-type: none; - padding: 0px; + padding: 18px; } .mx_RoomView_MessageList li { From f3ae9fe9817820a11080df17f751e616c8d580e3 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:33:35 +0200 Subject: [PATCH 2/6] align avatar in composer with avatar in timeline not part of design but temporarily make it prettier --- res/css/views/rooms/_MessageComposer.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 1cd368860f9..af9837c9bfa 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -62,8 +62,7 @@ limitations under the License. } .mx_MessageComposer .mx_MessageComposer_avatar { - padding-left: 10px; - padding-right: 28px; + padding: 0 28px; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { @@ -76,7 +75,7 @@ limitations under the License. .mx_MessageComposer_e2eIcon { position: absolute; - left: 44px; + left: 60px; } .mx_MessageComposer_noperm_error { From bf6486ac4f2b4637499fb6ea4380968cd21d74f2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 09:34:08 +0200 Subject: [PATCH 3/6] align avatar in room header with avatars in timeline (equally not part of design but making it prettier for now) --- res/css/views/rooms/_RoomHeader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 7e2e5683d9c..acf7cc69c72 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_RoomHeader_leftRow { display: flex; - margin-left: 15px; + margin-left: 26px; order: 1; flex: 1; overflow: hidden; From 2a264f36b787b9cd6aff3ca693cfb05545977bf0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 10:25:04 +0200 Subject: [PATCH 4/6] style date separator --- res/css/views/messages/_DateSeparator.scss | 21 ++++++++++++++----- .../views/messages/DateSeparator.js | 2 +- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index f676d24bef2..f8738f10e34 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -16,10 +16,21 @@ limitations under the License. .mx_DateSeparator { clear: both; - margin-top: 32px; - margin-bottom: 8px; - margin-left: 63px; - padding-bottom: 6px; - border-bottom: 1px solid $primary-hairline-color; + margin: 4px 0; + display: flex; + align-items: center; + font-size: 14px; + color: $roomtopic-color; } +.mx_DateSeparator > hr { + flex: 1 1 0; + height: 0; + border: none; + border-bottom: 1px solid $panel-divider-color; +} + +.mx_DateSeparator > date { + margin: 0 25px; + flex: 0 0 auto; +} diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index a0ea7045027..c72ed2517af 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component { } render() { - return

{ this.getLabel() }

; + return

{ this.getLabel() }

; } } From f2efbc15f4335eaa4d7f88011dabf971a082c368 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 10:49:44 +0200 Subject: [PATCH 5/6] apply color categories to sender profile name --- res/css/views/messages/_SenderProfile.scss | 38 +++++++++++++++++++ res/css/views/rooms/_EventTile.scss | 5 --- src/PhasedRollOut.js | 16 +------- .../views/messages/SenderProfile.js | 4 +- src/utils/FormattingUtils.js | 21 ++++++++++ 5 files changed, 63 insertions(+), 21 deletions(-) diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss index 060709b82eb..a8ebcedc2b8 100644 --- a/res/css/views/messages/_SenderProfile.scss +++ b/res/css/views/messages/_SenderProfile.scss @@ -13,3 +13,41 @@ 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. */ + +.mx_SenderProfile_name { + font-weight: 600; +} + +.mx_SenderProfile_color1 { + color: #1e7ddc; +} + +.mx_SenderProfile_color2 { + color: #a756a8; +} + +.mx_SenderProfile_color3 { + color: #7ac9a1; +} + +.mx_SenderProfile_color4 { + color: #f2809d; +} + +.mx_SenderProfile_color5 { + color: #ffc666; +} + +.mx_SenderProfile_color6 { + color: #76ddd7; +} + +.mx_SenderProfile_color7 { + color: #45529b; +} + +.mx_SenderProfile_color8 { + color: #bfd251; +} + + diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f74e2e0850d..52074563f6f 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -55,11 +55,6 @@ limitations under the License. line-height: 22px; } -.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name, -.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux { - opacity: 0.5; -} - .mx_EventTile .mx_SenderProfile .mx_Flair { opacity: 0.7; margin-left: 5px; diff --git a/src/PhasedRollOut.js b/src/PhasedRollOut.js index a9029d07e6f..b17ed379746 100644 --- a/src/PhasedRollOut.js +++ b/src/PhasedRollOut.js @@ -15,21 +15,7 @@ limitations under the License. */ import SdkConfig from './SdkConfig'; - -function hashCode(str) { - let hash = 0; - let i; - let chr; - if (str.length === 0) { - return hash; - } - for (i = 0; i < str.length; i++) { - chr = str.charCodeAt(i); - hash = ((hash << 5) - hash) + chr; - hash |= 0; - } - return Math.abs(hash); -} +import {hashCode} from './utils/FormattingUtils'; export function phasedRollOutExpiredForUser(username, feature, now, rollOutConfig = SdkConfig.get().phasedRollOut) { if (!rollOutConfig) { diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js index 0f767675e2b..a40addf0d1d 100644 --- a/src/components/views/messages/SenderProfile.js +++ b/src/components/views/messages/SenderProfile.js @@ -23,6 +23,7 @@ import sdk from '../../../index'; import Flair from '../elements/Flair.js'; import FlairStore from '../../../stores/FlairStore'; import { _t } from '../../../languageHandler'; +import {hashCode} from '../../../utils/FormattingUtils'; export default React.createClass({ displayName: 'SenderProfile', @@ -96,6 +97,7 @@ export default React.createClass({ render() { const EmojiText = sdk.getComponent('elements.EmojiText'); const {mxEvent} = this.props; + const colorNumber = hashCode(mxEvent.getSender()) % 8; const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); const {msgtype} = mxEvent.getContent(); @@ -119,7 +121,7 @@ export default React.createClass({ // Name + flair const nameFlair = - + { nameElem } { flair } diff --git a/src/utils/FormattingUtils.js b/src/utils/FormattingUtils.js index a27851951fe..435b33ac5dc 100644 --- a/src/utils/FormattingUtils.js +++ b/src/utils/FormattingUtils.js @@ -37,3 +37,24 @@ export function formatCount(count) { export function formatCryptoKey(key) { return key.match(/.{1,4}/g).join(" "); } +/** + * calculates a numeric hash for a given string + * + * @param {string} str string to hash + * + * @return {number} + */ +export function hashCode(str) { + let hash = 0; + let i; + let chr; + if (str.length === 0) { + return hash; + } + for (i = 0; i < str.length; i++) { + chr = str.charCodeAt(i); + hash = ((hash << 5) - hash) + chr; + hash |= 0; + } + return Math.abs(hash); +} From b7ab2077787c34df80faa4f224e9413bca3cf798 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 15:48:44 +0200 Subject: [PATCH 6/6] move sendername colors to theme --- res/css/views/messages/_SenderProfile.scss | 16 ++++++++-------- res/themes/dark/css/_dark.scss | 9 +++++++++ res/themes/dharma/css/_dharma.scss | 9 +++++++++ res/themes/light/css/_base.scss | 9 +++++++++ 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss index a8ebcedc2b8..a4a2aba11f3 100644 --- a/res/css/views/messages/_SenderProfile.scss +++ b/res/css/views/messages/_SenderProfile.scss @@ -19,35 +19,35 @@ limitations under the License. } .mx_SenderProfile_color1 { - color: #1e7ddc; + color: $username-variant1-color; } .mx_SenderProfile_color2 { - color: #a756a8; + color: $username-variant2-color; } .mx_SenderProfile_color3 { - color: #7ac9a1; + color: $username-variant3-color; } .mx_SenderProfile_color4 { - color: #f2809d; + color: $username-variant4-color; } .mx_SenderProfile_color5 { - color: #ffc666; + color: $username-variant5-color; } .mx_SenderProfile_color6 { - color: #76ddd7; + color: $username-variant6-color; } .mx_SenderProfile_color7 { - color: #45529b; + color: $username-variant7-color; } .mx_SenderProfile_color8 { - color: #bfd251; + color: $username-variant8-color; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8ab338790e2..0cfc479a471 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -105,6 +105,15 @@ $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; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index ea6b24dec4e..11de4435612 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -119,6 +119,15 @@ $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; + $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); $roomsublist-background: $secondary-accent-color; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 228f44fdef6..a0de8f031f6 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -118,6 +118,15 @@ $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);