From f8442348ad2ec09bc2766986092b1821527e9ef2 Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Thu, 28 Mar 2019 22:52:57 +0100 Subject: [PATCH] icons --- app/app.css | 113 +++++++++++++++++++----------------- app/css/app.less | 2 +- app/css/component.less | 28 +++++---- app/css/nav.less | 4 ++ app/css/player.less | 16 +++-- app/css/queue.less | 3 +- app/icons/download.svg | 1 + app/icons/folder.svg | 1 + app/icons/library-music.svg | 1 + app/icons/music.svg | 1 + app/index.html | 34 ++++++----- app/js/app.js | 11 ++++ app/js/lib/icons.js | 12 ++++ app/js/lib/ui.js | 19 +++--- app/js/player.js | 9 +-- app/js/queue.js | 8 +-- app/js/yt.js | 2 +- 17 files changed, 151 insertions(+), 114 deletions(-) create mode 100644 app/icons/download.svg create mode 100644 app/icons/folder.svg create mode 100644 app/icons/library-music.svg create mode 100644 app/icons/music.svg diff --git a/app/app.css b/app/app.css index 1deaf11..8ddb565 100644 --- a/app/app.css +++ b/app/app.css @@ -38,6 +38,7 @@ button { border: none; line-height: 1; cursor: pointer; + flex-shrink: 0; } @font-face { font-family: 'Lato'; @@ -71,6 +72,9 @@ nav ul { display: flex; flex-direction: row; } +nav ul .icon { + margin-right: 4px; +} nav ul li { text-align: center; flex: 1 0 0; @@ -85,15 +89,7 @@ nav ul li.active { #player { display: flex; flex-direction: row; -} -#player .art img { - vertical-align: top; -} -#player .info { - flex-grow: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + align-items: center; } #player:not([data-state=play]) .pause { display: none; @@ -105,7 +101,20 @@ nav ul li.active { #player:not([data-flags~=repeat]) .repeat { opacity: 0.5; } -#player .icon { +#player .art img { + vertical-align: top; +} +#player .info { + flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#player .controls { + white-space: nowrap; + text-align: center; +} +#player .controls .icon { width: 64px; } #player .misc { @@ -135,7 +144,7 @@ nav ul li.active { padding: 0 4px; white-space: nowrap; } -.component .grid li h2 { +.component .grid h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -143,17 +152,17 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -.component .grid li button { - flex-shrink: 0; -} -@media (pointer: coarse) { - .component .grid li button .icon { - width: 32px; - } +.component .grid h2 .icon { + margin-right: 4px; } .component .grid li:nth-child(odd) { background-color: #555; } +@media (pointer: coarse) { + .component .grid .icon { + width: 32px; + } +} #queue { height: 100%; display: flex; @@ -173,7 +182,7 @@ nav ul li.active { padding: 0 4px; white-space: nowrap; } -#queue .grid li h2 { +#queue .grid h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -181,19 +190,19 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#queue .grid li button { - flex-shrink: 0; -} -@media (pointer: coarse) { - #queue .grid li button .icon { - width: 32px; - } +#queue .grid h2 .icon { + margin-right: 4px; } #queue .grid li:nth-child(odd) { background-color: #555; } -#queue .current { - font-weight: bold; +@media (pointer: coarse) { + #queue .grid .icon { + width: 32px; + } +} +#queue .current * { + font-weight: bold !important; } #library { height: 100%; @@ -214,7 +223,7 @@ nav ul li.active { padding: 0 4px; white-space: nowrap; } -#library .grid li h2 { +#library .grid h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -222,17 +231,17 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#library .grid li button { - flex-shrink: 0; -} -@media (pointer: coarse) { - #library .grid li button .icon { - width: 32px; - } +#library .grid h2 .icon { + margin-right: 4px; } #library .grid li:nth-child(odd) { background-color: #555; } +@media (pointer: coarse) { + #library .grid .icon { + width: 32px; + } +} #fs { height: 100%; display: flex; @@ -252,7 +261,7 @@ nav ul li.active { padding: 0 4px; white-space: nowrap; } -#fs .grid li h2 { +#fs .grid h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -260,17 +269,17 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#fs .grid li button { - flex-shrink: 0; -} -@media (pointer: coarse) { - #fs .grid li button .icon { - width: 32px; - } +#fs .grid h2 .icon { + margin-right: 4px; } #fs .grid li:nth-child(odd) { background-color: #555; } +@media (pointer: coarse) { + #fs .grid .icon { + width: 32px; + } +} #playlists { height: 100%; display: flex; @@ -290,7 +299,7 @@ nav ul li.active { padding: 0 4px; white-space: nowrap; } -#playlists .grid li h2 { +#playlists .grid h2 { flex-grow: 1; font-size: 100%; font-weight: normal; @@ -298,14 +307,14 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#playlists .grid li button { - flex-shrink: 0; -} -@media (pointer: coarse) { - #playlists .grid li button .icon { - width: 32px; - } +#playlists .grid h2 .icon { + margin-right: 4px; } #playlists .grid li:nth-child(odd) { background-color: #555; } +@media (pointer: coarse) { + #playlists .grid .icon { + width: 32px; + } +} diff --git a/app/css/app.less b/app/css/app.less index 1f3eb26..8ad08f5 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -37,9 +37,9 @@ button { border: none; line-height: 1; cursor: pointer; + flex-shrink: 0; } - @import "font.less"; @import "icons.less"; @import "main.less"; diff --git a/app/css/component.less b/app/css/component.less index 523a60b..f5f99fd 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -18,27 +18,25 @@ align-items: center; padding: 0 4px; white-space: nowrap; + } - h2 { - flex-grow: 1; - font-size: 100%; - font-weight: normal; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - } + h2 { + flex-grow: 1; + font-size: 100%; + font-weight: normal; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; - button { - flex-shrink: 0; - - @media (pointer: coarse) { - .icon { width: 32px; } - } - } + .icon { margin-right: 4px; } } li:nth-child(odd) { background-color: #555; } + + @media (pointer: coarse) { + .icon { width: 32px; } + } } } diff --git a/app/css/nav.less b/app/css/nav.less index 41c289c..920a488 100644 --- a/app/css/nav.less +++ b/app/css/nav.less @@ -5,6 +5,10 @@ nav ul { display: flex; flex-direction: row; + .icon { + margin-right: 4px; + } + li { text-align: center; flex: 1 0 0; diff --git a/app/css/player.less b/app/css/player.less index da1d729..6efee57 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -1,8 +1,14 @@ #player { display: flex; flex-direction: row; + align-items: center; + + &:not([data-state=play]) .pause { display: none; } + &[data-state=play] .play { display: none; } + &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } .art img { vertical-align: top; } + .info { flex-grow: 1; white-space: nowrap; @@ -10,12 +16,10 @@ text-overflow: ellipsis; } - &:not([data-state=play]) .pause { display: none; } - &[data-state=play] .play { display: none; } - &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } - - .icon { - width: 64px; + .controls { + white-space: nowrap; + text-align: center; + .icon { width: 64px; } } .misc { diff --git a/app/css/queue.less b/app/css/queue.less index ed581a4..f168575 100644 --- a/app/css/queue.less +++ b/app/css/queue.less @@ -1,5 +1,4 @@ #queue { .component; - - .current { font-weight: bold; } + .current * { font-weight: bold !important; } } diff --git a/app/icons/download.svg b/app/icons/download.svg new file mode 100644 index 0000000..67c9440 --- /dev/null +++ b/app/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/icons/folder.svg b/app/icons/folder.svg new file mode 100644 index 0000000..250600d --- /dev/null +++ b/app/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/icons/library-music.svg b/app/icons/library-music.svg new file mode 100644 index 0000000..3bb1055 --- /dev/null +++ b/app/icons/library-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/icons/music.svg b/app/icons/music.svg new file mode 100644 index 0000000..36d700f --- /dev/null +++ b/app/icons/music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/index.html b/app/index.html index 2ab716a..c74906f 100644 --- a/app/index.html +++ b/app/index.html @@ -14,22 +14,26 @@

- / - - - - +
+ + + + +
+ / +
+
- - + +
- - + +
    @@ -45,20 +49,20 @@
    - +
    diff --git a/app/js/app.js b/app/js/app.js index 2955e2e..0e2b78f 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -1,6 +1,7 @@ import * as nav from "./nav.js"; import * as mpd from "./lib/mpd.js"; import * as player from "./player.js"; +import * as html from "./lib/html.js"; import * as queue from "./queue.js"; import * as library from "./library.js"; @@ -11,6 +12,8 @@ import * as yt from "./yt.js"; const components = { queue, library, fs, playlists, yt }; export function activate(what) { + location.hash = what; + for (let id in components) { let node = document.querySelector(`#${id}`); if (what == id) { @@ -23,7 +26,15 @@ export function activate(what) { nav.active(what); } +function initIcons() { + Array.from(document.querySelectorAll("[data-icon]")).forEach(node => { + let icon = html.icon(node.dataset.icon); + node.insertBefore(icon, node.firstChild); + }); +} + async function init() { + initIcons(); await mpd.init(); nav.init(document.querySelector("nav")); diff --git a/app/js/lib/icons.js b/app/js/lib/icons.js index 8d71c07..8f18c4a 100644 --- a/app/js/lib/icons.js +++ b/app/js/lib/icons.js @@ -1,4 +1,7 @@ let ICONS={}; +ICONS["library-music"] = ` + +`; ICONS["pause"] = ` `; @@ -47,9 +50,15 @@ ICONS["minus-circle-outline"] = ` `; +ICONS["music"] = ` + +`; ICONS["repeat"] = ` `; +ICONS["folder"] = ` + +`; ICONS["close-circle-outline"] = ` `; @@ -59,6 +68,9 @@ ICONS["pause-circle-outline"] = ` `; +ICONS["download"] = ` + +`; ICONS["play-circle"] = ` `; diff --git a/app/js/lib/ui.js b/app/js/lib/ui.js index d8f519e..0b47ea8 100644 --- a/app/js/lib/ui.js +++ b/app/js/lib/ui.js @@ -30,9 +30,7 @@ function fileName(data) { function formatTitle(ctx, data) { let tokens = []; switch (ctx) { - case CTX_FS: - return `🎵 ${fileName(data)}`; - break; + case CTX_FS: return fileName(data); break; case CTX_LIBRARY: data["Track"] && tokens.push(data["Track"].padStart(2, "0")); @@ -108,8 +106,11 @@ function addButton(type, what, parent) { export function song(ctx, data, parent) { let node = html.node("li", {}, "", parent); + let title = formatTitle(ctx, data); - html.node("h2", {}, title, node); + let h2 = html.node("h2", {}, "", node); + if (ctx == CTX_FS || ctx == CTX_LIBRARY) { html.icon("music", h2); } + html.text(title, h2); html.node("span", {className:"duration"}, format.time(Number(data["duration"])), node); @@ -135,8 +136,9 @@ export function song(ctx, data, parent) { export function group(ctx, label, urlOrFilter, parent) { let node = html.node("li", {}, "", parent); - if (ctx == CTX_FS) { label = `📁 ${label}`; } - html.node("h2", {}, label, node); + let h2 = html.node("h2", {}, "", node); + if (ctx == CTX_FS) { html.icon("folder", h2); } + html.text(label, h2); let type = (ctx == CTX_FS ? TYPE_URL : TYPE_FILTER); @@ -149,8 +151,9 @@ export function group(ctx, label, urlOrFilter, parent) { export function playlist(name, parent) { let node = html.node("li", {}, "", parent); - html.icon("playlist-music", node) - html.node("h2", {}, name, node); + let h2 = html.node("h2", {}, "", node); + html.icon("playlist-music", h2) + html.text(name, h2); playButton(TYPE_PLAYLIST, name, node); addButton(TYPE_PLAYLIST, name, node); diff --git a/app/js/player.js b/app/js/player.js index dfd1088..54328eb 100644 --- a/app/js/player.js +++ b/app/js/player.js @@ -16,7 +16,7 @@ function sync(data) { if (data["file"] != current["file"]) { // changed song DOM.duration.textContent = format.time(Number(data["duration"] || 0)); - DOM.title.textContent = data["Title"] || ""; + DOM.title.textContent = data["Title"] || data["file"].split("/").pop(); DOM["artist-album"].textContent = format.artistAlbum(data["Artist"], data["Album"]); pubsub.publish("song-change", null, data); } @@ -76,12 +76,5 @@ export function init(n) { DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`)); DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`)); - DOM.play.appendChild(html.icon("play")); - DOM.pause.appendChild(html.icon("pause")); - DOM.prev.appendChild(html.icon("rewind")); - DOM.next.appendChild(html.icon("fast-forward")); - DOM.random.appendChild(html.icon("shuffle")); - DOM.repeat.appendChild(html.icon("repeat")); - update(); } diff --git a/app/js/queue.js b/app/js/queue.js index b8c06dc..f005676 100644 --- a/app/js/queue.js +++ b/app/js/queue.js @@ -47,16 +47,12 @@ export function init(n) { pubsub.subscribe("song-change", onSongChange); pubsub.subscribe("queue-change", onQueueChange); - let clear = node.querySelector(".clear"); - clear.appendChild(html.icon("close")); - clear.addEventListener("click", async e => { + node.querySelector(".clear").addEventListener("click", async e => { await mpd.command("clear"); syncQueue(); }); - let save = node.querySelector(".save"); - save.appendChild(html.icon("content-save")); - save.addEventListener("click", e => { + node.querySelector(".save").addEventListener("click", e => { let name = prompt("Save current queue as a playlist?", "name"); if (name === null) { return; } mpd.command(`save "${mpd.escape(name)}"`); diff --git a/app/js/yt.js b/app/js/yt.js index f7fb6f9..735791a 100644 --- a/app/js/yt.js +++ b/app/js/yt.js @@ -22,5 +22,5 @@ export async function activate() {} export function init(n) { node = n; - node.querySelector(".go").addEventListener("click", onClick); + let button = node.querySelector(".go").addEventListener("click", onClick); }