Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3aeac74

Browse files
t3chguyt3chguy
authored
Merge pull request #5167 from matrix-org/t3chguy/dpsah/6785.1
Right Panel Room Summary and Widgets
2 parents 83c2ae2 + 04d2f93 commit 3aeac74

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1570
-336
lines changed

‎res/css/_components.scss

+3
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,12 @@
155155
@import "./views/messages/_UnknownBody.scss";
156156
@import "./views/messages/_ViewSourceEvent.scss";
157157
@import "./views/messages/_common_CryptoEvent.scss";
158+
@import "./views/right_panel/_BaseCard.scss";
158159
@import "./views/right_panel/_EncryptionInfo.scss";
160+
@import "./views/right_panel/_RoomSummaryCard.scss";
159161
@import "./views/right_panel/_UserInfo.scss";
160162
@import "./views/right_panel/_VerificationPanel.scss";
163+
@import "./views/right_panel/_WidgetCard.scss";
161164
@import "./views/room_settings/_AliasSettings.scss";
162165
@import "./views/rooms/_AppsDrawer.scss";
163166
@import "./views/rooms/_Autocomplete.scss";

‎res/css/structures/_HeaderButtons.scss

+8
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ limitations under the License.
1818
display: flex;
1919
}
2020

21+
.mx_RoomHeader_buttons + .mx_HeaderButtons {
22+
// remove the | separator line for when next to RoomHeaderButtons
23+
// TODO: remove this once when we redo communities and make the right panel similar to the new rooms one
24+
&::before {
25+
content: unset;
26+
}
27+
}
28+
2129
.mx_HeaderButtons::before {
2230
content: "";
2331
background-color: $header-divider-color;

‎res/css/structures/_MainSplit.scss

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ limitations under the License.
2525
padding: 5px;
2626
// margin left to not allow the handle to not encroach on the space for the scrollbar
2727
margin-left: 8px;
28+
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
2829

2930
&:hover .mx_RightPanel_ResizeHandle {
3031
// Need to use important to override element style attributes

‎res/css/structures/_RightPanel.scss

+12-21
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,26 @@ limitations under the License.
6868
mask-repeat: no-repeat;
6969
mask-size: contain;
7070
}
71-
}
7271

73-
.mx_RightPanel_membersButton::before {
74-
mask-image: url('$(res)/img/element-icons/room/members.svg');
75-
mask-position: center;
76-
}
72+
&:hover {
73+
background: rgba($accent-color, 0.1);
7774

78-
.mx_RightPanel_filesButton::before {
79-
mask-image: url('$(res)/img/element-icons/room/files.svg');
80-
mask-position: center;
75+
&::before {
76+
background-color: $accent-color;
77+
}
78+
}
8179
}
8280

8381
.mx_RightPanel_notifsButton::before {
8482
mask-image: url('$(res)/img/element-icons/notifications.svg');
8583
mask-position: center;
8684
}
8785

86+
.mx_RightPanel_roomSummaryButton::before {
87+
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
88+
mask-position: center;
89+
}
90+
8891
.mx_RightPanel_groupMembersButton::before {
8992
mask-image: url('$(res)/img/element-icons/community-members.svg');
9093
mask-position: center;
@@ -96,23 +99,11 @@ limitations under the License.
9699
}
97100

98101
.mx_RightPanel_headerButton_highlight {
99-
background: rgba($accent-color, 0.25);
100-
// make the icon the accent color too
101102
&::before {
102103
background-color: $accent-color !important;
103104
}
104105
}
105106

106-
.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
107-
&:hover {
108-
background: rgba($accent-color, 0.1);
109-
110-
&::before {
111-
background-color: $accent-color;
112-
}
113-
}
114-
}
115-
116107
.mx_RightPanel_headerButton_badge {
117108
font-size: $font-8px;
118109
border-radius: 8px;
@@ -146,7 +137,7 @@ limitations under the License.
146137
}
147138

148139
.mx_RightPanel_empty {
149-
margin-right: -42px;
140+
margin-right: -28px;
150141

151142
h2 {
152143
font-weight: 700;

‎res/css/structures/_UserMenu.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ limitations under the License.
1515
*/
1616

1717
.mx_UserMenu {
18-
1918
// to make the menu button sort of aligned with the explore button below
2019
padding-right: 6px;
2120

@@ -59,7 +58,7 @@ limitations under the License.
5958
mask-position: center;
6059
mask-size: contain;
6160
mask-repeat: no-repeat;
62-
background: $primary-fg-color;
61+
background: $tertiary-fg-color;
6362
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
6463
}
6564
}

‎res/css/views/context_menus/_IconizedContextMenu.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ limitations under the License.
8282
}
8383

