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

Fix keyboard shortcuts on settings tab being wrapped (#8825)

Browse source 
* Fix keyboard shortcuts being wrapped

Setting $spacing-8 gap between the labels and the shortcuts

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add the block margin to the rows, not to the keys

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add the inline margin to the shortcuts, not to the keys

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-13 14:12:48 +00:00 committed by GitHub
parent f10d35cb18
commit 95e8a9e419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/settings/_KeyboardShortcut.scss
View file

@ -20,17 +20,11 @@ limitations under the License.
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
background-color: $header-panel-bg-color; background-color: $header-panel-bg-color;
margin-right: 5px;
min-width: 20px; min-width: 20px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
border: 1px solid $kbd-border-color; border: 1px solid $kbd-border-color;
box-shadow: 0 2px $kbd-border-color; box-shadow: 0 2px $kbd-border-color;
margin-bottom: 4px;
text-transform: capitalize; text-transform: capitalize;
& + kbd {
margin-left: 5px;
}
} }
} }

18
res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss
View file

@ -16,9 +16,25 @@ limitations under the License.
*/ */
.mx_KeyboardUserSettingsTab .mx_SettingsTab_section { .mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
.mx_KeyboardShortcut_shortcutRow { .mx_KeyboardShortcut_shortcutRow,
.mx_KeyboardShortcut {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.mx_KeyboardShortcut_shortcutRow {
column-gap: $spacing-8;
margin-bottom: $spacing-4;
// TODO: Use flexbox
&:last-of-type {
margin-bottom: 0;
}
.mx_KeyboardShortcut {
flex-wrap: nowrap;
column-gap: 5px; // TODO: Use a spacing variable
}
}
} }