Skip to content

Commit 3eae428

Browse files
st3inybackportbot[bot]
st3iny
authored and
backportbot[bot]
committed
fix: keyboard shortcut modal not being responsive
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
1 parent d014af7 commit 3eae428

File tree

2 files changed

+83
-77
lines changed

2 files changed

+83
-77
lines changed

‎css/app-settings.scss

-45
Original file line numberDiff line numberDiff line change
@@ -57,51 +57,6 @@
5757
}
5858
}
5959

60-
.shortcut-overview-modal {
61-
.modal-container {
62-
display: flex !important;
63-
flex-wrap: wrap;
64-
padding: 0 12px 12px 12px !important;
65-
66-
* {
67-
box-sizing: border-box;
68-
}
69-
70-
.shortcut-section {
71-
width: 50%;
72-
flex-grow: 0;
73-
flex-shrink: 0;
74-
padding: 10px;
75-
76-
.shortcut-section-item {
77-
width: 100%;
78-
display: grid;
79-
grid-template-columns: 33% 67%;
80-
column-gap: 10px;
81-
82-
&:not(:first-child) {
83-
margin-top: 10px;
84-
}
85-
86-
&__keys {
87-
display: block;
88-
text-align: right;
89-
}
90-
91-
&__label {
92-
display: block;
93-
text-align: left;
94-
padding-top: 5px;
95-
}
96-
97-
&__spacer {
98-
margin: 0 3px;
99-
}
100-
}
101-
}
102-
}
103-
}
104-
10560
// Fix the shortcut overview on smaller screens
10661
@media screen and (max-width: 800px) {
10762
.shortcut-overview-modal .modal-container .shortcut-section {

‎src/components/AppNavigation/Settings/ShortcutOverview.vue

+83-32
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,51 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55
<template>
6-
<Modal class="shortcut-overview-modal"
7-
size="large"
6+
<NcDialog size="large"
87
:name="$t('calendar', 'Shortcut overview')"
9-
@close="$emit('close')">
10-
<section v-for="category in shortcuts"
11-
:key="category.categoryId"
12-
class="shortcut-section">
13-
<h3 class="shortcut-section__header">
14-
{{ category.categoryLabel }}
15-
</h3>
16-
<div v-for="(shortcut, index) in category.shortcuts"
17-
:key="`${category.categoryId}-${index}`"
18-
class="shortcut-section-item">
19-
<span class="shortcut-section-item__keys">
20-
<template v-for="(keyCombination, index2) of shortcut.keys">
21-
<template v-for="(key, index3) in keyCombination">
22-
<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
23-
<span v-if="index3 !== (keyCombination.length - 1)"
24-
:key="`${category.categoryId}-${index}-${index2}-${index3}`"
8+
:closeOnClickOutside="true"
9+
@update:open="onUpdateOpen">
10+
<div class="shortcut-overview-modal">
11+
<section v-for="category in shortcuts"
12+
:key="category.categoryId"
13+
class="shortcut-section">
14+
<h3 class="shortcut-section__header">
15+
{{ category.categoryLabel }}
16+
</h3>
17+
<div v-for="(shortcut, index) in category.shortcuts"
18+
:key="`${category.categoryId}-${index}`"
19+
class="shortcut-section-item">
20+
<span class="shortcut-section-item__keys">
21+
<template v-for="(keyCombination, index2) of shortcut.keys">
22+
<template v-for="(key, index3) in keyCombination">
23+
<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
24+
<span v-if="index3 !== (keyCombination.length - 1)"
25+
:key="`${category.categoryId}-${index}-${index2}-${index3}`"
26+
class="shortcut-section-item__spacer">
27+
+
28+
</span>
29+
</template>
30+
<span v-if="index2 !== (shortcut.keys.length - 1)"
31+
:key="`${category.categoryId}-${index}-${index2}`"
2532
class="shortcut-section-item__spacer">
26-
+
33+
{{ $t('calendar', 'or') }}
2734
</span>
2835
</template>
29-
<span v-if="index2 !== (shortcut.keys.length - 1)"
30-
:key="`${category.categoryId}-${index}-${index2}`"
31-
class="shortcut-section-item__spacer">
32-
{{ $t('calendar', 'or') }}
33-
</span>
34-
</template>
35-
</span>
36-
<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
37-
</div>
38-
</section>
39-
</Modal>
36+
</span>
37+
<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
38+
</div>
39+
</section>
40+
</div>
41+
</NcDialog>
4042
</template>
4143

4244
<script>
4345
import { translate as t } from '@nextcloud/l10n'
44-
import { NcModal as Modal } from '@nextcloud/vue'
46+
import { NcDialog } from '@nextcloud/vue'
4547

4648
export default {
4749
components: {
48-
Modal,
50+
NcDialog,
4951
},
5052
computed: {
5153
shortcuts() {
@@ -110,5 +112,54 @@ export default {
110112
}]
111113
},
112114
},
115+
methods: {
116+
onUpdateOpen(open) {
117+
if (!open) {
118+
this.$emit('close')
119+
}
120+
}
121+
},
113122
}
114123
</script>
124+
125+
<style lang="scss" scoped>
126+
.shortcut-overview-modal {
127+
display: flex;
128+
flex-wrap: wrap;
129+
130+
.shortcut-section {
131+
width: 50%;
132+
min-width: 425px;
133+
flex-grow: 0;
134+
flex-shrink: 0;
135+
padding: 10px;
136+
box-sizing: border-box;
137+
138+
.shortcut-section-item {
139+
width: 100%;
140+
display: grid;
141+
grid-template-columns: 33% 67%;
142+
column-gap: 10px;
143+
144+
&:not(:first-child) {
145+
margin-top: 10px;
146+
}
147+
148+
&__keys {
149+
display: block;
150+
text-align: right;
151+
}
152+
153+
&__label {
154+
display: block;
155+
text-align: left;
156+
padding-top: 5px;
157+
}
158+
159+
&__spacer {
160+
margin: 0 3px;
161+
}
162+
}
163+
}
164+
}
165+
</style>

0 commit comments

Comments
 (0)