diff --git a/README.md b/README.md index 140e50c..784de21 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,28 @@ # Cluster plugin mainly designed to simplify the process of note clustering on mobile devices and work well on PCs ether. - +### Note Clustering +Note clustering is a way to create a hierarchy or structure among your notes, making it easier to navigate and understand the relationships between them. +**Cluster Plugin** provides commands, in-note buttons, and ribbon actions to make clustering process easier on mobile devices and work well on PCs ether. +**Simple Example:** +Imagine you have notes about different animals. You could create `Animals cluster` like: +- Animals (cluster) + - Mammals (first generation note) + - Dogs (second generation note) + - Cats (second generation note) + - Whales (second generation note) + + - Birds (first generation note) + - Eagles (second generation note) + - Penguins (second generation note) + - Owls (second generation note) + +1. From ribbon or using "New cluster" command create "Animals" cluster . +2. From new opened note click "Create Son" with name "Mammals" +3. From new opened "Mammals" note click "Create Son" with name "Dogs" +4. From new opened "Dogs" note click "Create Brother" with name "Cats", +alternatively you go back to "Mammals" note click "Create Son" with name "Cats" +5. Continue ... ### 🤩🪄 Features diff --git a/main.ts b/main.ts index 712739a..b3014f6 100644 --- a/main.ts +++ b/main.ts @@ -8,7 +8,7 @@ export default class AdvancedNewFilePlugin extends Plugin { actions = new Map(); async onload() { - console.log("loading plugin"); + console.log("loading Cluster plugin"); //-Check For Advanced URI _Plugin @@ -16,7 +16,7 @@ export default class AdvancedNewFilePlugin extends Plugin { //- Commands this.addCommand({ id: "New-Brother", - name: "new_brother", + name: "New brother", callback: () => { this.createClusterFolder(); this.checkForAdvancedURI_Plugin(); @@ -25,7 +25,7 @@ export default class AdvancedNewFilePlugin extends Plugin { }); this.addCommand({ id: "New-Son", - name: "new_son", + name: "New son", callback: () => { this.createClusterFolder(); this.checkForAdvancedURI_Plugin(); @@ -34,7 +34,7 @@ export default class AdvancedNewFilePlugin extends Plugin { }); this.addCommand({ id: "New-Cluster", - name: "new_cluster", + name: "new cluster", callback: () => { this.createClusterFolder(); this.checkForAdvancedURI_Plugin(); @@ -43,7 +43,7 @@ export default class AdvancedNewFilePlugin extends Plugin { }); this.addCommand({ id: "Delete-Active-Note", - name: "delete_active_note", + name: "Delete active note", callback: () => { this.createClusterFolder(); this.checkForAdvancedURI_Plugin(); @@ -71,14 +71,14 @@ export default class AdvancedNewFilePlugin extends Plugin { //- createClusterFolder async createClusterFolder() { try { - const folderExists = await this.app.vault.adapter.exists("/[CLUSTERS]"); - if (!folderExists) await this.app.vault.createFolder("/[CLUSTERS]"); + const folderExists = await this.app.vault.adapter.exists("/CLUSTERS"); + if (!folderExists) await this.app.vault.createFolder("/CLUSTERS"); //@ts-ignore - const isOtherClusters = this.app.vault.getRoot().children?.find((item : any) => item instanceof TFolder && item.name =="[CLUSTERS]").children.length + const isOtherClusters = this.app.vault.getRoot().children?.find((item : any) => item instanceof TFolder && item.name =="CLUSTERS").children.length if(isOtherClusters == 0){ - const fileExists = await this.app.vault.adapter.exists("/[CLUSTERS]/First-cluster.md"); + const fileExists = await this.app.vault.adapter.exists("/CLUSTERS/First-cluster.md"); - if (!fileExists) await this.app.vault.create("/[CLUSTERS]/first-cluster.md", firstClusterTemplate); + if (!fileExists) await this.app.vault.create("/CLUSTERS/first-cluster.md", firstClusterTemplate); } @@ -102,6 +102,6 @@ Create Son, Create Brother links to work } onunload() { - console.log("unloading plugin"); + console.log("unloading Cluster plugin"); } } diff --git a/src/createFamily/deleteActiveNoteModal.ts b/src/createFamily/deleteActiveNoteModal.ts index 1d8adb6..9762359 100644 --- a/src/createFamily/deleteActiveNoteModal.ts +++ b/src/createFamily/deleteActiveNoteModal.ts @@ -16,7 +16,7 @@ export default class deleteActiveNoteModal extends Modal { this.mode = mode; //-Create input - const getActiveFile = app.workspace.getActiveFile(); + const getActiveFile = this.app.workspace.getActiveFile(); this.inputEl = document.createElement("input"); this.inputEl.type = "text"; @@ -61,7 +61,7 @@ export default class deleteActiveNoteModal extends Modal { evt.preventDefault(); // get current active file - const getActiveFile = app.workspace.getActiveFile(); + const getActiveFile = this.app.workspace.getActiveFile(); //parent folder info @@ -83,7 +83,6 @@ export default class deleteActiveNoteModal extends Modal { //delete current active file + delete its Sons await this.app.vault.adapter.remove(getActiveFile!.path) await this.app.vault.adapter.rmdir(theRelatedSonsFolder.path , true) - console.log(theRelatedSonsFolder) if(theContainingFolder == 2){ await this.app.vault.adapter.rmdir(theContainingFolderPath , true) } diff --git a/src/createFamily/familyModal.ts b/src/createFamily/familyModal.ts index 59632b2..fd11967 100644 --- a/src/createFamily/familyModal.ts +++ b/src/createFamily/familyModal.ts @@ -6,6 +6,7 @@ import { templates , clusterTemplate} from "./templates"; export default class familyModal extends Modal { + app: App; mode: NewFileLocation; folder: TFolder; newDirectoryPath: string; @@ -15,6 +16,7 @@ export default class familyModal extends Modal { createType: string; constructor(app: App, mode: NewFileLocation, createType: string) { super(app); + this.app = app; this.createType = createType; this.mode = mode; @@ -28,7 +30,7 @@ export default class familyModal extends Modal { this.modalEl.className = 'prompt'; //svg and placeholders - let getActiveFile = app.workspace.getActiveFile() + let getActiveFile = this.app.workspace.getActiveFile() if(getActiveFile === null){ @@ -71,17 +73,15 @@ export default class familyModal extends Modal { if (evt.key === 'Enter') { // prevent enter after note creation evt.preventDefault(); - - console.log(evt) // get current active file - const getActiveFile = app.workspace.getActiveFile(); + const getActiveFile = this.app.workspace.getActiveFile(); const currentActiveFileName = getActiveFile?.basename; //-make clusterSon to the current active file if (this.createType == "newSon") { - if(getActiveFile?.path.startsWith("[CLUSTERS]")){ + if(getActiveFile?.path.startsWith("CLUSTERS")){ if(getActiveFile.basename.endsWith("-cluster") ){ if( (getActiveFile.path.match(/\//g) || []).length == 1 ){ const result = await templates(getActiveFile,"clusterSon"); @@ -134,7 +134,7 @@ export default class familyModal extends Modal { } //-make Brother to the current active file else if (this.createType == "newBrother") { - if(getActiveFile!.path.startsWith("[CLUSTERS]")){ + if(getActiveFile!.path.startsWith("CLUSTERS")){ // the next if statement to prevent make brother to a cluster if (currentActiveFileName!.endsWith("-cluster")) { new Notice(`You cant make Brother to a cluster.\nCreate new cluster instead`); @@ -155,7 +155,7 @@ export default class familyModal extends Modal { const rootChildren = this.app.vault.getRoot().children; - const ClustersFolder = rootChildren.find((item: any) => item instanceof TFolder && item.name == "[CLUSTERS]"); + const ClustersFolder = rootChildren.find((item: any) => item instanceof TFolder && item.name == "CLUSTERS"); // @ts-ignore this.setFolder(ClustersFolder, ""); const clusterName = `${this.inputEl.value}-cluster`; diff --git a/src/createFamily/svg.ts b/src/createFamily/svg.ts index e6a3e71..686efd3 100644 --- a/src/createFamily/svg.ts +++ b/src/createFamily/svg.ts @@ -1,3 +1,5 @@ +import { addIcon, setIcon } from "obsidian"; + //@ts-ignore export default function svgElements(){ @@ -8,40 +10,7 @@ export default function svgElements(){ con.classList.add("inputMsgCon","son"); // 2 - SVG Element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("width", "48"); - svg.setAttribute("height", "48"); - svg.setAttribute("viewBox", "0 0 24 24"); - svg.setAttribute("fill", "none"); - svg.setAttribute("stroke", "currentColor"); - svg.setAttribute("stroke-width", "1.25"); - svg.setAttribute("stroke-linecap", "round"); - svg.setAttribute("stroke-linejoin", "round"); - svg.classList.add("lucide", "lucide-baby", "svg","lorens"); - - // Path 1 - const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path1.setAttribute("d", "M9 12h.01"); - svg.appendChild(path1); - - // Path 2 - const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path2.setAttribute("d", "M15 12h.01"); - svg.appendChild(path2); - - // Path 3 - const path3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path3.setAttribute("d", "M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"); - svg.appendChild(path3); - - // Path 4 - const path4 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path4.setAttribute("d", "M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"); - svg.appendChild(path4); - - // Append SVG to the container - con.appendChild(svg); + setIcon(con, 'baby'); // 3 - Text Element const text = document.createElement('div'); @@ -59,44 +28,7 @@ export default function svgElements(){ con.classList.add("inputMsgCon","brother"); // 2 - SVG Element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("width", "48"); - svg.setAttribute("height", "48"); - svg.setAttribute("viewBox", "0 0 24 24"); - svg.setAttribute("fill", "none"); - svg.setAttribute("stroke", "currentColor"); - svg.setAttribute("stroke-width", "1"); - svg.setAttribute("stroke-linecap", "round"); - svg.setAttribute("stroke-linejoin", "round"); - svg.classList.add("lucide", "lucide-git-compare", "svg"); - - // Circle 1 - const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - circle1.setAttribute("cx", "18"); - circle1.setAttribute("cy", "18"); - circle1.setAttribute("r", "3"); - svg.appendChild(circle1); - - // Circle 2 - const circle2 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - circle2.setAttribute("cx", "6"); - circle2.setAttribute("cy", "6"); - circle2.setAttribute("r", "3"); - svg.appendChild(circle2); - - // Path 1 - const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path1.setAttribute("d", "M13 6h3a2 2 0 0 1 2 2v7"); - svg.appendChild(path1); - - // Path 2 - const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path2.setAttribute("d", "M11 18H8a2 2 0 0 1-2-2V9"); - svg.appendChild(path2); - - // Append SVG to the container - con.appendChild(svg); + setIcon(con , "git-compare") // 3 - Text Element const text = document.createElement('div'); @@ -114,38 +46,16 @@ export default function svgElements(){ con.classList.add("inputMsgCon","cluster"); // 2 - SVG Element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("viewBox", "0 0 16 16"); - svg.setAttribute("class", "clusterSvg"); - svg.setAttribute("version", "1.1"); - - // G Elements - const g1 = document.createElementNS("http://www.w3.org/2000/svg", "g"); - g1.setAttribute("id", "SVGRepo_bgCarrier"); - g1.setAttribute("stroke-width", "0"); - - const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g"); - g2.setAttribute("id", "SVGRepo_tracerCarrier"); - g2.setAttribute("stroke-linecap", "round"); - g2.setAttribute("stroke-linejoin", "round"); - - const g3 = document.createElementNS("http://www.w3.org/2000/svg", "g"); - g3.setAttribute("id", "SVGRepo_iconCarrier"); - - // Path 1 - const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path1.setAttribute("d", "M14 12c-0.372 0.011-0.716 0.121-1.008 0.305l-2.212-2.155c0.434-0.547 0.708-1.239 0.74-1.993l1.57-0.157c0.225 0.556 0.76 0.941 1.385 0.941 0.823 0 1.49-0.667 1.49-1.49s-0.667-1.49-1.49-1.49c-0.749 0-1.368 0.552-1.474 1.271l-1.591 0.128c-0.224-1.136-0.973-2.060-1.978-2.521l0.308-0.839h0.26c1.099-0.008 1.986-0.9 1.986-2 0-1.105-0.895-2-2-2s-2 0.895-2 2c0 0.742 0.404 1.39 1.004 1.735l-0.27 0.855c-0.227-0.054-0.487-0.084-0.754-0.084-0.83 0-1.59 0.296-2.181 0.789l-2.994-3.004c0.141-0.224 0.225-0.497 0.225-0.79 0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5c0 0.823 0.663 1.492 1.484 1.5 0.281-0.001 0.544-0.079 0.767-0.214l2.993 3.004c-0.474 0.588-0.76 1.344-0.76 2.168 0 0.015 0 0.030 0 0.045-0 0.058-0 0.108-0 0.158l-0.66 0.11c-0.313-0.72-1.019-1.214-1.839-1.214-1.105 0-2 0.895-2 2s0.895 2 2 2c1.105 0 2-0.895 2-2 0-0.020-0-0.039-0.001-0.059l0.63-0.097c0.242 0.843 0.768 1.538 1.466 1.992l-0.556 1.188c-0.161-0.049-0.347-0.078-0.539-0.080-0.006-0-0.012-0-0.017-0-1.105 0-2 0.895-2 2s0.895 2 2 2c1.105 0 2-0.895 2-2 0-0.64-0.301-1.211-0.769-1.577l0.566-1.153c0.364 0.146 0.787 0.231 1.229 0.231 0.847 0 1.621-0.311 2.216-0.824l2.176 2.124c-0.25 0.33-0.4 0.748-0.4 1.2 0 1.105 0.895 2 2 2s2-0.895 2-2c0-1.105-0.895-2-2-2 0 0 0 0 0 0zM5 15c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1zM8 10.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5c1.381 0 2.5 1.119 2.5 2.5s-1.119 2.5-2.5 2.5z"); - - // Append elements - g3.appendChild(path1); - svg.appendChild(g1); - svg.appendChild(g2); - svg.appendChild(g3); - - // Append SVG to the container - con.appendChild(svg); - + addIcon("cluster-svg", ` + + + + + + + `); + + setIcon(con ,"cluster-svg") // 3 - Text Element const text = document.createElement('div'); text.innerText = "Create Cluster"; @@ -157,56 +67,12 @@ export default function svgElements(){ return con; }, delete:function(){ - // 1 - Container Element + // 1 - Container Element const con = document.createElement('div'); con.classList.add("inputMsgCon","delete"); // 2 - SVG Element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("width", "24"); - svg.setAttribute("height", "24"); - svg.setAttribute("viewBox", "0 0 24 24"); - svg.setAttribute("fill", "none"); - svg.setAttribute("stroke", "currentColor"); - svg.setAttribute("stroke-width", "2"); - svg.setAttribute("stroke-linecap", "round"); - svg.setAttribute("stroke-linejoin", "round"); - svg.classList.add("lucide", "lucide-trash-2"); - - // Path 1 - const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path1.setAttribute("d", "M3 6h18"); - svg.appendChild(path1); - - // Path 2 - const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path2.setAttribute("d", "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"); - svg.appendChild(path2); - - // Path 3 - const path3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path3.setAttribute("d", "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"); - svg.appendChild(path3); - - // Line 1 - const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line"); - line1.setAttribute("x1", "10"); - line1.setAttribute("x2", "10"); - line1.setAttribute("y1", "11"); - line1.setAttribute("y2", "17"); - svg.appendChild(line1); - - // Line 2 - const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line"); - line2.setAttribute("x1", "14"); - line2.setAttribute("x2", "14"); - line2.setAttribute("y1", "11"); - line2.setAttribute("y2", "17"); - svg.appendChild(line2); - - // Append SVG to the container - con.appendChild(svg); + setIcon(con ,"trash-2") // 3 - Text Element const text = document.createElement('div'); @@ -224,37 +90,7 @@ export default function svgElements(){ con.classList.add("inputMsgCon","noThing"); // 2 - SVG Element - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); - svg.setAttribute("width", "24"); - svg.setAttribute("height", "24"); - svg.setAttribute("viewBox", "0 0 24 24"); - svg.setAttribute("fill", "none"); - svg.setAttribute("stroke", "currentColor"); - svg.setAttribute("stroke-width", "2"); - svg.setAttribute("stroke-linecap", "round"); - svg.setAttribute("stroke-linejoin", "round"); - svg.classList.add("lucide", "lucide-x-circle"); - - // Circle - const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - circle.setAttribute("cx", "12"); - circle.setAttribute("cy", "12"); - circle.setAttribute("r", "10"); - svg.appendChild(circle); - - // Path 1 - const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path1.setAttribute("d", "m15 9-6 6"); - svg.appendChild(path1); - - // Path 2 - const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path2.setAttribute("d", "m9 9 6 6"); - svg.appendChild(path2); - - // Append SVG to the container - con.appendChild(svg); + setIcon(con ,"x-circle") return con; }, diff --git a/src/createFamily/templates.ts b/src/createFamily/templates.ts index 9d92131..8d0eba5 100644 --- a/src/createFamily/templates.ts +++ b/src/createFamily/templates.ts @@ -3,10 +3,10 @@ import { TFile } from "obsidian"; import IF from "./bigIF"; const commandsNames = { - newSon : "new_son", - newBrother :"new_brother", - newCluster :"new_cluster", - deleteActiveNote :"delete_active_note" + newSon : "New son".replace(/ /g, "%20"), + newBrother :"New brother".replace(/ /g, "%20"), + newCluster :"New cluster".replace(/ /g, "%20"), + deleteActiveNote :"Delete active note".replace(/ /g, "%20") } export async function templates(activeFile: any ,type :string) { const result = { @@ -58,7 +58,7 @@ generation: ${generationFromActiveFilePath} IF.ELSE(() => { const frontmatterProperties = this.app.metadataCache.getFileCache(activeFile).frontmatter; - const clusterTagName = activeFile.path.slice(11).replace(/\/.*$/, '') + const clusterTagName = activeFile.path.slice(9).replace(/\/.*$/, '') const isClusterTagExist = frontmatterProperties?.tags.find((tag: string) => tag == `${clusterTagName}`) const activeFileParentLink = getActiveFileParentLink(activeFile) const sonFileParentLink = `[[${activeFile.path.slice(0, -3)}|${activeFile.basename}]]` @@ -99,7 +99,7 @@ generation: ${generationFromActiveFilePath+1} IF.ELSE(() => { const frontmatterProperties = this.app.metadataCache.getFileCache(activeFile).frontmatter; - const clusterTagName = activeFile.path.slice(11).replace(/\/.*$/, '') + const clusterTagName = activeFile.path.slice(9).replace(/\/.*$/, '') const isClusterTagExist = frontmatterProperties?.tags.find((tag: string) => tag == `${clusterTagName}`) const activeFileParentLink = getActiveFileParentLink(activeFile) const sonFileParentLink = `[[${activeFile.path.slice(0, -3)}|${activeFile.basename}]]` @@ -190,7 +190,29 @@ generation: 0 # Cluster plugin mainly designed to simplify the process of note clustering on mobile devices and work well on PCs ether. - +### Note Clustering +Note clustering is a way to create a hierarchy or structure among your notes, making it easier to navigate and understand the relationships between them. +**Cluster Plugin** provides commands, in-note buttons, and ribbon actions to make clustering process easier on mobile devices and work well on PCs ether. +**Simple Example:** +Imagine you have notes about different animals. You could create "Animals cluster" like: +- Animals (cluster) + - Mammals (first generation note) + - Dogs (second generation note) + - Cats (second generation note) + - Whales (second generation note) + + - Birds (first generation note) + - Eagles (second generation note) + - Penguins (second generation note) + - Owls (second generation note) + + +1. From ribbon or using "New cluster" command create "Animals" cluster . +2. From new opened note click "Create Son" with name "Mammals" +3. From new opened "Mammals" note click "Create Son" with name "Dogs" +4. From new opened "Dogs" note click "Create Brother" with name "Cats", +alternatively you go back to "Mammals" note click "Create Son" with name "Cats" +5. Continue ... ### 🤩🪄 Features diff --git a/styles.css b/styles.css index b3ec1a3..a664488 100644 --- a/styles.css +++ b/styles.css @@ -1,18 +1,17 @@ - /* - PC FAMILY MODAL STYLES-------------------*/ .prompt:has(.brother), .prompt:has(.son), .prompt:has(.cluster), -.prompt:has(.delete){ - - - display: grid !important; - align-items: center !important; - grid-template-columns: 30% 70%; +.prompt:has(.delete) { + + + display: grid !important; + align-items: center !important; + grid-template-columns: 30% 70%; + + top: 30% !important; - top: 30% !important; - } @@ -20,135 +19,162 @@ .prompt:has(.son) .modal-content, .prompt:has(.cluster) .modal-content, .prompt:has(.delete) .modal-content, -.prompt:has(.noThing) .modal-content{ - - display: none +.prompt:has(.noThing) .modal-content { + display: none } + .prompt:has(.brother) .modal-close-button, .prompt:has(.son) .modal-close-button, .prompt:has(.cluster) .modal-close-button, .prompt:has(.delete) .modal-close-button, -.prompt:has(.noThing) .modal-close-button{ - - +.prompt:has(.noThing) .modal-close-button { + + top: 50%; transform: translateY(-50%); z-index: 1000; } - .prompt-input { - border: none !important; +.prompt-input { + border: none !important; } -.inputMsgCon{ - background-color: hsl(340.53deg 50% 30%); - display: grid; - grid-template-columns: 65px 1fr; - align-items: center; - font-size: var(--font-ui-medium); - font-weight: bold; - justify-items: center; - height: 57px; + +.inputMsgCon { + background-color: hsl(340.53deg 50% 30%); + display: grid; + grid-template-columns: 65px 1fr; + align-items: center; + font-size: var(--font-ui-medium); + font-weight: bold; + justify-items: center; + height: 57px; } -.brother{ - background-color: hsl(210.38deg 50% 30%) + +.brother { + background-color: hsl(210.38deg 50% 30%) } -.cluster{ - background-color:hsl(154.99deg 50% 30%) + +.cluster { + background-color: hsl(154.99deg 50% 30%) } -.delete{ - background-color:hsl(5, 83%, 42%) + +.delete { + background-color: hsl(5, 83%, 42%) } -.prompt:has(.noThing){ - display: grid; - border-radius: 0 !important; - grid-template-columns: 65px 1fr; - align-items: center; + +.prompt:has(.noThing) { + display: grid; + border-radius: 0 !important; + grid-template-columns: 65px 1fr; + align-items: center; } -.prompt:has(.noThing) .delMsg{ - padding-left: 0 !important; - + +.prompt:has(.noThing) .delMsg { + padding-left: 0 !important; + } -.noThing{ - background-color: var(--background-primary); + +.noThing { + background-color: var(--background-primary); } -.inputDelete{ - opacity: 0.0; - position: absolute; + +.inputDelete { + opacity: 0.0; + position: absolute; } -.delMsg{ - color:var(--text-faint); - padding-left: var(--size-4-6); + +.delMsg { + color: var(--text-faint); + padding-left: var(--size-4-6); } -.delMsg .delNoteNameMsg{ - color:hsl(5, 83%, 42%); - text-decoration: underline; - + +.delMsg .delNoteNameMsg { + color: hsl(5, 83%, 42%); + text-decoration: underline; + } -.prompt:has(.delMsg){ - height: 85px; +.prompt:has(.delMsg) { + height: 85px; } -.textMsg{ - justify-self: left; +.textMsg { + justify-self: left; } -.svg{ - text-align: center; - height: 40px; - width: 40px; + +.svg { + text-align: center; + height: 40px; + width: 40px; +} + +.inputMsgCon .lucide-baby, +.inputMsgCon .lucide-git-compare, +.inputMsgCon .lucide-trash-2, +.inputMsgCon .lucide-x-circle, +.inputMsgCon .cluster-svg { + text-align: center; + height: 40px !important; + width: 40px !important; + } -.clusterSvg{ - fill: var(--text-normal) !important; - transform: rotate(-16deg); + +.cluster-svg { + fill: #dcddde00 !important; } + /* - PHONE FAMILY MODAL STYLES-------------------*/ .is-phone .prompt { - display: block !important; + display: block !important; } -.is-phone .prompt:has(.delMsg){ - height: inherit; + +.is-phone .prompt:has(.delMsg) { + height: inherit; } -.is-phone .delMsg{ - padding: var(--size-4-4); +.is-phone .delMsg { + padding: var(--size-4-4); } -.is-phone .textMsg{ - margin-left: -70px; - justify-self: center; - font-size: var(--size-4-5); + +.is-phone .textMsg { + margin-left: -70px; + justify-self: center; + font-size: var(--size-4-5); } + .is-phone .prompt:has(.son) .modal-close-button, .is-phone .prompt:has(.cluster) .modal-close-button, .is-phone .prompt:has(.brother) .modal-close-button, .is-phone .prompt:has(.delete) .modal-close-button, -.is-phone .prompt:has(.noThing) .modal-close-button{ - - - top: 0; - right: 0; - color:var(--text-normal) ; - background-color: hsl(0deg 0% 55.12% / 36%); - height: 57px; - width: 57px; - transform: translateY(0%); +.is-phone .prompt:has(.noThing) .modal-close-button { + + + top: 0; + right: 0; + color: var(--text-normal); + background-color: hsl(0deg 0% 55.12% / 36%); + height: 57px; + width: 57px; + transform: translateY(0%); } + .is-phone .prompt:has(.son) .modal-close-button::before, .is-phone .prompt:has(.cluster) .modal-close-button::before, .is-phone .prompt:has(.brother) .modal-close-button::before, .is-phone .prompt:has(.delete) .modal-close-button::before, -.is-phone .prompt:has(.noThing) .modal-close-button::before{ - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +.is-phone .prompt:has(.noThing) .modal-close-button::before { + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } @@ -156,208 +182,235 @@ /* -BUTTONS STYLES-------------------*/ /* *new son*/ -.table-cell-wrapper:has(a[href*="new_son"]) , -th:has(a[href*="new_son"]) { - padding: 0 !important; - background: hsl(341, 50%, 30%) !important; -} -a[href*="new_son"] { - display: grid; - height: 100%; - width: 100%; - color: var(--text-normal); - background-color: none; - text-decoration-line: none !important; - background-image: none !important; - background-color: none !important; - align-content: center; - justify-items: center; - padding: 2px 10px; +.table-cell-wrapper:has(a[href*="New%20son"]), +th:has(a[href*="New%20son"]) { + padding: 0 !important; + background: hsl(341, 50%, 30%) !important; +} + +a[href*="New%20son"] { + display: grid; + height: 100%; + width: 100%; + color: var(--text-normal); + background-color: none; + text-decoration-line: none !important; + background-image: none !important; + background-color: none !important; + align-content: center; + justify-items: center; + padding: 2px 10px; } /* *new Brother*/ -.table-cell-wrapper:has(a[href*="new_brother"]), -th:has(a[href*="new_brother"]) { - padding: 0 !important; - background: hsl(210, 50%, 30%) !important -} -a[href*="new_brother"] { - display: grid; - height: 100%; - width: 100%; - color: var(--text-normal); - background-color: none; - text-decoration-line: none !important; - background-image: none !important; - background-color: none !important; - align-content: center; - justify-items: center; - padding: 2px 10px; +.table-cell-wrapper:has(a[href*="New%20brother"]), +th:has(a[href*="New%20brother"]) { + padding: 0 !important; + background: hsl(210, 50%, 30%) !important +} + +a[href*="New%20brother"] { + display: grid; + height: 100%; + width: 100%; + color: var(--text-normal); + background-color: none; + text-decoration-line: none !important; + background-image: none !important; + background-color: none !important; + align-content: center; + justify-items: center; + padding: 2px 10px; } /* *Delete*/ -.table-cell-wrapper:has(a[href*="delete_active_note"]) , -th:has(a[href*="delete_active_note"]) { - padding: 0 !important; - background: hsl(5, 83%, 42%) !important -} -a[href*="delete_active_note"] { - display: grid; - height: 100%; - width: 100%; - color: var(--text-normal); - background-color: none; - text-decoration-line: none !important; - background-image: none !important; - background-color: none !important; - align-content: center; - justify-items: center; - padding: 2px 10px; - -} - -.table-wrapper:has(.external-link) .table-row-btn , +.table-cell-wrapper:has(a[href*="Delete%20active%20note"]), +th:has(a[href*="Delete%20active%20note"]) { + padding: 0 !important; + background: hsl(5, 83%, 42%) !important +} + +a[href*="Delete%20active%20note"] { + display: grid; + height: 100%; + width: 100%; + color: var(--text-normal); + background-color: none; + text-decoration-line: none !important; + background-image: none !important; + background-color: none !important; + align-content: center; + justify-items: center; + padding: 2px 10px; + +} + +.table-wrapper:has(.external-link) .table-row-btn, .table-wrapper:has(.external-link) .table-col-btn, .table-wrapper:has(.external-link) .table-row-drag-handle, -.table-wrapper:has(.external-link) .table-col-drag-handle{ - display: none !important; +.table-wrapper:has(.external-link) .table-col-drag-handle { + display: none !important; - cursor: default !important; - pointer-events: none !important; - } + cursor: default !important; + pointer-events: none !important; +} /*- animation */ -.inputMsgCon.son:hover svg{ - - -webkit-animation: jello-vertical 0.9s both; - animation: jello-vertical 0.9s both; +.inputMsgCon.son:hover svg { + + -webkit-animation: jello-vertical 0.9s both; + animation: jello-vertical 0.9s both; } -.prompt:has(.delete):hover svg{ - - -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; - animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; + +.prompt:has(.delete):hover svg { + + -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; + animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes jello-vertical { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } - @keyframes jello-vertical { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } + + 30% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); } - + + 40% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 50% { + -webkit-transform: scale3d(0.85, 1.15, 1); + transform: scale3d(0.85, 1.15, 1); + } + + 65% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + 75% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes jello-vertical { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 40% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 50% { + -webkit-transform: scale3d(0.85, 1.15, 1); + transform: scale3d(0.85, 1.15, 1); + } + + 65% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + 75% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + @-webkit-keyframes shake-horizontal { - 0%, - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 10%, - 30%, - 50%, - 70% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px); - } - 20%, - 40%, - 60% { - -webkit-transform: translateX(10px); - transform: translateX(10px); - } - 80% { - -webkit-transform: translateX(8px); - transform: translateX(8px); - } - 90% { - -webkit-transform: translateX(-8px); - transform: translateX(-8px); - } + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, + 40%, + 60% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 80% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + + 90% { + -webkit-transform: translateX(-8px); + transform: translateX(-8px); } - @keyframes shake-horizontal { - 0%, - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 10%, - 30%, - 50%, - 70% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px); - } - 20%, - 40%, - 60% { - -webkit-transform: translateX(10px); - transform: translateX(10px); - } - 80% { - -webkit-transform: translateX(8px); - transform: translateX(8px); - } - 90% { - -webkit-transform: translateX(-8px); - transform: translateX(-8px); - } +} + +@keyframes shake-horizontal { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, + 40%, + 60% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 80% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + + 90% { + -webkit-transform: translateX(-8px); + transform: translateX(-8px); } - \ No newline at end of file +} \ No newline at end of file