diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss index 6b71818558..32dda6b90d 100644 --- a/res/css/structures/_SpaceHierarchy.scss +++ b/res/css/structures/_SpaceHierarchy.scss @@ -91,12 +91,6 @@ limitations under the License. } } - .mx_SpaceHierarchy_list { - list-style: none; - padding: 0; - margin: 0; - } - .mx_SpaceHierarchy_roomCount { > h3 { display: inline; @@ -154,124 +148,146 @@ limitations under the License. padding-left: 12px; } - .mx_SpaceHierarchy_roomTile { - position: relative; - padding: 8px 16px; - border-radius: 8px; - box-sizing: border-box; + .mx_SpaceHierarchy_list { + list-style: none; + padding: 0; + margin: 0; - display: grid; - grid-template-columns: 20px auto max-content; - grid-column-gap: 8px; - grid-row-gap: 6px; - align-items: center; + li.mx_SpaceHierarchy_roomTileWrapper { + list-style: none; - .mx_BaseAvatar { - grid-row: 1; - grid-column: 1; - } + .mx_SpaceHierarchy_roomTile { + position: relative; + padding: 8px 16px; + border-radius: 8px; + box-sizing: border-box; - .mx_SpaceHierarchy_roomTile_name { - font-weight: $font-semi-bold; - font-size: $font-15px; - line-height: $font-18px; - grid-row: 1; - grid-column: 2; + display: flex; + flex-wrap: wrap; + gap: 6px 12px; - .mx_InfoTooltip, - .mx_SpaceHierarchy_roomTile_joined { - display: inline; - margin-left: 12px; - color: $tertiary-content; - font-size: $font-12px; - line-height: $font-15px; + .mx_SpaceHierarchy_roomTile_item { + font-weight: $font-semi-bold; + font-size: $font-15px; + line-height: $font-18px; + display: grid; + grid-template-columns: 20px auto; + gap: 6px 8px; + align-items: center; + flex: 1; // wrap action buttons - .mx_InfoTooltip_icon { - margin-right: 4px; - position: relative; - vertical-align: text-top; + .mx_SpaceHierarchy_roomTile_avatar { + grid-row: 1; + grid-column: 1; + } - &::before { - position: absolute; - top: 0; - left: 0; + .mx_SpaceHierarchy_roomTile_name { + grid-row: 1; + grid-column: 2; + + .mx_InfoTooltip, + .mx_SpaceHierarchy_roomTile_joined { + margin-left: 12px; + color: $tertiary-content; + font-size: $font-12px; + line-height: $font-15px; + + .mx_InfoTooltip_icon { + margin-right: 4px; + position: relative; + vertical-align: text-top; + + &::before { + position: absolute; + top: 0; + left: 0; + } + } + } + + .mx_InfoTooltip { + display: inline-block; + } + + .mx_SpaceHierarchy_roomTile_joined { + display: inline; + position: relative; + padding-left: 16px; + + &::before { + content: ''; + width: 20px; + height: 20px; + top: -2px; + left: -4px; + position: absolute; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background-color: $accent; + mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); + } + } + } + + .mx_SpaceHierarchy_roomTile_info { + grid-row: 2; + grid-column: 2; + font-size: $font-14px; + font-weight: initial; + line-height: $font-18px; + color: $secondary-content; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + } + + .mx_SpaceHierarchy_actions { + display: flex; + align-items: center; + column-gap: 12px; + margin-left: auto; + + .mx_AccessibleButton { + line-height: $font-24px; + padding: 4px 16px; + display: inline-block; + visibility: hidden; + } + + .mx_AccessibleButton_kind_danger_outline, + .mx_AccessibleButton_kind_primary_outline { + padding: 3px 16px; // to account for the 1px border + } + + .mx_Checkbox { + display: inline-flex; + + label { + width: 16px; + height: 16px; + } + } + } + + &:hover, &:focus-within { + background-color: $spacePanel-bg-color; + + .mx_AccessibleButton { + visibility: visible; + } + } + + &.mx_SpaceHierarchy_joining { + .mx_AccessibleButton { + visibility: visible; + padding: 4px 18px; } } } - - .mx_SpaceHierarchy_roomTile_joined { - position: relative; - padding-left: 16px; - - &::before { - content: ''; - width: 20px; - height: 20px; - top: -2px; - left: -4px; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $accent; - mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); - } - } } - - .mx_SpaceHierarchy_roomTile_info { - font-size: $font-14px; - line-height: $font-18px; - color: $secondary-content; - grid-row: 2; - grid-column: 2/3; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - } - - .mx_SpaceHierarchy_actions { - text-align: right; - margin-left: 20px; - grid-column: 3; - grid-row: 1/3; - - .mx_AccessibleButton { - line-height: $font-24px; - padding: 4px 16px; - display: inline-block; - visibility: hidden; - } - - .mx_AccessibleButton_kind_danger_outline, - .mx_AccessibleButton_kind_primary_outline { - padding: 3px 16px; // to account for the 1px border - } - - .mx_Checkbox { - display: inline-flex; - vertical-align: middle; - margin-left: 12px; - } - } - - &:hover, &:focus-within { - background-color: $spacePanel-bg-color; - - .mx_AccessibleButton { - visibility: visible; - } - } - - &.mx_SpaceHierarchy_joining .mx_AccessibleButton { - visibility: visible; - padding: 4px 18px; - } - } - - li.mx_SpaceHierarchy_roomTileWrapper { - list-style: none; } .mx_SpaceHierarchy_roomTile, diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index 0c6ce4cee5..625a252365 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -206,24 +206,27 @@ const Tile: React.FC = ({ } const content = - { avatar } -
- { name } - { joinedSection } - { suggestedSection } -
- -
e && linkifyElement(e)} - onClick={ev => { - // prevent clicks on links from bubbling up to the room tile - if ((ev.target as HTMLElement).tagName === "A") { - ev.stopPropagation(); - } - }} - > - { description } +
+
+ { avatar } +
+
+ { name } + { joinedSection } + { suggestedSection } +
+
e && linkifyElement(e)} + onClick={ev => { + // prevent clicks on links from bubbling up to the room tile + if ((ev.target as HTMLElement).tagName === "A") { + ev.stopPropagation(); + } + }} + > + { description } +
{ button }