-
Notifications
You must be signed in to change notification settings - Fork 590
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* experiment with mobile preview * fix lint issue * add media to container query loader * clean up media to container queries loader * use apostrophe options to toggle mobile preview * add breakpoints support * experiment with screen options * refactor as device preview mode to avoid name conflicts with preview mode * set todos * rename devicePreview into devicePreviewMode and validate screens * set active style * set active style and keyboard shortcuts * restore previous filename logic * revert plugins * note about deep merge * update changelog * remove test styles * fix mixed declaration warnings * translate device * translate additional keys in keyboard shortcut label * add transform function * explain available transform options * up to 9 shortcuts * use flexbox * rename devicePreviewMode options * add label * fix lint issue * support preview mode background * style tweaks * lint * save device preview state, transition only for non-resizable containers * save device preview mode state inside own component * update background on body * keep state * replace background and not just color * add selector prefix for mobile first responsive * add empty lines * exclude content with \n from being replaced * match only single escaped backslash * update transform example * improve css specificity for media queries * do not increase specificity with where * simplify regex for container query and use postcss to parse media and container query * set body to media query * add context label --------- Co-authored-by: Harouna Traoré <[email protected]> Co-authored-by: Stuart Romanek <[email protected]>
- Loading branch information
3 people
authored
Oct 2, 2024
1 parent
e4d8b63
commit 0f54720
Showing
16 changed files
with
471 additions
and
22 deletions.
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
166 changes: 166 additions & 0 deletions
166
modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue
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 } } | ||
| 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' ], | ||
| 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)); | ||
| 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
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.