diff --git a/app/css/cyp.less b/app/css/cyp.less index fa9ed2c..1cb12bb 100644 --- a/app/css/cyp.less +++ b/app/css/cyp.less @@ -39,6 +39,7 @@ button { .flex-row; display: inline-flex; + flex-shrink: 0; background-color: transparent; padding: 0; diff --git a/app/css/elements/app.less b/app/css/elements/app.less index 321e864..9f2ae6d 100644 --- a/app/css/elements/app.less +++ b/app/css/elements/app.less @@ -2,13 +2,15 @@ cyp-app { .flex-column; box-sizing: border-box; + margin: 0 auto; + max-width: 800px; + height: 100vh; + font-family: lato, sans-serif; line-height: 1.25; background-color: var(--bg); color: var(--fg); text-shadow: var(--text-shadow); - max-width: 800px; - margin: 0 auto; - overflow: hidden; - height: 100vh; + + white-space: nowrap; } diff --git a/app/css/elements/menu.less b/app/css/elements/menu.less index bfa8310..291ff78 100644 --- a/app/css/elements/menu.less +++ b/app/css/elements/menu.less @@ -18,8 +18,8 @@ cyp-menu, cyp-commands { cyp-menu button { flex: 1 0 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; + border-top: var(--border-width) solid transparent; + border-bottom: var(--border-width) solid transparent; .icon { margin-right: var(--icon-spacing); diff --git a/app/css/elements/player.less b/app/css/elements/player.less index f506b66..572fd98 100644 --- a/app/css/elements/player.less +++ b/app/css/elements/player.less @@ -34,7 +34,7 @@ cyp-player { margin: 0; } - .title, .subtitle { .no-wrap; } + .title, .subtitle { .ellipsis; } } .timeline { diff --git a/app/css/elements/song.less b/app/css/elements/song.less index 570a86a..cfde077 100644 --- a/app/css/elements/song.less +++ b/app/css/elements/song.less @@ -16,6 +16,6 @@ cyp-song { margin: 0; } -// h2, div { .long-line; } FIXME vyresit zalamovani/vypustku + h2, div { .ellipsis; } // FIXME vyresit zalamovani/vypustku } } diff --git a/app/css/icons.less b/app/css/icons.less index 44b7d79..bf403e7 100644 --- a/app/css/icons.less +++ b/app/css/icons.less @@ -1,6 +1,6 @@ .icon { width: 24px; - flex-shrink: 0; +// flex-shrink: 0; path, polygon, circle { &:not([fill]) { diff --git a/app/css/mixins.less b/app/css/mixins.less index dda1a25..627b1b1 100644 --- a/app/css/mixins.less +++ b/app/css/mixins.less @@ -9,8 +9,7 @@ flex-direction: column; } -.no-wrap { - white-space: nowrap; +.ellipsis { overflow: hidden; text-overflow: ellipsis; } @@ -24,7 +23,7 @@ */ .selectable { - border-left: 4px solid transparent; + border-left: var(--border-width) solid transparent; cursor: pointer; &.selected { @@ -35,9 +34,12 @@ .item { .flex-row; .selectable; - padding: 8px 4px; + padding: 8px; + padding-left: calc(8px - var(--border-width)); &:nth-child(odd) { // FIXME nutno poresit lepe s ohledem na search background-color: var(--bg-alt); } -} \ No newline at end of file + + button .icon { width: 32px; } +} diff --git a/app/css/variables.less b/app/css/variables.less index 8ad3c9e..42f8414 100644 --- a/app/css/variables.less +++ b/app/css/variables.less @@ -6,6 +6,7 @@ cyp-app { --primary: rgb(var(--primary-raw)); --spacing: 8px; --box-shadow: 0 0 3px #000; + --border-width: 4px; } .light() { diff --git a/app/cyp.css b/app/cyp.css index 0a943f3..6bf8858 100644 --- a/app/cyp.css +++ b/app/cyp.css @@ -41,6 +41,7 @@ button { flex-direction: row; align-items: center; display: inline-flex; + flex-shrink: 0; background-color: transparent; padding: 0; border: none; @@ -75,7 +76,6 @@ select { } .icon { width: 24px; - flex-shrink: 0; } .icon path:not([fill]), .icon polygon:not([fill]), @@ -95,8 +95,7 @@ select { .flex-column:not([hidden]) { display: flex; } -.no-wrap { - white-space: nowrap; +.ellipsis { overflow: hidden; text-overflow: ellipsis; } @@ -108,7 +107,7 @@ select { } */ .selectable { - border-left: 4px solid transparent; + border-left: var(--border-width) solid transparent; cursor: pointer; } .selectable.selected { @@ -117,9 +116,10 @@ select { .item { flex-direction: row; align-items: center; - border-left: 4px solid transparent; + border-left: var(--border-width) solid transparent; cursor: pointer; - padding: 8px 4px; + padding: 8px; + padding-left: calc(8px - var(--border-width)); } .item:not([hidden]) { display: flex; @@ -130,6 +130,9 @@ select { .item:nth-child(odd) { background-color: var(--bg-alt); } +.item button .icon { + width: 32px; +} .component header { flex-direction: row; align-items: center; @@ -376,6 +379,7 @@ cyp-app { --primary: rgb(var(--primary-raw)); --spacing: 8px; --box-shadow: 0 0 3px #000; + --border-width: 4px; } cyp-app[theme=light] { --fg: #333; @@ -422,15 +426,15 @@ cyp-app[color=limegreen] { cyp-app { flex-direction: column; box-sizing: border-box; + margin: 0 auto; + max-width: 800px; + height: 100vh; font-family: lato, sans-serif; line-height: 1.25; background-color: var(--bg); color: var(--fg); text-shadow: var(--text-shadow); - max-width: 800px; - margin: 0 auto; - overflow: hidden; - height: 100vh; + white-space: nowrap; } cyp-app:not([hidden]) { display: flex; @@ -468,8 +472,8 @@ cyp-commands button:not([hidden]) { } cyp-menu button { flex: 1 0 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; + border-top: var(--border-width) solid transparent; + border-bottom: var(--border-width) solid transparent; } cyp-menu button .icon { margin-right: var(--icon-spacing); @@ -501,9 +505,10 @@ cyp-commands button.last { cyp-song { flex-direction: row; align-items: center; - border-left: 4px solid transparent; + border-left: var(--border-width) solid transparent; cursor: pointer; - padding: 8px 4px; + padding: 8px; + padding-left: calc(8px - var(--border-width)); } cyp-song:not([hidden]) { display: flex; @@ -514,6 +519,9 @@ cyp-song.selected { cyp-song:nth-child(odd) { background-color: var(--bg-alt); } +cyp-song button .icon { + width: 32px; +} cyp-song .info { flex-grow: 1; overflow: hidden; @@ -527,6 +535,11 @@ cyp-song .info h2 { font-size: var(--font-size-large); margin: 0; } +cyp-song .info h2, +cyp-song .info div { + overflow: hidden; + text-overflow: ellipsis; +} cyp-player { flex-direction: row; align-items: center; @@ -574,7 +587,6 @@ cyp-player .info h2 { } cyp-player .info .title, cyp-player .info .subtitle { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @@ -826,9 +838,10 @@ x-range:not([disabled]) .-thumb:hover { cyp-playlist { flex-direction: row; align-items: center; - border-left: 4px solid transparent; + border-left: var(--border-width) solid transparent; cursor: pointer; - padding: 8px 4px; + padding: 8px; + padding-left: calc(8px - var(--border-width)); } cyp-playlist:not([hidden]) { display: flex; @@ -839,6 +852,9 @@ cyp-playlist.selected { cyp-playlist:nth-child(odd) { background-color: var(--bg-alt); } +cyp-playlist button .icon { + width: 32px; +} cyp-playlist:nth-child(odd) { background-color: var(--bg-alt); } diff --git a/app/js/elements/song.js b/app/js/elements/song.js index 7793241..c52d9bf 100644 --- a/app/js/elements/song.js +++ b/app/js/elements/song.js @@ -16,10 +16,11 @@ export default class Song extends Item { html.node("h2", {}, lines.shift(), info); lines.length && html.node("div", {}, lines.shift(), info); -/* - playButton(TYPE_ID, id, node); -*/ - } + html.button({icon:"play"}, "", this).addEventListener("click", async e => { + e.stopPropagation(); // do not select + await this._mpd.command(`playid ${this.data["Id"]}`); + }); + } } customElements.define("cyp-song", Song); diff --git a/app/js/ui.js b/app/js/ui.js index 397bee3..97744fe 100644 --- a/app/js/ui.js +++ b/app/js/ui.js @@ -90,32 +90,6 @@ function playButton(type, what, parent) { return button; } -function deleteButton(type, id, parent) { - let title; - - switch (type) { - case TYPE_ID: title = "Delete from queue"; break; - case TYPE_PLAYLIST: title = "Delete playlist"; break; - } - - let button = html.button({icon:"close", title}, "", parent); - button.addEventListener("click", async e => { - switch (type) { - case TYPE_ID: - await mpd.command(`deleteid ${id}`); - pubsub.publish("queue-change"); - return; - case TYPE_PLAYLIST: - let ok = confirm(`Really delete playlist '${id}'?`); - if (!ok) { return; } - await mpd.command(`rm "${mpd.escape(id)}"`); - pubsub.publish("playlists-change"); - return; - } - }); - return button; -} - function addButton(type, what, parent) { let button = html.button({icon:"plus", title:"Add to queue"}, "", parent); button.addEventListener("click", async e => { @@ -177,17 +151,3 @@ export function group(ctx, label, urlOrFilter, parent) { return node; } - -export function playlist(name, parent) { - let node = html.node("li", {}, "", parent); - - let info = html.node("span", {className:"info"}, "", node); - html.icon("playlist-music", info) - html.node("h2", {}, name, info); - - playButton(TYPE_PLAYLIST, name, node); - addButton(TYPE_PLAYLIST, name, node); - deleteButton(TYPE_PLAYLIST, name, node); - - return node; -}