optimalize UI for preview and sorting options

resources/js/components/FilesView/DesktopToolbar.vue

@@ -81,11 +81,12 @@
 
         <!--View options-->
         <div class="toolbar-button-wrapper">
-          <img 
-          src="/assets/icons/sorting-icon.svg" size="17"
-          :class="{ active: fileInfoVisible }"
-          @click=" sortingAndPreview = !sortingAndPreview"
-          >
+          <ToolbarButton 
+            source="preview-sorting"
+            class="preview-sorting"
+            :class="{ active: sortingAndPreview }"
+            @click.native=" sortingAndPreview = !sortingAndPreview"
+          />
 
           <ToolbarButton
             :class="{ active: fileInfoVisible }"
@@ -369,10 +370,15 @@ export default {
     &.active {
       /deep/ svg {
         line,
-        circle {
+        circle,
+        rect {
           stroke: $theme;
         }
       }
+
+      &.preview-sorting{
+        background: $light_background;
+      }
     }
 
     &.is-inactive {
@@ -426,5 +432,11 @@ export default {
       }
     }
   }
+  
+    .active {     
+      &.preview-sorting{
+        background: $dark_mode_foreground !important;
+      }
+    }
 }
 </style>

resources/js/components/FilesView/SortingAndPreview.vue

@@ -41,7 +41,7 @@
                 </li>
                 <li class="menu-option" @click="sort('name')"  >
                     <div class="icon">
-                       <img class="aplhabet" src="/assets/icons/alphabet.svg" size="17">
+                       <alphabet-icon size="17" class="aplhabet-icon"/>
                     </div>
                     <div class="text-label">
                        {{$t('preview_sorting.sort_alphabet')}}
@@ -58,6 +58,7 @@
 <script>
 
     import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
+    import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
     import { mapGetters } from 'vuex'
     import { events } from '@/bus'
 
@@ -65,6 +66,7 @@
         name:'SortingAndPreview',
         components: {
             CalendarIcon,
+            AlphabetIcon,
             ArrowUpIcon,
             CheckIcon,
             ListIcon,
@@ -90,6 +92,7 @@
         },
         methods: {
             sort (field) {
+
                 this.filter.field = field
 
                  // Set sorting direction
@@ -100,6 +103,7 @@
                 }
 
                 localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
+                
                 this.$getDataByLocation()
             },
             changePreview(previewType) {
@@ -110,8 +114,8 @@
 
             let sorting = JSON.parse(localStorage.getItem('sorting'))
 
-            this.filter.sort = sorting.sort
-            this.filter.field = sorting.field
+            this.filter.sort = sorting ? sorting.sort : undefined
+            this.filter.field = sorting ? sorting.field : undefined
 
             events.$on('sortingAndPreview-open', () => {
                 this.isVisible = true
@@ -137,23 +141,19 @@
     }
 }
 
-.filePreviewFixed {
-    position: fixed !important;
-    display: flex;
-}
-
 .menu-option {
     display: flex;
 
     .icon {
         margin-right: 20px;
-        line-height: 0;
-        .alphabet {
-            svg {
-                fill: red !important;
-                stroke: red !important;
+        line-height: 0; 
+        .aplhabet-icon {
+            /deep/line,
+            /deep/polyline {
+                stroke:$text ;
             }
         }
+            
     }
 
     .text-label {
@@ -214,12 +214,12 @@
             }
 
             path,
-            line,
-            polyline,
+            /deep/line,
+            /deep/polyline,
             rect,
             circle,
             polygon {
-                stroke: $theme;
+                stroke: $theme !important; 
             }
         }
     }
@@ -237,9 +237,18 @@
             .menu-option {
                 color: $dark_mode_text_primary;
 
+                .icon {
+                    .aplhabet-icon {
+                        /deep/line,
+                        /deep/polyline {
+                            stroke:$dark_mode_text_primary ;
+                        }
+                    }
+                }
+
                 &:hover {
                     background: rgba($theme, 0.1);
-                }
+                }           
             }
         }
     }

resources/js/components/FilesView/ToolbarButton.vue

@@ -20,6 +20,25 @@
     <grid-icon v-if="source === 'th'" size="19"></grid-icon>
     <link-icon v-if="source === 'share'" size="19"></link-icon>
     <x-icon v-if="source === 'close'" size="19"></x-icon>
+
+    <svg v-if="source === 'preview-sorting'" size="19"
+      width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+          <g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
+              <g id="Toolbar" transform="translate(331.000000, 19.000000)">
+                  <g id="Tools" transform="translate(581.000000, 9.000000)">
+                      <g id="sort-icon" transform="translate(181.000000, 1.000000)">
+                          <rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
+                          <rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
+                          <line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
+                          <line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
+                          <line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
+                      </g>
+                  </g>
+              </g>
+          </g>
+      </g>
+  </svg>
   </button>
 </template>