custom color theme part 1

2026-04-18 00:02:15 +00:00 · 2021-03-20 10:25:10 +01:00
parent aa51484303
commit cff7cd6b32
44 changed files with 994 additions and 417 deletions
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -47,18 +47,6 @@
            transform: scale(0.95);
        }

-        &.theme {
-            background: rgba($theme, .1);
-
-            .content {
-                color: $theme;
-            }
-
-            polyline, path {
-                stroke: $theme;
-            }
-        }
-
        &.theme-solid {
            background: $theme;

--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -227,20 +227,6 @@ export default {
    /deep/ .label {
        color: $text !important;
    }
-
-    /deep/ .preview-sorting {
-        path, line, polyline, rect, circle {
-            stroke: $text !important;
-        }
-    }
-
-    &:hover {
-        /deep/ .preview-sorting {
-            path, line, polyline, rect, circle {
-                stroke: $theme !important;
-            }
-        }
-    }
 }

 .toolbar-wrapper {
@@ -348,22 +334,9 @@ export default {
        margin-left: 5px;

        &.active {
-            /deep/ svg {
-                line,
-                circle,
-                rect {
-                    stroke: $theme;
-                }
-            }

            &.preview-sorting {
                background: $light_background;
-
-                /deep/ .preview-sorting {
-                    path, line, polyline, rect, circle {
-                        stroke: $theme !important;
-                    }
-                }
            }
        }

--- a/resources/js/components/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/FilesView/FileInfoPanel.vue
@@ -15,7 +15,7 @@
                </div>
                <div class="file-info">
                    <span ref="name" class="name">{{ fileInfoDetail[0].name }}</span>
-                    <span class="mimetype" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
+                    <span class="mimetype text-theme" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
                </div>
            </div>
        </div>
@@ -180,7 +180,6 @@
            .mimetype {
                @include font-size(12);
                font-weight: 600;
-                color: $theme;
                display: block;
            }
        }
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -21,7 +21,7 @@
            <!--Thumbnail for item-->
            <div class="icon-item">
                <!--If is file or image, then link item-->
-                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
+                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
                    {{ item.mimetype | limitCharacters }}
                </span>

@@ -32,7 +32,7 @@
                <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>

                 <!--Else show only folder icon-->
-                <FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder" />
+                <FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder svg-color-theme" />
            </div>

            <!--Name-->
@@ -44,12 +44,12 @@
                <div class="item-info">
                    <!--Shared Icon-->
                    <div v-if="$checkPermission('master') && item.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon"></link-icon>
+                        <link-icon size="12" class="shared-icon text-theme"></link-icon>
                    </div>

                    <!--Participant owner Icon-->
                    <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+                        <user-plus-icon size="12" class="shared-icon text-theme"></user-plus-icon>
                    </div>

                    <!--Filesize and timestamp-->
@@ -401,7 +401,7 @@ export default {
                path,
                circle,
                line {
-                    stroke: $theme;
+                    color: inherit;
                }
            }
        }
@@ -481,7 +481,6 @@ export default {
            text-align: center;
            left: 0;
            right: 0;
-            color: $theme;
            font-weight: 600;
            user-select: none;
            max-width: 50px;
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -84,12 +84,6 @@
    }
 }

