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

Add face pile to rooms (#11356)

Browse source 
* Add face pile to rooms

* Migrate FacePile to use Compound

* Fix CI

* Use FacePile component in room header

* Add facepile tests

* Make dead code CI happy

* Lint

* Fix tests

* Fix CSS selectors

* Update room face pile snapshot

* Use useMemo instead of useState and useEffect

* Remove unused imports

* Update snapshot

* Update snapshot
This commit is contained in:
Germain 2023-08-30 18:55:02 +01:00 • committed by GitHub
parent af268b4a03
commit dc70ea5059
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 445 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_SpaceRoomView.pcss
View file

@ -189,10 +189,6 @@ limitations under the License.
.mx_FacePile {
display: inline-block;
.mx_FacePile_faces {
cursor: pointer;
}
}
.mx_SpaceRoomView_landing_inviteButton,

73
res/css/views/elements/_FacePile.pcss
View file

@ -14,53 +14,32 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_FacePile {
display: flex;
align-items: center;
.mx_FacePile_more {
position: relative;
border-radius: 100%;
width: 30px;
height: 30px;
background-color: $spacePanel-bg-color;
.mx_FacePile_faces {
display: inline-flex;
flex-direction: row-reverse;
vertical-align: middle;
margin: 0 -1px; /* to cancel out the border on the edges */
/* Overlap the children */
> * + * {
margin-right: -8px;
}
.mx_BaseAvatar {
border: 1px solid var(--facepile-background, $background);
}
.mx_FacePile_more {
position: relative;
border-radius: 100%;
width: 30px;
height: 30px;
background-color: $spacePanel-bg-color;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
}
}
}
.mx_FacePile_summary {
margin-left: 12px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
color: $tertiary-content;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
}
}
.mx_FacePile_summary {
margin-left: 12px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
color: $tertiary-content;
}

17
res/css/views/rooms/_RoomHeader.pcss
View file

@ -23,6 +23,7 @@ limitations under the License.
.mx_RoomHeader_info {
cursor: pointer;
flex: 1;
}
.mx_RoomHeader_topic {
@ -45,3 +46,19 @@ limitations under the License.
height: calc($font-13px * 1.5);
opacity: 1;
}
.mx_RoomHeader .mx_FacePile {
color: $secondary-content;
display: flex;
align-items: center;
gap: var(--cpd-space-2x);
border-radius: 9999px;
padding: var(--cpd-space-1-5x);
cursor: pointer;
user-select: none;
&:hover {
color: $primary-content;
background: var(--cpd-color-bg-subtle-primary);
}
}