OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix buttons alignment of Space list header (#8047)

pull/21833/head
Suguru Hirahara 2022-03-14 09:07:36 +00:00 committed by GitHub
parent 14807de552
commit ed6a371616
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
res/css/structures/_SpaceHierarchy.scss
View File

@ -35,25 +35,33 @@ limitations under the License.
}
.mx_SpaceHierarchy_listHeader {
display: flex;
min-height: 32px;
display: grid;
justify-content: space-between;
align-items: center;
column-gap: 10px;
min-height: 32px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
margin-bottom: 12px;
> h4 {
.mx_SpaceHierarchy_listHeader_header {
grid-column-start: 1;
font-weight: $font-semi-bold;
margin: 0;
}
.mx_AccessibleButton {
padding: 4px 12px;
font-weight: normal;
.mx_SpaceHierarchy_listHeader_buttons {
grid-column-start: 2;
display: flex;
flex-flow: wrap;
justify-content: flex-end;
row-gap: 12px;
column-gap: 12px;
& + .mx_AccessibleButton {
margin-left: 16px;
.mx_AccessibleButton {
padding: 4px 12px;
font-weight: normal;
}
}
@ -61,10 +69,6 @@ limitations under the License.
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px; // to account for the 1px border
}
> span {
margin-left: auto;
}
}
.mx_SpaceHierarchy_error {

8
src/components/structures/SpaceHierarchy.tsx
View File

@ -770,8 +770,10 @@ const SpaceHierarchy = ({
content = <>
<div className="mx_SpaceHierarchy_listHeader">
<h4>{ query.trim() ? _t("Results") : _t("Rooms and spaces") }</h4>
<span>
<h4 className="mx_SpaceHierarchy_listHeader_header">
{ query.trim() ? _t("Results") : _t("Rooms and spaces") }
</h4>
<div className="mx_SpaceHierarchy_listHeader_buttons">
{ additionalButtons }
{ hasPermissions && (
<ManageButtons
@ -781,7 +783,7 @@ const SpaceHierarchy = ({
setError={setError}
/>
) }
</span>
</div>
</div>
{ errorText && <div className="mx_SpaceHierarchy_error">
{ errorText }