Move KeyboardShortcut
styling into a separate file (#8067)
This commit is contained in:
parent
22712d3091
commit
8418b4fd71
6 changed files with 53 additions and 24 deletions
res/css
src/components/views/settings
test/components/views/settings
__snapshots__
tabs/user/__snapshots__
|
@ -277,6 +277,7 @@
|
|||
@import "./views/settings/_ImageSizePanel.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_JoinRuleSettings.scss";
|
||||
@import "./views/settings/_KeyboardShortcut.scss";
|
||||
@import "./views/settings/_LayoutSwitcher.scss";
|
||||
@import "./views/settings/_Notifications.scss";
|
||||
@import "./views/settings/_PhoneNumbers.scss";
|
||||
|
|
36
res/css/views/settings/_KeyboardShortcut.scss
Normal file
36
res/css/views/settings/_KeyboardShortcut.scss
Normal file
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_KeyboardShortcut {
|
||||
kbd {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -21,22 +21,4 @@ limitations under the License.
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
kbd {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,7 +58,7 @@ export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ value }) =>
|
|||
modifiersElement.push(<KeyboardKey key="shiftKey" name={Key.SHIFT} />);
|
||||
}
|
||||
|
||||
return <div>
|
||||
return <div className="mx_KeyboardShortcut">
|
||||
{ modifiersElement }
|
||||
<KeyboardKey name={value.key} last />
|
||||
</div>;
|
||||
|
|
|
@ -23,7 +23,9 @@ exports[`KeyboardShortcut doesn't render same modifier twice 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_KeyboardShortcut"
|
||||
>
|
||||
<KeyboardKey
|
||||
key="ctrlOrCmdKey"
|
||||
name="Control"
|
||||
|
@ -59,7 +61,9 @@ exports[`KeyboardShortcut doesn't render same modifier twice 2`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_KeyboardShortcut"
|
||||
>
|
||||
<KeyboardKey
|
||||
key="ctrlOrCmdKey"
|
||||
name="Control"
|
||||
|
|
|
@ -50,7 +50,9 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_KeyboardShortcut"
|
||||
>
|
||||
<KeyboardKey
|
||||
key="ctrlKey"
|
||||
name="Control"
|
||||
|
@ -92,7 +94,9 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_KeyboardShortcut"
|
||||
>
|
||||
<KeyboardKey
|
||||
key="ctrlKey"
|
||||
name="Control"
|
||||
|
@ -160,7 +164,9 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="mx_KeyboardShortcut"
|
||||
>
|
||||
<KeyboardKey
|
||||
last={true}
|
||||
name="Enter"
|
||||
|
|
Loading…
Reference in a new issue