Turn the table view in media manager into a table

joomla · Apr 20, 2019 · 7d2867c · 7d2867c
1 parent a50c70c
commit 7d2867c
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 63 deletions.
diff --git a/administrator/components/com_media/resources/scripts/components/browser/browser.vue b/administrator/components/com_media/resources/scripts/components/browser/browser.vue
@@ -11,19 +11,19 @@
                 <span class="fa fa-cloud-upload upload-icon" aria-hidden="true"></span>
                 <p>{{ translate('COM_MEDIA_DROP_FILE') }}</p>
             </div>
-            <div v-if="listView === 'table'" class="media-browser-table">
-                <div class="media-browser-table-head">
-                    <ul>
-                        <li class="type"></li>
-                        <li class="name">{{ translate('COM_MEDIA_MEDIA_NAME') }}</li>
-                        <li class="size">{{ translate('COM_MEDIA_MEDIA_SIZE') }}</li>
-                        <li class="dimension">{{ translate('COM_MEDIA_MEDIA_DIMENSION') }}</li>
-                        <li class="created">{{ translate('COM_MEDIA_MEDIA_DATE_CREATED') }}</li>
-                        <li class="modified">{{ translate('COM_MEDIA_MEDIA_DATE_MODIFIED') }}</li>
-                    </ul>
-                </div>
-                <media-browser-item v-for="item in items" :key="item.path" :item="item"></media-browser-item>
-            </div>
+            <table v-if="listView === 'table'" class="table media-browser-table">
+                <thead class="media-browser-table-head">
+                    <tr>
+                        <th class="type"></th>
+                        <th class="name">{{ translate('COM_MEDIA_MEDIA_NAME') }}</th>
+                        <th class="size">{{ translate('COM_MEDIA_MEDIA_SIZE') }}</th>
+                        <th class="dimension">{{ translate('COM_MEDIA_MEDIA_DIMENSION') }}</th>
+                        <th class="created">{{ translate('COM_MEDIA_MEDIA_DATE_CREATED') }}</th>
+                        <th class="modified">{{ translate('COM_MEDIA_MEDIA_DATE_MODIFIED') }}</th>
+                    </tr>
+                </thead>
+                <media-browser-item-row v-for="item in items" :key="item.path" :item="item"></media-browser-item-row>
+            </table>
             <div class="media-browser-grid" v-else-if="listView === 'grid'">
                 <div class="media-browser-items" :class="mediaBrowserGridItemsClass">
                     <media-browser-item v-for="item in items" :key="item.path" :item="item"></media-browser-item>

diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/item.js b/administrator/components/com_media/resources/scripts/components/browser/items/item.js
@@ -2,7 +2,6 @@ import Directory from "./directory.vue";
 import File from "./file.vue";
 import Image from "./image.vue";
 import Video from "./video.vue";
