diff options
| -rw-r--r-- | html/extra-networks-tree-button.html | 11 | ||||
| -rw-r--r-- | javascript/extraNetworks.js | 294 | ||||
| -rw-r--r-- | modules/ui_extra_networks.py | 177 | ||||
| -rw-r--r-- | style.css | 277 |
4 files changed, 572 insertions, 187 deletions
diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html new file mode 100644 index 00000000..920330f7 --- /dev/null +++ b/html/extra-networks-tree-button.html @@ -0,0 +1,11 @@ +<span data-filterable-item-text hidden>{search_terms}</span> +<button class="action-list-content action-list-content-file" + type="button" + onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');" +> + <span class="action-list-item-visual action-list-item-visual--leading">🗎</span> + <span class="action-list-item-label action-list-item-label--truncate">{name}</span> + <span class="action-list-item-action action-list-item-action--trailing"> + <div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div> + </span> +</button>
\ No newline at end of file diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 3e3b03f3..cce22468 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -16,88 +16,110 @@ function toggleCss(key, css, enable) { } function setupExtraNetworksForTab(tabname) { - gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks'); + var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs'); + this_tab.classList.add('extra-networks'); - var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div'); - var searchDiv = gradioApp().getElementById(tabname + '_extra_search'); - var search = searchDiv.querySelector('textarea'); - var sort = gradioApp().getElementById(tabname + '_extra_sort'); - var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder'); - var refresh = gradioApp().getElementById(tabname + '_extra_refresh'); - var promptContainer = gradioApp().querySelector('.prompt-container-compact#' + tabname + '_prompt_container'); - var negativePrompt = gradioApp().querySelector('#' + tabname + '_neg_prompt'); - - tabs.appendChild(searchDiv); - tabs.appendChild(sort); - tabs.appendChild(sortOrder); - tabs.appendChild(refresh); - - var applyFilter = function() { - var searchTerm = search.value.toLowerCase(); - - gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) { - var searchOnly = elem.querySelector('.search_only'); - - var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" "); - - var visible = text.indexOf(searchTerm) != -1; - - if (searchOnly && searchTerm.length < 4) { - visible = false; - } - - elem.style.display = visible ? "" : "none"; - }); - - applySort(); - }; - - var applySort = function() { - var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card'); - - var reverse = sortOrder.classList.contains("sortReverse"); - var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name"; - sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1); - var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length; + function registerPrompt(tabname, id) { + var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); - if (sortKeyStore == sort.dataset.sortkey) { - return; + if (!activePromptTextarea[tabname]) { + activePromptTextarea[tabname] = textarea; } - sort.dataset.sortkey = sortKeyStore; - cards.forEach(function(card) { - card.originalParentElement = card.parentElement; + textarea.addEventListener("focus", function() { + activePromptTextarea[tabname] = textarea; }); - var sortedCards = Array.from(cards); - sortedCards.sort(function(cardA, cardB) { - var a = cardA.dataset[sortKey]; - var b = cardB.dataset[sortKey]; - if (!isNaN(a) && !isNaN(b)) { - return parseInt(a) - parseInt(b); + } + + this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) { + var tab_id = elem.getAttribute("id"); + + var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div'); + var searchDiv = gradioApp().QuerySelector("#" + tab_id + "_extra_search"); + console.log("HERE:", tab_id + "_extra_search", searchDiv); + var search = searchDiv.value; + var sort = gradioApp().getElementById(tabname + '_extra_sort'); + var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder'); + var refresh = gradioApp().getElementById(tabname + '_extra_refresh'); + var promptContainer = gradioApp().querySelector('.prompt-container-compact#' + tabname + '_prompt_container'); + var negativePrompt = gradioApp().querySelector('#' + tabname + '_neg_prompt'); + tabs.appendChild(searchDiv); + tabs.appendChild(sort); + tabs.appendChild(sortOrder); + tabs.appendChild(refresh); + var applyFilter = function() { + var searchTerm = search.value.toLowerCase(); + + gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) { + var searchOnly = elem.querySelector('.search_only'); + + var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" "); + + var visible = text.indexOf(searchTerm) != -1; + + if (searchOnly && searchTerm.length < 4) { + visible = false; + } + + elem.style.display = visible ? "" : "none"; + }); + + applySort(); + }; + + var applySort = function() { + var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card'); + + var reverse = sortOrder.classList.contains("sortReverse"); + var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name"; + sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1); + var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length; + + if (sortKeyStore == sort.dataset.sortkey) { + return; } - - return (a < b ? -1 : (a > b ? 1 : 0)); - }); - if (reverse) { - sortedCards.reverse(); - } - cards.forEach(function(card) { - card.remove(); - }); - sortedCards.forEach(function(card) { - card.originalParentElement.appendChild(card); + sort.dataset.sortkey = sortKeyStore; + + cards.forEach(function(card) { + card.originalParentElement = card.parentElement; + }); + var sortedCards = Array.from(cards); + sortedCards.sort(function(cardA, cardB) { + var a = cardA.dataset[sortKey]; + var b = cardB.dataset[sortKey]; + if (!isNaN(a) && !isNaN(b)) { + return parseInt(a) - parseInt(b); + } + + return (a < b ? -1 : (a > b ? 1 : 0)); + }); + if (reverse) { + sortedCards.reverse(); + } + cards.forEach(function(card) { + card.remove(); + }); + sortedCards.forEach(function(card) { + card.originalParentElement.appendChild(card); + }); + }; + + search.addEventListener("input", applyFilter); + sortOrder.addEventListener("click", function() { + sortOrder.classList.toggle("sortReverse"); + applySort(); }); - }; + applyFilter(); + + extraNetworksApplySort[tab_id] = applySort; + extraNetworksApplyFilter[tab_id] = applyFilter; - search.addEventListener("input", applyFilter); - sortOrder.addEventListener("click", function() { - sortOrder.classList.toggle("sortReverse"); - applySort(); + registerPrompt(tab_id, tab_id + "_prompt"); + registerPrompt(tab_id, tab_id + "_neg_prompt"); }); - applyFilter(); - extraNetworksApplySort[tabname] = applySort; - extraNetworksApplyFilter[tabname] = applyFilter; + + } function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) { @@ -136,12 +158,12 @@ function clearSearch(tabname) { function extraNetworksUnrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate) extraNetworksMovePromptToTab(tabname, '', false, false); - clearSearch(tabname); + //clearSearch(tabname); } function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) { // called from python when user selects an extra networks tab extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt); - clearSearch(tabname); + //clearSearch(tabname); } function applyExtraNetworkFilter(tabname) { @@ -159,23 +181,6 @@ var activePromptTextarea = {}; function setupExtraNetworks() { setupExtraNetworksForTab('txt2img'); setupExtraNetworksForTab('img2img'); - - function registerPrompt(tabname, id) { - var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); - - if (!activePromptTextarea[tabname]) { - activePromptTextarea[tabname] = textarea; - } - - textarea.addEventListener("focus", function() { - activePromptTextarea[tabname] = textarea; - }); - } - - registerPrompt('txt2img', 'txt2img_prompt'); - registerPrompt('txt2img', 'txt2img_neg_prompt'); - registerPrompt('img2img', 'img2img_prompt'); - registerPrompt('img2img', 'img2img_neg_prompt'); } onUiLoaded(setupExtraNetworks); @@ -262,6 +267,106 @@ function saveCardPreview(event, tabname, filename) { event.preventDefault(); } +function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) { + /** + * Processes `onclick` events when user clicks on files in tree. + * + * @param event The generated event. + * @param btn The clicked `action-list-item` button. + * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. + * @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + */ + var par = btn.parentElement; + var search_id = tabname + "_" + tab_id + "_extra_search"; + var type = par.getAttribute("data-tree-entry-type"); + var path = par.getAttribute("data-path"); +} + +function extraNetworksTreeProcessDirectoryClick(event, btn) { + /** + * Processes `onclick` events when user clicks on directories in tree. + * + * Here is how the tree reacts to clicks for various states: + * unselected unopened directory: Diretory is selected and expanded. + * unselected opened directory: Directory is selected. + * selected opened directory: Directory is collapsed and deselected. + * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged. + * + * @param event The generated event. + * @param btn The clicked `action-list-item` button. + */ + var ul = btn.nextElementSibling; + // This is the actual target that the user clicked on within the target button. + // We use this to detect if the chevron was clicked. + var true_targ = event.target; + + function _expand_or_collapse(_ul, _btn) { + // Expands <ul> if it is collapsed, collapses otherwise. Updates button attributes. + if (_ul.hasAttribute("data-hidden")) { + _ul.removeAttribute("data-hidden"); + _btn.setAttribute("expanded", "true"); + } else { + _ul.setAttribute("data-hidden", ""); + _btn.setAttribute("expanded", "false"); + } + } + + function _remove_selected_from_all() { + // Removes the `selected` attribute from all buttons. + var sels = document.querySelectorAll("button.action-list-content"); + [...sels].forEach(el => { + el.removeAttribute("selected"); + }) + } + + function _select_button(_btn) { + // Removes `selected` attribute from all buttons then adds to passed button. + _remove_selected_from_all(); + _btn.setAttribute("selected", ""); + } + + // If user clicks on the chevron, then we do not select the folder. + if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) { + _expand_or_collapse(ul, btn); + } else { + // User clicked anywhere else on the button. + if (btn.hasAttribute("selected") && !ul.hasAttribute("data-hidden")) { + // If folder is select and open, collapse and deselect button. + _expand_or_collapse(ul, btn); + btn.removeAttribute("selected"); + } else if (!(!btn.hasAttribute("selected") && !ul.hasAttribute("data-hidden"))) { + // If folder is open and not selected, then we don't collapse; just select. + // NOTE: Double inversion sucks but it is the clearest way to show the branching here. + _expand_or_collapse(ul, btn); + _select_button(btn); + } else { + // All other cases, just select the button. + _select_button(btn); + } + + } +} + +function extraNetworksTreeOnClick(event, tabname, tab_id) { + /** + * Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`. + * + * Determines whether the clicked button in the tree is for a file entry or a directory + * then calls the appropriate function. + * + * @param event The generated event. + * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. + * @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + */ + var btn = event.currentTarget; + var par = btn.parentElement; + if (par.getAttribute("data-tree-entry-type") === "file") { + extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id); + } else { + extraNetworksTreeProcessDirectoryClick(event, btn); + } +} + function extraNetworksFolderClick(event, tabs_id) { // If folder is open but not selected, we don't want to collapse it. Instead // we override the removal of the "open" attribute so that the folder is @@ -434,3 +539,10 @@ window.addEventListener("keydown", function(event) { closePopup(); } }); + +function testprint(e) { + console.log(e); +} + +const testinput = gradioApp().querySelector("#txt2img_lora_extra_search"); +testinput.addEventListener("input", testprint);
\ No newline at end of file diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 093ac7b4..9cf5b57f 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -19,6 +19,90 @@ extra_pages = [] allowed_dirs = set()
default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
+tree_tpl = (
+ "<div class='action-list-search'>"
+ "<input "
+ "id='{tabname}_{tab_id}_extra_search' "
+ "class='action-list-search-text' "
+ "type='search' "
+ "placeholder='Filter files'"
+ ">"
+ "</div>"
+ "<ul class='action-list action-list--tree'>"
+ "{content}"
+ "</ul>"
+)
+
+tree_ul_tpl = (
+ "<ul class='action-list action-list--subgroup' data-hidden>"
+ "{content}"
+ "</ul>"
+)
+
+tree_li_dir_tpl = (
+ "<li "
+ "class='action-list-item action-list-item--has-subitem' "
+ "data-path='{path}' "
+ "data-tree-entry-type='dir'>"
+ "{content}"
+ "</li>"
+)
+tree_li_file_tpl = (
+ "<li "
+ "id='file-tree-item-{hash}' "
+ "class='action-list-item action-list-item--subitem' "
+ "data-path='{path}' "
+ "data-tree-entry-type='file'>"
+ "{content}"
+ "</li>"
+)
+
+tree_btn_dir_tpl = (
+ "<button "
+ "class='action-list-content action-list-content-dir' "
+ "type='button' "
+ "expanded='false' "
+ "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
+ "<span class='action-list-item-action action-list-item-action--leading'>"
+ "<i class='action-list-item-action-chevron'></i>"
+ "</span>"
+ "<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
+ "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
+ "</button>"
+)
+
+tree_btn_file_action_buttons_tpl = (
+ "<div "
+ "class='copy-path-button card-button' "
+ "title='Copy path to clipboard' "
+ "onclick='extraNetworksCopyCardPath(event, {path})' "
+ "data-clipboard-text={path}>"
+ "</div>"
+ "<div "
+ "class='metadata-button card-button' "
+ "title='Show internal metadata' "
+ "onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
+ "</div>"
+ "<div "
+ "class='edit-button card-button' "
+ "title='Edit metadata' "
+ "onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
+ "</div>"
+)
+
+tree_btn_file_tpl = (
+ "<span data-filterable-item-text hidden>{filter}</span>"
+ "<button "
+ "class='action-list-content action-list-content-file' "
+ "type='button' "
+ "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
+ "<span class='action-list-item-visual action-list-item-visual--leading'>🗎</span>"
+ "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
+ "<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
+ "</button>"
+)
+
+
@functools.cache
def allowed_preview_extensions_with_extra(extra_extensions=None):
return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -160,6 +244,7 @@ class ExtraNetworksPage: self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
self.card_page_template = shared.html("extra-networks-card.html")
self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
+ self.tree_button_template = shared.html("extra-networks-tree-button.html")
self.allow_prompt = True
self.allow_negative_prompt = False
self.metadata = {}
@@ -279,7 +364,9 @@ class ExtraNetworksPage: "search_terms": search_terms_html,
"sort_keys": sort_keys,
"style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
- "tabname": quote_js(tabname),
+ "tabname": tabname,
+ "tab_id": self.id_page,
+
}
if template:
@@ -306,55 +393,81 @@ class ExtraNetworksPage: if not tree:
return res
- file_template = "<li class='file-item'>{card}</li>"
- dir_template = (
- "<details {attributes} class='folder-item'>"
- "<summary class='folder-item-summary' data-path='{data_path}' "
- "onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
- "{folder_name}"
- "</summary>"
- "<ul class='folder-container'>{content}</ul>"
- "</details>"
- )
-
def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
"""Recursively builds HTML for a tree."""
_res = ""
if not data:
- return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
+ return (
+ "<details open disabled class='folder-item-empty'>"
+ "<summary class='folder-item-summary-empty'>Directory is empty</summary>"
+ "</details>"
+ )
for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
if isinstance(v, (ExtraNetworksItem,)):
- item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
- _res += file_template.format(**{"card": item_html})
+ _action_buttons = tree_btn_file_action_buttons_tpl.format(
+ **{
+ "path": quote_js(k),
+ "filename": quote_js(v.item["name"]),
+ "tabname": quote_js(tabname),
+ "tab_id": quote_js(self.id_page),
+ }
+ )
+ _btn = tree_btn_file_tpl.format(
+ **{
+ "label": v.item["name"],
+ "filter": v.item["search_terms"],
+ "tabname": tabname,
+ "tab_id": self.id_page,
+ "buttons": _action_buttons,
+ }
+ )
+ _li = tree_li_file_tpl.format(
+ **{
+ "hash": v.item["shorthash"],
+ "path": k,
+ "type": "file",
+ #"content": _btn,
+ "content": self.create_item_html(tabname, v.item, self.tree_button_template),
+ }
+ )
+ _res += _li
+ #item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
+ #_res += file_template.format(**{"card": item_html})
else:
- _res += dir_template.format(
+ _btn = tree_btn_dir_tpl.format(
**{
- "attributes": "",
+ "label": os.path.basename(k),
"tabname": tabname,
- "folder_name": os.path.basename(k),
- "data_path": k,
- "content": _build_tree(v),
+ "tab_id": self.id_page,
}
)
+ _ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+ _li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
+ _res += _li
return _res
# Add each root directory to the tree.
for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
# If root is empty, append the "disabled" attribute to the template details tag.
- res += "<ul class='folder-container'>"
- res += dir_template.format(
+ btn = tree_btn_dir_tpl.format(
**{
- "attributes": "open" if v else "open",
+ "label": os.path.basename(k),
"tabname": tabname,
- "folder_name": os.path.basename(k),
- "data_path": k,
- "content": _build_tree(v),
+ "tab_id": self.id_page,
}
)
- res += "</ul>"
- res += "</ul>"
- return res
+ ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+ li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
+ res += li
+
+ return tree_tpl.format(
+ **{
+ "content": res,
+ "tabname": tabname,
+ "tab_id": self.id_page,
+ }
+ )
def create_card_view_html(self, tabname):
res = ""
@@ -375,7 +488,7 @@ class ExtraNetworksPage: tree_view_html = self.create_tree_view_html(tabname)
card_view_html = self.create_card_view_html(tabname)
- network_type_id = self.name.replace(" ", "_")
+ network_type_id = self.id_page
return self.extra_networks_pane_template.format(
**{
@@ -506,7 +619,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): ui.pages.append(page_elem)
page_elem.change(
fn=lambda: None,
- _js=f"function(){{applyExtraNetworkFilter({tabname}_extra_search); return []}}",
+ _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.id_page}_extra_search); return []}}",
inputs=[],
outputs=[],
)
@@ -517,13 +630,11 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): related_tabs.append(tab)
- edit_search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
tab_controls = [
- edit_search,
dropdown_sort,
button_sortorder,
button_refresh,
@@ -955,15 +955,15 @@ footer { color: white;
}
-.extra-network-pane .copy-path-button:before {
+.extra-network-pane .copy-path-button::before {
content: "⎘";
}
-.extra-network-pane .metadata-button:before{
+.extra-network-pane .metadata-button::before{
content: "🛈";
}
-.extra-network-pane .edit-button:before{
+.extra-network-pane .edit-button::before{
content: "🛠";
}
@@ -1188,102 +1188,253 @@ body.resizing .resize-handle { border-left: 1px dashed var(--border-color-primary);
}
-.extra-network-pane .card-minimal {
- display: inline-flex;
- flex-grow: 1;
- position: relative;
- overflow: hidden;
- cursor: pointer;
- font-size: 1rem;
- font-weight: bold;
- line-break: anywhere;
+/* ========================= */
+.extra-network-pane {
+ display: flex;
}
-/* Pushes buttons to right */
-.extra-network-pane .card-minimal .name {
- flex-grow: 1;
+.extra-network-pane .extra-network-cards {
+ display: block;
}
-.folder-container {
- margin-left: 1.5em !important;
+.extra-network-pane .extra-network-tree {
+ display: block;
+ font-size: 1rem;
+ min-width: 25%;
+ border: 1px solid var(--block-border-color);
+ overflow: hidden;
}
-.file-item,
-.folder-item,
-.folder-item-summary {
- padding-left: 0.05rem;
+.extra-network-tree .action-list--tree {
cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
user-select: none;
- font-size: 1rem;
+ margin: 0;
+ padding: 0;
}
-.extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.extra-network-pane .extra-network-tree .file-item:hover {
- -webkit-transition: all 0.1s ease-in-out;
- transition: all 0.1s ease-in-out;
- background-color: var(--neutral-200);
+/* Remove auto indentation from tree. Will be overridden later. */
+.extra-network-tree .action-list--subgroup {
+ margin: 0 !important;
+ padding: 0 !important;
+ box-shadow: 0.6rem 0 0 var(--body-background-fill) inset,
+ 0.8rem 0 0 var(--neutral-800) inset;
+}
+
+/* Set indentation for each depth of tree. */
+.extra-network-tree .action-list--subgroup > .action-list-item {
+ margin-left: 0.4rem !important;
+ padding-left: 0.4rem !important;
}
-.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.dark .extra-network-pane .extra-network-tree .file-item:hover {
+/* Styles for tree <ul> elements. */
+.extra-network-tree .action-list {
+
+}
+
+/* Styles for tree <li> elements. */
+.extra-network-tree .action-list-item {
+ list-style: none;
+ position: relative;
+ background-color: transparent;
+}
+
+/* Directory <ul> */
+.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
+ height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ opacity: 0;
+}
+
+.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
+ height: auto;
+ overflow: visible;
+ visibility: visible;
+ opacity: 1;
+}
+
+/* File <li> */
+.extra-network-tree .action-list-item--subitem {
+}
+
+/* <li> containing <ul> */
+.extra-network-tree .action-list-item--has-subitem {
+}
+
+/* BUTTON ELEMENTS */
+/* <button> */
+.extra-network-tree .action-list-content {
+ position: relative;
+ display: grid;
+ width: 100%;
+ padding: 6px 8px;
+ font-size: 1rem;
+ text-align: left;
+ user-select: none;
+ background-color: transparent;
+ border: none;
+ transition: background 33.333ms linear;
+ grid-template-rows: min-content;
+ grid-template-areas: "leading-action leading-visual label trailing-visual spacer trailing-action";
+ grid-template-columns: min-content min-content minmax(0, auto) min-content 1fr min-content;
+ grid-gap: 0.1em;
+ align-items: start;
+ flex-grow: 1;
+ flex-basis: 100%;
+}
+
+.dark .extra-network-tree button.action-list-content:hover {
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
background-color: var(--neutral-800);
}
-/* prevents clicking/collapsing of details tags when disabled attribute is used*/
-.extra-network-pane .extra-network-tree details[disabled] summary {
- pointer-events: none;
- user-select: none;
+.dark .extra-network-tree button.action-list-content[selected] {
+ background-color: var(--neutral-700);
}
-.extra-network-pane .extra-network-tree details.folder-item > summary {
- list-style-type: '📁';
- text-overflow: ellipsis;
+.extra-network-tree button.action-list-content:hover {
+ -webkit-transition: all 0.05s ease-in-out;
+ transition: all 0.05s ease-in-out;
+ background-color: var(--neutral-200);
}
-.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
- list-style-type: '📂';
- text-overflow: ellipsis;
+.extra-network-tree button.action-list-content[selected] {
+ background-color: var(--neutral-300);
}
-.extra-network-pane .extra-network-tree ul.folder-container {
- list-style: none;
- font-size: 1rem;
- text-overflow: ellipsis;
+/* Buttons for directories. */
+.extra-network-tree .action-list-content-dir {
+
}
-.extra-network-pane .extra-network-tree li.file-item {
- display: flex;
+/* Buttons for files. */
+.extra-network-tree .action-list-content-file {
+ margin-left: 2em;
+}
+
+/* Text for button. */
+.extra-network-tree .action-list-item-label {
position: relative;
- align-items: center;
+ line-height: 1.25em;
+ color: var(--button-secondary-text-color);
+ grid-area: label;
+ padding-left: 0.5em;
}
-.extra-network-pane .extra-network-tree li.file-item::before {
- content: '📄';
- font-size: 0.85rem;
- vertical-align: middle;
+/* Text for button truncated. */
+.extra-network-tree .action-list-item-label--truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
-.extra-network-pane {
- display: flex;
+/* Icon for button. */
+.extra-network-tree .action-list-item-visual {
+ min-height: 1em;
+ color: var(--button-secondary-text-color);
+ pointer-events: none;
+ align-items: right;
}
-.extra-network-pane .extra-network-tree {
- font-size: 1rem;
- min-width: 25%;
- max-width: 25%;
- border: 1px solid var(--block-border-color);
+/* Icon for button when it is before label. */
+.extra-network-tree .action-list-item-visual--leading {
+ grid-area: leading-visual;
}
-.extra-network-pane .extra-network-cards {
+
+/* Icon for button when it is after label. */
+.extra-network-tree .action-list-item-visual--trailing {
+ grid-area: trailing-visual;
+}
+
+/* Dropdown arrow for button. */
+.extra-network-tree .action-list-item-action--leading {
+ margin-right: 1em;
+}
+
+/* Define the animation for the arrow when it is clicked. */
+.extra-network-tree .action-list-content-dir[expanded=false] .action-list-item-action {
+ -ms-transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ transition: transform 0.2s;
+}
+
+.extra-network-tree .action-list-content-dir[expanded=true] .action-list-item-action {
+ -ms-transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ transition: transform 0.2s;
+}
+
+.action-list-item-action-chevron {
+ display: inline-block;
+ padding: 0.3em;
+ box-shadow: 0.1em 0.1em 0 0px var(--neutral-200) inset;
+ transform: rotate(135deg);
+}
+
+.extra-network-tree .action-list-item-action--leading {
+ grid-area: leading-action;
+}
+
+/* Dropdown arrow for button when it is after label. UNUSED? */
+.extra-network-tree .action-list-item-action--trailing {
+ grid-area: trailing-action;
+}
+
+.extra-network-tree .action-list-item-action .button-row {
+ display: flex;
flex-grow: 1;
- border: 1px solid var(--block-border-color);
}
-.dark .extra-network-tree .folder-item-summary.selected{
- background-color: var(--neutral-800);
+.extra-network-tree .action-list-content .button-row {
+ display: inline-flex;
+ visibility: hidden !important;
+ color: white;
}
-.extra-network-tree .folder-item-summary.selected {
- background-color: var(--neutral-200);
+.extra-network-tree .action-list-content:hover .button-row {
+ visibility: visible;
}
+
+/* Add icon to left side of <input> */
+.extra-network-tree .action-list-search::before {
+ content: "🔎︎";
+ position: absolute;
+ margin: 0.5em;
+ font-size: 1em;
+ color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .action-list-search {
+ position: relative;
+ margin: 0.5em;
+}
+
+.extra-network-tree .action-list-search .action-list-search-text {
+ border: 1px solid var(--button-secondary-border-color);
+ border-radius: 0.5em;
+ color: var(--button-secondary-text-color);
+ background-color: transparent;
+ width: 100%;
+ padding-left: 2em;
+ line-height: 1em;
+}
+
+/* <input> clear button (x on right side) styling */
+.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ height: 1em;
+ width: 1em;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-size: 100%;
+ background-color: var(--input-placeholder-color);
+}
\ No newline at end of file |