From d65f3185c4f07f5526327a07a6b6f8ad9145f14c Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Sun, 11 Dec 2022 20:54:38 -0300 Subject: [PATCH] resource now use dblclick to rename; download Signed-off-by: Victor Seiji Hariki --- css/ui/generic.css | 109 +++++++++++++++++++++++++++++++++++++++++ css/ui/tool/stamp.css | 76 ---------------------------- js/ui/tool/stamp.js | 66 ++++++++++++++++--------- res/icons/download.svg | 7 +++ 4 files changed, 159 insertions(+), 99 deletions(-) create mode 100644 res/icons/download.svg diff --git a/css/ui/generic.css b/css/ui/generic.css index 128d679..df694ec 100644 --- a/css/ui/generic.css +++ b/css/ui/generic.css @@ -236,3 +236,112 @@ select > option:checked::after { mask-repeat: no-repeat; background-color: var(--c-text); } + +/** + * Generic list + */ + +.list { + height: 200px; + + overflow-y: auto; + + background-color: var(--c-primary); + + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.list > *:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.list .list-item { + display: flex; + align-items: center; + justify-content: space-between; + + height: 25px; + padding-left: 5px; + padding-right: 5px; + + cursor: pointer; + + color: var(--c-text); + + transition-duration: 50ms; +} + +.list .list-item.active { + background-color: var(--c-active); +} +.list .list-item.active:hover, +.list .list-item:hover { + background-color: var(--c-hover); +} +.list .list-item.active:active, +.list .list-item:active { + background-color: var(--c-hover); + filter: brightness(120%); +} + +.list .list-item > .title { + flex: 1; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + background-color: transparent; + + border: 0; + color: var(--c-text); +} + +.list .list-item > .actions { + display: flex; + align-self: stretch; +} + +.list .actions > button { + display: flex; + align-items: stretch; + + padding: 0; + + width: 25px; + aspect-ratio: 1; + + background-color: transparent; + border: 0; + cursor: pointer; +} + +.list .list-item > .actions > *:hover > * { + margin: 2px; +} + +.list .actions > button > *:first-child { + flex: 1; + margin: 3px; + + -webkit-mask-size: contain; + mask-size: contain; + background-color: var(--c-text); +} + +/* Generic buttons */ +.list .actions > .delete-btn > *:first-child { + -webkit-mask-image: url("/res/icons/trash.svg"); + mask-image: url("/res/icons/trash.svg"); +} + +.list .actions > .rename-btn > *:first-child { + -webkit-mask-image: url("/res/icons/edit.svg"); + mask-image: url("/res/icons/edit.svg"); +} + +.list .actions > .download-btn > *:first-child { + -webkit-mask-image: url("/res/icons/download.svg"); + mask-image: url("/res/icons/download.svg"); +} diff --git a/css/ui/tool/stamp.css b/css/ui/tool/stamp.css index a685abb..4686e19 100644 --- a/css/ui/tool/stamp.css +++ b/css/ui/tool/stamp.css @@ -28,8 +28,6 @@ .resource-manager > .resource-list { height: 200px; - background-color: #ffffff66; - border-top-left-radius: 5px; border-top-right-radius: 5px; @@ -37,80 +35,6 @@ overflow-x: hidden; } -.resource-manager > .resource-list > * { - display: flex; - justify-content: space-between; - align-items: center; - - cursor: pointer; - white-space: nowrap; -} - -.resource-manager > .resource-list > * > .resource-title { - overflow: hidden; - margin: 5px; - text-overflow: ellipsis; -} - -.resource-manager > .resource-list > * > .actions { - display: flex; - align-items: center; -} - -.resource-manager .actions > button { - display: flex; - align-items: stretch; - - padding: 0; - - width: 30px; - aspect-ratio: 1; - - background-color: transparent; - border: 0; - cursor: pointer; -} - -.resource-manager .actions > button:hover { - background-color: rgba(255, 255, 255, 0.5); -} - -.resource-manager .actions > button:active { - background-color: rgba(255, 255, 255, 0.7); -} - -.resource-manager .actions > button > *:first-child { - flex: 1; - margin: 3px; - - -webkit-mask-size: contain; - mask-size: contain; - background-color: var(--c-primary); -} - -.resource-manager .actions > .rename-btn > *:first-child { - -webkit-mask-image: url("/res/icons/edit.svg"); - mask-image: url("/res/icons/edit.svg"); -} - -.resource-manager .actions > .delete-btn > *:first-child { - -webkit-mask-image: url("/res/icons/trash.svg"); - mask-image: url("/res/icons/trash.svg"); -} - -.resource-manager > .resource-list > .selected:hover, -.resource-manager > .resource-list > *:hover { - background-color: #fff8; -} -.resource-manager > .resource-list > .selected { - background-color: #fff6; -} - -.resource-manager > .resource-list.dragging { - background-color: #ffffff88; - transition-duration: 0.3s; -} - .resource-manager > .upload-button { display: block; width: 100%; diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index 8cf3bc7..8be2e83 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -44,7 +44,7 @@ const stampTool = () => // Deselect state.selected = null; Array.from(state.ctxmenu.resourceList.children).forEach((child) => { - child.classList.remove("selected"); + child.classList.remove("active"); }); ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); @@ -71,20 +71,20 @@ const stampTool = () => const resourceWrapper = resource && resource.dom.wrapper; const wasSelected = - resourceWrapper && resourceWrapper.classList.contains("selected"); + resourceWrapper && resourceWrapper.classList.contains("active"); Array.from(state.ctxmenu.resourceList.children).forEach((child) => { - child.classList.remove("selected"); + child.classList.remove("active"); }); // Select if (!wasSelected) { - resourceWrapper && resourceWrapper.classList.add("selected"); + resourceWrapper && resourceWrapper.classList.add("active"); state.selected = resource; } // If already selected, clear selection else { - resourceWrapper.classList.remove("selected"); + resourceWrapper.classList.remove("active"); state.selected = null; } @@ -136,16 +136,35 @@ const stampTool = () => ); const resourceWrapper = document.createElement("div"); resourceWrapper.id = `resource-${resource.id}`; - resourceWrapper.classList.add("resource"); - const resourceTitle = document.createElement("span"); - resourceTitle.textContent = resource.name; - resourceTitle.classList.add("resource-title"); + resourceWrapper.classList.add("resource", "list-item"); + const resourceTitle = document.createElement("input"); + resourceTitle.value = resource.name; + resourceTitle.title = resource.name; + resourceTitle.style.pointerEvents = "none"; + resourceTitle.addEventListener("change", () => { + resource.name = resourceTitle.value; + resourceTitle.title = resourceTitle.value; + + syncResources(); + }); + + resourceTitle.addEventListener("blur", () => { + resourceTitle.style.pointerEvents = "none"; + }); + resourceTitle.classList.add("resource-title", "title"); + resourceWrapper.appendChild(resourceTitle); resourceWrapper.addEventListener("click", () => state.selectResource(resource) ); + resourceWrapper.addEventListener("dblclick", () => { + resourceTitle.style.pointerEvents = "auto"; + resourceTitle.focus(); + resourceTitle.select(); + }); + resourceWrapper.addEventListener("mouseover", () => { state.ctxmenu.previewPane.style.display = "block"; state.ctxmenu.previewPane.style.backgroundImage = `url(${resource.image.src})`; @@ -158,24 +177,25 @@ const stampTool = () => const actionArray = document.createElement("div"); actionArray.classList.add("actions"); - const renameButton = document.createElement("button"); - renameButton.addEventListener( + const saveButton = document.createElement("button"); + saveButton.addEventListener( "click", (evn) => { - evn.stopPropagation(); - const name = prompt("Rename your resource:", resource.name); - if (name) { - resource.name = name; - resourceTitle.textContent = name; + const canvas = document.createElement("canvas"); + canvas.width = resource.image.width; + canvas.height = resource.image.height; + canvas.getContext("2d").drawImage(resource.image, 0, 0); - syncResources(); - } + downloadCanvas({ + canvas, + filename: `openOutpaint - resource '${resource.name}'.png`, + }); }, {passive: false} ); - renameButton.title = "Rename Resource"; - renameButton.appendChild(document.createElement("div")); - renameButton.classList.add("rename-btn"); + saveButton.title = "Download Resource"; + saveButton.appendChild(document.createElement("div")); + saveButton.classList.add("download-btn"); const trashButton = document.createElement("button"); trashButton.addEventListener( @@ -191,7 +211,7 @@ const stampTool = () => trashButton.appendChild(document.createElement("div")); trashButton.classList.add("delete-btn"); - actionArray.appendChild(renameButton); + actionArray.appendChild(saveButton); actionArray.appendChild(trashButton); resourceWrapper.appendChild(actionArray); state.ctxmenu.resourceList.appendChild(resourceWrapper); @@ -340,7 +360,7 @@ const stampTool = () => const resourceManager = document.createElement("div"); resourceManager.classList.add("resource-manager"); const resourceList = document.createElement("div"); - resourceList.classList.add("resource-list"); + resourceList.classList.add("list"); const previewPane = document.createElement("div"); previewPane.classList.add("preview-pane"); diff --git a/res/icons/download.svg b/res/icons/download.svg new file mode 100644 index 0000000..e04900e --- /dev/null +++ b/res/icons/download.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file