-import Row from "./row.vue";
 import * as types from "./../../../store/mutation-types";
 
 export default {
@@ -17,10 +16,6 @@ export default {
          * Return the correct item type component
          */
         itemType() {
-            if (this.$store.state.listView === 'table') {
-                return Row;
-            }
-
             let imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
             let videoExtensions = ['mp4'];
 
@@ -46,10 +41,6 @@ export default {
          * @returns {{}}
          */
         styles() {
-            if (this.$store.state.listView === 'table') {
-                return {};
-            }
-
             return {
                 'width': 'calc(' + this.$store.state.gridSize + '% - 20px)',
             };

diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/row.vue b/administrator/components/com_media/resources/scripts/components/browser/items/row.vue
@@ -1,23 +1,23 @@
 <template>
-    <ul @dblclick.stop.prevent="onDblClick()">
-        <li class="type" :data-type="item.extension">
-        </li>
-        <li class="name">
+    <tr @dblclick.stop.prevent="onDblClick()" @click="onClick">
+        <td class="type" :data-type="item.extension">
+        </td>
+        <td class="name">
             {{ item.name }}
-        </li>
-        <li class="size">
+        </td>
+        <td class="size">
             {{ item.size }}
-        </li>
-        <li class="dimension">
+        </td>
+        <td class="dimension">
             {{ dimension }}
-        </li>
-        <li class="created">
+        </td>
+        <td class="created">
             {{ item.create_date_formatted }}
-        </li>
-        <li class="modified">
+        </td>
+        <td class="modified">
             {{ item.modified_date_formatted }}
-        </li>
-    </ul>
+        </td>
+    </tr>
 </template>
 
 <script>
@@ -56,7 +56,60 @@
                     this.$store.commit(types.SHOW_PREVIEW_MODAL);
                     this.$store.dispatch('getFullContents', this.item);
                 }
-            }
+            },
+
+			/**
+			 * Whether or not the item is currently selected
+			 * @returns {boolean}
+			 */
+			isSelected() {
+				return this.$store.state.selectedItems.some(selected => selected.path === this.item.path);
+			},
+
+
+			/**
+             * Handle the click event
+             * @param event
+             */
+            onClick(event) {
+                let path = false;
+                const data = {
+                    path: path,
+                    thumb: false,
+                    fileType: this.item.mime_type ? this.item.mime_type : false,
+                    extension: this.item.extension ? this.item.extension : false,
+                };
+
+                if (this.item.type === 'file') {
+                    data.path = this.item.path;
+                    data.thumb = this.item.thumb ? this.item.thumb : false;
+
+                    const ev = new CustomEvent('onMediaFileSelected', {
+                        "bubbles": true,
+                        "cancelable": false,
+                        "detail": data
+                    });
+                    window.parent.document.dispatchEvent(ev);
+                }
+
+                // Handle clicks when the item was not selected
+                if (!this.isSelected()) {
+                    // Unselect all other selected items, if the shift key was not pressed during the click event
+                    if (!(event.shiftKey || event.keyCode === 13)) {
+                        this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+                    }
+                    this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+                    return;
+                }
+
+                // If more than one item was selected and the user clicks again on the selected item,
+                // he most probably wants to unselect all other items.
+                if (this.$store.state.selectedItems.length > 1) {
+                    this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+                    this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+                }
+            },
+
         }
     }
 </script>
diff --git a/administrator/components/com_media/resources/scripts/mediamanager.js b/administrator/components/com_media/resources/scripts/mediamanager.js
@@ -9,6 +9,7 @@ import Toolbar from "./components/toolbar/toolbar.vue";
 import Breadcrumb from "./components/breadcrumb/breadcrumb.vue";
 import Browser from "./components/browser/browser.vue";
 import BrowserItem from "./components/browser/items/item";
+import BrowserItemRow from "./components/browser/items/row.vue";
 import Modal from "./components/modals/modal.vue";
 import CreateFolderModal from "./components/modals/create-folder-modal.vue";
 import PreviewModal from "./components/modals/preview-modal.vue";
@@ -32,6 +33,7 @@ Vue.component('media-toolbar', Toolbar);
 Vue.component('media-breadcrumb', Breadcrumb);
 Vue.component('media-browser', Browser);
 Vue.component('media-browser-item', BrowserItem);
+Vue.component('media-browser-item-row', BrowserItemRow);
 Vue.component('media-modal', Modal);
 Vue.component('media-create-folder-modal', CreateFolderModal);
 Vue.component('media-preview-modal', PreviewModal);

diff --git a/administrator/components/com_media/resources/styles/components/_media-browser.scss b/administrator/components/com_media/resources/styles/components/_media-browser.scss
@@ -283,8 +283,6 @@
 
 // Table View
 .media-browser-table-head {
-  font-size: .8rem;
-  font-weight: bold;
   .type {
     margin-left: 1px;
     &::before {
@@ -294,30 +292,6 @@
 }
 
 .media-browser-table {
-  overflow-y: auto;
-  font-size: .9rem;
-  line-height: $table-item-height;
-  transition: width .3s cubic-bezier(.4, .0, .2, 1);
-  .media-browser-item {
-    width: 100%;
-    margin: 0;
-    border: 1px solid rgba(0, 0, 0, .03);
-    &:hover {
-      background-color: $table-item-bg-hover;
-    }
-  }
-  ul {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-  li {
-    padding: 0 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .name {
     width: calc(30% - 40px);
   }