Fixed unselcting error on clicking infobar (#516)

* PR after a long time
Fixed the unselect on clicking infobar

* removed infobar from app

* added infobar as a child

* removed multiline

* unused refs

* build

* is logic ok ?? yes now yes

* much better

* much*2 better

* much*3 better

administrator/components/com_media/resources/scripts/components/app.vue

@@ -7,7 +7,6 @@
             <div class="media-main">
                 <media-toolbar></media-toolbar>
                 <media-browser></media-browser>
-                <media-infobar v-if="!this.isModal"></media-infobar>
             </div>
         </div>
         <media-upload></media-upload>
@@ -26,16 +25,13 @@
         data() {
             return {
                 // The full height of the app in px
-                fullHeight: '',
+                fullHeight: ''
             };
         },
         computed: {
             disks() {
                 return this.$store.state.disks;
             },
-            isModal() {
-		return Joomla.getOptions('com_media', {}).isModal;
-            }
         },
         methods: {
             /* Set the full height on the app container */

administrator/components/com_media/resources/scripts/components/browser/browser.vue

@@ -1,33 +1,36 @@
 <template>
-    <div class="media-browser"
-         @dragenter="onDragEnter"
-         @drop="onDrop"
-         @dragover="onDragOver"
-         @dragleave="onDragLeave"
-         :style="mediaBrowserStyles"
-         ref="browserItems">
-        <div class="media-dragoutline">
-            <span class="fa fa-cloud-upload upload-icon" aria-hidden="true"></span>
-            <p>Drop file(s) to Upload</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_CREATED_AT') }}</li>
-                    <li class="modified">{{ translate('COM_MEDIA_MEDIA_MODIFIED_AT') }}</li>
-                </ul>
+    <div>
+        <div class="media-browser"
+            @dragenter="onDragEnter"
+            @drop="onDrop"
+            @dragover="onDragOver"
+            @dragleave="onDragLeave"
+            :style="mediaBrowserStyles"
+            ref="browserItems">
+            <div class="media-dragoutline">
+                <span class="fa fa-cloud-upload upload-icon" aria-hidden="true"></span>
+                <p>Drop file(s) to Upload</p>
             </div>
-            <media-browser-item v-for="item in items" :key="item.path" :item="item"></media-browser-item>
-        </div>
-        <div class="media-browser-grid" v-else-if="listView === 'grid'">
-            <div class="media-browser-items" :class="mediaBrowserGridItemsClass">
+            <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_CREATED_AT') }}</li>
+                        <li class="modified">{{ translate('COM_MEDIA_MEDIA_MODIFIED_AT') }}</li>
+                    </ul>
+                </div>
                 <media-browser-item v-for="item in items" :key="item.path" :item="item"></media-browser-item>
             </div>
+            <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>
+                </div>
+            </div>
         </div>
+        <media-infobar v-if="!this.isModal" ref="infobar"></media-infobar>
     </div>
 </template>
 
@@ -64,13 +67,18 @@
                 return {
                     ['media-browser-items-' + this.$store.state.gridSize]: true,
                 }
+            },
+            isModal() {
+		        return Joomla.getOptions('com_media', {}).isModal;
             }
         },
         methods: {
             /* Unselect all browser items */
             unselectAllBrowserItems(event) {
-                const eventOutside = (this.$refs.browserItems && !this.$refs.browserItems.contains(event.target)) || event.target === this.$refs.browserItems;
-                if (eventOutside) {
+                const notClickedBrowserItems = (this.$refs.browserItems && !this.$refs.browserItems.contains(event.target)) || event.target === this.$refs.browserItems;
+                const notClickedInfobar = this.$refs.infobar !== undefined && !this.$refs.infobar.$el.contains(event.target);
+                const clickedOutside = notClickedBrowserItems && notClickedInfobar;
+                if (clickedOutside) {
                     this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
                 }
             },