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

Responsive information bar on Space landing page (#8060)

Browse source
This commit is contained in:
Suguru Hirahara 2022-03-23 17:17:25 +00:00 committed by GitHub
parent 86691550df
commit 3bb0dc08e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 120 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -154,7 +154,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
// XXX remove this when spaces leaves Beta // XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_preview_spaceBetaPrompt { &_spaceBetaPrompt {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
@ -184,7 +184,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_preview_inviter { &_inviter {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -214,7 +214,7 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 20px 0 !important; // override default margin from above margin: 20px 0 !important; // override default margin from above
} }
.mx_SpaceRoomView_preview_topic { &_topic {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-22px; line-height: $font-22px;
color: $secondary-content; color: $secondary-content;
@ -223,7 +223,7 @@ $SpaceRoomViewInnerWidth: 428px;
overflow-y: auto; overflow-y: auto;
} }
.mx_SpaceRoomView_preview_joinButtons { &_joinButtons {
margin-top: 20px; margin-top: 20px;
.mx_AccessibleButton { .mx_AccessibleButton {
@ -243,14 +243,14 @@ $SpaceRoomViewInnerWidth: 428px;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
.mx_SpaceRoomView_landing_header { &_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.mx_BaseAvatar { .mx_BaseAvatar {
width: 80px; width: 80px;
.mx_BaseAvatar_image { &_image {
border-radius: 12px; border-radius: 12px;
} }
} }
@ -266,19 +266,17 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_landing_name { &_name {
margin: 24px 0 16px; margin: 24px 0 16px;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-content; color: $secondary-content;
> span { > span {
display: inline-block; display: flex;
} flex-flow: column;
gap: 12px 0;
.mx_SpaceRoomView_landing_nameRow { h1 {
margin-top: 12px;
> h1 {
display: inline-block; display: inline-block;
} }
} }
@ -291,67 +289,122 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_landing_info { &_infoBar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
line-height: $font-24px;
.mx_SpaceRoomView_info { .mx_SpaceRoomView_info {
color: $secondary-content;
font-size: $font-15px;
display: inline-block; display: inline-block;
margin: 0 auto 0 0;
}
.mx_FacePile { &_public,
display: inline-block; &_private {
margin-right: 12px; padding-left: 20px;
position: relative;
.mx_FacePile_faces { &::before {
cursor: pointer; position: absolute;
content: "";
width: 20px;
height: 20px;
top: 0;
left: -2px;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-content;
}
}
&_public::before {
mask-size: 12px;
mask-image: url("$(res)/img/globe.svg");
}
&_private::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/lock.svg");
}
&_memberCount {
color: inherit;
position: relative;
padding: 0 0 0 16px;
font-size: $font-15px;
display: inline; // cancel inline-flex
&::before {
content: "·"; // visual separator
position: absolute;
left: 6px;
}
} }
} }
.mx_SpaceRoomView_landing_inviteButton { .mx_SpaceRoomView_landing_infoBar_interactive {
position: relative; display: flex;
padding: 4px 18px 4px 40px; flex-wrap: wrap;
line-height: $font-24px; align-items: center;
height: min-content; gap: 12px 12px;
&::before { .mx_FacePile {
position: absolute; display: inline-block;
content: "";
left: 8px; .mx_FacePile_faces {
height: 16px; cursor: pointer;
width: 16px; }
background: #ffffff; // white icon fill
mask-position: center;
mask-size: 16px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
} }
}
.mx_SpaceRoomView_landing_settingsButton { .mx_SpaceRoomView_landing {
position: relative; &_inviteButton,
margin-left: 16px; &_settingsButton {
width: 24px; position: relative;
height: 24px;
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
left: 0; mask-position: center;
top: 0; mask-repeat: no-repeat;
height: 24px; }
width: 24px; }
background: $tertiary-content;
mask-position: center; &_inviteButton {
mask-size: contain; padding: 4px 18px 4px 40px;
mask-repeat: no-repeat; height: min-content;
mask-image: url('$(res)/img/element-icons/settings.svg');
&::before {
left: 8px;
height: 16px;
width: 16px;
background: #fff; // white icon fill
mask-size: 16px;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
&_settingsButton {
width: 24px;
height: 24px;
&::before {
left: 0;
top: 0;
height: 24px;
width: 24px;
background: $tertiary-content;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/settings.svg');
}
}
} }
} }
} }
.mx_SpaceRoomView_landing_topic { &_topic {
font-size: $font-15px; font-size: $font-15px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 16px; margin-bottom: 16px;
@ -370,18 +423,18 @@ $SpaceRoomViewInnerWidth: 428px;
@mixin SpacePillButton; @mixin SpacePillButton;
} }
.mx_SpaceRoomView_privateScope_justMeButton::before { &_justMeButton::before {
mask-image: url('$(res)/img/element-icons/room/members.svg'); mask-image: url('$(res)/img/element-icons/room/members.svg');
} }
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before { &_meAndMyTeammatesButton::before {
mask-image: url('$(res)/img/element-icons/community-members.svg'); mask-image: url('$(res)/img/element-icons/community-members.svg');
} }
} }
.mx_SpaceRoomView_inviteTeammates { .mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta // XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer { &_betaDisclaimer {
padding: 16px; padding: 16px;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
@ -397,7 +450,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_inviteTeammates_buttons { &_buttons {
color: $secondary-content; color: $secondary-content;
margin-top: 28px; margin-top: 28px;
@ -436,51 +489,3 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
} }
.mx_SpaceRoomView_info {
color: $secondary-content;
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-content;
}
}
.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_SpaceRoomView_info_memberCount {
color: inherit;
position: relative;
padding: 0 0 0 16px;
font-size: $font-15px;
&::before {
content: "·"; // visual separator
position: absolute;
left: 6px;
}
}
}

14
src/components/structures/SpaceRoomView.tsx
View file

@ -429,18 +429,18 @@ const SpaceLanding = ({ space }: { space: Room }) => {
<div className="mx_SpaceRoomView_landing_name"> <div className="mx_SpaceRoomView_landing_name">
<RoomName room={space}> <RoomName room={space}>
{ (name) => { { (name) => {
const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow"> const tags = { name: () => <h1>{ name }</h1> };
<h1>{ name }</h1>
</div> };
return _t("Welcome to <name/>", {}, tags) as JSX.Element; return _t("Welcome to <name/>", {}, tags) as JSX.Element;
} } } }
</RoomName> </RoomName>
</div> </div>
<div className="mx_SpaceRoomView_landing_info"> <div className="mx_SpaceRoomView_landing_infoBar">
<SpaceInfo space={space} /> <SpaceInfo space={space} />
<RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} /> <div className="mx_SpaceRoomView_landing_infoBar_interactive">
{ inviteButton } <RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
{ settingsButton } { inviteButton }
{ settingsButton }
</div>
</div> </div>
<RoomTopic room={space}> <RoomTopic room={space}>
{ (topic, ref) => ( { (topic, ref) => (