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

Commit 4b17307

Browse files
luixxiulluixxiul
authored
Tidy up _FilePanel.scss (#8953)
* Include in mx_FilePanel Signed-off-by: Suguru Hirahara <[email protected]> * Include mx_RoomView_MessageList * and mx_EventTile * Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * &:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * Variables, logical properties, etc. Signed-off-by: Suguru Hirahara <[email protected]> * Cancel the left stroke of the event tile Signed-off-by: Suguru Hirahara <[email protected]> * Add comment to indicate that text-align of MessageTimestamp is not effective Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 0909bfe commit 4b17307

File tree

1 file changed

+91
-80
lines changed

1 file changed

+91
-80
lines changed

‎res/css/structures/_FilePanel.scss‎

Lines changed: 91 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -19,101 +19,112 @@ limitations under the License.
1919
flex: 1 1 0;
2020
overflow-y: auto;
2121
display: flex;
22-
}
2322

24-
.mx_FilePanel .mx_RoomView_messageListWrapper {
25-
flex-direction: row;
26-
align-items: center;
27-
justify-content: center;
28-
}
23+
.mx_RoomView_messageListWrapper {
24+
flex-direction: row;
25+
align-items: center;
26+
justify-content: center;
27+
}
2928

30-
.mx_FilePanel .mx_RoomView_MessageList {
31-
width: 100%;
32-
}
29+
.mx_RoomView_MessageList {
30+
width: 100%;
3331

34-
.mx_FilePanel .mx_RoomView_MessageList h2 {
35-
display: none;
36-
}
32+
h2 {
33+
display: none;
34+
}
35+
}
3736

38-
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
37+
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
3938
we should make EventTile a base CSS class and customise it specifically
4039
for usage in {Message,File,Notification}Panel. */
4140

42-
.mx_FilePanel .mx_EventTile_avatar {
43-
display: none;
44-
}
45-
46-
/* Overrides for the attachment body tiles */
47-
48-
.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
49-
word-break: break-word;
50-
margin-top: 10px;
51-
padding-top: 0;
52-
53-
.mx_EventTile_line {
54-
padding-left: 0;
41+
.mx_EventTile_avatar {
42+
display: none;
5543
}
56-
}
57-
58-
.mx_FilePanel .mx_EventTile .mx_MFileBody {
59-
line-height: 2.4rem;
60-
}
61-
62-
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
63-
padding-top: 8px;
64-
display: flex;
65-
font-size: $font-14px;
66-
color: $event-timestamp-color;
67-
}
6844

69-
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
70-
flex: 1 1 auto;
71-
color: $light-fg-color;
72-
}
73-
74-
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
75-
flex: 1 0 0;
76-
font-size: $font-14px;
77-
text-align: right;
78-
white-space: nowrap;
79-
}
80-
81-
/* Overides for the sender details line */
82-
83-
.mx_FilePanel .mx_EventTile_senderDetails {
84-
display: flex;
85-
margin-top: -2px;
86-
}
45+
.mx_EventTile {
46+
/* Overrides for the attachment body tiles */
47+
&:not([data-layout=bubble]) {
48+
word-break: break-word;
49+
margin-top: 10px;
50+
padding-top: 0;
51+
52+
.mx_EventTile_line {
53+
padding-inline-start: 0;
54+
}
55+
56+
&:hover {
57+
&.mx_EventTile_verified,
58+
&.mx_EventTile_unverified,
59+
&.mx_EventTile_unknown {
60+
.mx_EventTile_line {
61+
box-shadow: none;
62+
}
63+
}
64+
}
65+
}
66+
67+
.mx_MFileBody {
68+
line-height: 2.4rem;
69+
}
70+
71+
.mx_MFileBody_download {
72+
padding-top: $spacing-8;
73+
display: flex;
74+
font-size: $font-14px;
75+
color: $event-timestamp-color;
76+
}
77+
78+
.mx_MFileBody_downloadLink {
79+
flex: 1 1 auto;
80+
color: $light-fg-color;
81+
}
82+
83+
.mx_MImageBody_size {
84+
flex: 1 0 0;
85+
font-size: $font-14px;
86+
text-align: right;
87+
white-space: nowrap;
88+
}
89+
90+
.mx_DisambiguatedProfile {
91+
flex: 1 1 auto;
92+
line-height: initial;
93+
opacity: 1.0;
94+
color: $event-timestamp-color;
95+
}
96+
97+
.mx_MessageTimestamp {
98+
flex: 1 0 0;
99+
text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
100+
visibility: visible;
101+
position: initial;
102+
font-size: $font-14px;
103+
opacity: 1.0;
104+
}
105+
}
87106

88-
.mx_FilePanel .mx_EventTile_senderDetailsLink {
89-
text-decoration: none;
90-
}
107+
/* Overides for the sender details line */
91108

92-
.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile {
93-
flex: 1 1 auto;
94-
line-height: initial;
95-
opacity: 1.0;
96-
color: $event-timestamp-color;
97-
}
109+
.mx_EventTile_senderDetails {
110+
display: flex;
111+
margin-top: -2px;
112+
}
98113

99-
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
100-
flex: 1 0 0;
101-
text-align: right;
102-
visibility: visible;
103-
position: initial;
104-
font-size: $font-14px;
105-
opacity: 1.0;
106-
}
114+
.mx_EventTile_senderDetailsLink {
115+
text-decoration: none;
116+
}
107117

108-
/* Overrides for the wrappers around the body tile */
118+
/* Overrides for the wrappers around the body tile */
109119

110-
.mx_FilePanel .mx_EventTile_line {
111-
margin-right: 0px;
112-
padding-left: 0px;
113-
}
120+
.mx_EventTile_line {
121+
margin-inline-end: 0;
122+
padding-inline-start: 0;
114123

115-
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
116-
padding-left: 0px;
124+
.mx_EventTile_selected & {
125+
padding-inline-start: 0;
126+
}
127+
}
117128
}
118129

119130
.mx_FilePanel_empty::before {

0 commit comments

Comments
 (0)