PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve _NotificationPanel.scss (#9036)

Browse source 
* Include in mx_NotificationPanel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include in mx_RoomView_MessageList

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include in mx_EventTile_roomName

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include in mx_EventTile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Same order as _FilePanel.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant and obsolete declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Shorthand for padding

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a obsolete declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move declarations out of mx_EventTile:not([data-layout=bubble])

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the block start margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Improve style rules

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Align elements with flexbox, specifying how to handle overflow room name

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use column-gap instead

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add indent to the comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-12 13:52:15 +00:00 committed by GitHub
parent c175263fd7
commit 6fb8342003
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 74 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
res/css/structures/_NotificationPanel.scss
View file

@ -19,110 +19,93 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
.mx_NotificationPanel .mx_RoomView_MessageList {
width: 100%;
}
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
margin-left: 0px;
}
/* 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_NotificationPanel .mx_EventTile {
word-break: break-word;
position: relative;
padding-bottom: 18px;
&:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $tertiary-content;
height: 1px;
opacity: 0.4;
content: '';
}
}
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
font-size: $font-14px;
> * {
vertical-align: middle;
.mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
> .mx_BaseAvatar {
margin-right: 8px;
.mx_RoomView_MessageList {
width: 100%;
h2 {
margin-left: 0;
}
}
}
.mx_NotificationPanel .mx_EventTile_roomName a {
color: $primary-content;
}
/* 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_NotificationPanel .mx_EventTile_avatar {
display: none; // we don't need this in this view
}
.mx_EventTile_avatar {
display: none;
}
.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-content;
font-size: $font-12px;
display: inline;
}
.mx_EventTile {
word-break: break-word;
position: relative;
padding-block: 18px;
.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
padding-left: 36px; // align with the room name
position: relative;
.mx_EventTile_senderDetails,
.mx_EventTile_line {
padding-left: 36px; // align with the room name
}
a {
.mx_EventTile_senderDetails {
position: relative;
a {
display: flex;
column-gap: 5px; // TODO: Use a spacing variable
}
}
.mx_DisambiguatedProfile,
.mx_MessageTimestamp {
color: $primary-content;
font-size: $font-12px;
display: inline;
}
&:hover .mx_EventTile_line {
background-color: $background;
}
&:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $tertiary-content;
height: 1px;
opacity: 0.4;
content: '';
}
}
.mx_EventTile_roomName {
display: flex;
align-items: center;
column-gap: $spacing-8;
font-weight: bold;
font-size: $font-14px;
a {
color: $primary-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.mx_NotificationPanel .mx_EventTile_roomName a,
.mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none !important;
}
.mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
visibility: visible;
position: initial;
display: inline;
padding-left: 5px;
}
.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
margin-right: 0px;
padding-left: 36px; // align with the room name
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $background;
}
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
.mx_EventTile_content {
margin-right: 0;
}
}
.mx_NotificationPanel_empty::before {