clean up svg code

This commit is contained in:
Sj-Si 2024-05-13 15:08:08 -04:00
parent a2f8f99451
commit 4e9760c49f
4 changed files with 26 additions and 27 deletions

View File

@ -49,7 +49,7 @@
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path stroke-width="1" d="M 2 12 L 6 3 L 10 12 M 3.5 9 L 8.5 9" />
<path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12">
<path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12" />
</svg>
</button>
<button class="extra-network-control extra-network-control--sort-mode" title="Sort by date created"
@ -77,7 +77,7 @@
<line x1="12" y1="1" x2="12" y2="3" />
</g>
<g stroke-linecap="square" stroke-linejoin="square">
<path d="M 4 9 H 10 L 12 10 L 10 11 H 4 Z M 6 9 V 10">
<path d="M 4 9 H 10 L 12 10 L 10 11 H 4 Z M 6 9 V 10" />
</g>
</svg>
</button>
@ -86,12 +86,20 @@
<div class="extra-network-controls--container">
<div class="extra-network-controls--header">Sort Order</div>
<div class="extra-network-controls--buttons">
<button class="extra-network-control extra-network-control--sort-dir" title="Sort {data_sort_dir}"
data-sort-dir="{data_sort_dir}">
<button class="extra-network-control extra-network-control--sort-dir" title="Sort ascending"
data-sort-dir="ascending" {btn_sort_dir_ascending_data_attributes}>
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path class="extra-network-control--sort-dir-icon-ascending" d="M 8 1 L 3 7 L 13 7 Z" />
<path class="extra-network-control--sort-dir-icon-descending" d="M 8 15 L 3 9 L 13 9 Z" />
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path fill="currentColor" d="M 8 1 L 3 7 L 13 7 Z" />
<path fill="none" stroke="var(--input-placeholder-color)" d="M 8 15 L 3 9 L 13 9 Z" />
</svg>
</button>
<button class="extra-network-control extra-network-control--sort-dir" title="Sort descending"
data-sort-dir="descending" {btn_sort_dir_descending_data_attributes}>
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path fill="none" stroke="var(--input-placeholder-color)" d="M 8 1 L 3 7 L 13 7 Z" />
<path fill="currentColor" d="M 8 15 L 3 9 L 13 9 Z" />
</svg>
</button>
</div>

View File

@ -1173,8 +1173,12 @@ function extraNetworksControlSortDirOnClick(event) {
}
let sort_dir_str = curr_sort_dir_str === "ascending" ? "descending" : "ascending";
btn.dataset.sortDir = sort_dir_str;
btn.setAttribute("title", `Sort ${sort_dir_str}`);
const other_btn = tab.controls_elem.querySelector(
`.extra-network-control--sort-dir[data-sort-dir="${sort_dir_str}"]`
);
delete btn.dataset.selected;
other_btn.dataset.selected = "";
tab.setSortDir(sort_dir_str);
}

View File

@ -846,11 +846,12 @@ class ExtraNetworksPage:
**{
"tabname": tabname,
"extra_networks_tabname": self.extra_networks_tabname,
"data_sort_dir": sort_dir,
"btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "",
"btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "",
"btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "",
"btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
"btn_sort_dir_ascending_data_attributes": "data-selected" if sort_dir == "ascending" else "",
"btn_sort_dir_descending_data_attributes": "data-selected" if sort_dir == "descending" else "",
"btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
"btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
"btn_card_view_data_attributes": "data-selected" if card_view_en else "",

View File

@ -1443,23 +1443,9 @@ body.resizing .resize-handle {
color: var(--button-secondary-text-color-hover);
}
/* Customize behavior or sort direction button icon. */
.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--sort-dir-icon-ascending {
fill: var(--button-secondary-text-color);
stroke: var(--button-secondary-text-color);
}
.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--sort-dir-icon-descending {
stroke: var(--input-placeholder-color);
}
.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--sort-dir-icon-descending {
fill: var(--button-secondary-text-color);
stroke: var(--button-secondary-text-color);
}
.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--sort-dir-icon-ascending {
stroke: var(--input-placeholder-color);
/* Customize behavior of sort direction button icon. */
.extra-network-control--sort-dir:not([data-selected]) {
display: none;
}
/* ==== ICONS ==== */