rename device into breakpoint

apostrophecms · Oct 3, 2024 · 5ed6120 · 5ed6120
1 parent ff18a14
commit 5ed6120
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 68 deletions.
diff --git a/modules/@apostrophecms/admin-bar/index.js b/modules/@apostrophecms/admin-bar/index.js
@@ -14,19 +14,19 @@ module.exports = {
     pageTree: true
   },
   commands(self) {
-    const devicePreviewModeScreens = (
-      self.apos.asset.options.devicePreviewMode?.enable &&
-      self.apos.asset.options.devicePreviewMode?.screens
+    const breakpointPreviewModeScreens = (
+      self.apos.asset.options.breakpointPreviewMode?.enable &&
+      self.apos.asset.options.breakpointPreviewMode?.screens
     ) || {};
-    const devicePreviewModeCommands = {
-      [`${self.__meta.name}:toggle-device-preview-mode:exit`]: {
+    const breakpointPreviewModeCommands = {
+      [`${self.__meta.name}:toggle-breakpoint-preview-mode:exit`]: {
         type: 'item',
         label: {
-          key: 'apostrophe:commandMenuToggleDevicePreviewMode',
-          device: '$t(apostrophe:breakpointPreviewExit)'
+          key: 'apostrophe:commandMenuToggleBreakpointPreviewMode',
+          breakpoint: '$t(apostrophe:breakpointPreviewExit)'
         },
         action: {
-          type: 'command-menu-admin-bar-toggle-device-preview-mode',
+          type: 'command-menu-admin-bar-toggle-breakpoint-preview-mode',
           payload: {
             mode: null,
             width: null,
@@ -37,20 +37,20 @@ module.exports = {
       }
     };
     let index = 1;
-    for (const [ name, screen ] of Object.entries(devicePreviewModeScreens)) {
+    for (const [ name, screen ] of Object.entries(breakpointPreviewModeScreens)) {
       // Up to 9 shortcuts available
       if (index === 9) {
         break;
       }
 
-      devicePreviewModeCommands[`${self.__meta.name}:toggle-device-preview-mode:${name}`] = {
+      breakpointPreviewModeCommands[`${self.__meta.name}:toggle-breakpoint-preview-mode:${name}`] = {
         type: 'item',
         label: {
-          key: 'apostrophe:commandMenuToggleDevicePreviewMode',
-          device: `$t(${screen.label})`
+          key: 'apostrophe:commandMenuToggleBreakpointPreviewMode',
+          breakpoint: `$t(${screen.label})`
         },
         action: {
-          type: 'command-menu-admin-bar-toggle-device-preview-mode',
+          type: 'command-menu-admin-bar-toggle-breakpoint-preview-mode',
           payload: {
             mode: name,
             label: `$t(${screen.label})`,
@@ -114,7 +114,7 @@ module.exports = {
           },
           shortcut: 'Ctrl+Shift+D Meta+Shift+D'
         },
-        ...devicePreviewModeCommands
+        ...breakpointPreviewModeCommands
       },
       modal: {
         default: {
@@ -132,7 +132,7 @@ module.exports = {
             commands: [
               `${self.__meta.name}:toggle-edit-preview-mode`,
               `${self.__meta.name}:toggle-published-draft-document`,
-              ...Object.keys(devicePreviewModeCommands)
+              ...Object.keys(breakpointPreviewModeCommands)
             ]
           }
         }
@@ -407,7 +407,7 @@ module.exports = {
             aposLocale: context.aposLocale,
             aposDocId: context.aposDocId
           },
-          devicePreviewMode: self.apos.asset.options.devicePreviewMode ||
+          breakpointPreviewMode: self.apos.asset.options.breakpointPreviewMode ||
             {
               enable: false,
               debug: false,

diff --git a/...nents/TheAposContextDevicePreviewMode.vue → ...s/TheAposContextBreakpointPreviewMode.vue b/...nents/TheAposContextDevicePreviewMode.vue → ...s/TheAposContextBreakpointPreviewMode.vue
@@ -1,29 +1,29 @@
 <template>
   <div
-    data-apos-test="devicePreviewMode"
-    class="apos-admin-bar__device-preview-mode"
+    data-apos-test="breakpointPreviewMode"
+    class="apos-admin-bar__breakpoint-preview-mode"
   >
     <component
       :is="'AposButton'"
       v-for="(screen, name) in screens"
       :key="name"
-      :data-apos-test="`devicePreviewMode:${name}`"
+      :data-apos-test="`breakpointPreviewMode:${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-admin-bar__breakpoint-preview-mode-button"
       :class="{ 'apos-is-active': mode === name }"
-      @click="toggleDevicePreviewMode({ mode: name, label: screen.label, width: screen.width, height: screen.height })"
+      @click="toggleBreakpointPreviewMode({ mode: name, label: screen.label, width: screen.width, height: screen.height })"
     />
   </div>
 </template>
 <script>
 
 export default {
-  name: 'TheAposContextDevicePreview',
+  name: 'TheAposContextBreakpointPreviewMode',
   props: {
     // { screenName: { label: string, width: string, height: string, icon: string } }
     screens: {
@@ -45,43 +45,43 @@ export default {
       default: false
     }
   },
-  emits: [ 'switch-device-preview-mode', 'reset-device-preview-mode' ],
+  emits: [ 'switch-breakpoint-preview-mode', 'reset-breakpoint-preview-mode' ],
   data() {
     return {
       mode: null,
       originalBodyBackground: null
     };
   },
   mounted() {
-    apos.bus.$on('command-menu-admin-bar-toggle-device-preview-mode', this.toggleDevicePreviewMode);
+    apos.bus.$on('command-menu-admin-bar-toggle-breakpoint-preview-mode', this.toggleBreakpointPreviewMode);
 
     this.originalBodyBackground = window.getComputedStyle(document.querySelector('body'))?.background ||
       '#fff';
 
     const state = this.loadState();
     if (state.mode) {
-      this.toggleDevicePreviewMode(state);
+      this.toggleBreakpointPreviewMode(state);
     }
   },
   unmounted() {
-    apos.bus.$off('command-menu-admin-bar-toggle-device-preview-mode', this.toggleDevicePreviewMode);
+    apos.bus.$off('command-menu-admin-bar-toggle-breakpoint-preview-mode', this.toggleBreakpointPreviewMode);
   },
   methods: {
-    switchDevicePreviewMode({
+    switchBreakpointPreviewMode({
       mode,
       label,
       width,
       height
     }) {
-      document.querySelector('body').setAttribute('data-device-preview-mode', mode);
+      document.querySelector('body').setAttribute('data-breakpoint-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', {
+      this.$emit('switch-breakpoint-preview-mode', {
         mode,
         label,
         width,
@@ -94,36 +94,36 @@ export default {
         height
       });
     },
-    toggleDevicePreviewMode({
+    toggleBreakpointPreviewMode({
       mode,
       label,
       width,
       height
     }) {
       if (this.mode === mode || mode === null) {
-        document.querySelector('body').removeAttribute('data-device-preview-mode');
+        document.querySelector('body').removeAttribute('data-breakpoint-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.$emit('reset-breakpoint-preview-mode');
         this.saveState({ mode: this.mode });
 
         return;
       }
 
-      this.switchDevicePreviewMode({
+      this.switchBreakpointPreviewMode({
         mode,
         label,
         width,
         height
       });
     },
     loadState() {
-      return JSON.parse(sessionStorage.getItem('aposDevicePreviewMode') || '{}');
+      return JSON.parse(sessionStorage.getItem('aposBreakpointPreviewMode') || '{}');
     },
     saveState({
       mode = null,
@@ -134,7 +134,7 @@ export default {
       const state = this.loadState();
       if (state.mode !== mode) {
         sessionStorage.setItem(
-          'aposDevicePreviewMode',
+          'aposBreakpointPreviewMode',
           JSON.stringify({
             mode,
             label,
@@ -148,13 +148,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.apos-admin-bar__device-preview-mode {
+.apos-admin-bar__breakpoint-preview-mode {
   display: flex;
   gap: $spacing-half;
   margin-left: $spacing-double;
 }
 
-.apos-admin-bar__device-preview-mode-button {
+.apos-admin-bar__breakpoint-preview-mode-button {
   &.apos-is-active {
     color: var(--a-text-primary);
     text-decoration: none;

diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue
@@ -50,12 +50,12 @@
         :tooltip="tooltip"
         :modifiers="modifiers"
       />
-      <TheAposContextDevicePreviewMode
-        v-if="isDevicePreviewModeEnabled"
-        :screens="devicePreviewModeScreens"
-        :resizable="devicePreviewModeResizable"
-        @switch-device-preview-mode="addContextLabel"
-        @reset-device-preview-mode="removeContextLabel"
+      <TheAposContextBreakpointPreviewMode
+        v-if="isBreakpointPreviewModeEnabled"
+        :screens="breakpointPreviewModeScreens"
+        :resizable="breakpointPreviewModeResizable"
+        @switch-breakpoint-preview-mode="addContextLabel"
+        @reset-breakpoint-preview-mode="removeContextLabel"
       />
     </span>
   </transition-group>
@@ -101,14 +101,14 @@ export default {
     isUnpublished() {
       return !this.context.lastPublishedAt;
     },
-    isDevicePreviewModeEnabled() {
-      return this.moduleOptions.devicePreviewMode.enable || false;
+    isBreakpointPreviewModeEnabled() {
+      return this.moduleOptions.breakpointPreviewMode.enable || false;
     },
-    devicePreviewModeScreens() {
-      return this.moduleOptions.devicePreviewMode.screens || {};
+    breakpointPreviewModeScreens() {
+      return this.moduleOptions.breakpointPreviewMode.screens || {};
     },
-    devicePreviewModeResizable() {
-      return this.moduleOptions.devicePreviewMode.resizable || false;
+    breakpointPreviewModeResizable() {
+      return this.moduleOptions.breakpointPreviewMode.resizable || false;
     },
     docTooltip() {
       return {

diff --git a/modules/@apostrophecms/asset/index.js b/modules/@apostrophecms/asset/index.js
@@ -45,7 +45,7 @@ module.exports = {
     // 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.
+    // Breakpoint preview in the admin UI.
     // NOTE: the whole breakpointPreviewMode option must be carried over
     // to the project for overrides to work properly.
     // Nested object options are not deep merged in Apostrophe.
@@ -89,7 +89,6 @@ module.exports = {
 
   async init(self) {
 
-    self.options.devicePreviewMode = self.options.breakpointPreviewMode || self.options.devicePreviewMode;
     self.restartId = self.apos.util.generateId();
     self.iconMap = {
       ...globalIcons

diff --git a/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js b/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js
@@ -1,12 +1,12 @@
 const path = require('path');
 
 module.exports = (options, apos) => {
-  const mediaToContainerQueriesLoader = apos.asset.options.devicePreviewMode?.enable === true
+  const mediaToContainerQueriesLoader = apos.asset.options.breakpointPreviewMode?.enable === true
     ? {
       loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
       options: {
-        debug: apos.asset.options.devicePreviewMode?.debug === true,
-        transform: apos.asset.options.devicePreviewMode?.transform || null
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
       }
     }
     : '';

diff --git a/modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js b/modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js
@@ -69,15 +69,15 @@ module.exports = function (source) {
       });
 
       // Media query
-      // Only apply when data-device-preview-mode is not set
+      // Only apply when data-breakpoint-preview-mode is not set
       atRule.walkRules(rule => {
         const newRule = rule.clone({
           selectors: rule.selectors.map(selector => {
             if (selector.startsWith('body')) {
-              return selector.replace('body', ':where(body:not([data-device-preview-mode]))');
+              return selector.replace('body', ':where(body:not([data-breakpoint-preview-mode]))');
             }
 
-            return `:where(body:not([data-device-preview-mode])) ${selector}`;
+            return `:where(body:not([data-breakpoint-preview-mode])) ${selector}`;
           })
         });
 

diff --git a/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js b/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js
@@ -2,12 +2,12 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = (options, apos, srcBuildNames) => {
-  const mediaToContainerQueriesLoader = apos.asset.options.devicePreviewMode?.enable === true
+  const mediaToContainerQueriesLoader = apos.asset.options.breakpointPreviewMode?.enable === true
     ? {
       loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
       options: {
-        debug: apos.asset.options.devicePreviewMode?.debug === true,
-        transform: apos.asset.options.devicePreviewMode?.transform || null
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
       }
     }
     : '';

diff --git a/modules/@apostrophecms/i18n/i18n/en.json b/modules/@apostrophecms/i18n/i18n/en.json
@@ -64,6 +64,10 @@
   "batchPublishCompleted": "Published {{ count }} {{ type }}.",
   "batchRestoreProgress": "Restoring {{ type }}...",
   "batchRestoreCompleted": "Restored {{ count }} {{ type }}.",
+  "breakpointPreviewDesktop": "Desktop",
+  "breakpointPreviewExit": "Exit",
+  "breakpointPreviewMobile": "Mobile",
+  "breakpointPreviewTablet": "Tablet",
   "browseDocType": "Browse {{ type }}",
   "cancel": "Cancel",
   "cannotChangeSlugPrefix": "cannot change the slug prefix",
@@ -96,10 +100,10 @@
   "commandMenuSelectAll": "Select all",
   "commandMenuShortcut": "Keyboard Shortcuts",
   "commandMenuShowShortcutList": "Show shortcut list",
-  "commandMenuToggleDevicePreviewMode": "Preview: {{ device }}",
+  "commandMenuTaskbar": "Taskbar",
+  "commandMenuToggleBreakpointPreviewMode": "Preview: {{ breakpoint }}",
   "commandMenuToggleEditPreviewMode": "Toggle edit / preview",
   "commandMenuTogglePublishedDraftDocument": "Toggle published / draft document",
-  "commandMenuTaskbar": "Taskbar",
   "commandMenuUndo": "Undo",
   "confirmArchive": "You are going to archive the {{ type }} {{ title }}.",
   "confirmSettings": "Confirm Settings",
@@ -127,10 +131,6 @@
   "deleteTable": "Delete Table",
   "description": "Description",
   "deselectAll": "Deselect All",
-  "breakpointPreviewDesktop": "Desktop",
-  "breakpointPreviewExit": "Exit",
-  "breakpointPreviewMobile": "Mobile",
-  "breakpointPreviewTablet": "Tablet",
   "disabled": "Disabled",
   "discardChanges": "Discard Changes",
   "discardChangesPrompt": "Do you want to discard changes?",

diff --git a/.../ui/apos/scss/global/_device_preview.scss → ...apos/scss/global/_breakpoint_preview.scss b/.../ui/apos/scss/global/_device_preview.scss → ...apos/scss/global/_breakpoint_preview.scss
@@ -9,7 +9,7 @@
   }
 }
 
-body[data-device-preview-mode] {
+body[data-breakpoint-preview-mode] {
   background: var(--a-base-10);
 
   [data-apos-context-label] {

diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/import-all.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/import-all.scss
@@ -11,4 +11,4 @@
 @import './_tables';
 @import './_tooltips';
 @import './_widgets';
-@import './_device_preview';
+@import './_breakpoint_preview';