Skip to content

Commit 9338a38

Browse files
st3inyst3iny
committed
fix: keyboard shortcut modal not being responsive
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
1 parent fa3aa7c commit 9338a38

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
@@ -85,51 +85,6 @@
8585
}
8686
}
8787

88-
.shortcut-overview-modal {
89-
.modal-container {
90-
display: flex !important;
91-
flex-wrap: wrap;
92-
padding: 0 12px 12px 12px !important;
93-
94-
* {
95-
box-sizing: border-box;
96-
}
97-
98-
.shortcut-section {
99-
width: 50%;
100-
flex-grow: 0;
101-
flex-shrink: 0;
102-
padding: 10px;
103-
104-
.shortcut-section-item {
105-
width: 100%;
106-
display: grid;
107-
grid-template-columns: 33% 67%;
108-
column-gap: 10px;
109-
110-
&:not(:first-child) {
111-
margin-top: 10px;
112-
}
113-
114-
&__keys {
115-
display: block;
116-
text-align: right;
117-
}
118-
119-
&__label {
120-
display: block;
121-
text-align: left;
122-
padding-top: 5px;
123-
}
124-
125-
&__spacer {
126-
margin: 0 3px;
127-
}
128-
}
129-
}
130-
}
131-
}
132-
13388
// Fix the shortcut overview on smaller screens
13489
@media screen and (max-width: 800px) {
13590
.shortcut-overview-modal .modal-container .shortcut-section {

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

+83-32
Original file line numberDiff line numberDiff line change
@@ -19,49 +19,51 @@
1919
-
2020
-->
2121
<template>
22-
<Modal class="shortcut-overview-modal"
23-
size="large"
22+
<NcDialog size="large"
2423
:name="$t('calendar', 'Shortcut overview')"
25-
@close="$emit('close')">
26-
<section v-for="category in shortcuts"
27-
:key="category.categoryId"
28-
class="shortcut-section">
29-
<h3 class="shortcut-section__header">
30-
{{ category.categoryLabel }}
31-
</h3>
32-
<div v-for="(shortcut, index) in category.shortcuts"
33-
:key="`${category.categoryId}-${index}`"
34-
class="shortcut-section-item">
35-
<span class="shortcut-section-item__keys">
36-
<template v-for="(keyCombination, index2) of shortcut.keys">
37-
<template v-for="(key, index3) in keyCombination">
38-
<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
39-
<span v-if="index3 !== (keyCombination.length - 1)"
40-
:key="`${category.categoryId}-${index}-${index2}-${index3}`"
24+
:closeOnClickOutside="true"
25+
@update:open="onUpdateOpen">
26+
<div class="shortcut-overview-modal">
27+
<section v-for="category in shortcuts"
28+
:key="category.categoryId"
29+
class="shortcut-section">
30+
<h3 class="shortcut-section__header">
31+
{{ category.categoryLabel }}
32+
</h3>
33+
<div v-for="(shortcut, index) in category.shortcuts"
34+
:key="`${category.categoryId}-${index}`"
35+
class="shortcut-section-item">
36+
<span class="shortcut-section-item__keys">
37+
<template v-for="(keyCombination, index2) of shortcut.keys">
38+
<template v-for="(key, index3) in keyCombination">
39+
<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
40+
<span v-if="index3 !== (keyCombination.length - 1)"
41+
:key="`${category.categoryId}-${index}-${index2}-${index3}`"
42+
class="shortcut-section-item__spacer">
43+
+
44+
</span>
45+
</template>
46+
<span v-if="index2 !== (shortcut.keys.length - 1)"
47+
:key="`${category.categoryId}-${index}-${index2}`"
4148
class="shortcut-section-item__spacer">
42-
+
49+
{{ $t('calendar', 'or') }}
4350
</span>
4451
</template>
45-
<span v-if="index2 !== (shortcut.keys.length - 1)"
46-
:key="`${category.categoryId}-${index}-${index2}`"
47-
class="shortcut-section-item__spacer">
48-
{{ $t('calendar', 'or') }}
49-
</span>
50-
</template>
51-
</span>
52-
<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
53-
</div>
54-
</section>
55-
</Modal>
52+
</span>
53+
<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
54+
</div>
55+
</section>
56+
</div>
57+
</NcDialog>
5658
</template>
5759

5860
<script>
5961
import { translate as t } from '@nextcloud/l10n'
60-
import { NcModal as Modal } from '@nextcloud/vue'
62+
import { NcDialog } from '@nextcloud/vue'
6163

6264
export default {
6365
components: {
64-
Modal,
66+
NcDialog,
6567
},
6668
computed: {
6769
shortcuts() {
@@ -126,5 +128,54 @@ export default {
126128
}]
127129
},
128130
},
131+
methods: {
132+
onUpdateOpen(open) {
133+
if (!open) {
134+
this.$emit('close')
135+
}
136+
}
137+
},
129138
}
130139
</script>
140+
141+
<style lang="scss" scoped>
142+
.shortcut-overview-modal {
143+
display: flex;
144+
flex-wrap: wrap;
145+
146+
.shortcut-section {
147+
width: 50%;
148+
min-width: 425px;
149+
flex-grow: 0;
150+
flex-shrink: 0;
151+
padding: 10px;
152+
box-sizing: border-box;
153+
154+
.shortcut-section-item {
155+
width: 100%;
156+
display: grid;
157+
grid-template-columns: 33% 67%;
158+
column-gap: 10px;
159+
160+
&:not(:first-child) {
161+
margin-top: 10px;
162+
}
163+
164+
&__keys {
165+
display: block;
166+
text-align: right;
167+
}
168+
169+
&__label {
170+
display: block;
171+
text-align: left;
172+
padding-top: 5px;
173+
}
174+
175+
&__spacer {
176+
margin: 0 3px;
177+
}
178+
}
179+
}
180+
}
181+
</style>

0 commit comments

Comments
 (0)