From b728acc798357a6d6027f4413237d6fb59a86051 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 11:18:53 +0200 Subject: [PATCH 1/8] set accest color to new red --- res/themes/dharma/css/_dharma.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 4e4b2cd66f..617c9bd6b2 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -20,7 +20,7 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color: #76CFA6; +$accent-color: #f56679; $selection-fg-color: $primary-bg-color; From d1bab6cc35208fb9c61ff09a761efc16950121ad Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 11:19:42 +0200 Subject: [PATCH 2/8] tweak resize handle in room list only show a 1 px line but with a 9px interaction target apply darker color from design --- res/css/views/elements/_ResizeHandle.scss | 2 +- res/css/views/rooms/_RoomList.scss | 3 +++ res/themes/dharma/css/_dharma.scss | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss index e9aa91fe25..153bdfe6ec 100644 --- a/res/css/views/elements/_ResizeHandle.scss +++ b/res/css/views/elements/_ResizeHandle.scss @@ -18,7 +18,7 @@ limitations under the License. cursor: row-resize; flex: 0 0 auto; background: $panel-divider-color; - padding: 1px + background-clip: content-box; } .mx_ResizeHandle.mx_ResizeHandle_horizontal { diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 3cb5be1952..29f5fcdadf 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -62,3 +62,6 @@ limitations under the License. right: 60px; } +.mx_RoomList .mx_ResizeHandle { + padding: 4px 0; +} diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 617c9bd6b2..f261285f39 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -127,7 +127,7 @@ $roomsublist-label-fg-color: $roomtile-name-color; $roomsublist-label-bg-color: $tertiary-accent-color; $roomsublist-chevron-color: $accent-color; -$panel-divider-color: #ebedf8; +$panel-divider-color: #dee1f3; // ******************** From 7d0b8083b65607fded2b1fecb6c88e98c8f2ab51 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 16:33:46 +0200 Subject: [PATCH 3/8] hardcode to to dharma to avoid weird mix --- src/settings/handlers/ConfigSettingsHandler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/handlers/ConfigSettingsHandler.js b/src/settings/handlers/ConfigSettingsHandler.js index 7a370249a7..67fff51e5b 100644 --- a/src/settings/handlers/ConfigSettingsHandler.js +++ b/src/settings/handlers/ConfigSettingsHandler.js @@ -27,7 +27,7 @@ export default class ConfigSettingsHandler extends SettingsHandler { // Special case themes if (settingName === "theme") { - return config["default_theme"]; + return "dharma"; // config["default_theme"]; } const settingsConfig = config["settingDefaults"]; From 91a2ee1779f37b6c4c05ba436116654b670ff69b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 18:16:36 +0200 Subject: [PATCH 4/8] tweak badges --- res/css/structures/_RoomSubList.scss | 18 ++++++------------ res/css/views/rooms/_RoomTile.scss | 15 ++++++--------- src/components/structures/RoomSubList.js | 2 +- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 31996f23a2..21fb202137 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -56,20 +56,14 @@ limitations under the License. } .mx_RoomSubList_badge { - display: inline-block; - min-width: 15px; - height: 15px; - position: absolute; - right: 8px; /*gutter */ - top: 7px; - border-radius: 8px; + height: 18px; + border-radius: 9px; color: $accent-fg-color; font-weight: 600; - font-size: 10px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; + font-size: 12px; + vertical-align: middle; + line-height: 18px; + padding: 0 4px; background-color: $accent-color; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 4ad057e3d6..93dcd7a303 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -75,6 +75,11 @@ limitations under the License. } .mx_RoomTile_badge { + display: block; + position: absolute; + height: 15px; + right: 8px; + top: 2px; min-width: 12px; border-radius: 16px; padding: 0px 4px 0px 4px; @@ -85,14 +90,6 @@ limitations under the License. .mx_RoomTile_highlight .mx_RoomTile_badge:after { display: none; } - - .mx_RoomTile_badge { - display: block; - position: absolute; - height: 15px; - right: 5px; - top: 2px; - } } /* This is the bottom of the speech bubble */ @@ -113,7 +110,7 @@ limitations under the License. border-radius: 8px; color: $accent-fg-color; font-weight: 600; - font-size: 10px; + font-size: 12px; text-align: center; padding-top: 1px; padding-left: 4px; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e00f0f2d03..6410e3af31 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -328,9 +328,9 @@ const RoomSubList = React.createClass({ { chevron } { this.props.collapsed ? '' : this.props.label } - { badge } { incomingCall } + { badge } { addRoomButton } ); From 521e035bf01f8e9169e6bd0f0b01c9c27d3ec446 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 18:17:14 +0200 Subject: [PATCH 5/8] add vertical space above and below room section --- res/css/structures/_RoomSubList.scss | 2 ++ src/components/structures/RoomSubList.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 21fb202137..d956da25d6 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -24,12 +24,14 @@ limitations under the License. .mx_RoomSubList_nonEmpty { min-height: 80px; flex: 1; + margin-bottom: 8px; } .mx_RoomSubList_labelContainer { display: flex; flex-direction: row; flex: 0 0 auto; + margin: 8px 19px 0 0; } .mx_RoomSubList_label { diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 6410e3af31..0c166a7928 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -348,7 +348,7 @@ const RoomSubList = React.createClass({ {this._getHeaderJsx()} ; } else { - const heightEstimation = (len * 40) + 31; + const heightEstimation = (len * 40) + 31 + (8 + 8); const style = { flexGrow: `${heightEstimation}`, maxHeight: `${heightEstimation}px`, From 3d5395e784385a16fcb46d836e5fadb9679f6847 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 18:17:51 +0200 Subject: [PATCH 6/8] tweak paddings and margins on room tile --- res/css/views/rooms/_RoomTile.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 93dcd7a303..e211ba8393 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -20,7 +20,8 @@ limitations under the License. align-items: center; cursor: pointer; height: 40px; - margin: 0px 3px; + margin: 0 12px; + padding: 2px 12px; position: relative; background-color: $secondary-accent-color; } @@ -34,10 +35,7 @@ limitations under the License. .mx_RoomTile_avatar { flex: 0; - padding-top: 4px; - padding-bottom: 4px; - padding-left: 14px; - padding-right: 12px; + padding: 4px; width: 32px; height: 32px; } @@ -56,7 +54,7 @@ limitations under the License. .mx_RoomTile_name { flex: 1 5 auto; - font-size: 14px; + font-size: 16px; font-weight: 600; padding: 6px; color: $roomtile-name-color; @@ -70,6 +68,11 @@ limitations under the License. } .collapsed { + .mx_RoomTile { + margin: 2px; + padding: 2px 0 2px 12px; + } + .mx_RoomTile_name { display: none; } From 59fe5ee91f53272841751b1cd4b0484a645f1d9b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 18:18:08 +0200 Subject: [PATCH 7/8] make text on room tile with highlight or notifitications black --- res/css/views/rooms/_RoomTile.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index e211ba8393..781265a108 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -141,15 +141,19 @@ limitations under the License. .mx_RoomTile_unread, .mx_RoomTile_highlight { font-weight: 800; + + .mx_RoomTile_name { + color: $roomtile-selected-color; + } } .mx_RoomTile_selected { border-radius: 4px; background-color: $roomtile-selected-bg-color; -} -.mx_RoomTile_selected .mx_RoomTile_name { - color: $roomtile-selected-color; + .mx_RoomTile_name { + color: $roomtile-selected-color; + } } .mx_DNDRoomTile { From e8048930c4bb064c6e52ee81d575ff2dfdc61de0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 18:18:36 +0200 Subject: [PATCH 8/8] align (+) button and aggregated badge on section header --- res/css/structures/_RoomSubList.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index d956da25d6..40e6a6adb5 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -73,10 +73,13 @@ limitations under the License. filter: brightness($focus-brightness); } +.mx_RoomSubList_addRoom, .mx_RoomSubList_badge { + margin: 5px; +} + .mx_RoomSubList_addRoom { background-color: $roomheader-addroom-color; color: $roomsublist-background; - margin: 5px 10px; border-radius: 9px; text-align: center; vertical-align: middle;