Merge pull request #4320 from nextcloud/backport/4251/stable27

[stable27] Bring back keyboard shortcuts to help modal on non-mobile

src/components/HelpModal.vue

@@ -5,7 +5,7 @@
 		@close="$emit('close')">
 		<h2>{{ t('text', 'Formatting help') }}</h2>
 		<p>{{ t('text', 'Speed up your writing with simple shortcuts.') }}</p>
-		<p v-if="!isMobilePlatform">
+		<p v-if="!isMobileCached">
 			{{ t('text', 'Just type the Markdown syntax or use keyboard shortcuts from below.') }}
 		</p>
 		<p v-else>
@@ -17,7 +17,7 @@
 				<tr>
 					<th>{{ t('text', 'Style') }}</th>
 					<th>{{ t('text', 'Syntax') }}</th>
-					<th v-if="!isMobilePlatform">
+					<th v-if="!isMobileCached">
 						{{ t('text', 'Keyboard shortcuts') }}
 					</th>
 				</tr>
@@ -28,7 +28,7 @@
 					<td>
 						<kbd>{{ t('text', 'Enter') }}</kbd>
 					</td>
-					<td v-if="!isMobilePlatform" />
+					<td v-if="!isMobileCached" />
 				</tr>
 				<tr>
 					<td>{{ t('text', 'Hard line break') }}</td>
@@ -37,7 +37,7 @@
 						{{ t('text', 'followed by') }}
 						<kbd>{{ t('text', 'Backspace') }}</kbd>
 					</td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Shift') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Enter') }}</kbd>
@@ -46,7 +46,7 @@
 				<tr>
 					<td>{{ t('text', 'Bold') }}</td>
 					<td><code>**{{ t('text', 'Bold text') }}**</code></td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>B</kbd>
@@ -55,7 +55,7 @@
 				<tr>
 					<td>{{ t('text', 'Italic') }}</td>
 					<td><code>*{{ t('text', 'Italicized text') }}*</code></td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>I</kbd>
@@ -64,7 +64,7 @@
 				<tr>
 					<td>{{ t('text', 'Strikethrough') }}</td>
 					<td><code>~~{{ t('text', 'Mistaken text') }}~~</code></td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Shift') }}</kbd>
@@ -75,7 +75,7 @@
 				<tr>
 					<td>{{ t('text', 'Underline') }}</td>
 					<td><code>__{{ t('text', 'Underlined text') }}__</code></td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>U</kbd>
@@ -88,7 +88,7 @@
 					<td class="ellipsis_top">
 						<code># {{ t('text', 'Heading level 1') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform" class="ellipsis_top">
+					<td v-if="!isMobileCached" class="ellipsis_top">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Shift') }}</kbd>
@@ -103,7 +103,7 @@
 					<td class="noborder ellipsis">
 						…
 					</td>
-					<td v-if="!isMobilePlatform" class="ellipsis noborder">
+					<td v-if="!isMobileCached" class="ellipsis noborder">
 						…
 					</td>
 				</tr>
@@ -114,7 +114,7 @@
 					<td class="noborder ellipsis_bottom">
 						<code>###### {{ t('text', 'Heading level 6') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform" class="noborder ellipsis_bottom">
+					<td v-if="!isMobileCached" class="noborder ellipsis_bottom">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Shift') }}</kbd>
@@ -127,7 +127,7 @@
 					<td>
 						<code>* {{ t('text', 'An item') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Shift') }}</kbd>
@@ -140,7 +140,7 @@
 					<td>
 						<code>1. {{ t('text', 'First item') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>{{ t('text', 'Shift') }}</kbd>
@@ -153,14 +153,14 @@
 					<td>
 						<code>* [] {{ t('text', 'To-Do item') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform" />
+					<td v-if="!isMobileCached" />
 				</tr>
 				<tr>
 					<td>{{ t('text', 'Blockquote') }}</td>
 					<td>
 						<code>> {{ t('text', 'Quoted text') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform">
+					<td v-if="!isMobileCached">
 						<kbd>{{ t('text', 'Ctrl') }}</kbd>
 						+
 						<kbd>></kbd>
@@ -171,7 +171,7 @@
 					<td>
 						<code>``` {{ t('text', 'Some code') }}</code>
 					</td>
-					<td v-if="!isMobilePlatform" />
+					<td v-if="!isMobileCached" />
 				</tr>
 			</tbody>
 		</table>
@@ -180,7 +180,7 @@
 
 <script>
 import { NcModal, Tooltip } from '@nextcloud/vue'
-import { isMobilePlatform } from './../helpers/platform.js'
+import { isMobilePlatform } from '../helpers/platform.js'
 
 export default {
 	name: 'HelpModal',
@@ -210,6 +210,10 @@ export default {
 		isFormatted() {
 			return (style) => this.formatted[style]
 		},
+		// Cache the output of `isMobilePlatform()`
+		isMobileCached() {
+			return this.isMobilePlatform()
+		},
 	},
 	methods: {
 		toggleFormatted(style) {
@@ -223,14 +227,16 @@ export default {
 <style lang="scss" scoped>
 	:deep(.modal-wrapper) {
 		.modal-container {
+			width: max-content;
 			padding: 30px 40px 20px;
 			user-select: text;
 		}
 
 		// Remove padding-right on mobile, screen might not be wide enough
 		@media only screen and (max-width: 512px) {
 			.modal-container {
-				padding: 30px 0px 20px 40px;
+				width: inherit;
+				padding: 10px 0;
 			}
 		}
 	}