From 9d17ed74074e3d94ca2b6d957941968b765b79fa Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 14 Oct 2017 14:33:55 -0600 Subject: [PATCH 01/26] CSS for presence member avatar Signed-off-by: Travis Ralston --- src/skins/vector/css/_components.scss | 1 + .../views/avatars/_MemberPresenceAvatar.scss | 43 +++++++++++++++++++ src/skins/vector/css/themes/_base.scss | 5 +++ 3 files changed, 49 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 4948ac852..809c6384c 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -15,6 +15,7 @@ @import "./matrix-react-sdk/structures/_UserSettings.scss"; @import "./matrix-react-sdk/structures/login/_Login.scss"; @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss"; +@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss"; @import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss new file mode 100644 index 000000000..a15f8eaa6 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss @@ -0,0 +1,43 @@ +/* +Copyright 2017 Travis Ralston + +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. +*/ + +.mx_MemberPresenceAvatar { + display: inline-block; + position: relative; +} + +.mx_MemberPresenceAvatar_status { + display: block; + width: 10px; + height: 10px; + border-radius: 10px; + + position: absolute; + bottom: -2px; + right: -3px; +} + +.mx_MemberPresenceAvatar_status_online { + background-color: $presence-online; +} + +.mx_MemberPresenceAvatar_status_unavailable { + background-color: $presence-unavailable; +} + +.mx_MemberPresenceAvatar_status_offline { + background-color: $presence-offline; +} diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index a13c517bd..44c5440a5 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -114,6 +114,11 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; +// presence +$presence-online: #60de00; +$presence-unavailable: #deb800; +$presence-offline: #b7b7b7; + /*** ImageView ***/ $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; From 1ca041c59ce953ce0625885807c4b9fd1372b64c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 14 Oct 2017 21:45:29 -0600 Subject: [PATCH 02/26] CSS for more positioning options on context menus Signed-off-by: Travis Ralston --- .../structures/_ContextualMenu.scss | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss index d3e73a9a1..a0191b92c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss @@ -94,6 +94,60 @@ limitations under the License. left: 1px; } +.mx_ContextualMenu.mx_ContextualMenu_top { + top: 8px; +} + +.mx_ContextualMenu_chevron_top { + position: absolute; + left: 0px; + top: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-bottom: 8px solid $menu-border-color; + border-right: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_top:after{ + content:''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-bottom: 7px solid $menu-bg-color; + border-right: 7px solid transparent; + position:absolute; + left: -7px; + top: 1px; +} + +.mx_ContextualMenu.mx_ContextualMenu_bottom { + bottom: 8px; +} + +.mx_ContextualMenu_chevron_bottom { + position: absolute; + left: 0px; + bottom: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-top: 8px solid $menu-border-color; + border-right: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_bottom:after{ + content:''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-top: 7px solid $menu-bg-color; + border-right: 7px solid transparent; + position:absolute; + left: -7px; + bottom: 1px; +} + .mx_ContextualMenu_field { padding: 3px 6px 3px 6px; cursor: pointer; From deb50b2d437f6158844e864e335674b6e0118f0e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 14 Oct 2017 23:15:26 -0600 Subject: [PATCH 03/26] Add presence context menu and styling Signed-off-by: Travis Ralston --- .../context_menus/PresenceContextMenu.js | 100 ++++++++++++++++++ src/i18n/strings/en_EN.json | 2 + src/skins/vector/css/_components.scss | 1 + .../_PresenceContextMenuOption.scss | 42 ++++++++ 4 files changed, 145 insertions(+) create mode 100644 src/components/views/context_menus/PresenceContextMenu.js create mode 100644 src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss diff --git a/src/components/views/context_menus/PresenceContextMenu.js b/src/components/views/context_menus/PresenceContextMenu.js new file mode 100644 index 000000000..46078726b --- /dev/null +++ b/src/components/views/context_menus/PresenceContextMenu.js @@ -0,0 +1,100 @@ +/* +Copyright 2017 Travis Ralston + +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 React from 'react'; +import { _t, _td } from 'matrix-react-sdk/lib/languageHandler'; +import sdk from 'matrix-react-sdk'; + +const STATUS_LABELS = { + "online": _td("Online"), + "unavailable": _td("Away"), + "offline": _td("Appear Offline"), +}; + +const PresenceContextMenuOption = React.createClass({ + displayName: 'PresenceContextMenuOption', + + propTypes: { + forStatus: React.PropTypes.string.isRequired, + isCurrent: React.PropTypes.bool, + onChange: React.PropTypes.func.isRequired, + }, + + onClick: function() { + this.props.onChange(this.props.forStatus); + }, + + render: function() { + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + + const indicatorClasses = "mx_PresenceContextMenuOption_indicator " + + "mx_PresenceContextMenuOption_indicator_" + this.props.forStatus; + + let classNames = "mx_PresenceContextMenuOption"; + if (this.props.isCurrent) classNames += " mx_PresenceContextMenuOption_current"; + + return ( + +
+ { _t(STATUS_LABELS[this.props.forStatus]) } + + ); + }, +}); + +module.exports = React.createClass({ + displayName: 'PresenceContextMenu', + + propTypes: { + // "online", "unavailable", or "offline" + currentStatus: React.PropTypes.string.isRequired, + + // Called when the user wants to change their status. + // Args: (newStatus:string) + onChange: React.PropTypes.func.isRequired, + + // callback called when the menu is dismissed + onFinished: React.PropTypes.func, + }, + + getInitialState() { + return { + currentStatus: this.props.currentStatus, + }; + }, + + onChange: function(newStatus) { + this.props.onChange(newStatus); + this.setState({currentStatus: newStatus}); + }, + + render: function() { + const statusElements = []; + for (let status of Object.keys(STATUS_LABELS)) { + statusElements.push(( + + )); + } + + return ( +
+ { statusElements } +
+ ); + }, +}); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 16d47d102..fba305d83 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -72,6 +72,8 @@ "Loading bug report module": "Loading bug report module", "Low Priority": "Low Priority", "Members": "Members", + "Appear Offline": "Appear Offline", + "Away": "Away", "Mentions only": "Mentions only", "Messages containing my display name": "Messages containing my display name", "Messages containing keywords": "Messages containing keywords", diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 76ac3945c..748b33f87 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -80,6 +80,7 @@ @import "./vector-web/structures/_RoomSubList.scss"; @import "./vector-web/structures/_ViewSource.scss"; @import "./vector-web/views/context_menus/_MessageContextMenu.scss"; +@import "vector-web/views/context_menus/_PresenceContextMenuOption.scss"; @import "./vector-web/views/context_menus/_RoomTileContextMenu.scss"; @import "./vector-web/views/dialogs/_ChangelogDialog.scss"; @import "./vector-web/views/dialogs/_DevtoolsDialog.scss"; diff --git a/src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss b/src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss new file mode 100644 index 000000000..bfe81125e --- /dev/null +++ b/src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss @@ -0,0 +1,42 @@ +/* +Copyright 2017 Travis Ralston + +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. +*/ +.mx_PresenceContextMenuOption_indicator { + width: 10px; + height: 10px; + border-radius: 10px; + display: inline-block; + margin-right: 5px; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_online { + background-color: $presence-online; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_unavailable { + background-color: $presence-unavailable; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_offline { + background-color: $presence-offline; +} + +.mx_PresenceContextMenuOption { + padding: 2px; +} + +.mx_PresenceContextMenuOption.mx_PresenceContextMenuOption_current { + font-weight: 700; +} From ef5fc7347ab7d206e25020829564dc97764e8590 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sun, 15 Oct 2017 20:20:43 -0600 Subject: [PATCH 04/26] Don't update presence status if the user is clicks twice Signed-off-by: Travis Ralston --- src/components/views/context_menus/PresenceContextMenu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/context_menus/PresenceContextMenu.js b/src/components/views/context_menus/PresenceContextMenu.js index 46078726b..3a3dc2fa4 100644 --- a/src/components/views/context_menus/PresenceContextMenu.js +++ b/src/components/views/context_menus/PresenceContextMenu.js @@ -34,6 +34,7 @@ const PresenceContextMenuOption = React.createClass({ }, onClick: function() { + if (this.isCurrent) return; this.props.onChange(this.props.forStatus); }, From 528a856d54fb139c9bb30971a7a8d3a174900d09 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 20 Oct 2017 09:46:45 +0100 Subject: [PATCH 05/26] Add class to identify non-scalar widget instances --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 14b8cb457..20dfa61ce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -58,6 +58,10 @@ limitations under the License. // display: inline-block; } +.mx_AppTile_non_native { + border-color: #f5d24d; +} + .mx_AppTileFullWidth { max-width: 960px; width: 100%; From 53185fc23dbd4dfb6876d5096166ac3dde52bb8c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 25 Oct 2017 11:27:16 -0600 Subject: [PATCH 06/26] Remove i18n for making the merge easier Signed-off-by: Travis Ralston --- src/i18n/strings/en_EN.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index fba305d83..16d47d102 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -72,8 +72,6 @@ "Loading bug report module": "Loading bug report module", "Low Priority": "Low Priority", "Members": "Members", - "Appear Offline": "Appear Offline", - "Away": "Away", "Mentions only": "Mentions only", "Messages containing my display name": "Messages containing my display name", "Messages containing keywords": "Messages containing keywords", From 6c796cd31174ac392657dfc755212134081b738a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 25 Oct 2017 11:28:57 -0600 Subject: [PATCH 07/26] Re-add i18n post-merge Signed-off-by: Travis Ralston --- src/i18n/strings/en_EN.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 543ee7bbd..3299a1cc4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -68,6 +68,8 @@ "What's New": "What's New", "Update": "Update", "What's new?": "What's new?", + "Appear Offline": "Appear Offline", + "Away": "Away", "A new version of Riot is available.": "A new version of Riot is available.", "To return to your account in future you need to set a password": "To return to your account in future you need to set a password", "Set Password": "Set Password", From 29abb5eed03bc0550656859fcbeed9b5a85b07c8 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 16:15:31 +0000 Subject: [PATCH 08/26] Center mixed content warnings in panel. --- .../css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7fe2b03cf..b35b9ed0d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -193,8 +193,12 @@ form.mx_Custom_Widget_Form div { .mx_AppPermissionWarning { text-align: center; - padding: 30px 0; background-color: $primary-bg-color; + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; } .mx_AppPermissionWarningImage { From 883ec159e21da2b48fe46f2726fa3237d1dd24bc Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 17:25:56 +0000 Subject: [PATCH 09/26] Add yellow warning triangle image. --- src/skins/vector/img/warning_yellow.svg | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/skins/vector/img/warning_yellow.svg diff --git a/src/skins/vector/img/warning_yellow.svg b/src/skins/vector/img/warning_yellow.svg new file mode 100644 index 000000000..4d227517d --- /dev/null +++ b/src/skins/vector/img/warning_yellow.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 7eeb7babc4df284f7e64b3f63a90bb55fcaf3dc5 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 17:26:33 +0000 Subject: [PATCH 10/26] White edit icon (to avoid having to use css filters to invert). --- src/skins/vector/img/edit_white.svg | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/skins/vector/img/edit_white.svg diff --git a/src/skins/vector/img/edit_white.svg b/src/skins/vector/img/edit_white.svg new file mode 100644 index 000000000..30c08b6e2 --- /dev/null +++ b/src/skins/vector/img/edit_white.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + From 53143cb03314d11d51b34020f460c56232768ec2 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 17:26:57 +0000 Subject: [PATCH 11/26] Center icons in menu bar. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 05db2612f..57e91aaf2 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -89,6 +89,9 @@ limitations under the License. .mx_AppTileMenuBarWidgets { float: right; + display: flex; + flex-direction: row; + align-items: center; } .mx_AppTileMenuBarWidget { // pointer-events: none; From 31e0cde900a56aea19219d757292fc4f5b2d65f0 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 20:12:12 +0000 Subject: [PATCH 12/26] Improve hover border. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 57e91aaf2..7fcc38b37 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -108,7 +108,7 @@ limitations under the License. } .mx_AppTileMenuBarWidget:hover { - border: 1px solid $primary-hairline-color; + border: 1px solid $primary-fg-color; border-radius: 2px; } From 43fb359d8fb0bc66be27db2669f0a8875cc6bf38 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 20:12:30 +0000 Subject: [PATCH 13/26] Vertically align menu bar items. --- .../css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7fcc38b37..d64caf555 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -79,12 +79,14 @@ limitations under the License. } .mx_AppTileMenuBar { - // height: 15px; margin: 0; padding: 2px 10px; - // background-color: $e2e-verified-color; border-bottom: 1px solid $primary-hairline-color; font-size: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } .mx_AppTileMenuBarWidgets { From 7a42e844d102c4c8fe934ffda38011d76e2fdf46 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 20:16:32 +0000 Subject: [PATCH 14/26] Remove unused styling. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index d64caf555..4fd1417a6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -59,10 +59,6 @@ limitations under the License. margin-right: 1px; } -.mx_AppTile_non_native { - border-color: #f5d24d; -} - .mx_AppTileFullWidth { max-width: 960px; width: 100%; From 42bb54b20225682249a83057970f98438bd89847 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 21:41:35 +0000 Subject: [PATCH 15/26] Set widget menu bar background colour. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 5 +++++ src/skins/vector/css/themes/_base.scss | 4 ++++ src/skins/vector/css/themes/_dark.scss | 4 ++++ 3 files changed, 13 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7fe2b03cf..7af2d25ad 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -81,6 +81,11 @@ limitations under the License. // background-color: $e2e-verified-color; border-bottom: 1px solid $primary-hairline-color; font-size: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background-color: $widget-menu-bar-bg-color; } .mx_AppTileMenuBarWidgets { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 3a7eac562..d6417e58f 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -101,6 +101,10 @@ $roomsublist-label-bg-color: #d3efe1; // ******************** +$widget-menu-bar-bg-color: #d3efe1; + +// ******************** + // event tile lifecycle $event-encrypting-color: #abddbc; $event-sending-color: #ddd; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index d6fa88d6c..b6eaab4a8 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -95,6 +95,10 @@ $roomsublist-label-bg-color: #454545; // ******************** +$widget-menu-bar-bg-color: #454545; + +// ******************** + // event tile lifecycle $event-encrypting-color: rgba(171, 221, 188, 0.4); $event-sending-color: #888; From d7ceddfe6174d093fce9fe2a5ec06c023ec9a884 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 10 Nov 2017 21:43:34 +0000 Subject: [PATCH 16/26] Revert unintended merge commit. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7af2d25ad..2e5e51d75 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -81,10 +81,6 @@ limitations under the License. // background-color: $e2e-verified-color; border-bottom: 1px solid $primary-hairline-color; font-size: 10px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; background-color: $widget-menu-bar-bg-color; } From a7a9433ef9a42ad5c3f245a93b00dcb02d869a02 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 14 Nov 2017 14:28:55 +0000 Subject: [PATCH 17/26] fix 2ndary accent color on dark on FF fixes https://github.com/vector-im/riot-web/issues/5583 --- src/skins/vector/css/themes/_dark.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 595783c37..bef16c95b 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -30,6 +30,13 @@ $preview-bar-bg-color: #333; // left-panel style muted accent color $secondary-accent-color: $primary-bg-color; +// 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: #2d2d2e ! important; // deliberately off by one +} + // used by RoomDirectory permissions $plinth-bg-color: #474747; From 69b8ff8668ffbba7e97bd6a819fa801c18e0d124 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 14 Nov 2017 15:17:32 +0000 Subject: [PATCH 18/26] add fixme --- src/vector/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/vector/index.js b/src/vector/index.js index 18c0d74f1..c8d7407df 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -310,7 +310,11 @@ async function loadApp() { a.removeAttribute("disabled"); // in case the Tinter.tint() in MatrixChat fires before the - // CSS has actually loaded (which in practice happens) + // CSS has actually loaded (which in practice happens)... + + // FIXME: we should probably block loading the app or even + // showing a spinner until the theme is loaded, to avoid + // flashes of unstyled content. a.onload = () => { Tinter.setTheme(theme); Tinter.tint(); From 940f2291022689f3e1c3d55a0450e863a4954c0a Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 14 Nov 2017 15:20:57 +0000 Subject: [PATCH 19/26] Fix edit icon colors and add green edit icon. --- src/skins/vector/img/edit.svg | 16 +++++++--------- src/skins/vector/img/edit_green.svg | 11 +++++++++++ 2 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/img/edit_green.svg diff --git a/src/skins/vector/img/edit.svg b/src/skins/vector/img/edit.svg index a0be3454e..9ba006077 100644 --- a/src/skins/vector/img/edit.svg +++ b/src/skins/vector/img/edit.svg @@ -1,13 +1,11 @@ - - - - - - - + width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve"> + + + + + diff --git a/src/skins/vector/img/edit_green.svg b/src/skins/vector/img/edit_green.svg new file mode 100644 index 000000000..f7f4c7adc --- /dev/null +++ b/src/skins/vector/img/edit_green.svg @@ -0,0 +1,11 @@ + + + + + + + + + From e3bdcf4d0d8f6334735b1cee693fcb341c3fb790 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 14 Nov 2017 15:42:29 +0000 Subject: [PATCH 20/26] Remove unused edit_white icon --- src/skins/vector/img/edit_white.svg | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/skins/vector/img/edit_white.svg diff --git a/src/skins/vector/img/edit_white.svg b/src/skins/vector/img/edit_white.svg deleted file mode 100644 index 30c08b6e2..000000000 --- a/src/skins/vector/img/edit_white.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - From cf2850834eb102c61e3d70d4d75c8237df68fbad Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 14 Nov 2017 17:32:01 +0000 Subject: [PATCH 21/26] Add apps drawer bottom margin. --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 4fd1417a6..cc3989436 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -14,8 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -// .mx_AppsDrawer { -// } +.mx_AppsDrawer { + margin: 5px; +} .mx_AppsContainer { display: flex; From 81ef9b143c8bf948d1b6072396651f612471f25b Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 14 Nov 2017 18:44:10 +0000 Subject: [PATCH 22/26] Add widget menubar styling --- src/skins/vector/themes/status/css/_status.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 2962ee9d4..229d9b927 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -163,6 +163,10 @@ $panel-divider-color: rgba(0, 0, 0, 0.2); // ******************** +$widget-menu-bar-bg-color: #f7f7f7; + +// ******************** + // event tile lifecycle $event-encrypting-color: #abddbc; $event-sending-color: #ddd; From 9f61cb8137f54122bc864fab9c8ca7e54e45697e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 15 Nov 2017 00:57:44 +0000 Subject: [PATCH 23/26] turns out that we /do/ use tertiaryAccentColor after all --- src/skins/vector/css/_common.scss | 4 ++++ src/skins/vector/css/themes/_dark.scss | 6 +++++- src/skins/vector/themes/status/css/_status.scss | 6 +++++- src/vector/index.html | 4 ++-- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 8a333071c..c598e7cdd 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -132,6 +132,10 @@ textarea { color: $secondary-accent-color; } +#mx_theme_tertiaryAccentColor { + color: $roomsublist-label-bg-color; +} + .mx_Dialog_wrapper { position: fixed; z-index: 4000; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 5fe6c3c0b..e474d278c 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -34,7 +34,11 @@ $secondary-accent-color: $primary-bg-color; // by overriding the key to something untintable // XXX: this is a bit of a hack. #mx_theme_secondaryAccentColor { - color: #2d2d2e ! important; // deliberately off by one + color: #c0ff33 ! important; // deliberately off by one +} + +#mx_theme_tertiaryAccentColor { + color: #c0ffee ! important; } // used by RoomDirectory permissions diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index 229d9b927..bd05efa02 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -90,7 +90,11 @@ $secondary-accent-color: #586C7B; // by overriding the key to something untintable // XXX: this is a bit of a hack. #mx_theme_secondaryAccentColor { - color: #586C7C ! important; // deliberately off by one + color: #c0ffee ! important; +} + +#mx_theme_tertiaryAccentColor { + color: #c0ffee ! important; } // used by RoomDirectory permissions diff --git a/src/vector/index.html b/src/vector/index.html index 36047aca7..8568d96a9 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -27,7 +27,7 @@ if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); %> - + <% } else { %> <% } @@ -73,6 +73,6 @@