-.default-color {
-    path {
-        fill: $theme !important;
-    }
-}
-
 .folder-icon {

    path {
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -1,65 +1,68 @@
 <template>
-  <button class="button" :title="action">
+  <button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
    <corner-down-right-icon
-      v-if="source === 'move'"
-      size="19"
-    ></corner-down-right-icon>
+        v-if="source === 'move'"
+        size="19"
+        class="hover-text-theme"
+    />
    <download-cloud-icon
-      v-if="source === 'download'"
-      size="19"
-    ></download-cloud-icon>
+        v-if="source === 'download'"
+        size="19"
+        class="hover-text-theme"
+    />
    <folder-plus-icon
-      v-if="source === 'folder-plus'"
-      size="19"
-    ></folder-plus-icon>
-    <edit-2-icon v-if="source === 'rename'" size="19"></edit-2-icon>
-    <printer-icon v-if="source === 'print'" size="19"></printer-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>
-    <x-icon v-if="source === 'close'" size="19"></x-icon>
-    <cloud-off-icon v-if="source === 'shared-off'" size="19"></cloud-off-icon>
-    <sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"></sorting-and-preview-icon>
+        v-if="source === 'folder-plus'"
+        size="19"
+        class="hover-text-theme"
+    />
+    <edit-2-icon v-if="source === 'rename'" size="19" />
+    <printer-icon v-if="source === 'print'" size="19" />
+    <trash-2-icon v-if="source === 'trash'" size="19" />
+    <list-icon v-if="source === 'th-list'" size="19" />
+    <info-icon v-if="source === 'info'" size="19" />
+    <grid-icon v-if="source === 'th'" size="19" />
+    <link-icon v-if="source === 'share'" size="19" />
+    <x-icon v-if="source === 'close'" size="19" />
+    <cloud-off-icon v-if="source === 'shared-off'" size="19" />
+    <sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"/>
  </button>
 </template>

 <script>
 import {
-  FolderPlusIcon,
-  Trash2Icon,
-  GridIcon,
-  ListIcon,
-  Edit2Icon,
-  InfoIcon,
-  CornerDownRightIcon,
-  LinkIcon,
-  DownloadCloudIcon,
-  XIcon,
-  PrinterIcon,
-  CloudOffIcon,
+    FolderPlusIcon,
+    Trash2Icon,
+    GridIcon,
+    ListIcon,
+    Edit2Icon,
+    InfoIcon,
+    CornerDownRightIcon,
+    LinkIcon,
+    DownloadCloudIcon,
+    XIcon,
+    PrinterIcon,
+    CloudOffIcon,
 } from "vue-feather-icons";
 import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'

 export default {
-  name: "ToolbarButton",
-  props: ["source", "action"],
-  components: {
-    SortingAndPreviewIcon,
-    CornerDownRightIcon,
-    DownloadCloudIcon,
-    FolderPlusIcon,
-    CloudOffIcon,
-    PrinterIcon,
-    Trash2Icon,
-    Edit2Icon,
-    ListIcon,
-    XIcon,
-    GridIcon,
-    InfoIcon,
-    LinkIcon,
-  },
+    name: "ToolbarButton",
+    props: ["source", "action"],
+    components: {
+        SortingAndPreviewIcon,
+        CornerDownRightIcon,
+        DownloadCloudIcon,
+        FolderPlusIcon,
+        CloudOffIcon,
+        PrinterIcon,
+        Trash2Icon,
+        Edit2Icon,
+        ListIcon,
+        XIcon,
+        GridIcon,
+        InfoIcon,
+        LinkIcon,
+    },
 };
 </script>

@@ -68,65 +71,70 @@ export default {
@import "@assets/vuefilemanager/_mixins";

 .preview-sorting {
-  svg {
-    width: 19px;
-    height: 19px;
-  }
+    svg {
+        width: 19px;
+        height: 19px;
+
+    }
+
+    rect, line {
+        @include transition(150ms);
+    }
 }

 .button {
-  height: 42px;
-  width: 42px;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  text-align: center;
-  cursor: pointer;
-  white-space: nowrap;
-  outline: none;
-  border: none;
-  @include transition(150ms);
-  background: transparent;
+    height: 42px;
+    width: 42px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    text-align: center;
+    cursor: pointer;
+    white-space: nowrap;
+    outline: none;
+    border: none;
+    @include transition(150ms);
+    background: transparent;
+
+    svg {
+        color: inherit;

-  &:hover {
-     .preview-sorting {
        path, line, polyline, rect, circle {
-          stroke: $theme !important;
-      }
+            color: inherit;
+        }
    }
-  }

-  &:hover {
-    background: $light_background;
+    &:hover {
+        background: $light_background;

-    path,
-    line,
-    polyline,
-    rect,
-    circle {
-      @include transition(150ms);
-      stroke: $theme;
+        path,
+        line,
+        polyline,
+        rect,
+        circle {
+            @include transition(150ms);
+            color: inherit;
+        }
    }
-  }
 }

@media (prefers-color-scheme: dark) {
-  .button {
-    background: transparent;
+    .button {
+        background: transparent;

-    &:hover {
-      background: $dark_mode_foreground;
-    }
+        &:hover {
+            background: $dark_mode_foreground;
+        }

-    path,
-    line,
-    polyline,
-    rect,
-    circle {
-      stroke: $dark_mode_text_primary;
+        path,
+        line,
+        polyline,
+        rect,
+        circle {
+            stroke: $dark_mode_text_primary;
+        }
    }
-  }
 }
 </style>
--- a/resources/js/components/FilesView/ToolbarButtonUpload.vue
+++ b/resources/js/components/FilesView/ToolbarButtonUpload.vue
@@ -1,6 +1,6 @@
 <template>
-    <label label="file" class="button file-input">
-        <upload-cloud-icon size="17"></upload-cloud-icon>
+    <label label="file" class="button hover-text-theme file-input">
+        <upload-cloud-icon size="17" />
        <input
                @change="emmitFiles"
                v-show="false"
@@ -47,12 +47,24 @@
        outline: none;
        border: none;

+        svg {
+            color: inherit;
+
+            path, line, polyline, rect, circle {
+                color: inherit;
+            }
+        }
+
        &:hover {
            background: $light_background;

-            path, line, polyline, rect, circle {
+            path,
+            line,
+            polyline,
+            rect,
+            circle {
                @include transition(150ms);
-                stroke: $theme;
+                color: inherit;
            }
        }
    }