commit 0dd7ef41fab1ff745d975761f2d15374aa24b3d0
parent b3812407ffc1a8f941b531cf4f976cf0b8fc6dfa
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Tue, 6 Aug 2024 11:51:13 -0700
Use icons instead of text for various buttons
Using the Iconic icon pack, licensed under the MIT license.
Diffstat:
7 files changed, 80 insertions(+), 22 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -1,13 +1,3 @@
-.error {
- background-color: red;
- border: thin solid darkred;
- padding: .5rem;
-}
-
-.error > button {
- float: right;
-}
-
body {
margin: 4rem;
}
@@ -46,3 +36,35 @@ nav > ul > li {
aside {
float: right;
}
+
+input[type="image"].icon {
+ width: 2em;
+ image-rendering: crisp-edges;
+ margin: .15rem;
+ border: .15em solid rgba(0, 0, 0, .2);
+ border-radius: .4em;
+}
+
+input[type="image"].icon:hover {
+ border-color: rgba(0, 0, 0, .4);
+}
+
+.error {
+ background-color: red;
+ border: thin solid darkred;
+ border-radius: .25rem;
+ width: fit-content;
+ margin: .5rem 0 ;
+ padding: .2rem;
+}
+
+.error > p {
+ margin: 0;
+ display: inline;
+ vertical-align: middle;
+}
+
+.error > input[class="icon"] {
+ width: 1rem;
+ vertical-align: middle;
+}
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -29,18 +29,22 @@ function create_floorplan(floorplan) {
aside = document.createElement("aside")
- button = document.createElement("button")
+ button = document.createElement("input")
button.addEventListener("click", edit_floorplan_func(root, floorplan), false)
- // ! instead of a pencil for now
- button.appendChild(document.createTextNode("!"))
- button.setAttribute("title", "Edit metadata")
+ button.type = "image"
+ button.src = "/icons/create-outline.svg"
+ button.alt = "Edit"
+ button.setAttribute("title", "Edit floorplan")
+ button.setAttribute("class", "icon")
aside.append(button)
- button = document.createElement("button")
+ button = document.createElement("input")
button.addEventListener("click", delete_floorplan_func(root, floorplan), false)
- // # instead of a trashcan for now
- button.appendChild(document.createTextNode("#"))
+ button.type = "image"
+ button.src = "/icons/trash-outline.svg"
+ button.alt = "Delete"
button.setAttribute("title", "Delete floorplan")
+ button.setAttribute("class", "icon")
aside.append(button)
root.append(aside)
diff --git a/files/icons/LICENSE b/files/icons/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Ionic (http://ionic.io/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/files/icons/close-outline.svg b/files/icons/close-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/icons/create-outline.svg b/files/icons/create-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M459.94,53.25a16.06,16.06,0,0,0-23.22-.56L424.35,65a8,8,0,0,0,0,11.31l11.34,11.32a8,8,0,0,0,11.34,0l12.06-12C465.19,69.54,465.76,59.62,459.94,53.25Z"/><path d="M399.34,90,218.82,270.2a9,9,0,0,0-2.31,3.93L208.16,299a3.91,3.91,0,0,0,4.86,4.86l24.85-8.35a9,9,0,0,0,3.93-2.31L422,112.66A9,9,0,0,0,422,100L412.05,90A9,9,0,0,0,399.34,90Z"/></svg>
+\ No newline at end of file
diff --git a/files/icons/trash-outline.svg b/files/icons/trash-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="80" y1="112" x2="432" y2="112" style="stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/><path d="M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="256" y1="176" x2="256" y2="400" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="184" y1="176" x2="192" y2="400" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="328" y1="176" x2="320" y2="400" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/lib/etc.js b/files/lib/etc.js
@@ -21,13 +21,18 @@ function set_error(message, on) {
if (err_elem) {
err_elem.textContent = message
} else {
- let err_elem = document.createElement("p")
- err_elem.textContent = message
- err_elem.classList = "error"
+ let err_elem = document.createElement("div")
+ err_elem.setAttribute("class", "error")
+
+ let msg = document.createElement("p")
+ msg.appendChild(document.createTextNode(message))
+ err_elem.append(msg)
- let close = document.createElement("button")
+ let close = document.createElement("input")
+ close.type = "image"
+ close.src = "/icons/close-outline.svg"
close.addEventListener("click", delete_element_func(err_elem), false)
- close.appendChild(document.createTextNode("X"))
+ close.setAttribute("class", "icon")
err_elem.append(close)