8484
span.mx_IconizedContextMenu_label { // labels
85-
padding-left: 14px;
8685
width: 100%;
8786
flex: 1;
8887

@@ -91,6 +90,10 @@ limitations under the License.
9190
overflow: hidden;
9291
white-space: nowrap;
9392
}
93+
94+
.mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
95+
padding-left: 14px;
96+
}
9497
}
9598
}
9699

‎res/css/views/right_panel/_BaseCard.scss

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/*
2+
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_BaseCard {
18+
padding: 0 8px;
19+
overflow: hidden;
20+
display: flex;
21+
flex-direction: column;
22+
flex: 1;
23+
24+
.mx_BaseCard_header {
25+
margin: 8px 0;
26+
27+
> h2 {
28+
margin: 0 44px;
29+
font-size: $font-18px;
30+
font-weight: $font-semi-bold;
31+
overflow: hidden;
32+
text-overflow: ellipsis;
33+
white-space: nowrap;
34+
}
35+
36+
.mx_BaseCard_back, .mx_BaseCard_close {
37+
position: absolute;
38+
background-color: rgba(141, 151, 165, 0.2);
39+
height: 20px;
40+
width: 20px;
41+
margin: 12px;
42+
top: 0;
43+
44+
&::before {
45+
content: "";
46+
position: absolute;
47+
height: 20px;
48+
width: 20px;
49+
top: 0;
50+
left: 0;
51+
mask-repeat: no-repeat;
52+
mask-position: center;
53+
background-color: $rightpanel-button-color;
54+
}
55+
}
56+
57+
.mx_BaseCard_back {
58+
border-radius: 4px;
59+
left: 0;
60+
61+
&::before {
62+
transform: rotate(90deg);
63+
mask-size: 22px;
64+
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
65+
}
66+
}
67+
68+
.mx_BaseCard_close {
69+
border-radius: 10px;
70+
right: 0;
71+
72+
&::before {
73+
mask-image: url('$(res)/img/icons-close.svg');
74+
mask-size: 8px;
75+
}
76+
}
77+
}
78+
79+
.mx_AutoHideScrollbar {
80+
// collapse the margin into a padding to move the scrollbar into the right gutter
81+
margin-right: -8px;
82+
padding-right: 8px;
83+
min-height: 0;
84+
width: 100%;
85+
height: 100%;
86+
}
87+
88+
.mx_BaseCard_Group {
89+
margin: 20px 0 16px;
90+
91+
& > * {
92+
margin-left: 12px;
93+
margin-right: 12px;
94+
}
95+
96+
> h1 {
97+
color: $tertiary-fg-color;
98+
font-size: $font-12px;
99+
font-weight: 500;
100+
}
101+
102+
.mx_BaseCard_Button {
103+
padding: 10px 38px 10px 12px;
104+
margin: 0;
105+
position: relative;
106+
font-size: $font-13px;
107+
height: 20px;
108+
line-height: 20px;
109+
border-radius: 8px;
110+
overflow: hidden;
111+
white-space: nowrap;
112+
text-overflow: ellipsis;
113+
114+
&:hover {
115+
background-color: rgba(141, 151, 165, 0.1);
116+
}
117+
118+
&::after {
119+
content: '';
120+
position: absolute;
121+
top: 10px;
122+
right: 6px;
123+
height: 20px;
124+
width: 20px;
125+
mask-repeat: no-repeat;
126+
mask-position: center;
127+
background-color: $icon-button-color;
128+
transform: rotate(270deg);
129+
mask-size: 20px;
130+
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
131+
}
132+
}
133+
}
134+
135+
.mx_BaseCard_footer {
136+
padding-top: 4px;
137+
text-align: center;
138+
display: flex;
139+
justify-content: space-around;
140+
141+
.mx_AccessibleButton_kind_secondary {
142+
color: $secondary-fg-color;
143+
background-color: rgba(141, 151, 165, 0.2);
144+
font-weight: $font-semi-bold;
145+
font-size: $font-14px;
146+
}
147+
148+
.mx_AccessibleButton_disabled {
149+
cursor: not-allowed;
150+
}
151+
}
152+
}
153+
154+
.mx_FilePanel,
155+
.mx_UserInfo,
156+
.mx_NotificationPanel,
157+
.mx_MemberList {
158+
&.mx_BaseCard {
159+
padding: 32px 0 0;
160+
161+
.mx_AutoHideScrollbar {
162+
margin-right: unset;
163+
padding-right: unset;
164+
}
165+
}
166+
}

0 commit comments

Comments
 (0)