improve ubiquitous panel style

wind-press · Oct 10, 2024 · 068792b · 068792b
1 parent eae4935
commit 068792b
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 42 deletions.
diff --git a/assets/apps/dashboard/App.vue b/assets/apps/dashboard/App.vue
@@ -72,7 +72,7 @@ const askForReviewClick = (action) => {
 </script>
 
 <template>
-    <div :class="{ 'hide-universal': ui.virtualState('window.minimized', false).value }" class="windpress-container my:40 px:40 font:13 h:calc(100vh-80px-var(--wp-admin--admin-bar--height))">
+    <div :class="{ 'hide-ubiquitous': ui.virtualState('window.minimized', false).value }" class="windpress-container font:13 my:40 px:40 h:calc(100vh-80px-var(--wp-admin--admin-bar--height))">
         <!-- Ask for reviews -->
         <div v-if="!windpress.is_ubiquitous && isAskForReview" class="notice windpress-notice notice-info my:10">
             <p v-html="wp_i18n.sprintf(

diff --git a/assets/apps/dashboard/components/Workspace/WindowHeader.vue b/assets/apps/dashboard/components/Workspace/WindowHeader.vue
@@ -11,7 +11,7 @@ const theme = useColorMode({
     onChanged: (value, defaultHandler) => {
         defaultHandler(value);
 
-        if (document.querySelector('#windpress-app.universal') === null) {
+        if (document.querySelector('#windpress-app.ubiquitous') === null) {
             document.documentElement.style.colorScheme = value;
         }
     },
@@ -36,7 +36,7 @@ function doSave() {
     <div class="window-header flex flex:row px:12 bb:1|solid|titleBar-border bg:#f8f8f8 bg:#1f1f1f@dark">
         <div class="window-header__macos py:10 flex flex:row align-items:center gap:6 {b:1|solid|gray-20;bg:gray-10}>.macos__button {b:1|solid|gray-20;bg:gray-10}_.macos__button {b:gray-60;bg:gray-70}_.macos__button@dark">
             <div class="macos__button close r:full size:10"></div>
-            <div @click="toggleMinimize" class="macos__button minimize r:full size:10 cursor:pointer"></div>
+            <div @click="toggleMinimize" v-tooltip="{ content: wp_i18n.__('Minimize', 'windpress') }" class="macos__button minimize r:full size:10 cursor:pointer"></div>
             <div class="macos__button expand r:full size:10"></div>
         </div>
         <div class="window-header__title py:10 flex flex:row align-items:center flex-grow:1 ml:20 gap:6 justify-content:center fg:foreground">
@@ -59,22 +59,23 @@ function doSave() {
 </template>
 
 <style lang="scss" scoped>
-html:has(#windpress-app.universal) {
+html:has(#windpress-app.ubiquitous) {
     .macos__button {
-        &.close {
-            background: #ff5f57;
-            border-color: #de3f37;
-        }
-
         &.minimize {
             background: #febc2e;
             border-color: #de9c0e;
         }
 
+        /*
+        &.close {
+            background: #ff5f57;
+            border-color: #de3f37;
+        }
         &.expand {
             background: #28c840;
             border-color: #05a61d;
         }
+        */
     }
 }
 </style>
diff --git a/assets/apps/dashboard/main.js b/assets/apps/dashboard/main.js
@@ -87,8 +87,9 @@ if (!document.getElementById('windpress-app')) {
     // add the windpress-app div to the iframe
     const windpressApp = document.createElement('div');
     windpressApp.id = 'windpress-app';
-    windpressApp.classList.add('universal');
+    windpressApp.classList.add('ubiquitous');
     doc.body.appendChild(windpressApp);
+    doc.body.style.margin = '0';
 
     // set the iframe srcdoc
     iframe.srcdoc = doc.documentElement.outerHTML;
@@ -98,15 +99,23 @@ if (!document.getElementById('windpress-app')) {
 
     const ui = useUIStore();
 
+    function clickOutside() {
+        ui.virtualState('window.minimized', false).value = true;
+    }
+
     if (ui.virtualState('window.minimized', false).value === false) {
         iframe.classList.add('expanded');
+
+        document.addEventListener('click', clickOutside);
     }
 
     watch(() => ui.virtualState('window.minimized', false).value, (state) => {
         if (!state) {
             iframe.classList.add('expanded');
+            document.addEventListener('click', clickOutside);
         } else {
             iframe.classList.remove('expanded');
+            document.removeEventListener('click', clickOutside);
         }
     });
 } else {

diff --git a/assets/apps/dashboard/styles/app.scss b/assets/apps/dashboard/styles/app.scss
@@ -29,20 +29,21 @@
 }
 
 #windpress-app {
-    &.universal {
+    &.ubiquitous {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
         font-size: 13px;
         line-height: 1.4em;
 
         >.windpress-container {
             z-index: calc(infinity-1000);
             position: fixed;
-            top: var(--wp-admin--admin-bar--height, 0);
-            left: 0;
-            right: 0;
-            bottom: 0;
 
-            &.hide-universal {
+            margin: 0;
+            padding: 0;
+            height: calc(100% - 2px);
+            width: calc(100% - 2px);
+
+            &.hide-ubiquitous {
                 display: none;
             }
 
@@ -214,11 +215,8 @@
     border: 0;
 
     &.expanded {
-        bottom: 0;
-        right: 0;
-        width: 100vw;
-        height: calc(100vh - var(--wp-admin--admin-bar--height, 0%));
-        top: var(--wp-admin--admin-bar--height, 0);
+        height: calc(100vh - 100px - var(--wp-admin--admin-bar--height, 0%));
+        width: calc(100vw - 100px);
     }
 }
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/readme.txt b/readme.txt
@@ -112,6 +112,10 @@ For instance:
 Free version 1.**0**.4
 Pro version 1.**1**.4
 
+= unreleased =
+* **Improve**: Ensure only the necessary Play Observer modules are loaded on the front-end
+* **Improve**: Ubiquitous panel is now automatically hidden when clicking outside the panel
+
 = 3.2.4 =
 * **Fix**: Breakdance integration doesn't work on the editor due to fail to load the required JavaScript files
 

diff --git a/src/Admin/AdminPage.php b/src/Admin/AdminPage.php
@@ -56,6 +56,9 @@ private function render()
 
     private function init_hooks()
     {
+        add_filter('f!windpress/core/runtime:print_windpress_metadata', fn ($metadata) => array_merge($metadata, [
+            'is_ubiquitous' => false,
+        ]), 1_000_001);
         add_action('admin_enqueue_scripts', fn () => Runtime::get_instance()->print_windpress_metadata(), 1_000_001);
         add_action('admin_enqueue_scripts', fn () => $this->enqueue_scripts(), 1_000_001);
     }

diff --git a/src/Core/Runtime.php b/src/Core/Runtime.php
@@ -162,66 +162,78 @@ public function enqueue_play_cdn($display = true)
 
         do_action('a!windpress/core/runtime:enqueue_play_cdn.before', $tailwindcss_version);
 
-        $load_modules = current_user_can('manage_options');
+        $can_load_modules = current_user_can('manage_options');
 
         if ($tailwindcss_version === 3) {
-            $this->enqueue_play_cdn_v3($load_modules);
+            $this->enqueue_play_cdn_v3($can_load_modules);
         } elseif ($tailwindcss_version === 4) {
-            $this->enqueue_play_cdn_v4($load_modules);
+            $this->enqueue_play_cdn_v4($can_load_modules);
         }
 
+        wp_enqueue_script(WIND_PRESS::WP_OPTION . ':observer');
+
         do_action('a!windpress/core/runtime:enqueue_play_cdn.after', $tailwindcss_version);
     }
 
-    public function enqueue_play_cdn_v3($load_modules)
+    public function enqueue_play_cdn_v3($can_load_modules)
     {
-        if ($load_modules) {
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v3/play/autocomplete.js', [
+        // Register the modules
+        $loaded_modules = [];
+        if ($can_load_modules) {
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v3/play/autocomplete.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':autocomplete',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':autocomplete';
 
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v3/play/sort.js', [
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v3/play/sort.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':sort',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':sort';
 
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v3/play/classname-to-css.js', [
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v3/play/classname-to-css.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':classname-to-css',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':classname-to-css';
         }
 
-        AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v3/play/observer.js', [
+        AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v3/play/observer.js', [
             'handle' => WIND_PRESS::WP_OPTION . ':observer',
             'in-footer' => true,
-            'dependencies' => ['wp-i18n', 'wp-hooks'],
+            'dependencies' => ['wp-i18n', 'wp-hooks', ...$loaded_modules],
         ]);
     }
 
-    public function enqueue_play_cdn_v4($load_modules)
+    public function enqueue_play_cdn_v4($can_load_modules)
     {
-        if ($load_modules) {
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v4/play/autocomplete.js', [
+        // Register the modules
+        $loaded_modules = [];
+        if ($can_load_modules) {
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v4/play/autocomplete.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':autocomplete',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':autocomplete';
 
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v4/play/sort.js', [
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v4/play/sort.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':sort',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':sort';
 
-            AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v4/play/classname-to-css.js', [
+            AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v4/play/classname-to-css.js', [
                 'handle' => WIND_PRESS::WP_OPTION . ':classname-to-css',
                 'in-footer' => true,
             ]);
+            $loaded_modules[] = WIND_PRESS::WP_OPTION . ':classname-to-css';
         }
 
-        AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwindcss-v4/play/observer.js', [
+        AssetVite::get_instance()->register_asset('assets/packages/core/tailwindcss-v4/play/observer.js', [
             'handle' => WIND_PRESS::WP_OPTION . ':observer',
             'in-footer' => true,
-            'dependencies' => ['wp-i18n', 'wp-hooks'],
+            'dependencies' => ['wp-i18n', 'wp-hooks', ...$loaded_modules],
         ]);
     }
 
@@ -252,6 +264,8 @@ public function print_windpress_metadata()
     {
         $metadata = $this->assets_metadata();
 
+        $metadata = apply_filters('f!windpress/core/runtime:print_windpress_metadata', $metadata);
+
         /**
          * @see \WP_Scripts::localize()
          */