diff options
| -rw-r--r-- | html/extra-networks-tree-button.html | 23 | ||||
| -rw-r--r-- | javascript/extraNetworks.js | 10 | ||||
| -rw-r--r-- | modules/ui_extra_networks.py | 187 | ||||
| -rw-r--r-- | style.css | 181 |
4 files changed, 207 insertions, 194 deletions
diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html index 920330f7..9fb0ec79 100644 --- a/html/extra-networks-tree-button.html +++ b/html/extra-networks-tree-button.html @@ -1,11 +1,22 @@ <span data-filterable-item-text hidden>{search_terms}</span> -<button class="action-list-content action-list-content-file" +<button class="tree-list-content {subclass}" + expanded="false" type="button" - onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');" + onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');{onclick_extra}" > - <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 class='tree-list-item-action tree-list-item-action--leading'> + {action_list_item_action_leading} + </span> + <span class="tree-list-item-visual tree-list-item-visual--leading"> + {action_list_item_visual_leading} + </span> + <span class="tree-list-item-label tree-list-item-label--truncate"> + {action_list_item_label} + </span> + <span class="tree-list-item-visual tree-list-item-visual--trailing"> + {action_list_item_visual_trailing} + </span> + <span class="tree-list-item-action tree-list-item-action--trailing"> + {action_list_item_action_trailing} </span> </button>
\ No newline at end of file diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 97a97d61..56c9dc4c 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -267,7 +267,7 @@ 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 btn The clicked `tree-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. */ @@ -288,7 +288,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) { * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged. * * @param event The generated event. - * @param btn The clicked `action-list-item` button. + * @param btn The clicked `tree-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. */ @@ -310,7 +310,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) { function _remove_selected_from_all() { // Removes the `selected` attribute from all buttons. - var sels = document.querySelectorAll("button.action-list-content"); + var sels = document.querySelectorAll("button.tree-list-content"); [...sels].forEach(el => { el.removeAttribute("selected"); }); @@ -331,7 +331,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) { // 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")) { + if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) { _expand_or_collapse(ul, btn); } else { // User clicked anywhere else on the button. @@ -356,7 +356,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) { function extraNetworksTreeOnClick(event, tabname, tab_id) { /** - * Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`. + * Handles `onclick` events for buttons within an `extra-network-tree .tree-list--tree`. * * Determines whether the clicked button in the tree is for a file entry or a directory * then calls the appropriate function. diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 9cf5b57f..a49c6c1c 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -20,28 +20,28 @@ allowed_dirs = set() default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
tree_tpl = (
- "<div class='action-list-search'>"
+ "<div class='tree-list-search'>"
"<input "
"id='{tabname}_{tab_id}_extra_search' "
- "class='action-list-search-text' "
+ "class='tree-list-search-text' "
"type='search' "
"placeholder='Filter files'"
">"
"</div>"
- "<ul class='action-list action-list--tree'>"
+ "<ul class='tree-list tree-list--tree'>"
"{content}"
"</ul>"
)
tree_ul_tpl = (
- "<ul class='action-list action-list--subgroup' data-hidden>"
+ "<ul class='tree-list tree-list--subgroup' data-hidden>"
"{content}"
"</ul>"
)
tree_li_dir_tpl = (
"<li "
- "class='action-list-item action-list-item--has-subitem' "
+ "class='tree-list-item tree-list-item--has-subitem' "
"data-path='{path}' "
"data-tree-entry-type='dir'>"
"{content}"
@@ -50,59 +50,19 @@ tree_li_dir_tpl = ( tree_li_file_tpl = (
"<li "
"id='file-tree-item-{hash}' "
- "class='action-list-item action-list-item--subitem' "
+ "class='tree-list-item tree-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>"
+action_list_item_action_leading = (
+ "<span class='tree-list-item-action tree-list-item-action--leading'>"
+ "<i class='tree-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 [])
@@ -243,7 +203,6 @@ class ExtraNetworksPage: self.id_page = self.name.replace(" ", "_")
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
@@ -278,7 +237,12 @@ class ExtraNetworksPage: return ""
- def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
+ def create_item_html(
+ self,
+ tabname: str,
+ item: dict,
+ template: Optional[str] = None,
+ ) -> Union[str, dict]:
"""Generates HTML for a single ExtraNetworks Item
Args:
@@ -301,19 +265,32 @@ class ExtraNetworksPage: width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
+
onclick = item.get("onclick", None)
if onclick is None:
- if "negative_prompt" in item:
- onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {item["negative_prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
- else:
- onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-
+ print("HERE")
+ print("TABNAME:", tabname)
+ print("PROMPT:", item["prompt"])
+ print("NEG_PROMPT:", item.get("negative_prompt", ""))
+ print("ALLOW_NEG:", self.allow_negative_prompt)
+ onclick_js_tpl = "cardClicked('{tabname}', '{prompt}', '{neg_prompt}', '{allow_neg}');"
+ onclick = onclick_js_tpl.format(
+ **{
+ "tabname": tabname,
+ "prompt": item["prompt"],
+ "neg_prompt": item.get("negative_prompt", ""),
+ "allow_neg": "true" if self.allow_negative_prompt else "false"
+ }
+ )
+ onclick = html.escape(onclick)
+
+
copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
metadata_button = ""
metadata = item.get("metadata")
if metadata:
- metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
+ metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
@@ -335,7 +312,12 @@ class ExtraNetworksPage: if search_only and shared.opts.extra_networks_hidden_models == "Never":
return ""
- sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
+ sort_keys = " ".join(
+ [
+ f'data-sort-{k}="{html.escape(str(v))}"'
+ for k, v in item.get("sort_keys", {}).items()
+ ]
+ ).strip()
search_terms_html = ""
search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
@@ -366,13 +348,12 @@ class ExtraNetworksPage: "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
"tabname": tabname,
"tab_id": self.id_page,
-
}
if template:
return template.format(**args)
else:
- return self.card_page.format(**args)
+ return args
def create_tree_view_html(self, tabname: str) -> str:
"""Generates HTML for displaying folders in a tree view.
@@ -393,73 +374,94 @@ class ExtraNetworksPage: if not tree:
return res
- def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
+ def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]:
"""Recursively builds HTML for a tree."""
- _res = ""
if not data:
- return (
- "<details open disabled class='folder-item-empty'>"
- "<summary class='folder-item-summary-empty'>Directory is empty</summary>"
- "</details>"
- )
+ return None
+
+ # Lists for storing <li> items html for directories and files separately.
+ _dir_li = []
+ _file_li = []
for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
if isinstance(v, (ExtraNetworksItem,)):
- _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),
- }
+ _item_html_args = self.create_item_html(tabname, v.item)
+ _action_buttons = "".join(
+ [
+ _item_html_args["copy_path_button"],
+ _item_html_args["metadata_button"],
+ _item_html_args["edit_button"],
+ ]
)
- _btn = tree_btn_file_tpl.format(
+ _action_buttons = f"<div class=\"button-row\">{_action_buttons}</div>"
+ _btn = self.tree_button_template.format(
**{
- "label": v.item["name"],
- "filter": v.item["search_terms"],
+ "search_terms": "",
+ "subclass": "tree-list-content-file",
"tabname": tabname,
"tab_id": self.id_page,
- "buttons": _action_buttons,
+ "onclick_extra": _item_html_args["card_clicked"],
+ "action_list_item_action_leading": action_list_item_action_leading,
+ "action_list_item_visual_leading": "🗎",
+ "action_list_item_label": v.item["name"],
+ "action_list_item_visual_trailing": "",
+ "action_list_item_action_trailing": _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),
+ "content": _btn,
}
)
- _res += _li
- #item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
- #_res += file_template.format(**{"card": item_html})
+ _file_li.append(_li)
else:
- _btn = tree_btn_dir_tpl.format(
+ _btn = self.tree_button_template.format(
**{
- "label": os.path.basename(k),
+ "search_terms": "",
+ "subclass": "tree-list-content-dir",
"tabname": tabname,
"tab_id": self.id_page,
+ "onclick_extra": "",
+ "action_list_item_action_leading": action_list_item_action_leading,
+ "action_list_item_visual_leading": "🗀",
+ "action_list_item_label": os.path.basename(k),
+ "action_list_item_visual_trailing": "",
+ "action_list_item_action_trailing": "",
}
)
_ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
_li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
- _res += _li
- return _res
+ _dir_li.append(_li)
+
+ # Directories should always be displayed before files.
+ return "".join(_dir_li) + "".join(_file_li)
# 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.
- btn = tree_btn_dir_tpl.format(
+ btn = self.tree_button_template.format(
**{
- "label": os.path.basename(k),
+ "search_terms": "",
+ "subclass": "tree-list-content-dir",
"tabname": tabname,
"tab_id": self.id_page,
+ "onclick_extra": "",
+ "action_list_item_action_leading": action_list_item_action_leading,
+ "action_list_item_visual_leading": "🗀",
+ "action_list_item_label": os.path.basename(k),
+ "action_list_item_visual_trailing": "",
+ "action_list_item_action_trailing": "",
}
)
- ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
- li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
- res += li
+ subtree = _build_tree(v)
+ if subtree:
+ 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(
**{
@@ -473,6 +475,7 @@ class ExtraNetworksPage: res = ""
self.items = {x["name"]: x for x in self.list_items()}
for item in self.items.values():
+ print("HEEEERRE:", item)
res += self.create_item_html(tabname, item, self.card_page_template)
if res == "":
@@ -929,7 +929,7 @@ footer { margin-left: 0.5em;
}
-.extra-network-pane :is(.card, .card-minimal) .button-row{
+.extra-network-pane .card .button-row{
display: inline-flex;
visibility: hidden;
color: white;
@@ -941,13 +941,7 @@ footer { z-index: 1;
}
-.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{
+.extra-network-pane .card:hover .button-row{
visibility: visible;
}
@@ -1110,9 +1104,6 @@ div.block.gradio-box.edit-user-metadata { margin-top: 1.5em;
}
-
-
-
div.block.gradio-box.popup-dialog, .popup-dialog {
width: 56em;
background: var(--body-background-fill);
@@ -1205,7 +1196,7 @@ body.resizing .resize-handle { overflow: hidden;
}
-.extra-network-tree .action-list--tree {
+.extra-network-tree .tree-list--tree {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@@ -1213,43 +1204,42 @@ body.resizing .resize-handle { user-select: none;
margin: 0;
padding: 0;
+ margin-left: 0.25rem;
}
/* Remove auto indentation from tree. Will be overridden later. */
-.extra-network-tree .action-list--subgroup {
+.extra-network-tree .tree-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;
+ box-shadow: 0.5rem 0 0 var(--body-background-fill) inset,
+ 0.7rem 0 0 var(--neutral-800) inset;
}
/* Set indentation for each depth of tree. */
-.extra-network-tree .action-list--subgroup > .action-list-item {
+.extra-network-tree .tree-list--subgroup > .tree-list-item {
margin-left: 0.4rem !important;
padding-left: 0.4rem !important;
}
/* Styles for tree <ul> elements. */
-.extra-network-tree .action-list {
-
-}
+.extra-network-tree .tree-list {}
/* Styles for tree <li> elements. */
-.extra-network-tree .action-list-item {
+.extra-network-tree .tree-list-item {
list-style: none;
position: relative;
background-color: transparent;
}
-/* Directory <ul> */
-.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
+/* Directory <ul> visibility based on expanded attribute. */
+.extra-network-tree .tree-list-content[expanded=false]+.tree-list--subgroup {
height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
-.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
+.extra-network-tree .tree-list-content[expanded=true]+.tree-list--subgroup {
height: auto;
overflow: visible;
visibility: visible;
@@ -1257,20 +1247,25 @@ body.resizing .resize-handle { }
/* File <li> */
-.extra-network-tree .action-list-item--subitem {
+.extra-network-tree .tree-list-item--subitem {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
}
/* <li> containing <ul> */
-.extra-network-tree .action-list-item--has-subitem {
-}
+.extra-network-tree .tree-list-item--has-subitem {}
/* BUTTON ELEMENTS */
/* <button> */
-.extra-network-tree .action-list-content {
+.extra-network-tree .tree-list-content {
position: relative;
display: grid;
width: 100%;
- padding: 6px 8px;
+ padding: 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
font-size: 1rem;
text-align: left;
user-select: none;
@@ -1278,160 +1273,164 @@ body.resizing .resize-handle { 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;
+ grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
+ grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
+ grid-gap: 0.1rem;
align-items: start;
flex-grow: 1;
flex-basis: 100%;
}
+/* Buttons for directories. */
+.extra-network-tree .tree-list-content-dir {}
+
+/* Buttons for files. */
+.extra-network-tree .tree-list-item--has-subitem .tree-list--subgroup > li:first-child {
+ padding-top: 0.5rem !important;
+}
-.dark .extra-network-tree button.action-list-content:hover {
+.dark .extra-network-tree button.tree-list-content:hover {
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
background-color: var(--neutral-800);
}
-.dark .extra-network-tree button.action-list-content[selected] {
+.dark .extra-network-tree button.tree-list-content[selected] {
background-color: var(--neutral-700);
}
-.extra-network-tree button.action-list-content:hover {
+.extra-network-tree button.tree-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-tree button.action-list-content[selected] {
+.extra-network-tree button.tree-list-content[selected] {
background-color: var(--neutral-300);
}
-/* Buttons for directories. */
-.extra-network-tree .action-list-content-dir {
-
-}
-
-/* Buttons for files. */
-.extra-network-tree .action-list-content-file {
- margin-left: 2em;
-}
-
/* Text for button. */
-.extra-network-tree .action-list-item-label {
+.extra-network-tree .tree-list-item-label {
position: relative;
- line-height: 1.25em;
+ line-height: 1.25rem;
color: var(--button-secondary-text-color);
grid-area: label;
- padding-left: 0.5em;
+ padding-left: 0.5rem;
}
/* Text for button truncated. */
-.extra-network-tree .action-list-item-label--truncate {
+.extra-network-tree .tree-list-item-label--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Icon for button. */
-.extra-network-tree .action-list-item-visual {
- min-height: 1em;
+.extra-network-tree .tree-list-item-visual {
+ min-height: 1rem;
color: var(--button-secondary-text-color);
pointer-events: none;
align-items: right;
}
/* Icon for button when it is before label. */
-.extra-network-tree .action-list-item-visual--leading {
+.extra-network-tree .tree-list-item-visual--leading {
grid-area: leading-visual;
+ width: 1rem;
+ text-align: right;
}
/* Icon for button when it is after label. */
-.extra-network-tree .action-list-item-visual--trailing {
+.extra-network-tree .tree-list-item-visual--trailing {
grid-area: trailing-visual;
+ width: 1rem;
+ text-align: right;
}
/* Dropdown arrow for button. */
-.extra-network-tree .action-list-item-action--leading {
- margin-right: 1em;
+.extra-network-tree .tree-list-item-action--leading {
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+}
+
+.extra-network-tree .tree-list-content-file .tree-list-item-action--leading {
+ visibility: hidden;
}
/* 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);
+.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+ -ms-transform: rotate(135deg);
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
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);
+.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+ -ms-transform: rotate(225deg);
+ -webkit-transform: rotate(225deg);
+ transform: rotate(225deg);
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;
+.tree-list-item-action-chevron {
+ display: inline-flex;
+ /* Uses box shadow to generate a pseudo chevron `>` icon. */
+ padding: 0.3rem;
+ box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
transform: rotate(135deg);
}
-.extra-network-tree .action-list-item-action--leading {
+
+.extra-network-tree .tree-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 {
+.extra-network-tree .tree-list-item-action--trailing {
grid-area: trailing-action;
+ display: inline-flex;
}
-.extra-network-tree .action-list-item-action .button-row {
- display: flex;
- flex-grow: 1;
-}
-
-.extra-network-tree .action-list-content .button-row {
+.extra-network-tree .tree-list-content .button-row {
display: inline-flex;
- visibility: hidden !important;
- color: white;
+ visibility: hidden;
+ color: var(--button-secondary-text-color);
+
}
-.extra-network-tree .action-list-content:hover .button-row {
+.extra-network-tree .tree-list-content:hover .button-row {
visibility: visible;
}
/* Add icon to left side of <input> */
-.extra-network-tree .action-list-search::before {
+.extra-network-tree .tree-list-search::before {
content: "🔎︎";
position: absolute;
- margin: 0.5em;
- font-size: 1em;
+ margin: 0.5rem;
+ font-size: 1rem;
color: var(--input-placeholder-color);
}
-.extra-network-tree .action-list-search {
+.extra-network-tree .tree-list-search {
position: relative;
- margin: 0.5em;
+ margin: 0.5rem;
}
-.extra-network-tree .action-list-search .action-list-search-text {
+.extra-network-tree .tree-list-search .tree-list-search-text {
border: 1px solid var(--button-secondary-border-color);
- border-radius: 0.5em;
+ border-radius: 0.5rem;
color: var(--button-secondary-text-color);
background-color: transparent;
width: 100%;
- padding-left: 2em;
- line-height: 1em;
+ padding-left: 2rem;
+ line-height: 1rem;
}
/* <input> clear button (x on right side) styling */
-.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
+.extra-network-tree .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
- height: 1em;
- width: 1em;
+ height: 1rem;
+ width: 1rem;
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;
|