Skip to content

S
Stable Diffusion Webui
Commit 3db6938c authored by Sj-Si's avatar Sj-Si
Browse files
Options

begin redesign of tree module.

parent 34fc2152
Expand all Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 162 deletions
html/extra-networks-card-minimal.html
View file @ 3db6938c
<div class="card-minimal" onclick={card_clicked} data-name="{name}"> <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> </div>
html/extra-networks-pane.html 0 → 100644
View file @ 3db6938c
<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>
\ No newline at end of file
html/extra-networks-tree-directory.html 0 → 100644
View file @ 3db6938c
<details {attributes} class='folder-item' ontoggle='extraNetworksFolderClick(event, "{tabname}_extra_search");'>
<summary class='folder-item-summary'>{folder_name}</summary>
{content}
</details>
\ No newline at end of file
javascript/extraNetworks.js
View file @ 3db6938c
...@@ -253,6 +253,28 @@ function saveCardPreview(event, tabname, filename) { ...@@ -253,6 +253,28 @@ function saveCardPreview(event, tabname, filename) {
event.preventDefault(); 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) { function extraNetworksSearchButton(tabs_id, event) {
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea'); var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
var button = event.target; var button = event.target;
......
modules/shared_options.py
View file @ 3db6938c
...@@ -238,7 +238,6 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s ...@@ -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_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_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_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_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_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"), "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"),
......
modules/ui_extra_networks.py
View file @ 3db6938c
This diff is collapsed.
style.css
View file @ 3db6938c
...@@ -863,7 +863,7 @@ footer { ...@@ -863,7 +863,7 @@ footer {
margin-bottom: 1em; margin-bottom: 1em;
} }
.extra-network-cards{ .extra-network-pane{
height: calc(100vh - 24rem); height: calc(100vh - 24rem);
overflow: clip scroll; overflow: clip scroll;
resize: vertical; resize: vertical;
...@@ -908,53 +908,75 @@ footer { ...@@ -908,53 +908,75 @@ footer {
width: auto; width: auto;
} }
.extra-network-cards .nocards{ .extra-network-pane .nocards{
margin: 1.25em 0.5em 0.5em 0.5em; margin: 1.25em 0.5em 0.5em 0.5em;
} }
.extra-network-cards .nocards h1{ .extra-network-pane .nocards h1{
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.extra-network-cards .nocards li{ .extra-network-pane .nocards li{
margin-left: 0.5em; 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{ .extra-network-pane .card .button-row {
display: none;
position: absolute; position: absolute;
color: white;
right: 0; right: 0;
z-index: 1 z-index: 1;
} }
.extra-network-cards .card:hover .button-row{
display: flex; .extra-network-pane .card-minimal .button-row {
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
} }
.extra-network-cards .card .card-button{ .extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
visibility: visible;
}
.extra-network-pane .card-button{
color: white; color: white;
} }
.extra-network-cards .card .metadata-button:before{ .extra-network-pane .copy-path-button:before {
content: "⎘";
}
.extra-network-pane .metadata-button:before{
content: "🛈"; content: "🛈";
} }
.extra-network-cards .card .edit-button:before{ .extra-network-pane .edit-button:before{
content: "🛠"; content: "🛠";
} }
.extra-network-cards .card .card-button { .extra-network-pane .card-button {
width: 1.5em;
text-shadow: 2px 2px 3px black; text-shadow: 2px 2px 3px black;
color: white;
padding: 0.25em 0.1em; padding: 0.25em 0.1em;
font-size: 200%;
width: 1.5em;
} }
.extra-network-cards .card .card-button:hover{
.extra-network-pane .card-button:hover{
color: red; 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{ .standalone-card-preview.card .preview{
position: absolute; position: absolute;
...@@ -963,7 +985,7 @@ footer { ...@@ -963,7 +985,7 @@ footer {
height:100%; height:100%;
} }
.extra-network-cards .card, .standalone-card-preview.card{ .extra-network-pane .card, .standalone-card-preview.card{
display: inline-block; display: inline-block;
margin: 0.5rem; margin: 0.5rem;
width: 16rem; width: 16rem;
...@@ -980,15 +1002,15 @@ footer { ...@@ -980,15 +1002,15 @@ footer {
background-image: url('./file=html/card-no-preview.png') 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); 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; display: none;
} }
.extra-network-cards .card .actions{ .extra-network-pane .card .actions{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -999,45 +1021,45 @@ footer { ...@@ -999,45 +1021,45 @@ footer {
text-shadow: 0 0 0.2em black; text-shadow: 0 0 0.2em black;
} }
.extra-network-cards .card .actions *{ .extra-network-pane .card .actions *{
color: white; color: white;
} }
.extra-network-cards .card .actions .name{ .extra-network-pane .card .actions .name{
font-size: 1.7em; font-size: 1.7em;
font-weight: bold; font-weight: bold;
line-break: anywhere; line-break: anywhere;
} }
.extra-network-cards .card .actions .description { .extra-network-pane .card .actions .description {
display: block; display: block;
max-height: 3em; max-height: 3em;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.1; line-height: 1.1;
} }
.extra-network-cards .card .actions .description:hover { .extra-network-pane .card .actions .description:hover {
max-height: none; max-height: none;
} }
.extra-network-cards .card .actions:hover .additional{ .extra-network-pane .card .actions:hover .additional{
display: block; display: block;
} }
.extra-network-cards .card ul{ .extra-network-pane .card ul{
margin: 0.25em 0 0.75em 0.25em; margin: 0.25em 0 0.75em 0.25em;
cursor: unset; cursor: unset;
} }
.extra-network-cards .card ul a{ .extra-network-pane .card ul a{
cursor: pointer; cursor: pointer;
} }
.extra-network-cards .card ul a:hover{ .extra-network-pane .card ul a:hover{
color: red; color: red;
} }
.extra-network-cards .card .preview{ .extra-network-pane .card .preview{
position: absolute; position: absolute;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
...@@ -1158,94 +1180,98 @@ body.resizing .resize-handle { ...@@ -1158,94 +1180,98 @@ body.resizing .resize-handle {
border-left: 1px dashed var(--border-color-primary); border-left: 1px dashed var(--border-color-primary);
} }
.extra-network-cards .card .copy-path-button:before { .extra-network-pane .card-minimal {
content: "⎘";
}
.extra-network-cards .card-minimal .button-column {
display: inline-flex; display: inline-flex;
visibility: hidden; flex-grow: 1;
color: white; position: relative;
padding-left: 0.5rem; overflow: hidden;
padding-right: 0.5rem; cursor: pointer;
align-items: center; font-size: 1rem;
font-weight: bold;
line-break: anywhere;
} }
.extra-network-cards .card-minimal:hover .button-column { /* Pushes buttons to right */
visibility: visible; .extra-network-pane .card-minimal .name {
flex-grow: 1;
} }
.extra-network-cards .card-minimal .copy-path-button:before { .file-item,
content: "⎘"; .folder-item,
.folder-item-summary {
padding-left: 0.05rem;
cursor: pointer;
user-select: none;
font-size: 1rem;
} }
.extra-network-cards .card-minimal .metadata-button:before{ .extra-network-pane .extra-network-tree .folder-item-summary:hover,
content: "🛈"; .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);
} }
.extra-network-cards .card-minimal .edit-button:before{ .dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
content: "🛠"; .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);
} }
.extra-network-cards .card-minimal .card-button { /* prevents clicking/collapsing of details tags when disabled attribute is used*/
color: white; .extra-network-pane .extra-network-tree details[disabled] summary {
text-shadow: 2px 2px 3px black; pointer-events: none;
font-size: 1rem; user-select: none;
width: 1.5rem;
} }
.extra-network-cards .card-minimal .card-button:hover { .extra-network-pane .extra-network-tree details.folder-item > summary {
color: red; list-style-type: '📁';
text-overflow: ellipsis;
} }
.extra-network-cards .card-minimal { .extra-network-pane .extra-network-tree details.folder-item[open] > summary {
display: inline-flex; list-style-type: '📂';
position: relative; text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
line-break: anywhere;
} }
.file-item { .extra-network-pane .extra-network tree ul.folder-container {
list-style-type: '📄'; list-style: none;
font-size: 1rem;
text-overflow: ellipsis;
} }
/* prevents clicking/collapsing of details tags when disabled attribute is used*/ .extra-network-pane .extra-network-tree li.file-item {
details[disabled] summary { display: flex;
pointer-events: none; position: relative;
user-select: none; align-items: center;
} }
details.folder-item > summary { .extra-network-pane .extra-network-tree li.file-item::before {
list-style-type: '📁'; content: '📄';
font-size: 0.85rem;
vertical-align: middle;
} }
details.folder-item[open] > summary { .extra-network-pane {
list-style-type: '📂'; display: flex;
} }
.file-item, .extra-network-pane .extra-network-subdirs {
.folder-item,
.folder-item-summary {
display: block; display: block;
}
.extra-network-pane .extra-network-tree {
font-size: 1rem; font-size: 1rem;
padding: 0.05rem; width: 25%;
cursor: pointer;
user-select: none;
} }
.extra-network-pane .extra-network-cards {
.folder-item-summary:hover, flex-grow: 1;
.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 .extra-network-tree .folder-item-summary.selected{
.dark .file-item:hover {
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
background-color: var(--neutral-800); background-color: var(--neutral-800);
} }
.extra-network-tree .folder-item-summary.selected {
background-color: var(--neutral-200);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment