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

Commit fe8c267

Browse files
luixxiulluixxiul
authored
Create a common header on right panel cards on BaseCard (#8808)
* Remove duplicate declarations and add height and overflow properties Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_TimelineCard__header under mx_BaseCard_header for normalization Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize mx_BaseCard_close position Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize className of header - mx_BaseCard_header__ThreadPanel - mx_BaseCard_header__TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header's button size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize inline start header margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * normalize header bottom margin for PinnedMessagesCard and TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mixin RightPanelCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - top level Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header Remove specific declarations on PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_back and mx_BaseCard_close Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title - ThreadPanel Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - span:first-of-type Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename a variable to remove --ThreadPanel_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Headers need Heading Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use spacing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules of mx_ContextualMenu inside mx_BaseCard_header_title to BaseCard leaving style rules specific to ThreadPanel. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide long header title with ellipsis Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header margin-bottom Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back and close margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back ~ mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Return special declarations to _ThreadPanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove the mixin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mx_BaseCard_header_title_button--option Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant margin from AppTileFullWidth Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Header on mx_RoomSummaryCard - remove default declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove default declarations from mx_UserInfo Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables - _BaseCard.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
1 parent 81c894f commit fe8c267

File tree

14 files changed

+138
-208
lines changed

14 files changed

+138
-208
lines changed

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

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ limitations under the License.
1616

1717
.mx_BaseCard {
1818
--BaseCard_EventTile_line-padding-block: 2px;
19-
--BaseCard_EventTile-spacing-inline: 36px;
19+
--BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable
20+
--BaseCard_header-button-size: 24px;
2021

21-
padding: 0 8px;
22+
padding: 0 $spacing-8;
2223
overflow: hidden;
2324
display: flex;
2425
flex-direction: column;
@@ -27,10 +28,10 @@ limitations under the License.
2728
.mx_BaseCard_header {
2829
--BaseCard_header_button-margin: $spacing-12;
2930

30-
margin: $spacing-4 0;
31+
margin: $spacing-4 0 $spacing-12;
3132

3233
> h2 {
33-
margin: 0 44px;
34+
margin: 0 44px; // TODO: Use a spacing variable
3435
font-size: $font-18px;
3536
font-weight: $font-semi-bold;
3637
overflow: hidden;
@@ -42,8 +43,8 @@ limitations under the License.
4243
.mx_BaseCard_close {
4344
position: absolute;
4445
background-color: rgba(141, 151, 165, 0.2);
45-
height: 20px;
46-
width: 20px;
46+
width: var(--BaseCard_header-button-size);
47+
height: var(--BaseCard_header-button-size);
4748
margin: var(--BaseCard_header_button-margin);
4849
top: 0;
4950
border-radius: 50%;
@@ -63,22 +64,73 @@ limitations under the License.
6364

6465
.mx_BaseCard_back {
6566
left: 0;
67+
margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
6668

6769
&::before {
6870
transform: rotate(90deg);
6971
mask-size: 22px;
7072
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
7173
}
74+
75+
// Header title with the back button
76+
~ .mx_BaseCard_header_title {
77+
width: calc(100% - 60px);
78+
margin-inline-start: var(--BaseCard_header-button-size);
79+
80+
.mx_BaseCard_header_title_heading {
81+
margin-inline-start: 6px; // TODO: Use a spacing variable
82+
}
83+
}
7284
}
7385

7486
.mx_BaseCard_close {
7587
right: 0;
88+
margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
7689

7790
&::before {
7891
mask-image: url('$(res)/img/icons-close.svg');
7992
mask-size: 8px;
8093
}
8194
}
95+
96+
.mx_BaseCard_header_title {
97+
display: flex;
98+
align-items: center;
99+
justify-content: space-between;
100+
width: calc(100% - 38px);
101+
height: 24px;
102+
flex: 1;
103+
104+
.mx_BaseCard_header_title_heading {
105+
color: $secondary-content;
106+
overflow: hidden;
107+
white-space: nowrap;
108+
text-overflow: ellipsis;
109+
}
110+
111+
.mx_BaseCard_header_title_button--option {
112+
position: relative;
113+
width: var(--BaseCard_header-button-size);
114+
height: var(--BaseCard_header-button-size);
115+
116+
&::after {
117+
content: '';
118+
position: absolute;
119+
inset-block-start: 0;
120+
inset-inline-start: 0;
121+
height: 100%;
122+
width: 100%;
123+
mask-repeat: no-repeat;
124+
mask-position: center;
125+
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
126+
background-color: $secondary-content;
127+
}
128+
129+
&:hover::after {
130+
background-color: $primary-content;
131+
}
132+
}
133+
}
82134
}
83135

84136
.mx_AutoHideScrollbar {
@@ -91,11 +143,11 @@ limitations under the License.
91143
}
92144

93145
.mx_BaseCard_Group {
94-
margin: 20px 0 16px;
146+
margin: $spacing-20 0 $spacing-16;
95147

96148
& > * {
97-
margin-left: 12px;
98-
margin-right: 12px;
149+
margin-left: $spacing-12;
150+
margin-right: $spacing-12;
99151
}
100152

101153
> h1 {
@@ -105,7 +157,8 @@ limitations under the License.
105157
}
106158

107159
.mx_BaseCard_Button {
108-
padding: 10px 10px 10px 12px;
160+
padding: 10px; // TODO: Use a spacing variable
161+
padding-inline-start: $spacing-12;
109162
margin: 0;
110163
position: relative;
111164
font-size: $font-13px;
@@ -127,7 +180,7 @@ limitations under the License.
127180
}
128181

129182
&.mx_AccessibleButton_disabled {
130-
padding-right: 12px;
183+
padding-right: $spacing-12;
131184
&::after {
132185
content: unset;
133186
}
@@ -136,7 +189,7 @@ limitations under the License.
136189
}
137190

138191
.mx_BaseCard_footer {
139-
padding-top: 4px;
192+
padding-top: $spacing-4;
140193
text-align: center;
141194
display: flex;
142195
justify-content: space-around;
@@ -159,11 +212,46 @@ limitations under the License.
159212
.mx_NotificationPanel,
160213
.mx_MemberList {
161214
&.mx_BaseCard {
162-
padding: 32px 0 0;
215+
padding: $spacing-32 0 0;
163216

164217
.mx_AutoHideScrollbar {
165218
margin-right: unset;
166219
padding-right: unset;
167220
}
168221
}
169222
}
223+
224+
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title {
225+
.mx_ContextualMenu {
226+
position: initial;
227+
228+
span:first-of-type {
229+
font-weight: $font-semi-bold;
230+
font-size: inherit;
231+
color: $primary-content;
232+
}
233+
234+
font-size: $font-12px;
235+
color: $secondary-content;
236+
padding-top: 10px; // TODO: Use a spacing variable
237+
padding-bottom: 10px; // TODO: Use a spacing variable
238+
239+
border: 1px solid $quinary-content;
240+
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
241+
}
242+
243+
.mx_ContextualMenu_chevron_top {
244+
left: auto;
245+
right: 22px; // TODO: Use a spacing variable
246+
border-bottom-color: $quinary-content;
247+
248+
&::after {
249+
content: "";
250+
border: inherit;
251+
border-bottom-color: $menu-bg-color;
252+
position: absolute;
253+
top: 1px;
254+
left: -8px;
255+
}
256+
}
257+
}

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,6 @@ limitations under the License.
1515
*/
1616

1717
.mx_PinnedMessagesCard {
18-
padding-top: 0;
19-
20-
.mx_BaseCard_header {
21-
text-align: center;
22-
margin-top: 0;
23-
border-bottom: 1px solid $menu-border-color;
24-
25-
> h2 {
26-
font-weight: $font-semi-bold;
27-
font-size: $font-18px;
28-
margin: 8px 0;
29-
}
30-
31-
.mx_BaseCard_close {
32-
margin-right: 6px;
33-
}
34-
}
35-
3618
.mx_PinnedMessagesCard_empty_wrapper {
3719
display: flex;
3820
height: 100%;

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,23 @@ limitations under the License.
1717
.mx_RoomSummaryCard {
1818
.mx_BaseCard_header {
1919
text-align: center;
20-
margin-top: 20px;
20+
margin-top: $spacing-20;
2121

2222
h2 {
23-
font-weight: $font-semi-bold;
24-
font-size: $font-18px;
25-
margin: 12px 0 4px;
23+
margin: $spacing-12 0 $spacing-4;
2624
}
2725

2826
.mx_RoomSummaryCard_alias {
2927
font-size: $font-13px;
3028
color: $secondary-content;
29+
overflow: hidden;
30+
text-overflow: ellipsis;
3131
}
3232

3333
h2, .mx_RoomSummaryCard_alias {
3434
display: -webkit-box;
3535
-webkit-line-clamp: 2;
3636
-webkit-box-orient: vertical;
37-
overflow: hidden;
38-
text-overflow: ellipsis;
3937
white-space: pre-wrap;
4038
}
4139

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

Lines changed: 2 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -15,73 +15,16 @@ limitations under the License.
1515
*/
1616

1717
.mx_ThreadPanel {
18-
--ThreadPanel_header-button-size: 24px;
19-
20-
display: flex;
21-
flex-direction: column;
2218
height: 100px;
2319
overflow: visible;
2420

2521
.mx_BaseCard_header {
26-
margin-bottom: $spacing-12;
27-
28-
.mx_BaseCard_close,
29-
.mx_BaseCard_back {
30-
width: var(--ThreadPanel_header-button-size);
31-
height: var(--ThreadPanel_header-button-size);
32-
}
33-
34-
.mx_BaseCard_back {
35-
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
36-
37-
~ .mx_ThreadPanel__header {
38-
width: calc(100% - 60px);
39-
margin-inline-start: var(--ThreadPanel_header-button-size);
40-
41-
span {
42-
margin-inline-start: 6px;
43-
}
44-
}
45-
}
46-
47-
.mx_BaseCard_close {
48-
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
49-
}
50-
51-
.mx_ThreadPanel__header {
52-
width: calc(100% - 38px);
53-
height: 24px;
54-
display: flex;
55-
flex: 1;
56-
justify-content: space-between;
57-
align-items: center;
58-
59-
span:first-of-type {
60-
font-weight: 600;
61-
font-size: 15px;
62-
line-height: 18px;
63-
color: $secondary-content;
64-
}
65-
22+
.mx_BaseCard_header_title {
6623
.mx_AccessibleButton {
6724
font-size: 12px;
6825
color: $secondary-content;
6926
}
7027

71-
.mx_MessageActionBar_optionsButton {
72-
position: relative;
73-
}
74-
75-
.mx_MessageActionBar_maskButton {
76-
width: var(--ThreadPanel_header-button-size);
77-
height: var(--ThreadPanel_header-button-size);
78-
79-
&::after {
80-
mask-size: var(--ThreadPanel_header-button-size);
81-
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
82-
}
83-
}
84-
8528
.mx_ThreadPanel_dropdown {
8629
padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
8730
border-radius: 4px;
@@ -278,40 +221,7 @@ limitations under the License.
278221
}
279222
}
280223

281-
.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
282-
.mx_ContextualMenu {
283-
position: initial;
284-
285-
span:first-of-type {
286-
font-weight: $font-semi-bold;
287-
font-size: inherit;
288-
color: $primary-content;
289-
}
290-
291-
font-size: $font-12px;
292-
color: $secondary-content;
293-
padding-top: 10px;
294-
padding-bottom: 10px;
295-
296-
border: 1px solid $quinary-content;
297-
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
298-
}
299-
300-
.mx_ContextualMenu_chevron_top {
301-
left: auto;
302-
right: 22px;
303-
border-bottom-color: $quinary-content;
304-
305-
&::after {
306-
content: "";
307-
border: inherit;
308-
border-bottom-color: $menu-bg-color;
309-
position: absolute;
310-
top: 1px;
311-
left: -8px;
312-
}
313-
}
314-
224+
.mx_ContextualMenu_wrapper {
315225
.mx_ThreadPanel_Header_FilterOptionItem {
316226
display: flex;
317227
flex-grow: 1;

0 commit comments

Comments
 (0)