Pro 6518 mobile preview

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Adds focus states for media library's Uploader tile
 * Adds focus states file attachment's input UI
 * Simplified importing rich text widgets via the REST API. If you  you have HTML that contains `img` tags pointing to existing images, you can now import them all quickly. When supplying the rich text widget object, include an `import` property with an `html` subproperty, rather than the usual `content` property. You can optionally provide a `baseUrl` subproperty as well. Any images present in `html` will be imported automatically and the correct `figure` tags will be added to the new rich text widget, along with any other markup acceptable to the widget's configuration.
+* Add mobile preview feature to the admin UI. The feature can be enabled using the `@apostrophecms/asset` module new `devicePreviewMode` option. Once enabled, the asset build process will duplicate existing media queries as container queries. There are some limitations in the equivalence media queries / container queries. You can refer to the [CSS @container at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) documentation for more information. You can also enable `devicePreviewMode.debug` to be notified in the console when the build encounter an unsupported media query.
 
 ### Changes
 

modules/@apostrophecms/admin-bar/index.js

@@ -14,6 +14,56 @@ module.exports = {
     pageTree: true
   },
   commands(self) {
+    const devicePreviewModeScreens = (
+      self.apos.asset.options.devicePreviewMode?.enable &&
+      self.apos.asset.options.devicePreviewMode?.screens
+    ) || {};
+    const devicePreviewModeCommands = {
+      [`${self.__meta.name}:toggle-device-preview-mode:exit`]: {
+        type: 'item',
+        label: {
+          key: 'apostrophe:commandMenuToggleDevicePreviewMode',
+          device: '$t(apostrophe:devicePreviewExit)'
+        },
+        action: {
+          type: 'command-menu-admin-bar-toggle-device-preview-mode',
+          payload: {
+            mode: null,
+            width: null,
+            height: null
+          }
+        },
+        shortcut: 'P,0'
+      }
+    };
+    let index = 1;
+    for (const [ name, screen ] of Object.entries(devicePreviewModeScreens)) {
+      // Up to 9 shortcuts available
+      if (index === 9) {
+        break;
+      }
+
+      devicePreviewModeCommands[`${self.__meta.name}:toggle-device-preview-mode:${name}`] = {
+        type: 'item',
+        label: {
+          key: 'apostrophe:commandMenuToggleDevicePreviewMode',
+          device: `$t(${screen.label})`
+        },
+        action: {
+          type: 'command-menu-admin-bar-toggle-device-preview-mode',
+          payload: {
+            mode: name,
+            label: `$t(${screen.label})`,
+            width: screen.width,
+            height: screen.height
+          }
+        },
+        shortcut: `P,${index}`
+      };
+
+      index += 1;
+    };
+
     return {
       add: {
         [`${self.__meta.name}:undo`]: {
@@ -63,7 +113,8 @@ module.exports = {
             type: 'command-menu-admin-bar-toggle-publish-draft'
           },
           shortcut: 'Ctrl+Shift+D Meta+Shift+D'
-        }
+        },
+        ...devicePreviewModeCommands
       },
       modal: {
         default: {
@@ -80,7 +131,8 @@ module.exports = {
             label: 'apostrophe:commandMenuMode',
             commands: [
               `${self.__meta.name}:toggle-edit-preview-mode`,
-              `${self.__meta.name}:toggle-published-draft-document`
+              `${self.__meta.name}:toggle-published-draft-document`,
+              ...Object.keys(devicePreviewModeCommands)
             ]
           }
         }
@@ -355,6 +407,13 @@ module.exports = {
             aposLocale: context.aposLocale,
             aposDocId: context.aposDocId
           },
+          devicePreviewMode: self.apos.asset.options.devicePreviewMode ||
+            {
+              enable: false,
+              debug: false,
+              resizable: false,
+              screens: {}
+            },
           // Base API URL appropriate to the context document
           contextBar: context && self.apos.doc.getManager(context.type).options.contextBar,
           showAdminBar: self.getShowAdminBar(req),

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

@@ -0,0 +1,154 @@
+<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
+    };
+  },
+  mounted() {
+    apos.bus.$on('command-menu-admin-bar-toggle-device-preview-mode', this.toggleDevicePreviewMode);
+
+    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;
+      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');
+        this.mode = null;
+        this.$emit('reset-device-preview-mode');
+
+        return;
+      }
+
+      this.switchDevicePreviewMode({
+        mode,
+        label,
+        width,
+        height
+      });
+    },
+    loadState() {
+      return JSON.parse(sessionStorage.getItem('aposDevicePreviewMode') || '{}');
+    },
+    saveState({
+      mode,
+      label,
+      width,
+      height
+    }) {
+      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>

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -50,6 +50,11 @@
         :tooltip="tooltip"
         :modifiers="modifiers"
       />
+      <TheAposContextDevicePreviewMode
+        v-if="isDevicePreviewModeEnabled"
+        :screens="devicePreviewModeScreens"
+        :resizable="devicePreviewModeResizable"
+      />
     </span>
   </transition-group>
 </template>
@@ -94,6 +99,15 @@ export default {
     isUnpublished() {
       return !this.context.lastPublishedAt;
     },
+    isDevicePreviewModeEnabled() {
+      return this.moduleOptions.devicePreviewMode.enable || false;
+    },
+    devicePreviewModeScreens() {
+      return this.moduleOptions.devicePreviewMode.screens || {};
+    },
+    devicePreviewModeResizable() {
+      return this.moduleOptions.devicePreviewMode.resizable || false;
+    },
     docTooltip() {
       return {
         key: 'apostrophe:lastUpdatedBy',

modules/@apostrophecms/asset/index.js

@@ -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
+    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.
+    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; }
+      // - null
+      transform: null
+    }
   },
 
   async init(self) {

modules/@apostrophecms/asset/lib/globalIcons.js

@@ -19,6 +19,7 @@ module.exports = {
   'arrow-up-icon': 'ArrowUp',
   'binoculars-icon': 'Binoculars',
   'calendar-icon': 'Calendar',
+  'cellphone-icon': 'Cellphone',
   'check-all-icon': 'CheckAll',
   'check-bold-icon': 'CheckBold',
   'check-circle-icon': 'CheckCircle',
@@ -98,6 +99,7 @@ module.exports = {
   'menu-down-icon': 'MenuDown',
   'minus-box-icon': 'MinusBox',
   'minus-icon': 'Minus',
+  'monitor-icon': 'Monitor',
   'paperclip-icon': 'Paperclip',
   'pencil-icon': 'Pencil',
   'phone-icon': 'Phone',
@@ -107,6 +109,7 @@ module.exports = {
   'refresh-icon': 'Refresh',
   'shape-icon': 'Shape',
   'sign-text-icon': 'SignText',
+  'tablet-icon': 'Tablet',
   'tag-icon': 'Tag',
   'text-box-icon': 'TextBox',
   'text-box-multiple-icon': 'TextBoxMultiple',