From e60bf48134cb31fca5461d38ac4d32311a42ad9c Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 13 Jul 2017 18:42:14 +0100 Subject: [PATCH 01/11] CSS for start of group edit support --- .../structures/_GroupView.scss | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index e56da68d2f..7ca03c6a9e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -24,12 +24,63 @@ limitations under the License. margin: auto; } +.mx_GroupView_header { + max-width: 960px; + margin: auto; + height: 70px; + align-items: center; + display: flex; + border-bottom: 1px solid #e5e5e5; + margin-bottom: 20px; +} + +.mx_GroupView_header_avatar, .mx_GroupView_header_info { + display: table-cell; +} + +.mx_GroupView_header_leftCol { + flex: 1; +} + +.mx_GroupView_saveButton, .mx_GroupView_cancelButton { + display: table-cell; +} + .mx_GroupView_header_groupid { font-weight: normal; font-size: initial; padding-left: 10px; } +.mx_GroupView_header_name { + vertical-align: middle; + width: 100%; + height: 31px; + overflow: hidden; + color: $primary-fg-color; + font-weight: bold; + font-size: 22px; + padding-left: 19px; + padding-right: 16px; + /* why isn't text-overflow working? */ + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + +.mx_GroupView_header_shortDesc { + vertical-align: bottom; + float: left; + max-height: 42px; + color: $settings-grey-fg-color; + font-weight: 300; + font-size: 13px; + margin-left: 19px; + margin-right: 16px; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + .mx_GroupView_featuredThings { margin-top: 20px; } @@ -50,3 +101,7 @@ limitations under the License. cursor: pointer; display: table-cell; } + +.mx_GroupView_uploadInput { + display: none; +} From 8c9afc2dfdd885dd13bb1c92ffe19d65f8f61c1c Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 14 Jul 2017 15:39:46 +0100 Subject: [PATCH 02/11] Make GroupView more consistent with RoomView --- .../vector/css/matrix-react-sdk/structures/_GroupView.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index 7ca03c6a9e..9593546ffc 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_GroupView { max-width: 960px; width: 100%; - margin: 20px auto; } .mx_GroupView_error { @@ -36,6 +35,7 @@ limitations under the License. .mx_GroupView_header_avatar, .mx_GroupView_header_info { display: table-cell; + vertical-align: middle; } .mx_GroupView_header_leftCol { @@ -74,7 +74,6 @@ limitations under the License. color: $settings-grey-fg-color; font-weight: 300; font-size: 13px; - margin-left: 19px; margin-right: 16px; overflow: hidden; text-overflow: ellipsis; From 54f44af494101be1793104284c087fb5a9817c7e Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 14 Jul 2017 17:23:44 +0100 Subject: [PATCH 03/11] Make editing prettier --- .../structures/_GroupView.scss | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index 9593546ffc..f60effb6de 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -29,8 +29,6 @@ limitations under the License. height: 70px; align-items: center; display: flex; - border-bottom: 1px solid #e5e5e5; - margin-bottom: 20px; } .mx_GroupView_header_avatar, .mx_GroupView_header_info { @@ -38,6 +36,16 @@ limitations under the License. vertical-align: middle; } +.mx_GroupView_avatarPicker { + position: relative; +} + +.mx_GroupView_avatarPicker_edit { + position: absolute; + top: 50px; + left: 15px; +} + .mx_GroupView_header_leftCol { flex: 1; } @@ -67,6 +75,10 @@ limitations under the License. border-bottom: 1px solid transparent; } +.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input { + width: 400px; +} + .mx_GroupView_header_shortDesc { vertical-align: bottom; float: left; @@ -74,12 +86,33 @@ limitations under the License. color: $settings-grey-fg-color; font-weight: 300; font-size: 13px; + padding-left: 19px; margin-right: 16px; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; } +.mx_GroupView_cancelButton { + padding-left: 8px; +} + +.mx_GroupView_cancelButton img { + position: relative; + top: 5px; +} + +.mx_GroupView_header_viewBottom { + border-bottom: 1px solid #e5e5e5; + height: 0; + margin-bottom: 20px; +} + +.mx_GroupView_header_editBottom { + height: 0; + margin-top: 20px; +} + .mx_GroupView_featuredThings { margin-top: 20px; } @@ -104,3 +137,8 @@ limitations under the License. .mx_GroupView_uploadInput { display: none; } + +.mx_GroupView_editLongDesc { + width: 100%; + height: 150px; +} From 65b9086f18c8f0f3053e1c33096a3998b0060695 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 17 Jul 2017 17:20:11 +0100 Subject: [PATCH 04/11] Add group header button css --- .../css/matrix-react-sdk/structures/_GroupView.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index f60effb6de..f822cd2e6e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -36,6 +36,16 @@ limitations under the License. vertical-align: middle; } +.mx_GroupHeader_button { + margin-left: 12px; + cursor: pointer; +} + +.mx_GroupHeader_button object { + // prevents clicks from being swallowed by svg in 'object' tag + pointer-events: none; +} + .mx_GroupView_avatarPicker { position: relative; } From 5ba3453dcc204e94507cb866e29cc413466d221c Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 21 Jul 2017 11:12:46 +0100 Subject: [PATCH 06/11] cursor: pointer on avatar picker --- .../vector/css/matrix-react-sdk/structures/_GroupView.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index f822cd2e6e..7cae7664d8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -103,6 +103,10 @@ limitations under the License. border-bottom: 1px solid transparent; } +.mx_GroupView_avatarPicker_label { + cursor: pointer; +} + .mx_GroupView_cancelButton { padding-left: 8px; } From d2f02e8e997c143fe14ae263353ed6ddb57fb68a Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 21 Jul 2017 14:14:27 +0100 Subject: [PATCH 07/11] Swap classes instead of using 0 height elements --- .../structures/_GroupView.scss | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index 7cae7664d8..ae9f97b223 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -29,6 +29,11 @@ limitations under the License. height: 70px; align-items: center; display: flex; + margin-bottom: 20px; +} + +.mx_GroupView_header_view { + border-bottom: 1px solid #e5e5e5; } .mx_GroupView_header_avatar, .mx_GroupView_header_info { @@ -56,6 +61,11 @@ limitations under the License. left: 15px; } +.mx_GroupView_avatarPicker .mx_Spinner { + width: 48px; + height: 48px ! important; +} + .mx_GroupView_header_leftCol { flex: 1; } @@ -116,17 +126,6 @@ limitations under the License. top: 5px; } -.mx_GroupView_header_viewBottom { - border-bottom: 1px solid #e5e5e5; - height: 0; - margin-bottom: 20px; -} - -.mx_GroupView_header_editBottom { - height: 0; - margin-top: 20px; -} - .mx_GroupView_featuredThings { margin-top: 20px; } From e923847dac54f7996e71782ab00019e92334e464 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 24 Jul 2017 14:49:43 +0100 Subject: [PATCH 08/11] Make user mentions more pill-like By adding subtle background-colors --- .../vector/css/matrix-react-sdk/views/elements/_RichText.scss | 2 ++ src/skins/vector/css/themes/_base.scss | 1 + src/skins/vector/css/themes/_dark.scss | 2 ++ 3 files changed, 5 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index 788955e31d..55faab8473 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -14,6 +14,8 @@ .mx_EventTile_content .markdown-body a.mx_UserPill, .mx_UserPill { color: $primary-fg-color; + background-color: $other-user-pill-bg-color; + padding-right: 5px; } .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 545334d3df..6f613e38f8 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -20,6 +20,7 @@ $focus-brightness: 125%; // red warning colour $warning-color: #ff0064; $mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $preview-bar-bg-color: #f7f7f7; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index fe2e7591cf..f92c89bdbe 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -20,6 +20,8 @@ $focus-brightness: 200%; // red warning colour $warning-color: #ff0064; +$other-user-pill-bg-color: rgba(255, 255, 255, 0.15); + $preview-bar-bg-color: #333; // left-panel style muted accent color From bc2f639aaecdb655756fe5aa47e853eed7e43989 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 24 Jul 2017 17:19:46 +0100 Subject: [PATCH 09/11] Fix a couple of minor errors in the room list bluebird promises don't support .fail, so some operations didn't work quite right. We should use .catch instead. --- src/components/structures/RoomSubList.js | 2 +- src/components/views/context_menus/RoomTileContextMenu.js | 4 ++-- src/components/views/rooms/DNDRoomTile.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 17febe02c7..4844f0ed35 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -511,7 +511,7 @@ var RoomSubList = React.createClass({ if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) { MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() { // Do any final stuff here - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Failed to add tag " + self.props.tagName + " to room" + err); Modal.createDialog(ErrorDialog, { diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js index 4d08e8332e..3ef0646237 100644 --- a/src/components/views/context_menus/RoomTileContextMenu.js +++ b/src/components/views/context_menus/RoomTileContextMenu.js @@ -68,7 +68,7 @@ module.exports = React.createClass({ if (self.props.onFinished) { self.props.onFinished(); }; - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createDialog(ErrorDialog, { title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOff}), @@ -85,7 +85,7 @@ module.exports = React.createClass({ if (self.props.onFinished) { self.props.onFinished(); }; - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createDialog(ErrorDialog, { title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOn}), diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js index 2f521028cd..cd5e54f071 100644 --- a/src/components/views/rooms/DNDRoomTile.js +++ b/src/components/views/rooms/DNDRoomTile.js @@ -111,7 +111,7 @@ var roomTileSource = { //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 }); MatrixClientPeg.get().deleteRoomTag(item.room.roomId, prevTag).finally(function() { //component.state.set({ spinner: component.state.spinner-- }); - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Failed to remove tag " + prevTag + " from room: " + err); Modal.createDialog(ErrorDialog, { From dbeeacf11c025b6c05644e6abd3aad0638d086a9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 24 Jul 2017 22:13:29 +0100 Subject: [PATCH 10/11] tweak pill colours some more --- src/skins/vector/css/themes/_base.scss | 2 +- src/skins/vector/css/themes/_dark.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 6f613e38f8..3b1bf9e8e5 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -20,7 +20,7 @@ $focus-brightness: 125%; // red warning colour $warning-color: #ff0064; $mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); +$other-user-pill-bg-color: rgba(0, 0, 0, 0.05); $preview-bar-bg-color: #f7f7f7; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index f92c89bdbe..a8f162d9f9 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -20,7 +20,7 @@ $focus-brightness: 200%; // red warning colour $warning-color: #ff0064; -$other-user-pill-bg-color: rgba(255, 255, 255, 0.15); +$other-user-pill-bg-color: rgba(255, 255, 255, 0.1); $preview-bar-bg-color: #333; From bcedc206e124b338a2b7aab31d7962753169fd11 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 25 Jul 2017 09:55:34 +0100 Subject: [PATCH 11/11] seems folk prefer darker pills --- src/skins/vector/css/themes/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 3b1bf9e8e5..6f613e38f8 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -20,7 +20,7 @@ $focus-brightness: 125%; // red warning colour $warning-color: #ff0064; $mention-user-pill-bg-color: #ff0064; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.05); +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $preview-bar-bg-color: #f7f7f7;