From 4b17307d792aae5eadf2a95394b9e4e6cc80ac04 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 4 Jul 2022 15:20:18 +0900 Subject: [PATCH] Tidy up _FilePanel.scss (#8953) * Include in mx_FilePanel Signed-off-by: Suguru Hirahara * Include mx_RoomView_MessageList * and mx_EventTile * Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * &:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * Variables, logical properties, etc. Signed-off-by: Suguru Hirahara * Cancel the left stroke of the event tile Signed-off-by: Suguru Hirahara * Add comment to indicate that text-align of MessageTimestamp is not effective Signed-off-by: Suguru Hirahara --- res/css/structures/_FilePanel.scss | 177 +++++++++++++++-------------- 1 file changed, 94 insertions(+), 83 deletions(-) diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index d863702d5c..3119162e26 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -19,103 +19,114 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; display: flex; -} -.mx_FilePanel .mx_RoomView_messageListWrapper { - flex-direction: row; - align-items: center; - justify-content: center; -} + .mx_RoomView_messageListWrapper { + flex-direction: row; + align-items: center; + justify-content: center; + } -.mx_FilePanel .mx_RoomView_MessageList { - width: 100%; -} + .mx_RoomView_MessageList { + width: 100%; -.mx_FilePanel .mx_RoomView_MessageList h2 { - display: none; -} + h2 { + display: none; + } + } -/* FIXME: rather than having EventTile's default CSS be for MessagePanel, + /* FIXME: rather than having EventTile's default CSS be for MessagePanel, we should make EventTile a base CSS class and customise it specifically for usage in {Message,File,Notification}Panel. */ -.mx_FilePanel .mx_EventTile_avatar { - display: none; -} + .mx_EventTile_avatar { + display: none; + } -/* Overrides for the attachment body tiles */ + .mx_EventTile { + /* Overrides for the attachment body tiles */ + &:not([data-layout=bubble]) { + word-break: break-word; + margin-top: 10px; + padding-top: 0; -.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) { - word-break: break-word; - margin-top: 10px; - padding-top: 0; + .mx_EventTile_line { + padding-inline-start: 0; + } + + &:hover { + &.mx_EventTile_verified, + &.mx_EventTile_unverified, + &.mx_EventTile_unknown { + .mx_EventTile_line { + box-shadow: none; + } + } + } + } + + .mx_MFileBody { + line-height: 2.4rem; + } + + .mx_MFileBody_download { + padding-top: $spacing-8; + display: flex; + font-size: $font-14px; + color: $event-timestamp-color; + } + + .mx_MFileBody_downloadLink { + flex: 1 1 auto; + color: $light-fg-color; + } + + .mx_MImageBody_size { + flex: 1 0 0; + font-size: $font-14px; + text-align: right; + white-space: nowrap; + } + + .mx_DisambiguatedProfile { + flex: 1 1 auto; + line-height: initial; + opacity: 1.0; + color: $event-timestamp-color; + } + + .mx_MessageTimestamp { + flex: 1 0 0; + text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp + visibility: visible; + position: initial; + font-size: $font-14px; + opacity: 1.0; + } + } + + /* Overides for the sender details line */ + + .mx_EventTile_senderDetails { + display: flex; + margin-top: -2px; + } + + .mx_EventTile_senderDetailsLink { + text-decoration: none; + } + + /* Overrides for the wrappers around the body tile */ .mx_EventTile_line { - padding-left: 0; + margin-inline-end: 0; + padding-inline-start: 0; + + .mx_EventTile_selected & { + padding-inline-start: 0; + } } } -.mx_FilePanel .mx_EventTile .mx_MFileBody { - line-height: 2.4rem; -} - -.mx_FilePanel .mx_EventTile .mx_MFileBody_download { - padding-top: 8px; - display: flex; - font-size: $font-14px; - color: $event-timestamp-color; -} - -.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink { - flex: 1 1 auto; - color: $light-fg-color; -} - -.mx_FilePanel .mx_EventTile .mx_MImageBody_size { - flex: 1 0 0; - font-size: $font-14px; - text-align: right; - white-space: nowrap; -} - -/* Overides for the sender details line */ - -.mx_FilePanel .mx_EventTile_senderDetails { - display: flex; - margin-top: -2px; -} - -.mx_FilePanel .mx_EventTile_senderDetailsLink { - text-decoration: none; -} - -.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile { - flex: 1 1 auto; - line-height: initial; - opacity: 1.0; - color: $event-timestamp-color; -} - -.mx_FilePanel .mx_EventTile .mx_MessageTimestamp { - flex: 1 0 0; - text-align: right; - visibility: visible; - position: initial; - font-size: $font-14px; - opacity: 1.0; -} - -/* Overrides for the wrappers around the body tile */ - -.mx_FilePanel .mx_EventTile_line { - margin-right: 0px; - padding-left: 0px; -} - -.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { - padding-left: 0px; -} - .mx_FilePanel_empty::before { mask-image: url('$(res)/img/element-icons/room/files.svg'); }