mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-59047] Keyboard Shortcuts Modal Improvements (#27443)

Просмотр исходного кода
Этот коммит содержится в:
Matthew Birtch
2024-06-27 02:52:20 -04:00
коммит произвёл GitHub
родитель 47dcb02ae0
Коммит 338434a098
4 изменённых файлов: 161 добавлений и 155 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

230
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
Просмотреть файл

@@ -328,14 +328,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
Messages Messages
</strong> </strong>
</h3> </h3>
<span>
<strong>
Works inside an empty input field
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Works inside an empty input field
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -395,14 +395,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
} }
/> />
</div> </div>
<span>
<strong>
Autocomplete
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Autocomplete
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -428,14 +428,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
} }
/> />
</div> </div>
<span>
<strong>
Formatting
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Formatting
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -479,14 +479,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
} }
/> />
</div> </div>
<span>
<strong>
Searching
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Searching
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -502,6 +502,29 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
} }
/> />
</div> </div>
<div
className="subsection"
>
<h4
className="subsection-title"
>
Files
</h4>
<Memo(KeyboardShortcutSequence)
shortcut={
Object {
"default": Object {
"defaultMessage": "Upload files: Ctrl|U",
"id": "shortcuts.files.upload",
},
"mac": Object {
"defaultMessage": "Upload files: ⌘|U",
"id": "shortcuts.files.upload.mac",
},
}
}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -511,29 +534,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
<div <div
className="section" className="section"
> >
<div>
<h3
className="section-title"
>
<strong>
Files
</strong>
</h3>
<Memo(KeyboardShortcutSequence)
shortcut={
Object {
"default": Object {
"defaultMessage": "Upload files: Ctrl|U",
"id": "shortcuts.files.upload",
},
"mac": Object {
"defaultMessage": "Upload files: ⌘|U",
"id": "shortcuts.files.upload.mac",
},
}
}
/>
</div>
<div <div
className="section--lower" className="section--lower"
> >
@@ -600,14 +600,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
} }
} }
/> />
<span>
<strong>
Works inside an input field
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Works inside an input field
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -975,14 +975,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
Messages Messages
</strong> </strong>
</h3> </h3>
<span>
<strong>
Works inside an empty input field
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Works inside an empty input field
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -1042,14 +1042,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<span>
<strong>
Autocomplete
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Autocomplete
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -1075,14 +1075,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<span>
<strong>
Formatting
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Formatting
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -1126,14 +1126,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<span>
<strong>
Searching
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Searching
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -1149,6 +1149,29 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<div
className="subsection"
>
<h4
className="subsection-title"
>
Files
</h4>
<Memo(KeyboardShortcutSequence)
shortcut={
Object {
"default": Object {
"defaultMessage": "Upload files: Ctrl|U",
"id": "shortcuts.files.upload",
},
"mac": Object {
"defaultMessage": "Upload files: ⌘|U",
"id": "shortcuts.files.upload.mac",
},
}
}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1158,29 +1181,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
<div <div
className="section" className="section"
> >
<div>
<h3
className="section-title"
>
<strong>
Files
</strong>
</h3>
<Memo(KeyboardShortcutSequence)
shortcut={
Object {
"default": Object {
"defaultMessage": "Upload files: Ctrl|U",
"id": "shortcuts.files.upload",
},
"mac": Object {
"defaultMessage": "Upload files: ⌘|U",
"id": "shortcuts.files.upload.mac",
},
}
}
/>
</div>
<div <div
className="section--lower" className="section--lower"
> >
@@ -1247,14 +1247,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
} }
/> />
<span>
<strong>
Works inside an input field
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Works inside an input field
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
shortcut={ shortcut={
Object { Object {
@@ -1282,14 +1282,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div
className="row"
>
<div
className="col-sm-4"
>
<div <div
className="section" className="section"
> >
@@ -1301,14 +1293,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
Calls Calls
</strong> </strong>
</h3> </h3>
<span>
<strong>
Global
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Global
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
key="callsJoinCall" key="callsJoinCall"
shortcut={ shortcut={
@@ -1325,14 +1317,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<span>
<strong>
Call widget
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Call widget
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
key="callsMuteToggle" key="callsMuteToggle"
shortcut={ shortcut={
@@ -1409,14 +1401,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
} }
/> />
</div> </div>
<span>
<strong>
Expanded view (pop-out window)
</strong>
</span>
<div <div
className="subsection" className="subsection"
> >
<h4
className="subsection-title"
>
Expanded view (pop-out window)
</h4>
<Memo(KeyboardShortcutSequence) <Memo(KeyboardShortcutSequence)
key="callsPushToTalk" key="callsPushToTalk"
shortcut={ shortcut={

49
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss
Просмотреть файл

@@ -5,10 +5,24 @@
width: 1100px; width: 1100px;
margin-top: 50px; margin-top: 50px;
.col-sm-4 {
padding-right: 20px;
padding-left: 20px;
}
.modal-header { .modal-header {
.shortcut-line { .shortcut-line {
display: flex;
align-items: center;
margin: 0; margin: 0;
.shortcut-key {
height: fit-content;
flex: 0 0 auto;
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.75);
}
span { span {
&:first-child { &:first-child {
margin-right: 12px; margin-right: 12px;
@@ -19,35 +33,44 @@
.modal-body { .modal-body {
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
padding: 40px 48px; padding: 32px 28px;
} }
.section { .section {
>div { margin-bottom: 32px;
&:first-child {
margin-bottom: 2.5em;
}
}
.shortcut-line { .shortcut-line {
display: flex; display: flex;
padding: 10px 0;
border-bottom: var(--border-light);
gap: 4px;
.shortcut-key {
height: fit-content;
flex: 0 0 auto;
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.75);
}
span { span {
&:first-child { flex-grow: 1;
margin-right: 5px;
}
} }
} }
} }
.section-title { .section-title {
margin: 0 0 24px; margin: 0 0 12px;
font-size: 18px; font-size: 18px;
} }
.subsection { .subsection {
padding-left: 15px; margin: 12px 0 0 0;
border-left: 2px solid;
&-title {
padding-top: 8px;
font-size: inherit;
font-weight: 600;
line-height: inherit;
}
} }
.info__label { .info__label {

35
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
Просмотреть файл

@@ -163,82 +163,75 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
<div className='section'> <div className='section'>
<div> <div>
<h3 className='section-title'><strong>{formatMessage(modalMessages.msgHeader)}</strong></h3> <h3 className='section-title'><strong>{formatMessage(modalMessages.msgHeader)}</strong></h3>
<span><strong>{formatMessage(modalMessages.msgInputHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.msgInputHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgEdit}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgEdit}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReply}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReply}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgLastReaction}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgLastReaction}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintPrev}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintPrev}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintNext}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintNext}/>
</div> </div>
<span><strong>{formatMessage(modalMessages.msgCompHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.msgCompHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompUsername}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompUsername}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompChannel}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompChannel}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompEmoji}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompEmoji}/>
</div> </div>
<span><strong>{formatMessage(modalMessages.msgMarkdownHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.msgMarkdownHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownBold}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownBold}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownItalic}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownItalic}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownLink}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownLink}/>
</div> </div>
<span><strong>{formatMessage(modalMessages.msgSearchHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.msgSearchHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgSearchChannel}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgSearchChannel}/>
</div> </div>
<div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.filesHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.filesUpload}/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className='col-sm-4'> <div className='col-sm-4'>
<div className='section'> <div className='section'>
<div>
<h3 className='section-title'><strong>{formatMessage(modalMessages.filesHeader)}</strong></h3>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.filesUpload}/>
</div>
<div className='section--lower'> <div className='section--lower'>
<h3 className='section-title'><strong>{formatMessage(modalMessages.browserHeader)}</strong></h3> <h3 className='section-title'><strong>{formatMessage(modalMessages.browserHeader)}</strong></h3>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelPrev}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelPrev}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelNext}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelNext}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontIncrease}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontIncrease}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontDecrease}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontDecrease}/>
<span><strong>{formatMessage(modalMessages.browserInputHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.browserInputHeader)}</h4>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightPrev}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightPrev}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightNext}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightNext}/>
<KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserNewline}/> <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserNewline}/>
</div> </div>
</div> </div>
</div> </div>
</div> { callsEnabled &&
</div>
{ callsEnabled &&
<div className='row'>
<div className='col-sm-4'>
<div className='section'> <div className='section'>
<div> <div>
<h3 className='section-title'><strong>{formatMessage(modalMessages.callsHeader)}</strong></h3> <h3 className='section-title'><strong>{formatMessage(modalMessages.callsHeader)}</strong></h3>
<span><strong>{formatMessage(modalMessages.callsGlobalHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.callsGlobalHeader)}</h4>
{renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.global)} {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.global)}
</div> </div>
<span><strong>{formatMessage(modalMessages.callsWidgetHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.callsWidgetHeader)}</h4>
{renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.widget)} {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.widget)}
</div> </div>
<span><strong>{formatMessage(modalMessages.callsExpandedHeader)}</strong></span>
<div className='subsection'> <div className='subsection'>
<h4 className='subsection-title'>{formatMessage(modalMessages.callsExpandedHeader)}</h4>
{renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.popout)} {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.popout)}
</div> </div>
</div> </div>
</div> </div>
}
</div> </div>
</div> </div>
}
<div className='info__label'>{formatMessage(modalMessages.info)}</div> <div className='info__label'>{formatMessage(modalMessages.info)}</div>
</Modal.Body> </Modal.Body>
</div> </div>

2
webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss
Просмотреть файл

@@ -2,8 +2,6 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
.shortcut-line { .shortcut-line {
margin: 16px 0;
span { span {
&:first-child { &:first-child {
margin-right: 5px; margin-right: 5px;