v1.5-alpha.1

resources/js/components/FilesView/ToolbarButton.vue

@@ -1,18 +1,36 @@
 <template>
     <button class="button" :title="action">
-        <FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
+        <corner-down-right-icon v-if="source === 'move'" size="19"></corner-down-right-icon>
+        <folder-plus-icon v-if="source === 'folder-plus'" size="19"></folder-plus-icon>
+        <trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
+        <list-icon v-if="source === 'th-list'" size="19"></list-icon>
+        <info-icon v-if="source === 'info'" size="19"></info-icon>
+        <grid-icon v-if="source === 'th'" size="19"></grid-icon>
+        <link-icon v-if="source === 'share'" size="19"></link-icon>
     </button>
 </template>
 
 <script>
+    import {FolderPlusIcon, Trash2Icon, GridIcon, ListIcon, InfoIcon, CornerDownRightIcon, LinkIcon} from 'vue-feather-icons'
+
     export default {
         name: 'ToolbarButton',
-        props: ['source', 'action']
+        props: ['source', 'action'],
+        components: {
+            CornerDownRightIcon,
+            FolderPlusIcon,
+            Trash2Icon,
+            ListIcon,
+            GridIcon,
+            InfoIcon,
+            LinkIcon,
+        },
     }
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button {
         height: 42px;
@@ -22,42 +40,36 @@
         align-items: center;
         justify-content: center;
         padding: 0;
-        background: $light_background;
         text-align: center;
         cursor: pointer;
         white-space: nowrap;
         outline: none;
         border: none;
-
-        .icon {
-            @include font-size(16);
-        }
+        @include transition(150ms);
+        background: transparent;
 
         &:hover {
-            background: rgba($theme, .1);
+            background: $light_background;
 
-            /deep/ svg path {
-                @include transition;
-                fill: $theme;
-            }
-        }
-
-        &.active {
-            background: rgba($theme, .1);
-
-            /deep/ svg path {
-                fill: $theme;
+            path, line, polyline, rect, circle {
+                @include transition(150ms);
+                stroke: $theme;
             }
         }
     }
 
     @media (prefers-color-scheme: dark) {
-        .button {
-            background: $dark_mode_foreground;
-        }
 
-        .icon path {
-            fill: $dark_mode_text_primary;
+        .button {
+            background: transparent;
+
+            &:hover {
+                background: $dark_mode_foreground;
+            }
+
+            path, line, polyline, rect, circle {
+                stroke: $dark_mode_text_primary;
+            }
         }
     }
 </style>