[4.x] Fixes (#7907)

statamic · Apr 14, 2023 · 0ea0ebb · 0ea0ebb
1 parent 821b8be
commit 0ea0ebb
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 18 deletions.
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
@@ -81,7 +81,8 @@
 /* Fieldtype
   ========================================================================== */
 
-.assets-fieldtype .draggable-mirror { display: none; }
+.asset-tile.draggable-source--is-dragging { @apply opacity-50; }
+.asset-tile.draggable-mirror { @apply shadow-lg; }
 
 .assets-fieldtype .extremely-narrow .asset-grid-listing {
     grid-template-columns: 1fr;
@@ -103,14 +104,14 @@
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
     grid-gap: 16px;
     padding: 16px;
+}
 
-    .asset-tile {
-        @apply flex items-center flex-col justify-between cursor-pointer border rounded;
+.grid-listing-asset-tile.asset-tile {
+    @apply flex items-center flex-col justify-between cursor-pointer border rounded;
 
-        .asset-thumb-container {
-            @apply flex items-center flex-1 w-full justify-center relative;
-            aspect-ratio: 1 / 1;
-        }
+    .asset-thumb-container {
+        @apply flex items-center flex-1 w-full justify-center relative;
+        aspect-ratio: 1 / 1;
     }
 }
 

diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
@@ -4,7 +4,7 @@
 
 .global-header {
     @apply bg-white shadow pr-4 h-13 items-center flex relative w-full;
-    z-index: 2; /* The search focus overlay sits underneath using z-index 1. */
+    z-index: 3; /* The search focus overlay sits underneath using z-index 2. */
 }
 
 /* Responsive Wangjangling

diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
@@ -1,6 +1,5 @@
 .live-preview {
     @apply inset-0;
-    z-index: 998; /*  arbitrary under stacks. */
 }
 
 .live-preview-header {

diff --git a/resources/css/components/stacks.css b/resources/css/components/stacks.css
@@ -3,9 +3,9 @@
    ========================================================================== */
 
 .portal-targets {
-    /* position on top of global header (z-index 2) but ignore clicks */
+    /* position on top of global header (z-index 3) but ignore clicks */
     @apply fixed inset-0 pointer-events-none;
-    z-index: 3;
+    z-index: 4;
 
     .vue-portal-target {
         @apply pointer-events-auto; /* allow clicks that we disabled above */

diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
@@ -14,6 +14,8 @@ body {
 #main {
     @apply flex;
     padding-bottom: 72px;
+    position: relative;
+    z-index: 1;
 }
 
 #main .workspace {

diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
@@ -12,7 +12,7 @@
         >
             <template #selected-option="option">
                 <div class="flex items-center px-2 text-sm text-gray hover:text-gray-800 anti">
-                    <svg-icon name="sites" class="mr-2 h-4 w-4" />
+                    <svg-icon name="light/sites" class="mr-2 h-4 w-4" />
                     <div class="whitespace-nowrap">{{ option.name }}</div>
                 </div>
             </template>

diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
@@ -3,7 +3,7 @@
         <div class="flex flex-wrap px-3 border-b pt-2">
 
             <!-- Field filter (requires custom selection UI) -->
-            <popover v-if="fieldFilter" placement="bottom-start" :clickaway="false" @closed="fieldFilterClosed">
+            <popover v-if="fieldFilter" placement="bottom-start" :stop-propagation="false" @closed="fieldFilterClosed">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
                         {{ __('Field') }}
@@ -38,7 +38,7 @@
             </popover>
 
             <!-- Standard non-field filters -->
-            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" placement="bottom-start">
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" placement="bottom-start" :stop-propagation="false">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}

diff --git a/resources/js/components/fieldtypes/TimeFieldtype.vue b/resources/js/components/fieldtypes/TimeFieldtype.vue
@@ -77,7 +77,7 @@ export default {
         });
 
         // Bind initial value to mask.
-        this.mask.value = this.inputValue;
+        this.mask.value = new String(this.inputValue);
 
         // We use this instead of v-model or @input because input would be early and give us the raw value.
         // In this event listener, we get masked value (with colons/guides). // e.g. 032 vs. 03:2

diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -61,6 +61,9 @@
                         @dragend="$emit('blur')"
                         :constrain-dimensions="true"
                         :disabled="isReadOnly"
+                        :distance="10"
+                        :animate="false"
+                        append-to="body"
                     >
                         <div class="asset-grid-listing border rounded overflow-hidden rounded-t-none" ref="assets">
                             <asset-tile
@@ -70,6 +73,7 @@
                                 :is-solo="soloAsset"
                                 :read-only="isReadOnly"
                                 :show-filename="config.show_filename"
+                                class="grid-listing-asset-tile"
                                 @updated="assetUpdated"
                                 @removed="assetRemoved"
                                 @id-changed="idChanged(asset.id, $event)">
@@ -84,8 +88,9 @@
                                 item-class="asset-row"
                                 handle-class="asset-row"
                                 :vertical="true"
-                                :constrain-dimensions="true"
                                 :disabled="isReadOnly"
+                                :distance="10"
+                                :mirror="false"
                             >
                                 <tbody ref="assets">
                                     <tr is="assetRow"

diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
@@ -54,18 +54,25 @@ export default {
             type: Boolean,
             default: false
         },
+        animate: {
+            type: Boolean,
+            default: true
+        }
     },
 
     computed: {
 
         computedOptions() {
+            let plugins = [];
+            if (this.animate) plugins.push(Plugins.SwapAnimation);
+
             let options = Object.assign({}, {
                 draggable: `.${CSS.escape(this.itemClass)}`,
                 handle: `.${CSS.escape(this.handleClass)}`,
                 delay: this.delay,
                 distance: this.distance,
                 swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
-                plugins: [Plugins.SwapAnimation],
+                plugins,
                 mirror: {
                     constrainDimensions: this.constrainDimensions
                 },

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
@@ -112,4 +112,4 @@
     </div>
 </div>
 
-<div v-if="$refs.globalSearch?.focused" v-cloak class="fixed inset-0 h-full w-full bg-black/10 z-1"></div>
+<div v-if="$refs.globalSearch?.focused" v-cloak class="fixed inset-0 h-full w-full bg-black/10 z-2"></div>