Fix nova 4 release bugs (#321)

Co-authored-by: Bogdan Mucenica <[email protected]>
ebess · Apr 21, 2022 · cdb2641 · cdb2641
1 parent 81f452d
commit cdb2641
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 240 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/readme.md b/readme.md
@@ -300,9 +300,13 @@ Files::make('Multiple files', 'multiple_files')
 
 # Change log
 
-## v4.0 - 2022-04-18
+## v4.0.1 - 2022-04-20
+- Fix details component
+- Fix layout inconsistencies 
+
+## v4.0.0 - 2022-04-18
 - Upgrade to support Laravel Nova 4
 - Breaks compatibility with Laravel Nova 1,2 and 3. For those nova versions  use `v3.*`
 - Replaced [vuejs-clipper](https://www.npmjs.com/package/vuejs-clipper) with [vue-advanced-cropper](https://www.npmjs.com/package/vue-advanced-cropper) for vue3 support
 
-Full change log in [PR #317](https://github.com/ebess/advanced-nova-media-library/pull/317)
+Full change log in [PR #317](https://github.com/ebess/advanced-nova-media-library/pull/317)
diff --git a/resources/js/components/Cropper.vue b/resources/js/components/Cropper.vue
@@ -9,7 +9,7 @@
           />
         </div>
         <div class="bg-30 px-6 py-3 footer rounded-lg">
-          <button v-if="!cropAnyway" type="button" class="btn btn-link text-80 font-normal h-9 px-3" @click="onCancel">{{__('Cancel')}}</button>
+          <OutlineButton v-if="!cropAnyway" type="button"  @click="onCancel">{{__('Cancel')}}</OutlineButton>
 
           <button v-if="!cropAnyway" type="button" class="btn btn-link text-80 font-normal h-9 px-3" @click.prevent="rotate(-90)" :title="__('Rotate -90')">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M17.026 22.957c10.957-11.421-2.326-20.865-10.384-13.309l2.464 2.352h-9.106v-8.947l2.232 2.229c14.794-13.203 31.51 7.051 14.794 17.675z"/></svg>
@@ -18,7 +18,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M6.974 22.957c-10.957-11.421 2.326-20.865 10.384-13.309l-2.464 2.352h9.106v-8.947l-2.232 2.229c-14.794-13.203-31.51 7.051-14.794 17.675z"/></svg>
           </button>
 
-          <button type="button" class="btn btn-default btn-primary" @click="onSave" ref="updateButton">{{__('Update')}}</button>
+          <DefaultButton type="button" class="btn btn-default btn-primary" @click="onSave" ref="updateButton">{{__('Update')}}</DefaultButton>
         </div>
       </card>
     </Modal>

diff --git a/resources/js/components/CustomPropertiesModal.vue b/resources/js/components/CustomPropertiesModal.vue
@@ -1,6 +1,7 @@
 <template>
     <Modal
       :show="true"
+      maxWidth="2xl"
       @modal-close="handleClose"
           :classWhitelist="[
             'flatpickr-current-month',

diff --git a/resources/js/components/ExistingMedia.vue b/resources/js/components/ExistingMedia.vue
@@ -1,23 +1,25 @@
 <template>
   <!-- Modal -->
-  <div class="fixed p-8 inset-0 z-50" :class="{'hidden': !open, 'flex': open}">
+  <Modal
+    :show="open"
+    maxWidth=""
+    class="px-4"
+  >
+    <card class="overflow-hidden">
 
-    <!-- Modal Background -->
-    <div class="absolute bg-black opacity-75 inset-0" @click="close"></div>
-
-    <!-- Modal Content -->
-    <div class="flex flex-col text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-900 p-4 h-full relative w-full">
-      <!-- Header bar -->
-      <div class="border-b border-40 pb-3 mb-4 flex items-center">
+      <!-- Modal Content -->
+      <div class="flex flex-col p-4 h-full relative w-full">
+        <!-- Header bar -->
+        <div class="border-b dark:border-gray-700 pb-3 mb-4 flex items-center">
           <!-- Heading -->
           <div class="px-4 self-center">
-            <h3>{{__('Existing Media')}}</h3>
+            <h3>{{ __('Existing Media') }}</h3>
           </div>
 
           <!-- Search -->
           <div class="px-4 self-center">
             <div class="relative">
-              <icon type="search" class="inline-block absolute ml-2 text-gray-400" width="20" style="top:4px;" />
+              <icon type="search" class="inline-block absolute ml-2 text-gray-400" width="20" style="top:4px;"/>
               <input type="search"
                      v-bind:placeholder="__('Search by name or file name')"
                      class="appearance-none rounded-full h-8 pl-10 w-full bg-gray-100 dark:bg-gray-800 focus:bg-white focus:outline-none focus:ring"
@@ -30,124 +32,125 @@
 
           <!-- Close -->
           <div class="px-4 ml-auto self-center">
-            <button type="button" class="form-file-btn btn btn-default btn-primary" @click="close">{{__('Close')}}</button>
+            <OutlineButton type="button" @click="close">{{ __('Close') }}</OutlineButton>
           </div>
-      </div>
+        </div>
 
 
-      <div class="flex-grow overflow-x-hidden overflow-y-scroll">
-        <!-- When we have results show them -->
-        <div class="flex flex-wrap -mx-4 -mb-8" v-if="items.length > 0">
+        <div class="flex-grow overflow-x-hidden overflow-y-scroll" style="max-height: 79vh;">
+          <!-- When we have results show them -->
+          <div class="my-4 flex justify-center flex-wrap" v-if="items.length > 0">
             <existing-media-item v-for="(item, key) in items" :key="key" :item="item" @select="$emit('select', item); close()"></existing-media-item>
-        </div>
+          </div>
 
-        <!-- Show "Loading" or "No Results Found" text -->
-        <h4 class="text-center m-8" v-if="loading">{{__('Loading...')}}</h4>
-        <h4 class="text-center m-8" v-else-if="items.length == 0">{{__('No results found')}}</h4>
-      </div>
+          <!-- Show "Loading" or "No Results Found" text -->
+          <h4 class="text-center m-8" v-if="loading">{{ __('Loading...') }}</h4>
+          <h4 class="text-center m-8" v-else-if="items.length == 0">{{ __('No results found') }}</h4>
+        </div>
 
-      <!-- Next page -->
-      <div class="flex-shrink border-t border-40 pt-4 mt-4 text-right" v-if="showNextPage">
-        <button type="button" class="form-file-btn btn btn-default btn-primary ml-auto" @click="nextPage">{{__('Load Next Page')}}</button>
+        <!-- Next page -->
+        <div class="flex-shrink border-t dark:border-gray-700 pt-3 mt-4 text-right" v-if="showNextPage">
+          <DefaultButton type="button" class="ml-auto" @click="nextPage">{{ __('Load Next Page') }}</DefaultButton>
+        </div>
       </div>
-    </div>
-  </div>
+    </card>
+  </Modal>
 </template>
 
 <script>
-  import ExistingMediaItem from './ExistingMediaItem';
-  import debounce from 'lodash/debounce';
+import ExistingMediaItem from './ExistingMediaItem';
+import debounce from 'lodash/debounce';
 
-  export default{
-    components: {
-      ExistingMediaItem
-    },
-    data () {
-      let aThis = this;
-      return {
-        requestParams: {
-          search_text: '',
-          page: 1,
-          per_page: 18
-        },
-        items: [],
-        response: {},
-        loading: false,
-        search: debounce (function () {
-           aThis.refresh();
-        }, 750),
+export default {
+  components: {
+    ExistingMediaItem
+  },
+  data() {
+    let aThis = this;
+    return {
+      requestParams: {
+        search_text: '',
+        page: 1,
+        per_page: 18
+      },
+      items: [],
+      response: {},
+      loading: false,
+      search: debounce(function () {
+        aThis.refresh();
+      }, 750),
+    }
+  },
+  props: {
+    open: {
+      default: false,
+      type: Boolean
+    }
+  },
+  computed: {
+    showNextPage() {
+      if (this.items.length == (this.requestParams.page * this.requestParams.per_page)) {
+        return true;
       }
+      return false;
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
     },
-    props: {
-      open: {
-        default: false,
-        type: Boolean
-      }
+    refresh() {
+      this.requestParams.page = 1;
+      return this.fireRequest().then((response) => {
+        this.items = response.data.data;
+        return response;
+      });
     },
-    computed: {
-      showNextPage () {
-        if (this.items.length == (this.requestParams.page * this.requestParams.per_page)) {
-          return true;
-        }
-        return false;
-      }
+    nextPage() {
+      this.requestParams.page += 1;
+      return this.fireRequest().then((response) => {
+        this.items = this.items.concat(response.data.data);
+        return response;
+      });
     },
-    methods: {
-      close () {
-        this.$emit('close');
-      },
-      refresh () {
-        this.requestParams.page = 1;
-        return this.fireRequest().then((response) => {
-          this.items = response.data.data;
-          return response;
-        });
-      },
-      nextPage () {
-        this.requestParams.page += 1;
-        return this.fireRequest().then((response) => {
-          this.items = this.items.concat(response.data.data);
-          return response;
-        });
-      },
-      fireRequest () {
-        // Set loading to true
-        this.loading = true;
+    fireRequest() {
+      // Set loading to true
+      this.loading = true;
 
-        return this.createRequest().then(response => {
-          this.response = response;
-          return response;
-        }).finally(() => {
-          // Set loading to false
-          this.loading = false;
-        });
-      },
-      /**
-       * Request builders the request
-       */
-      createRequest () {
-        return Nova.request()
-          .get(
-            `/nova-vendor/ebess/advanced-nova-media-library/media`,
-            {
-              params: this.requestParams
-            }
-          )
-      }
+      return this.createRequest().then(response => {
+        this.response = response;
+        return response;
+      }).finally(() => {
+        // Set loading to false
+        this.loading = false;
+      });
     },
-    watch: {
-      open: function (newValue) {
-        if (newValue) {
-          if (this.items.length == 0) {
-            this.refresh();
+    /**
+     * Request builders the request
+     */
+    createRequest() {
+      return Nova.request()
+        .get(
+          `/nova-vendor/ebess/advanced-nova-media-library/media`,
+          {
+            params: this.requestParams
           }
-          document.body.classList.add('overflow-x-hidden');
-          document.body.classList.add('overflow-y-hidden');
-        } else {
-          document.body.classList.remove('overflow-x-hidden');
-          document.body.classList.remove('overflow-y-hidden');
+        )
+    }
+  },
+  watch: {
+    open: function (newValue) {
+      if (newValue) {
+        if (this.items.length == 0) {
+          this.refresh();
         }
+        document.body.classList.add('overflow-x-hidden');
+        document.body.classList.add('overflow-y-hidden');
+      } else {
+        document.body.classList.remove('overflow-x-hidden');
+        document.body.classList.remove('overflow-y-hidden');
       }
     }
   }
+}
 </script>
diff --git a/resources/js/components/ExistingMediaItem.vue b/resources/js/components/ExistingMediaItem.vue
@@ -1,25 +1,53 @@
 <template>
-  <div class="border-40 group px-4 pb-4 mb-4 w-1/6">
-    <div class="shadow">
-      <div class="overflow-hidden relative w-full" style="padding-top:100%;">
-        <img v-if="'__media_urls__' in item && 'indexView' in item.__media_urls__" :src="item.__media_urls__.indexView" class="absolute block h-full inset-0 w-full" style="object-fit: cover" />
-        <button type="button" class="absolute top-0 right-0 m-4 shadow bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900 cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring inline-flex items-center justify-center h-9 px-3 shadow bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900" @click="$emit('select')">{{__('Select')}}</button>
-      </div>
-      <div class="p-3 border-l border-r border-b border-40">
-        <h4 class="truncate h-4 mb-1" v-if="'name' in item">{{ item.name }}</h4>
-        <h5 class="truncate text-80" v-if="'file_name' in item">{{ item.file_name }}</h5>
+  <div class="existing-media-item float-left border dark:border-gray-700 group mb-4 mr-4 shadow relative cursor-pointer group hover:scale-105 transition-all"
+       style="width: 200px;"
+       @click.prevent="$emit('select')">
+    <div class="overflow-hidden relative">
+      <img v-if="'__media_urls__' in item && 'indexView' in item.__media_urls__" :src="item.__media_urls__.indexView" class="block w-full" style="height: 200px; object-fit: contain;"/>
+      <div class="absolute top-0 right-0 mt-3 mr-3 hidden group-hover:block">
+        <DefaultButton type="button">{{ __('Select') }}</DefaultButton>
       </div>
     </div>
+    <div class="p-3">
+      <h4 class="truncate h-4 mb-1 font-bold truncate" v-if="'name' in item" :title="item.name">{{ item.name }}</h4>
+      <h5 class="truncate text-gray-600 text-xs truncate" v-if="'file_name' in item" :title="item.file_name">{{ item.file_name }}</h5>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    props: {
-      item: {
-        default: function () { return {}; },
-        type: Object
-      }
+export default {
+  props: {
+    item: {
+      default: function () {
+        return {};
+      },
+      type: Object
     }
   }
+}
 </script>
+
+<style lang="scss">
+.existing-media-item {
+
+  &.float-left {
+    float: left;
+  }
+
+  &.group:hover .group-hover\:block {
+    display: block;
+  }
+
+  &.hover\:scale\-105:hover {
+    transform: scale(1.05);
+  }
+
+  &.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+}
+</style>
diff --git a/resources/js/components/Gallery.vue b/resources/js/components/Gallery.vue
@@ -40,10 +40,10 @@
 
     <span v-if="editable" class="form-file">
       <input :id="`__media__${field.attribute}`" :multiple="multiple" ref="file" class="form-file-input" type="file" :disabled="uploading" @change="add"/>
-      <label :for="`__media__${field.attribute}`" class="form-file-btn btn btn-default btn-primary">
+      <label :for="`__media__${field.attribute}`" class="">
         <DefaultButton type="button" @click.prevent="focusFileInput">
-          <span v-if="uploading">{{ __('Uploading') }} ({{ uploadProgress }}%)</span>
-          <span v-else>{{ label }}</span>
+          <template v-if="uploading">{{ __('Uploading') }} ({{ uploadProgress }}%)</template>
+          <template v-else>{{ label }}</template>
         </DefaultButton>
       </label>
     </span>