From 67a3629c8a15b9dc14c97865cfea2fdc3a9bd42f Mon Sep 17 00:00:00 2001
From: Carlos Galindo <git@cgj.es>
Date: Tue, 20 May 2025 09:40:49 +0200
Subject: [PATCH] preparar-misa: estilo y logica botones.

---
 res/less/song.less               |  30 +++++++-
 res/static/svg/down.svg          |   1 +
 res/static/svg/new.svg           |   1 +
 res/static/svg/random.svg        |   1 +
 res/static/svg/trash.svg         |   1 +
 res/static/svg/up.svg            |   1 +
 res/templates/preparar-misa.html | 125 +++++++++++++++++++++++--------
 7 files changed, 125 insertions(+), 35 deletions(-)
 create mode 100644 res/static/svg/down.svg
 create mode 100644 res/static/svg/new.svg
 create mode 100644 res/static/svg/random.svg
 create mode 100644 res/static/svg/trash.svg
 create mode 100644 res/static/svg/up.svg

diff --git a/res/less/song.less b/res/less/song.less
index 2edfdc8..9d87fbc 100644
--- a/res/less/song.less
+++ b/res/less/song.less
@@ -67,7 +67,9 @@ div.chorus, p.chorus {
     font-style: italic;
 }
 
-button, select.transposeSelect {
+button,
+select,
+input[type="button"] {
     min-width: 2em;
     min-height: 2em;
     padding: .4em;
@@ -79,7 +81,8 @@ button, select.transposeSelect {
         color: @text-dark;
         background-color: @secondary-dark;
     }
-    &:hover {
+    &:hover,
+    &.pair-sub:hover ~ &.pair-sup {
         background-color: @secondary-hover;
         transition-duration: @transition;
         @media (prefers-color-scheme: dark) {
@@ -97,3 +100,26 @@ select.transposeSelect {
         color: @text-dark;
     }
 }
+
+.flex-reverse {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
+.buttonpair.flex-reverse button.right,
+.buttonpair.flex-reverse button.left {
+    border: 1px solid @secondary-hover;
+    @media (prefers-color-scheme: dark) {
+        border-color: @secondary-hover-dark;
+    }
+}
+
+.buttonpair.flex-reverse button.right {
+  border-radius: 0px 10px 10px 0px;
+  border-width: 0 0 0 2px;
+}
+
+.buttonpair.flex-reverse button.left {
+  border-radius: 10px 0px 0px 10px;
+  border-width: 0 2px 0 0;
+}
\ No newline at end of file
diff --git a/res/static/svg/down.svg b/res/static/svg/down.svg
new file mode 100644
index 0000000..6a89c73
--- /dev/null
+++ b/res/static/svg/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
\ No newline at end of file
diff --git a/res/static/svg/new.svg b/res/static/svg/new.svg
new file mode 100644
index 0000000..9f774b4
--- /dev/null
+++ b/res/static/svg/new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
\ No newline at end of file
diff --git a/res/static/svg/random.svg b/res/static/svg/random.svg
new file mode 100644
index 0000000..d9a323f
--- /dev/null
+++ b/res/static/svg/random.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
diff --git a/res/static/svg/trash.svg b/res/static/svg/trash.svg
new file mode 100644
index 0000000..6679b45
--- /dev/null
+++ b/res/static/svg/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
\ No newline at end of file
diff --git a/res/static/svg/up.svg b/res/static/svg/up.svg
new file mode 100644
index 0000000..cc1b607
--- /dev/null
+++ b/res/static/svg/up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
\ No newline at end of file
diff --git a/res/templates/preparar-misa.html b/res/templates/preparar-misa.html
index 54317d6..11088f0 100644
--- a/res/templates/preparar-misa.html
+++ b/res/templates/preparar-misa.html
@@ -12,6 +12,30 @@
   .hidePreview .preview {
       display: none;
   }
+#songlist > *,
+.mainButtons input[type="button"],
+.mainButtons button {
+  margin-bottom: .5em;
+}
+label.forCheckbox {
+  text-wrap: nowrap;
+}
+button.icon img {
+  width: 1em;
+  height: 0.9em;
+  pointer-events: none;
+}
+img.redFilter {
+  filter: invert(55%) sepia(67%) saturate(876%) hue-rotate(-40deg) brightness(90%) contrast(103%);
+}
+img.greenFilter {
+  filter: invert(61%) sepia(78%) saturate(626%) hue-rotate(43deg) brightness(70%) contrast(102%);
+}
+span.songSelector {
+  display: flex;
+  flex-wrap: nowrap;
+  column-gap: 0.3em;
+}
   </style>
 </head>
 <body>
@@ -22,35 +46,48 @@
         <input type="button" onclick="shareList(event)" value="compartirla">.</p>
     <p>Si prefieres crear un PDF, <a href="https://cgj.es/cancionero-generador/">pulsa aquí</a>.</p>
     <p>
-        <label><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
-        <label><input class="init" id="previewCheckbox"  type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
-        <label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
+        <label class="forCheckbox"><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
+        <label class="forCheckbox"><input class="init" id="previewCheckbox"  type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
+        <label class="forCheckbox"><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
     </p>
-    <p class="controls">
-        <input type="button" value="Borrar todas" onclick="clearSongs()">
-        <input type="button" value="Añadir canción" onclick="addSong()">
-        <input type="button" value="Añadir canción aleatoria" onclick="addRandomSong()">
-        <input type="button" value="Añadir la primera canción de cada sección" onclick="addFirstSongs()">
-        <input type="button" value="Añadir una canción por sección (aleatorias)" onclick="addRandomSongs()">
+    <p class="controls mainButtons">
+        Añadir
+        <span class="buttonpair flex-reverse">
+            <button class="icon right pair-sub" title="Añadir una canción aleatoria" onclick="addRandomSong()">
+                aleatoria <img class="greenFilter" src="svg/random.svg"></button>
+            <button class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
+                <img class="greenFilter" src="svg/new.svg"> una canción</button>
+        </span>
+        <br>
+        Añadir
+        <span class="buttonpair flex-reverse">
+            <button class="icon right pair-sub" title="Añade una canción aleatoria por categoría" onclick="addRandomSongs()">
+                aleatorias <img class="greenFilter" src="svg/random.svg"></button>
+            <button class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
+                <img class="greenFilter" src="svg/new.svg"> varias canciones</button>
+        </span>
+        <br>
+        <button class="icon" onclick="clearSongs()"><img class="redFilter" src="svg/trash.svg"> Borrar todas</button>
     </p>
-    <ul id="songlist"></ul>
+    <div id="songlist"></div>
     <input type="button" onclick="shareList(event)" value="Compartir enlace al cancionero">
     <dialog id="sharedialog">
         <p>Copia y comparte el enlace: <a id="sharelink" href="">tus canciones</a></p>
         <input type="button" onclick="event.target.parentElement.close()" value="Cerrar">
     </dialog>
     <template id='songtemplate'>
-        <li><span class="controls"><select name="songs[]" required onchange="songSelect(event)">
+        <div><span class="controls songSelector"><select name="songs[]" required onchange="songSelect(event)">
                 <option value="">Selecciona una canción</option>{% for category, songs in categorized_songs %}
                 <optgroup label="&mdash; {{ category }}">{% for s in songs %}
                     <option value="{{ s.number }}">{{ s.number }}. {{ s.name }}</option>{% endfor %}
                 </optgroup>{% endfor %}
                 </select>
-                <input type="button" value="Subir" onclick="songUp(event)">
-                <input type="button" value="Bajar" onclick="songDown(event)">
-                <input type="button" value="Quitar" onclick="songDelete(event)"></span>
-                <div class="preview"></div>
-        </li>
+                <button class="icon" title="Subir" onclick="songUp(event)"><img class="greenFilter" src="svg/up.svg"></button>
+                <button class="icon" title="Bajar" onclick="songDown(event)"><img class="greenFilter" src="svg/down.svg"></button>
+                <button class="icon" title="Quitar" onclick="songDelete(event)"><img class="redFilter" src="svg/trash.svg"></button>
+            </span>
+            <div class="preview"></div>
+        </div>
     </template>
 </main>
 <script>
@@ -148,27 +185,49 @@ function addSongs(random) {
 	li.parentElement.removeChild(li);
 }
 
-function toggleControls(event) {
-    if (event.target.checked)
-        document.body.classList.remove("hideControls");
-    else
-        document.body.classList.add("hideControls");
-}
-
-function togglePreview(event) {
-    if (event.target.checked)
-        document.body.classList.remove("hidePreview");
-    else
-        document.body.classList.add("hidePreview");
-}
-
-function shareList(event) {
+function getSongList() {
     const ol = document.getElementById("songlist");
     let res = [];
     for (let li of ol.childNodes) {
-        let song = li.firstElementChild.firstElementChild.value;
-        res.push(song);
+        let value = li.firstElementChild.firstElementChild.value;
+        if (value)
+            res.push(value);
     }
+    return res;
+}
+
+function toggleControls(event) {
+    if (event.target.checked) {
+        document.body.classList.remove("hideControls");
+    } else {
+        if (getSongList().length == 0) {
+            event.target.checked = true;
+        } else {
+            document.body.classList.add("hideControls");
+            let preview = document.getElementById('previewCheckbox');
+            if (!preview.checked) {
+                preview.checked = true;
+                preview.dispatchEvent(new Event("change"));
+            }
+        }
+    }
+}
+
+function togglePreview(event) {
+    if (event.target.checked) {
+        document.body.classList.remove("hidePreview");
+    } else {
+        document.body.classList.add("hidePreview");
+        let controls = document.getElementById('controlsCheckbox');
+        if (!controls.checked) {
+            controls.checked = true;
+            controls.dispatchEvent(new Event("change"));
+        }
+    }
+}
+
+function shareList(event) {
+    const res = getSongList();
     if (res.length > 0) {
         let hash = res.join(",");
         document.getElementById("sharelink").href = "#" + hash;