Skip to content

Commit ed44e1c

Browse files
ebullientebullient
committed
🎨 Update folder snippets for 1.0
1 parent 6cfaae7 commit ed44e1c

File tree

5 files changed

+64
-179
lines changed

5 files changed

+64
-179
lines changed

‎src/@types/index.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export interface FolderConfig extends ColoredElement {
9595
font?: string;
9696
fontSize?: number;
9797
content?: string;
98+
includeChildren?: boolean;
9899
cache: {
99100
// not persisted
100101
expanded?: boolean;
@@ -111,7 +112,7 @@ export interface FolderSnippetConfig extends SnippetConfig {
111112
hideScrollbar: boolean;
112113
hideTypes: boolean;
113114
hoverDecoration: boolean;
114-
relationshipLines: boolean;
115+
relationshipLines?: boolean; // ignored
115116
}
116117

117118
declare module "obsidian" {

‎src/snippetor-CreateFoldersModal.ts‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
SliderComponent,
99
TextComponent,
1010
TFolder,
11+
ToggleComponent,
1112
} from "obsidian";
1213
import type {
1314
ColoredElement,
@@ -160,14 +161,6 @@ class CreateFolderModal extends Modal {
160161
this.showFolders(folderEl);
161162
});
162163
});
163-
new Setting(content)
164-
.setName("Show relationship lines")
165-
.addToggle((t) => {
166-
t.setValue(this.cfg.relationshipLines).onChange((v) => {
167-
this.cfg.relationshipLines = v;
168-
this.showFolders(folderEl);
169-
});
170-
});
171164
new Setting(content)
172165
.setName("Use folder icons")
173166
.setDesc("A common folder icon will be shown before folder names")
@@ -340,7 +333,7 @@ class CreateFolderModal extends Modal {
340333
);
341334
new ExtraButtonComponent(actions)
342335
.setIcon("trash")
343-
.setTooltip("Delete this Task")
336+
.setTooltip("Delete this Folder configuration")
344337
.onClick(async () => {
345338
console.log("Delete %o", containerEl);
346339
this.cfg.folders.remove(folderSettings);
@@ -369,7 +362,10 @@ class CreateFolderModal extends Modal {
369362
!this.cfg.folders.find((t) => t.target == f.path)
370363
) as TFolder[];
371364

372-
const text = new TextComponent(settings)
365+
const folderNameGroup = settings.createSpan(
366+
"snippetor-group aligned-1"
367+
);
368+
const text = new TextComponent(folderNameGroup)
373369
.onChange((v) => {
374370
folderSettings.target = v;
375371
content.setText(folderSettings.target);
@@ -410,6 +406,18 @@ class CreateFolderModal extends Modal {
410406
}
411407
);
412408

409+
const subfolder = this.helper.createToggleButton(
410+
settings,
411+
folderSettings.includeChildren,
412+
(enabled) => {
413+
folderSettings.includeChildren = enabled;
414+
this.setFolderColors(folderSettings);
415+
}
416+
);
417+
subfolder
418+
.setIcon("stacked-levels")
419+
.setTooltip("Toggle: Apply background color to subfolders");
420+
413421
if (folderSettings.cache.expanded) {
414422
this.drawFolderFontSettings(folderSettings, parent, i);
415423
this.drawFolderIconSettings(folderSettings, parent, i);

‎src/snippetor-Defaults.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const DEFAULT_FOLDER_SNIPPET_SETTINGS: Partial<FolderSnippetConfig> = {
4545
foreground: "var(--text-normal)",
4646
background: "transparent",
4747
},
48+
includeChildren: false,
4849
},
4950
};
5051

‎src/snippetor-Snippetor.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,21 +62,6 @@ export class Snippetor {
6262
const result = Object.assign({}, DEFAULT_FOLDER_SNIPPET_SETTINGS, {
6363
id: this.generateId(),
6464
name: generateSlug(2),
65-
folders: [],
66-
default: {
67-
cache: {
68-
folderEl: null,
69-
},
70-
target: "",
71-
lightMode: {
72-
foreground: "var(--text-normal)",
73-
background: "transparent",
74-
},
75-
darkMode: {
76-
foreground: "var(--text-normal)",
77-
background: "transparent",
78-
},
79-
},
8065
});
8166
return result;
8267
}

‎src/templates/COLORED_FOLDER.eta‎

Lines changed: 43 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,13 @@ function defineColors(i, folder) {
2929
%>
3030
/* for folder <%~ folder.target %> */
3131
.theme-light {
32-
/** Setup Custom Colors */
3332
--<%~ root %>-folder-text-<%= i %>: <% tR += getForeground(folder, true) %>;
3433
--<%~ root %>-folder-<%= i %>: <% tR += getBackground(folder, true) %>;
3534
--<%~ root %>-folder-alpha2-<%= i %>: <% tR += getBackground(folder, true) %>04;
3635
--<%~ root %>-folder-alpha4-<%= i %>: <% tR += getBackground(folder, true) %>06;
3736
--<%~ root %>-folder-radius: 5px;
3837
}
3938
.theme-dark {
40-
/** Setup Custom Colors */
4139
--<%~ root %>-folder-text-<%= i %>: <% tR += getForeground(folder, false) %>;
4240
--<%~ root %>-folder-<%= i %>: <% tR += getBackground(folder, false) %>;
4341
--<%~ root %>-folder-alpha2-<%= i %>: <% tR += getBackground(folder, false) %>CC;
@@ -48,174 +46,66 @@ function defineColors(i, folder) {
4846
} // end defineColors
4947
function folderSettings(i, folder) {
5048
%>
51-
5249
/** Folder
5350
The Folder Name is stored in the data-path attribute.
54-
[data-path^="<%~ folder.target %>"] targets a path that *begins with* the content.
5551
*/
56-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] {
57-
background-color: var(--<%~ root %>-folder-<%= i %>);
58-
color: var(--<%~ root %>-folder-text-<%= i %>);
59-
}
60-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
61-
.nav-folder-title-content,
62-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
63-
.nav-folder-collapse-indicator {
64-
color: var(--<%~ root %>-folder-text-<%= i %>);
65-
}
66-
body:not(.is-grabbing) .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="<%~ folder.target %>"]:hover,
67-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"].is-being-dragged,
68-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]:hover,
69-
body:not(.is-grabbing) .workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]:hover,
70-
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="<%~ folder.target %>"].is-being-dragged,
71-
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="<%~ folder.target %>"]:hover {
72-
background-color: var(--<%~ root %>-folder-alpha2-<%= i %>) !important;
73-
}
74-
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path*="<%~ folder.target %>"].is-active,
75-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path*="<%~ folder.target %>"].is-active {
76-
background-color: var(--<%~ root %>-folder-alpha4-<%= i %>) !important;
77-
font-style: italic;
78-
}
79-
<% if (folder.includeChildren) { %>
80-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
81-
+ .nav-folder-children {
82-
background-color: var(--<%~ root %>-folder-<%= i %>);
83-
color: var(--<%~ root %>-folder-text-<%= i %>);
84-
}
85-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
86-
+ .nav-folder-children .nav-folder-title-content,
87-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
88-
+ .nav-folder-children .nav-file-title {
89-
color: var(--<%~ root %>-folder-text-<%= i %>);
90-
}
91-
body:not(.is-grabbing) .workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
92-
+ .nav-folder-children .nav-folder-title:hover,
93-
body:not(.is-grabbing) .workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"]
94-
+ .nav-folder-children .nav-file-title:hover {
95-
background-color: var(--<%~ root %>-folder-alpha2-<%= i %>) !important;
96-
}
97-
<% } %>
98-
<% if (folder.font || folder.fontSize) { %>
99-
/* Folder title font */
100-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content {
101-
font-family: <%~ getFont(folder, "var(--text-normal)") %>;
102-
font-size: <%~ getFontSize(folder) %>px;
103-
line-height: <%~ getFontSize(folder) %>px;
104-
}
105-
<% } %>
106-
<% if (it.cfg.hideCollapse) { %>
107-
/** Hide the collapse icon */
108-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-collapse-indicator.collapse-icon {
109-
display: none;
110-
}
111-
<% } %>
112-
113-
<% if (it.cfg.hideTypes) { %>
114-
/** Hide File Tags */
115-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children .nav-file-tag {
116-
display: none;
117-
}
118-
<% } %>
119-
120-
<% if (it.cfg.folderIcon) { %>
121-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before,
122-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children .nav-file-title::before {
123-
background-color: var(--<%~ root %>-folder-text-<%= i %>) !important;
124-
}
125-
/** Show a folder icon before folder titles. */
126-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content {
127-
display: flex;
128-
}
129-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-file-title::before,
130-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before {
131-
width: 16px;
132-
height: 16px;
133-
display: flex;
134-
align-self: center;
135-
justify-self: center;
136-
}
137-
138-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder.is-collapsed .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before {
139-
background-image: unset !important;
140-
background-size: 24px 24px !important;
141-
background-color: var(--text-normal);
142-
content: "";
143-
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.11-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E")
144-
no-repeat;
145-
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.11-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E")
146-
no-repeat;
147-
margin-right: 4px !important;
52+
.nav-folder-title[data-path="<%~ folder.target %>"] {
53+
--nav-item-color: var(--<%~ root %>-folder-text-<%= i %>);
54+
--nav-item-color-hover: var(--<%~ root %>-folder-alpha2-<%= i %>);
55+
--nav-item-size: <%~ getFontSize(folder) %>px;
56+
font-family: <%~ getFont(folder, "var(--text-normal)") %>;
57+
font-size: <%~ getFontSize(folder) %>px;
58+
line-height: <%~ getFontSize(folder) %>px;
59+
background-color: var(--<%~ root %>-folder-<%= i %>);
60+
}
61+
.nav-folder-title[data-path^="<%~ folder.target %>"],
62+
.nav-file-title[data-path^="<%~ folder.target %>"],
63+
body:not(.is-grabbing) .nav-folder-title[data-path^="<%~ folder.target %>"]:hover,
64+
body:not(.is-grabbing) .nav-file-title[data-path^="<%~ folder.target %>"]:hover,
65+
.nav-folder-title[data-path^="<%~ folder.target %>"].is-being-dragged,
66+
.nav-file-title[data-path^="<%~ folder.target %>"].is-being-dragged,
67+
.nav-folder-title[data-path^="<%~ folder.target %>"]:hover,
68+
.nav-file-title[data-path^="<%~ folder.target %>"]:hover {
69+
color: var(--<%~ root %>-folder-text-<%= i %>);
70+
}
71+
.nav-file-title[data-path*="<%~ folder.target %>"].is-active,
72+
.nav-folder-title[data-path*="<%~ folder.target %>"].is-active {
73+
color: var(--<%~ root %>-folder-text-<%= i %>);
74+
font-style: italic;
75+
}
76+
.nav-folder.mod-root .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-title[data-path^="<%~ folder.target %>"] {
77+
border-radius: var(--<%~ root %>-border-radius) var(--<%~ root %>-border-radius) 0px 0px;
78+
}
79+
.nav-folder.mod-root .nav-folder > .nav-folder-children > .nav-folder.is-collapsed > .nav-folder-title[data-path^="<%~ folder.target %>"] {
80+
border-radius: var(--<%~ root %>-border-radius);
14881
}
149-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before {
150-
background-image: unset !important;
151-
width: 17px;
152-
height: 17px;
153-
background-size: 24px 24px !important;
154-
background-color: var(--text-normal);
155-
content: "";
156-
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 20H4c-1.11 0-2-.9-2-2V6c0-1.11.89-2 2-2h6l2 2h7a2 2 0 0 1 2 2H4v10l2.14-8h17.07l-2.28 8.5c-.23.87-1.01 1.5-1.93 1.5z'/%3E%3C/svg%3E")
157-
no-repeat;
158-
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 20H4c-1.11 0-2-.9-2-2V6c0-1.11.89-2 2-2h6l2 2h7a2 2 0 0 1 2 2H4v10l2.14-8h17.07l-2.28 8.5c-.23.87-1.01 1.5-1.93 1.5z'/%3E%3C/svg%3E")
159-
no-repeat;
160-
margin-right: 4px !important;
161-
}
162-
163-
<% } else if (folder.content) { %>
164-
/* Folder icon */
165-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before {
82+
<%
83+
if (folder.content) {
84+
%>
85+
.nav-folder-title[data-path^="<%~ folder.target %>"] .nav-folder-title-content::before {
16686
content: "<%~ folder.content %> "
16787
}
168-
<% } %>
169-
170-
/** Hide Overflowing Text */
171-
.workspace-leaf-content[data-type="file-explorer"]
172-
.nav-folder-title[data-path^="<%~ folder.target %>"]
173-
.nav-folder-title-content,
174-
.workspace-leaf-content[data-type="file-explorer"]
175-
.nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children .nav-file-title,
176-
.workspace-leaf-content[data-type="file-explorer"]
177-
.nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children .nav-file-title-content {
178-
overflow-x: hidden;
179-
overflow-y: hidden;
180-
text-overflow: ellipsis;
181-
white-space: nowrap;
182-
word-wrap: break-word;
183-
width: 100%;
184-
}
185-
186-
<% if (it.cfg.relationshipLines) { %>
187-
188-
/** Relationship lines */
189-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children
190-
> .nav-folder
191-
> .nav-folder-children
192-
.nav-file {
193-
border-left: 2px solid white;
194-
}
195-
.workspace-leaf-content[data-type="file-explorer"] .nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children
196-
> .nav-folder
197-
> .nav-folder-children
198-
.nav-folder {
199-
border-left: 2px solid white;
88+
<%
89+
} // end if folder.content
90+
if (folder.includeChildren) {
91+
%>
92+
.nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children .nav-folder-title,
93+
.nav-folder-title[data-path^="<%~ folder.target %>"] + .nav-folder-children {
94+
color: var(--<%~ root %>-folder-text-<%= i %>);
95+
background-color: var(--<%~ root %>-folder-<%= i %>);
20096
}
201-
202-
<% } %>
203-
20497
<%
98+
} // end if includeChildren
20599
} //end folderSettings
206100
%>
207-
208101
<% if (it.cfg.hideScrollbar) { %>
209-
210102
/** Scrollbars eliminated */
211103
.workspace-leaf-content[data-type="file-explorer"] ::-webkit-scrollbar {
212104
width: 0px;
213105
height: 0px;
214106
}
215-
216-
<% } %>
217-
218107
<%
108+
} // end if hideScrollbar
219109

220110
for (let i = 0; i<it.cfg.folders.length; i++) {
221111
const folder = it.cfg.folders[i];

0 commit comments

Comments
 (0)