begin redesign of tree module.
This commit is contained in:
Sj-Si
parent
34fc215249
commit
3db6938caa
|
|
@ -1,3 +1,4 @@
|
|||
<div class="card-minimal" onclick={card_clicked} data-name="{name}">
|
||||
{name}<span class="button-column">{copy_path_button}{metadata_button}{edit_button}</span>
|
||||
<span class="name">{name}</span>
|
||||
<span class="button-row">{copy_path_button}{metadata_button}{edit_button}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<div id='{tabname}_{network_type_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>
|
||||
{subdirs_html}
|
||||
</div>
|
||||
<div id='{tabname}_{network_type_id}_pane' class='extra-network-pane'>
|
||||
<div id='{tabname}_{network_type_id}_tree' class='extra-network-tree'>
|
||||
{tree_html}
|
||||
</div>
|
||||
<div id='{tabname}_{network_type_id}_cards' class='extra-network-cards'>
|
||||
{items_html}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<details {attributes} class='folder-item' ontoggle='extraNetworksFolderClick(event, "{tabname}_extra_search");'>
|
||||
<summary class='folder-item-summary'>{folder_name}</summary>
|
||||
{content}
|
||||
</details>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -253,6 +253,28 @@ function saveCardPreview(event, tabname, filename) {
|
|||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksFolderClick(event, tabs_id) {
|
||||
var els = document.querySelectorAll(".folder-item-summary.selected");
|
||||
[...els].forEach(el => {
|
||||
el.classList.remove("selected");
|
||||
});
|
||||
event.target.classList.add("selected");
|
||||
|
||||
var searchTextArea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
|
||||
var text = event.target.classList.contains("search-all") ? "" : event.target.firstChild.textContent.trim();
|
||||
searchTextArea.value = text;
|
||||
updateInput(searchTextArea);
|
||||
|
||||
if (event.target.parentElement.open) {
|
||||
// before close
|
||||
console.log("closed");
|
||||
} else {
|
||||
// before open
|
||||
console.log("opened");
|
||||
//console.log("Opened:", event.target.parentElement);
|
||||
}
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabs_id, event) {
|
||||
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
|
||||
var button = event.target;
|
||||
|
|
|
|||
|
|
@ -238,7 +238,6 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
|
|||
"extra_networks_dir_button_function": OptionInfo(False, "Add a '/' to the beginning of directory buttons").info("Buttons will display the contents of the selected directory without acting as a search filter."),
|
||||
"extra_networks_hidden_models": OptionInfo("When searched", "Show cards for models in hidden directories", gr.Radio, {"choices": ["Always", "When searched", "Never"]}).info('"When searched" option will only show the item when the search string has 4 characters or more'),
|
||||
"extra_networks_default_multiplier": OptionInfo(1.0, "Default multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}),
|
||||
"extra_networks_tree_view": OptionInfo(False, "Show extra networks using a directory tree view.").needs_reload_ui(),
|
||||
"extra_networks_card_width": OptionInfo(0, "Card width for Extra Networks").info("in pixels"),
|
||||
"extra_networks_card_height": OptionInfo(0, "Card height for Extra Networks").info("in pixels"),
|
||||
"extra_networks_card_text_scale": OptionInfo(1.0, "Card text scale", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}).info("1 = original size"),
|
||||
|
|
|
|||
|
|
@ -73,10 +73,11 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
|
|||
# the value can be an empty dict if the directory is empty. We want these
|
||||
# placeholders for empty dirs so we can inform the user later.
|
||||
for path in paths:
|
||||
short_path = os.path.basename(path)
|
||||
# Wrap the path in a list since that is what the `_get_tree` expects.
|
||||
res[path] = _get_tree([path])
|
||||
if res[path]:
|
||||
res[path] = res[path][os.path.basename(path)]
|
||||
res[short_path] = _get_tree([path])
|
||||
if res[short_path]:
|
||||
res[short_path] = res[short_path][os.path.basename(path)]
|
||||
|
||||
return res
|
||||
|
||||
|
|
@ -153,10 +154,9 @@ class ExtraNetworksPage:
|
|||
self.title = title
|
||||
self.name = title.lower()
|
||||
self.id_page = self.name.replace(" ", "_")
|
||||
if shared.opts.extra_networks_tree_view:
|
||||
self.card_page = shared.html("extra-networks-card-minimal.html")
|
||||
else:
|
||||
self.card_page = shared.html("extra-networks-card.html")
|
||||
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.allow_prompt = True
|
||||
self.allow_negative_prompt = False
|
||||
self.metadata = {}
|
||||
|
|
@ -182,15 +182,14 @@ class ExtraNetworksPage:
|
|||
|
||||
def search_terms_from_path(self, filename, possible_directories=None):
|
||||
abspath = os.path.abspath(filename)
|
||||
|
||||
for parentdir in (possible_directories if possible_directories is not None else self.allowed_directories_for_previews()):
|
||||
parentdir = os.path.abspath(parentdir)
|
||||
parentdir = os.path.dirname(os.path.abspath(parentdir))
|
||||
if abspath.startswith(parentdir):
|
||||
return abspath[len(parentdir):].replace('\\', '/')
|
||||
return os.path.relpath(abspath, parentdir)
|
||||
|
||||
return ""
|
||||
|
||||
def create_item_html(self, tabname: str, item: dict) -> str:
|
||||
def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
|
||||
"""Generates HTML for a single ExtraNetworks Item
|
||||
|
||||
Args:
|
||||
|
|
@ -265,7 +264,10 @@ class ExtraNetworksPage:
|
|||
"tabname": quote_js(tabname),
|
||||
}
|
||||
|
||||
return self.card_page.format(**args)
|
||||
if template:
|
||||
return template.format(**args)
|
||||
else:
|
||||
return self.card_page.format(**args)
|
||||
|
||||
def create_tree_view_html(self, tabname: str) -> str:
|
||||
"""Generates HTML for displaying folders in a tree view.
|
||||
|
|
@ -276,53 +278,67 @@ class ExtraNetworksPage:
|
|||
Returns:
|
||||
HTML string generated for this tree view.
|
||||
"""
|
||||
self_name_id = self.name.replace(" ", "_")
|
||||
res = f"<div id='{tabname}_{self_name_id}_tree_view' class='extra-network-cards'>"
|
||||
|
||||
self.metadata = {}
|
||||
self.items = {x["name"]: x for x in self.list_items()}
|
||||
res = f""
|
||||
|
||||
# Generate HTML for the tree.
|
||||
roots = self.allowed_directories_for_previews()
|
||||
tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
|
||||
tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
|
||||
|
||||
if not tree:
|
||||
return res + "</div>"
|
||||
return res
|
||||
|
||||
file_template = "<li class='file-item'>{}</li>"
|
||||
file_template = "<li class='file-item'>{card}</li>"
|
||||
dir_template = (
|
||||
"<details {} class='folder-item'>"
|
||||
"<summary class='folder-item-summary'>{}</summary>"
|
||||
"{}</ul>"
|
||||
"<details {attributes} class='folder-item'>"
|
||||
"<summary class='folder-item-summary' 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 = "<ul class='folder-container'>"
|
||||
_res = ""
|
||||
if not data:
|
||||
return "<ul style='list-style-type: \"⚠️\";'><li>DIRECTORY IS EMPTY</li></ul>"
|
||||
return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
|
||||
|
||||
for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
|
||||
if isinstance(v, (ExtraNetworksItem,)):
|
||||
_res += file_template.format(self.create_item_html(tabname, v.item))
|
||||
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("", k, _build_tree(v))
|
||||
tmp = dir_template.format(
|
||||
**{
|
||||
"attributes": "",
|
||||
"tabname": tabname,
|
||||
"folder_name": k,
|
||||
"content": _build_tree(v),
|
||||
}
|
||||
)
|
||||
_res += tmp
|
||||
|
||||
return _res
|
||||
|
||||
res += "<ul class='folder-container'>"
|
||||
# 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 += dir_template.format("open" if v else "open disabled", k, _build_tree(v))
|
||||
res += "<ul class='folder-container'>"
|
||||
res += dir_template.format(
|
||||
**{
|
||||
"attributes": "open" if v else "open",
|
||||
"tabname": tabname,
|
||||
"folder_name": k,
|
||||
"content": _build_tree(v),
|
||||
}
|
||||
)
|
||||
res += "</ul>"
|
||||
res += "</ul>"
|
||||
res += "</div>"
|
||||
|
||||
return res
|
||||
|
||||
def create_card_view_html(self, tabname):
|
||||
items_html = ""
|
||||
self.metadata = {}
|
||||
def create_subdirs_html(self, tabname):
|
||||
subdirs = {}
|
||||
|
||||
for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
|
||||
|
|
@ -355,43 +371,53 @@ class ExtraNetworksPage:
|
|||
subdirs = {"": 1, **subdirs}
|
||||
|
||||
subdirs_html_template = (
|
||||
"<button class='lg secondary gradio-button custom-button{}' "
|
||||
"onclick='extraNetworksSearchButton(\"{}_extra_search\", event)'>"
|
||||
"{}"
|
||||
"<button class='lg secondary gradio-button custom-button {classes}' "
|
||||
"onclick='extraNetworksSearchButton(\"{tabname}_extra_search\", event)'>"
|
||||
"{content}"
|
||||
"</button>"
|
||||
)
|
||||
subdirs_html = "".join(
|
||||
return "".join(
|
||||
[
|
||||
subdirs_html_template.format(
|
||||
" search-all" if subdir == "" else "",
|
||||
tabname,
|
||||
html.escape(subdir if subdir != "" else "all"),
|
||||
**{
|
||||
"classes": "search-all" if not subdir else "",
|
||||
"tabname": tabname,
|
||||
"content": html.escape(subdir if subdir else "all"),
|
||||
}
|
||||
) for subdir in subdirs
|
||||
]
|
||||
)
|
||||
|
||||
def create_card_view_html(self, tabname):
|
||||
res = ""
|
||||
self.items = {x["name"]: x for x in self.list_items()}
|
||||
for item in self.items.values():
|
||||
items_html += self.create_item_html(tabname, item)
|
||||
res += self.create_item_html(tabname, item, self.card_page_template)
|
||||
|
||||
if items_html == "":
|
||||
if res == "":
|
||||
dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
|
||||
items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
|
||||
|
||||
self_name_id = self.name.replace(" ", "_")
|
||||
|
||||
res = (
|
||||
f"<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>{subdirs_html}</div>"
|
||||
f"<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>{items_html}</div>"
|
||||
)
|
||||
res = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
|
||||
|
||||
return res
|
||||
|
||||
def create_html(self, tabname):
|
||||
if shared.opts.extra_networks_tree_view:
|
||||
return self.create_tree_view_html(tabname)
|
||||
else:
|
||||
return self.create_card_view_html(tabname)
|
||||
self.metadata = {}
|
||||
self.items = {x["name"]: x for x in self.list_items()}
|
||||
|
||||
tree_view_html = self.create_tree_view_html(tabname)
|
||||
subdirs_html = self.create_subdirs_html(tabname)
|
||||
card_view_html = self.create_card_view_html(tabname)
|
||||
network_type_id = self.name.replace(" ", "_")
|
||||
|
||||
return self.extra_networks_pane_template.format(
|
||||
**{
|
||||
"tabname": tabname,
|
||||
"network_type_id": network_type_id,
|
||||
"tree_html": tree_view_html,
|
||||
"subdirs_html": subdirs_html,
|
||||
"items_html": card_view_html,
|
||||
}
|
||||
)
|
||||
|
||||
def create_item(self, name, index=None):
|
||||
raise NotImplementedError()
|
||||
|
|
@ -516,19 +542,19 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
|
|||
|
||||
related_tabs.append(tab)
|
||||
|
||||
tab_controls = {}
|
||||
|
||||
edit_search = gr.Textbox('', show_label=False, elem_id=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)
|
||||
checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
|
||||
|
||||
tab_controls["edit_search"] = edit_search
|
||||
tab_controls["dropdown_sort"] = dropdown_sort
|
||||
tab_controls["button_sortorder"] = button_sortorder
|
||||
tab_controls["button_refresh"] = button_refresh
|
||||
tab_controls["checkbox_show_dirs"] = checkbox_show_dirs
|
||||
tab_controls = [
|
||||
edit_search,
|
||||
dropdown_sort,
|
||||
button_sortorder,
|
||||
button_refresh,
|
||||
checkbox_show_dirs,
|
||||
]
|
||||
|
||||
ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
|
||||
ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
|
||||
|
|
@ -538,32 +564,28 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
|
|||
fn=lambda: [gr.update(visible=False) for _ in tab_controls],
|
||||
_js="function(){ extraNetworksUrelatedTabSelected('" + tabname + "'); }",
|
||||
inputs=[],
|
||||
outputs=list(tab_controls.values()),
|
||||
outputs=tab_controls,
|
||||
show_progress=False,
|
||||
)
|
||||
|
||||
visible_controls = list(tab_controls.keys())
|
||||
if shared.opts.extra_networks_tree_view:
|
||||
visible_controls = ["button_refresh"]
|
||||
|
||||
for page, tab in zip(ui.stored_extra_pages, related_tabs):
|
||||
allow_prompt = "true" if page.allow_prompt else "false"
|
||||
allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
|
||||
|
||||
jscode = (
|
||||
"extraNetworksTabSelected("
|
||||
f"'{tabname}', "
|
||||
f"'{tabname}_{page.id_page}_prompts', "
|
||||
f"'{allow_prompt}', "
|
||||
f"'{allow_negative_prompt}'"
|
||||
f"'{tabname}', "
|
||||
f"'{tabname}_{page.id_page}_prompts', "
|
||||
f"'{allow_prompt}', "
|
||||
f"'{allow_negative_prompt}'"
|
||||
");"
|
||||
)
|
||||
|
||||
tab.select(
|
||||
fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls],
|
||||
fn=lambda: [gr.update(visible=True) for _ in tab_controls],
|
||||
_js="function(){ " + jscode + " }",
|
||||
inputs=[],
|
||||
outputs=list(tab_controls.values()),
|
||||
outputs=tab_controls,
|
||||
show_progress=False,
|
||||
)
|
||||
|
||||
|
|
|
|||
218
style.css
218
style.css
|
|
@ -863,7 +863,7 @@ footer {
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.extra-network-cards{
|
||||
.extra-network-pane{
|
||||
height: calc(100vh - 24rem);
|
||||
overflow: clip scroll;
|
||||
resize: vertical;
|
||||
|
|
@ -908,53 +908,75 @@ footer {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.extra-network-cards .nocards{
|
||||
.extra-network-pane .nocards{
|
||||
margin: 1.25em 0.5em 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.extra-network-cards .nocards h1{
|
||||
.extra-network-pane .nocards h1{
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.extra-network-cards .nocards li{
|
||||
.extra-network-pane .nocards li{
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.extra-network-pane :is(.card, .card-minimal) .button-row{
|
||||
display: inline-flex;
|
||||
visibility: hidden;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .button-row{
|
||||
display: none;
|
||||
.extra-network-pane .card .button-row {
|
||||
position: absolute;
|
||||
color: white;
|
||||
right: 0;
|
||||
z-index: 1
|
||||
}
|
||||
.extra-network-cards .card:hover .button-row{
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .card-button{
|
||||
.extra-network-pane .card-minimal .button-row {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.extra-network-pane .card-button{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .metadata-button:before{
|
||||
.extra-network-pane .copy-path-button:before {
|
||||
content: "⎘";
|
||||
}
|
||||
|
||||
.extra-network-pane .metadata-button:before{
|
||||
content: "🛈";
|
||||
}
|
||||
|
||||
.extra-network-cards .card .edit-button:before{
|
||||
.extra-network-pane .edit-button:before{
|
||||
content: "🛠";
|
||||
}
|
||||
|
||||
.extra-network-cards .card .card-button {
|
||||
text-shadow: 2px 2px 3px black;
|
||||
padding: 0.25em 0.1em;
|
||||
font-size: 200%;
|
||||
.extra-network-pane .card-button {
|
||||
width: 1.5em;
|
||||
text-shadow: 2px 2px 3px black;
|
||||
color: white;
|
||||
padding: 0.25em 0.1em;
|
||||
}
|
||||
.extra-network-cards .card .card-button:hover{
|
||||
|
||||
.extra-network-pane .card-button:hover{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.extra-network-pane .card .card-button {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.extra-network-pane .card-minimal .card-button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.standalone-card-preview.card .preview{
|
||||
position: absolute;
|
||||
|
|
@ -963,7 +985,7 @@ footer {
|
|||
height:100%;
|
||||
}
|
||||
|
||||
.extra-network-cards .card, .standalone-card-preview.card{
|
||||
.extra-network-pane .card, .standalone-card-preview.card{
|
||||
display: inline-block;
|
||||
margin: 0.5rem;
|
||||
width: 16rem;
|
||||
|
|
@ -980,15 +1002,15 @@ footer {
|
|||
background-image: url('./file=html/card-no-preview.png')
|
||||
}
|
||||
|
||||
.extra-network-cards .card:hover{
|
||||
.extra-network-pane .card:hover{
|
||||
box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions .additional{
|
||||
.extra-network-pane .card .actions .additional{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions{
|
||||
.extra-network-pane .card .actions{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -999,45 +1021,45 @@ footer {
|
|||
text-shadow: 0 0 0.2em black;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions *{
|
||||
.extra-network-pane .card .actions *{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions .name{
|
||||
.extra-network-pane .card .actions .name{
|
||||
font-size: 1.7em;
|
||||
font-weight: bold;
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions .description {
|
||||
.extra-network-pane .card .actions .description {
|
||||
display: block;
|
||||
max-height: 3em;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions .description:hover {
|
||||
.extra-network-pane .card .actions .description:hover {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .actions:hover .additional{
|
||||
.extra-network-pane .card .actions:hover .additional{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.extra-network-cards .card ul{
|
||||
.extra-network-pane .card ul{
|
||||
margin: 0.25em 0 0.75em 0.25em;
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
.extra-network-cards .card ul a{
|
||||
.extra-network-pane .card ul a{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.extra-network-cards .card ul a:hover{
|
||||
.extra-network-pane .card ul a:hover{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.extra-network-cards .card .preview{
|
||||
.extra-network-pane .card .preview{
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
|
|
@ -1158,48 +1180,9 @@ body.resizing .resize-handle {
|
|||
border-left: 1px dashed var(--border-color-primary);
|
||||
}
|
||||
|
||||
.extra-network-cards .card .copy-path-button:before {
|
||||
content: "⎘";
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .button-column {
|
||||
display: inline-flex;
|
||||
visibility: hidden;
|
||||
color: white;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal:hover .button-column {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .copy-path-button:before {
|
||||
content: "⎘";
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .metadata-button:before{
|
||||
content: "🛈";
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .edit-button:before{
|
||||
content: "🛠";
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .card-button {
|
||||
color: white;
|
||||
text-shadow: 2px 2px 3px black;
|
||||
font-size: 1rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal .card-button:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.extra-network-cards .card-minimal {
|
||||
.extra-network-pane .card-minimal {
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
|
@ -1208,44 +1191,87 @@ body.resizing .resize-handle {
|
|||
line-break: anywhere;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
list-style-type: '📄';
|
||||
}
|
||||
|
||||
/* prevents clicking/collapsing of details tags when disabled attribute is used*/
|
||||
details[disabled] summary {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
details.folder-item > summary {
|
||||
list-style-type: '📁';
|
||||
}
|
||||
|
||||
details.folder-item[open] > summary {
|
||||
list-style-type: '📂';
|
||||
/* Pushes buttons to right */
|
||||
.extra-network-pane .card-minimal .name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-item,
|
||||
.folder-item,
|
||||
.folder-item-summary {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
padding: 0.05rem;
|
||||
padding-left: 0.05rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.folder-item-summary:hover,
|
||||
.file-item:hover {
|
||||
.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);
|
||||
}
|
||||
|
||||
.dark .folder-item-summary:hover,
|
||||
.dark .file-item:hover {
|
||||
.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
|
||||
.dark .extra-network-pane .extra-network-tree .file-item: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;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree details.folder-item > summary {
|
||||
list-style-type: '📁';
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
|
||||
list-style-type: '📂';
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network tree ul.folder-container {
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree li.file-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree li.file-item::before {
|
||||
content: '📄';
|
||||
font-size: 0.85rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.extra-network-pane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-subdirs {
|
||||
display: block;
|
||||
}
|
||||
.extra-network-pane .extra-network-tree {
|
||||
font-size: 1rem;
|
||||
width: 25%;
|
||||
}
|
||||
.extra-network-pane .extra-network-cards {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dark .extra-network-tree .folder-item-summary.selected{
|
||||
background-color: var(--neutral-800);
|
||||
}
|
||||
|
||||
.extra-network-tree .folder-item-summary.selected {
|
||||
background-color: var(--neutral-200);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue