imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into joriks/room-list-breadcrumbs

Browse source
This commit is contained in:
Travis Ralston 2020-07-02 13:22:51 -06:00
commit 43db4b98df
38 changed files with 2362 additions and 436 deletions
Download patch file Download diff file Expand all files Collapse all files

89
res/css/views/rooms/_RoomTile2.scss
View file

@ -23,7 +23,6 @@ limitations under the License.
// The tile is also a flexbox row itself
display: flex;
flex-wrap: wrap;
&.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color;
@ -36,7 +35,8 @@ limitations under the License.
.mx_RoomTile2_nameContainer {
flex-grow: 1;
max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the name parts
display: flex;
@ -74,31 +74,39 @@ limitations under the License.
}
}
.mx_RoomTile2_badgeContainer {
width: 18px;
height: 32px;
// Create another flexbox row because it's super easy to position the badge at
// the end this way.
display: flex;
align-items: center;
justify-content: center;
.mx_RoomTile2_menuButton {
margin-left: 4px; // spacing between buttons
}
// The menu button is hidden by default
// TODO: [Notifications] Use mx_RoomTile2_notificationsButton, similar to the following approach:
// https://github.com/matrix-org/matrix-react-sdk/blob/2180a56074f3698fc0241c309a72ba6cad802d1c/res/css/views/rooms/_RoomSublist2.scss#L48-L76
// You'll need to do the same down below on the &:hover selector for the tile.
// See https://github.com/vector-im/riot-web/issues/13961.
// ... also remove this 5 line TODO comment.
.mx_RoomTile2_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 0;
height: 0;
visibility: hidden;
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin: auto 0;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
@ -110,9 +118,12 @@ limitations under the License.
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
display: block;
}
.mx_RoomTile2_menuButton::before {
top: 8px;
left: -1px; // this is off-center to align it with the badges
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
@ -122,13 +133,12 @@ limitations under the License.
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
visibility: hidden;
display: none;
}
.mx_RoomTile2_notificationsButton,
.mx_RoomTile2_menuButton {
width: 18px;
height: 32px;
visibility: visible;
display: block;
}
}
}
@ -144,6 +154,23 @@ limitations under the License.
}
}
// We use these both in context menus and the room tiles
.mx_RoomTile2_iconBell::before {
mask-image: url('$(res)/img/feather-customised/bell.svg');
}
.mx_RoomTile2_iconBellDot::before {
mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
}
.mx_RoomTile2_iconBellCrossed::before {
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
}
.mx_RoomTile2_iconBellMentions::before {
mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
}
.mx_RoomTile2_iconCheck::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
.mx_RoomTile2_contextMenu {
.mx_RoomTile2_contextMenu_redRow {
.mx_AccessibleButton {
@ -155,6 +182,16 @@ limitations under the License.
}
}
.mx_RoomTile2_contextMenu_activeRow {
&.mx_AccessibleButton, .mx_AccessibleButton {
color: $accent-color !important; // !important to override styles from context menu
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent-color;
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;