Pro 6518 mobile preview #4720
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. Is there a good reason not to use Vue 3 here? There was a problem hiding this comment. to do like the existing vue components in the project |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| <template> | ||
| <div | ||
| data-apos-test="devicePreviewMode" | ||
| class="apos-admin-bar__device-preview-mode" | ||
| > | ||
| <component | ||
| :is="'AposButton'" | ||
| v-for="(screen, name) in screens" | ||
| :key="name" | ||
| :data-apos-test="`devicePreviewMode:${name}`" | ||
| :modifiers="['small', 'no-motion']" | ||
| :label="screen.label" | ||
| :title="$t(screen.label)" | ||
| :icon="screen.icon" | ||
| :icon-only="true" | ||
| type="subtle" | ||
| class="apos-admin-bar__device-preview-mode-button" | ||
| :class="{ 'apos-is-active': mode === name }" | ||
| @click="toggleDevicePreviewMode({ mode: name, label: screen.label, width: screen.width, height: screen.height })" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
|
|
||
| export default { | ||
| name: 'TheAposContextDevicePreview', | ||
| props: { | ||
| // { screenName: { label: string, width: string, height: string, icon: string } } | ||
|
There was a problem hiding this comment. yep, to explain the expected props |
||
| screens: { | ||
| type: Object, | ||
| validator(value, props) { | ||
| return Object.values(value).every(screen => | ||
| typeof screen.label === 'string' && | ||
| typeof screen.width === 'string' && | ||
| typeof screen.height === 'string' && | ||
| typeof screen.icon === 'string' | ||
| ); | ||
| }, | ||
| default: () => { | ||
| return {}; | ||
| } | ||
| }, | ||
| resizable: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| emits: [ 'switch-device-preview-mode', 'reset-device-preview-mode' ], | ||
|
There was a problem hiding this comment. I can't find where these are being listened to? There was a problem hiding this comment. it's not, but if you want to listen to it and do something you can |
||
| data() { | ||
| return { | ||
| mode: null, | ||
| originalBodyBackground: null | ||
| }; | ||
| }, | ||
| mounted() { | ||
| apos.bus.$on('command-menu-admin-bar-toggle-device-preview-mode', this.toggleDevicePreviewMode); | ||
|
|
||
| this.originalBodyBackground = window.getComputedStyle(document.querySelector('body'))?.background || | ||
| '#fff'; | ||
|
|
||
| const state = this.loadState(); | ||
| if (state.mode) { | ||
| this.toggleDevicePreviewMode(state); | ||
| } | ||
| }, | ||
| unmounted() { | ||
| apos.bus.$off('command-menu-admin-bar-toggle-device-preview-mode', this.toggleDevicePreviewMode); | ||
| }, | ||
| methods: { | ||
| switchDevicePreviewMode({ | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }) { | ||
| document.querySelector('body').setAttribute('data-device-preview-mode', mode); | ||
| document.querySelector('[data-apos-refreshable]').setAttribute('data-resizable', this.resizable); | ||
| document.querySelector('[data-apos-refreshable]').setAttribute('data-label', this.$t(label)); | ||
|
There was a problem hiding this comment. if we're not displaying it anymore then we can remove this line, as well as in |
||
| document.querySelector('[data-apos-refreshable]').style.width = width; | ||
| document.querySelector('[data-apos-refreshable]').style.height = height; | ||
| document.querySelector('[data-apos-refreshable]').style.background = this.originalBodyBackground; | ||
|
|
||
| this.mode = mode; | ||
| this.$emit('switch-device-preview-mode', { | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }); | ||
| this.saveState({ | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }); | ||
| }, | ||
| toggleDevicePreviewMode({ | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }) { | ||
| if (this.mode === mode || mode === null) { | ||
| document.querySelector('body').removeAttribute('data-device-preview-mode'); | ||
| document.querySelector('[data-apos-refreshable]').removeAttribute('data-resizable'); | ||
| document.querySelector('[data-apos-refreshable]').removeAttribute('data-label'); | ||
| document.querySelector('[data-apos-refreshable]').style.removeProperty('width'); | ||
| document.querySelector('[data-apos-refreshable]').style.removeProperty('height'); | ||
| document.querySelector('[data-apos-refreshable]').style.removeProperty('background'); | ||
|
|
||
| this.mode = null; | ||
| this.$emit('reset-device-preview-mode'); | ||
| this.saveState({ mode: this.mode }); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| this.switchDevicePreviewMode({ | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }); | ||
| }, | ||
| loadState() { | ||
| return JSON.parse(sessionStorage.getItem('aposDevicePreviewMode') || '{}'); | ||
| }, | ||
| saveState({ | ||
| mode = null, | ||
| label = null, | ||
| width = null, | ||
| height = null | ||
| } = {}) { | ||
| const state = this.loadState(); | ||
| if (state.mode !== mode) { | ||
| sessionStorage.setItem( | ||
| 'aposDevicePreviewMode', | ||
| JSON.stringify({ | ||
| mode, | ||
| label, | ||
| width, | ||
| height | ||
| }) | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .apos-admin-bar__device-preview-mode { | ||
| display: flex; | ||
| gap: $spacing-half; | ||
| margin-left: $spacing-double; | ||
| } | ||
|
|
||
| .apos-admin-bar__device-preview-mode-button { | ||
| &.apos-is-active { | ||
| color: var(--a-text-primary); | ||
| text-decoration: none; | ||
| background-color: var(--a-base-10); | ||
| border-radius: var(--a-border-radius); | ||
| outline: 1px solid var(--a-base-7); | ||
| } | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,7 +44,47 @@ module.exports = { | |
| rebundleModules: undefined, | ||
| // In case of external front end like Astro, this option allows to | ||
| // disable the build of the public UI assets. | ||
| publicBundle: true, | ||
| // Device preview in the admin UI. | ||
| // NOTE: the whole devicePreviewMode option must be carried over | ||
| // to the project for override to work properly. | ||
| // Nested object options are not deep merged in Apostrophe. | ||
|
Comment on lines
+49
to
+51
There was a problem hiding this comment. Worth mentioning that Option transformation feature will arrive soon? There was a problem hiding this comment. And maybe a reference to the NOTE set in https://github.com/apostrophecms/apostrophe/pull/4720/files#diff-b6b6b266c1d47df2888216d22ec38c634e3d7266da34575319bf0ccf9d2e5131R24 There was a problem hiding this comment. it will be in the doc, I think we will update it when this feature lands in apostrophe |
||
| devicePreviewMode: { | ||
| // Enable device preview mode | ||
| enable: false, | ||
| // Warn during build about unsupported media queries. | ||
| debug: false, | ||
| // If we can resize the preview container? | ||
| resizable: false, | ||
| // Screens with icons | ||
| // For adding icons, please refer to the icons documentation | ||
| // https://docs.apostrophecms.org/reference/module-api/module-overview.html#icons | ||
| screens: { | ||
| desktop: { | ||
| label: 'apostrophe:devicePreviewDesktop', | ||
| width: '1500px', | ||
| height: '900px', | ||
| icon: 'monitor-icon' | ||
| }, | ||
| tablet: { | ||
| label: 'apostrophe:devicePreviewTablet', | ||
| width: '1024px', | ||
| height: '768px', | ||
| icon: 'tablet-icon' | ||
| }, | ||
| mobile: { | ||
| label: 'apostrophe:devicePreviewMobile', | ||
| width: '480px', | ||
| height: '1000px', | ||
| icon: 'cellphone-icon' | ||
| } | ||
| }, | ||
| // Transform method used on media feature | ||
| // Can be either: | ||
| // - (mediaFeature) => { return mediaFeature.replaceAll('xx', 'yy'); } | ||
| // - null | ||
| transform: null | ||
| } | ||
| }, | ||
|
|
||
| async init(self) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems more UX-friendly to me
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
will not work with current keyboard shortcut listener implementation
P+0is supposed to bePand0, but it comes with additional challenges (the order you're pressing the keys is importantP+0and0+Pshould be different shortcuts)P,0is translated toPthen0(you still can holdPwhile pressing0), I think this is what you're looking for.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P,[n]is a bit slow if we want to quickly switch between modes.But it's not that bad.