From e60bf48134cb31fca5461d38ac4d32311a42ad9c Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 13 Jul 2017 18:42:14 +0100 Subject: [PATCH 1/7] 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 2/7] 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 3/7] 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 4/7] 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 6/7] 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 7/7] 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; }