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

Merge pull request #5792 from matrix-org/t3chguy/spaces4.12

Browse source 
Fixing spaces papercuts
This commit is contained in:
Michael Telatynski 2021-03-26 15:01:31 +00:00 • committed by GitHub
commit 83612dd4ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 502 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_RoomSearch.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
// keep border thickness consistent to prevent movement
border: 1px solid transparent;
height: 28px;
padding: 2px;
padding: 1px;
// Create a flexbox for the icons (easier to manage)
display: flex;

4
res/css/structures/_SpacePanel.scss
View file

@ -330,10 +330,6 @@ $activeBorderColor: $secondary-fg-color;
mask-image: url('$(res)/img/element-icons/leave.svg');
}
.mx_SpacePanel_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_SpacePanel_iconMembers::before {
mask-image: url('$(res)/img/element-icons/room/members.svg');
}

29
res/css/structures/_SpaceRoomDirectory.scss
View file

@ -182,7 +182,7 @@ limitations under the License.
.mx_SpaceRoomDirectory_roomTile {
position: relative;
padding: 6px 16px;
padding: 8px 16px;
border-radius: 8px;
min-height: 56px;
box-sizing: border-box;
@ -190,6 +190,7 @@ limitations under the License.
display: grid;
grid-template-columns: 20px auto max-content;
grid-column-gap: 8px;
grid-row-gap: 6px;
align-items: center;
.mx_BaseAvatar {
@ -213,16 +214,28 @@ limitations under the License.
.mx_InfoTooltip_icon {
margin-right: 4px;
position: relative;
vertical-align: text-top;
&::before {
position: absolute;
top: 0;
left: 0;
}
}
}
}
.mx_SpaceRoomDirectory_roomTile_info {
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
font-size: $font-14px;
line-height: $font-18px;
color: $secondary-fg-color;
grid-row: 2;
grid-column: 1/3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.mx_SpaceRoomDirectory_actions {
@ -232,9 +245,9 @@ limitations under the License.
grid-row: 1/3;
.mx_AccessibleButton {
padding: 6px 18px;
display: none;
padding: 8px 18px;
display: inline-block;
visibility: hidden;
}
.mx_Checkbox {
@ -248,7 +261,7 @@ limitations under the License.
background-color: $groupFilterPanel-bg-color;
.mx_AccessibleButton {
display: inline-block;
visibility: visible;
}
}
}

201
res/css/structures/_SpaceRoomView.scss
View file

@ -22,7 +22,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 432px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $space-button-outline-color;
border: 1px solid $input-border-color;
font-size: $font-15px;
margin: 20px 0;
@ -122,7 +122,6 @@ $SpaceRoomViewInnerWidth: 428px;
max-width: 480px;
box-sizing: border-box;
box-shadow: 2px 15px 30px $dialog-shadow-color;
border: 1px solid $input-border-color;
border-radius: 8px;
.mx_SpaceRoomView_preview_inviter {
@ -154,53 +153,6 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 20px 0 !important; // override default margin from above
}
.mx_SpaceRoomView_preview_info {
color: $tertiary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
margin: 20px 0;
.mx_SpaceRoomView_preview_info_public,
.mx_SpaceRoomView_preview_info_private {
padding-left: 20px;
position: relative;
&::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: 0;
left: -2px;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-fg-color;
}
}
.mx_SpaceRoomView_preview_info_public::before {
mask-size: 12px;
mask-image: url("$(res)/img/globe.svg");
}
.mx_SpaceRoomView_preview_info_private::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/lock.svg");
}
.mx_AccessibleButton_kind_link {
color: inherit;
position: relative;
padding-left: 16px;
&::before {
content: "·"; // visual separator
position: absolute;
left: 6px;
}
}
}
.mx_SpaceRoomView_preview_topic {
font-size: $font-14px;
line-height: $font-22px;
@ -254,36 +206,90 @@ $SpaceRoomViewInnerWidth: 428px;
vertical-align: middle;
}
}
}
.mx_SpaceRoomView_landing_memberCount {
.mx_SpaceRoomView_landing_info {
display: flex;
align-items: center;
.mx_SpaceRoomView_info {
display: inline-block;
margin: 0;
}
.mx_FacePile {
display: inline-block;
margin-left: auto;
margin-right: 12px;
.mx_FacePile_faces {
cursor: pointer;
> span:hover {
.mx_BaseAvatar {
filter: brightness(0.8);
}
}
> span:first-child {
position: relative;
.mx_BaseAvatar {
filter: brightness(0.8);
}
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
background: #ffffff; // white icon fill
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
}
}
}
.mx_SpaceRoomView_landing_inviteButton {
position: relative;
margin-left: 24px;
padding: 0 0 0 28px;
line-height: $font-24px;
vertical-align: text-bottom;
padding-left: 40px;
height: min-content;
&::before {
position: absolute;
content: '';
width: 24px;
height: 24px;
top: 0;
left: 0;
content: "";
left: 8px;
height: 16px;
width: 16px;
background: #ffffff; // white icon fill
mask-position: center;
mask-size: 16px;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/community-members.svg');
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
}
.mx_SpaceRoomView_landing_topic {
font-size: $font-15px;
margin-top: 12px;
margin-bottom: 16px;
}
> hr {
border: none;
height: 1px;
background-color: $groupFilterPanel-bg-color;
}
.mx_SpaceRoomView_landing_adminButtons {
margin-top: 32px;
margin-top: 24px;
.mx_AccessibleButton {
position: relative;
@ -292,9 +298,9 @@ $SpaceRoomViewInnerWidth: 428px;
box-sizing: border-box;
padding: 72px 16px 0;
border-radius: 12px;
border: 1px solid $space-button-outline-color;
border: 1px solid $input-border-color;
margin-right: 28px;
margin-bottom: 28px;
margin-bottom: 20px;
font-size: $font-14px;
display: inline-block;
vertical-align: bottom;
@ -324,16 +330,6 @@ $SpaceRoomViewInnerWidth: 428px;
background: #ffffff; // white icon fill
}
&.mx_SpaceRoomView_landing_inviteButton {
&::before {
background-color: $accent-color;
}
&::after {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
&.mx_SpaceRoomView_landing_addButton {
&::before {
background-color: #ac3ba8;
@ -366,12 +362,8 @@ $SpaceRoomViewInnerWidth: 428px;
}
}
.mx_SpaceRoomDirectory_list {
max-width: 600px;
.mx_SpaceRoomDirectory_roomTile_actions {
display: none;
}
.mx_SearchBox {
margin: 0 0 20px;
}
}
@ -424,3 +416,50 @@ $SpaceRoomViewInnerWidth: 428px;
}
}
}
.mx_SpaceRoomView_info {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
margin: 20px 0;
.mx_SpaceRoomView_info_public,
.mx_SpaceRoomView_info_private {
padding-left: 20px;
position: relative;
&::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: 0;
left: -2px;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-fg-color;
}
}
.mx_SpaceRoomView_info_public::before {
mask-size: 12px;
mask-image: url("$(res)/img/globe.svg");
}
.mx_SpaceRoomView_info_private::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/lock.svg");
}
.mx_AccessibleButton_kind_link {
color: inherit;
position: relative;
padding-left: 16px;
&::before {
content: "·"; // visual separator
position: absolute;
left: 6px;
}
}
}