Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Fix keyboard shortcuts on settings tab being wrapped #8825

Merged
SimonBrandner merged 3 commits into from
Jun 13, 2022
Merged

Fix keyboard shortcuts on settings tab being wrapped #8825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
393ebf8
Fix keyboard shortcuts being wrapped
luixxiul Jun 12, 2022
8d21f13
Add the block margin to the rows, not to the keys
luixxiul Jun 12, 2022
7adbf46
Add the inline margin to the shortcuts, not to the keys
luixxiul Jun 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions res/css/views/settings/_KeyboardShortcut.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,11 @@ limitations under the License.
padding: 5px;
border-radius: 4px;
background-color: $header-panel-bg-color;
margin-right: 5px;
min-width: 20px;
text-align: center;
display: inline-block;
border: 1px solid $kbd-border-color;
box-shadow: 0 2px $kbd-border-color;
margin-bottom: 4px;
text-transform: capitalize;

& + kbd {
margin-left: 5px;
}
}
}
18 changes: 17 additions & 1 deletion res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,25 @@ limitations under the License.
*/

.mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
.mx_KeyboardShortcut_shortcutRow {
.mx_KeyboardShortcut_shortcutRow,
.mx_KeyboardShortcut {
display: flex;
justify-content: space-between;
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
Copy link
Contributor

@SimonBrandner SimonBrandner Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could go with 4px here

Copy link
Contributor Author

@luixxiul luixxiul Jun 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first it looked to me 4px was too narrow... let me check again.

Copy link
Contributor Author

@luixxiul luixxiul Jun 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like 1px gap could be more important than it seems. Please compare them by opening them in new tabs.

Before:
before

After:
after

Since I am not quite sure if setting 4px would be appropriate, I would like to suggest to keep 5px as it has been.

}
}
}