coloring buttons line

Author: lorens-osman-dev

src/createFamily/buttons.ts

@@ -1,4 +1,4 @@
-import { App, TFile, setTooltip, setIcon, addIcon, MarkdownView, Editor, Platform } from "obsidian";
+import { App, TFile, setTooltip, setIcon, addIcon, MarkdownView, Editor, Platform, TFolder } from "obsidian";
 import familyModal from "./familyModal";
 import U from '../util/U';
 import deleteActiveNoteModal from "./deleteActiveNoteModal";
@@ -108,6 +108,19 @@ function appendOrRemoveChild(appObject: App, file: TFile, obsidianContainer: any
         //@ts-ignore
         buttonsLineContainer.style.backgroundColor = Vars.buttonsLineContainerBG_clusters
 
+        // check if the file and folder in same time
+        const selfName = file.basename
+        const siblings = file.parent?.children
+        const isThereChildrenFolder = siblings?.find((item) => item instanceof TFolder && item.name === selfName) as TFolder
+        if (isThereChildrenFolder) {
+            if (!file.basename.endsWith("-cluster")) {
+                buttonsLineContainer.addClasses(["mergeFileFolder"])
+            }
+            if (file.basename.endsWith("-cluster")) {
+                buttonsLineContainer.addClasses(["mergeFileFolderCluster"])
+            }
+        }
+
         const extraButtonsContainer = document.createElement('div');
         extraButtonsContainer.addClasses(["extraButtonsContainer"])
         //@ts-ignore

src/style/parts/buttons.scss

@@ -61,6 +61,14 @@
 
 
 //-BUTTONS-------------------*/
+.mergeFileFolder {
+  background-color: hsl(55deg 50% 30% / 30%) !important;
+}
+
+.mergeFileFolderCluster {
+  background-color: hsl(155deg 50% 30% / 30%) !important;
+}
+
 .buttonsLineContainer {
   position: relative;
   display: flex;

src/style/parts/variables.scss

@@ -18,7 +18,7 @@
   --background-menu-orphan: hsl(303deg 50% 30%/ 40%) !important;
   --background-menu-orphan-selected: hsl(303deg 50% 30%/ 80%) !important;
   //- buttons container colors
-  --background-button-container-clusters: hsl(154.99deg 50% 30%/ 30%);
+  --background-button-container-clusters: hsl(220deg 50% 30% / 30%);
   --background-button-container-orphans: hsl(303deg 50% 30%/ 30%);
   //- extra buttons container colors
   --background-extra-button-container-clusters: hsl(154.99deg 50% 30%/ 30%);
@@ -54,7 +54,7 @@
   --background-menu-orphan: hsl(303deg 50% 30%/ 40%) !important;
   --background-menu-orphan-selected: hsl(303deg 50% 30%/ 80%) !important;
   //- buttons container colors
-  --background-button-container-clusters: hsl(155 30% 50%);
+  --background-button-container-clusters: hsl(220deg 30% 50%);
   --background-button-container-orphans: hsl(303deg 30% 50%);
   //- extra buttons container colors
   --background-extra-button-container-clusters: hsl(155 30% 50%);