From 7fe9a680623ac5e549c141b1ad59b961f4964d68 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Thu, 2 Mar 2023 10:20:58 -0500 Subject: [PATCH] Improve styling for track cards and add the component building blocks --- .../client/src/components/DataCard.ts | 9 ++ .../client/src/components/TextField.ts | 23 +++ .../client/src/components/TrackCard.ts | 101 +++++++++++++ music-player/client/src/components/track.ts | 137 ------------------ music-player/client/src/main.ts | 12 +- music-player/client/styles.css | 29 ++-- 6 files changed, 159 insertions(+), 152 deletions(-) create mode 100644 music-player/client/src/components/DataCard.ts create mode 100644 music-player/client/src/components/TextField.ts create mode 100644 music-player/client/src/components/TrackCard.ts delete mode 100644 music-player/client/src/components/track.ts diff --git a/music-player/client/src/components/DataCard.ts b/music-player/client/src/components/DataCard.ts new file mode 100644 index 0000000..2740011 --- /dev/null +++ b/music-player/client/src/components/DataCard.ts @@ -0,0 +1,9 @@ +export class DataCard extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.classList.add("card"); + } +} diff --git a/music-player/client/src/components/TextField.ts b/music-player/client/src/components/TextField.ts new file mode 100644 index 0000000..243eb9a --- /dev/null +++ b/music-player/client/src/components/TextField.ts @@ -0,0 +1,23 @@ +export class TextField extends HTMLElement { + static get observedAttributes() { + return ["text"]; + } + + constructor() { + super(); + } + + get text(): string | null { + return this.getAttribute("text"); + } + + set text(text: string | null) { + if (text) { + this.setAttribute("text", text); + this.innerHTML = text; + } else { + this.removeAttribute("text"); + this.innerHTML = ""; + } + } +} diff --git a/music-player/client/src/components/TrackCard.ts b/music-player/client/src/components/TrackCard.ts new file mode 100644 index 0000000..f060305 --- /dev/null +++ b/music-player/client/src/components/TrackCard.ts @@ -0,0 +1,101 @@ +import { TextField } from "./TextField"; +import { DataCard } from "./DataCard"; + +export class TrackCard extends HTMLElement { + trackNumberContainer: TextField; + nameContainer: TextField; + albumContainer: TextField; + artistContainer: TextField; + durationContainer: TextField; + + static get observedAttributes() { + return ["id", "trackNumber", "name", "album", "artist", "duration"]; + } + + constructor() { + super(); + + this.trackNumberContainer = document.createElement("text-field"); + + this.nameContainer = document.createElement("text-field"); + this.nameContainer.classList.add("track-card__name"); + + this.albumContainer = document.createElement("text-field"); + this.albumContainer.classList.add("track-card__album"); + + this.artistContainer = document.createElement("text-field"); + this.artistContainer.classList.add("track-card__artist"); + + this.durationContainer = document.createElement("text-field"); + this.durationContainer.classList.add("track-card__duration"); + } + + get name(): string | null { + return this.getAttribute("name"); + } + + set name(name: string | null) { + if (name) { + this.setAttribute("name", name); + this.nameContainer.text = name; + } else { + this.removeAttribute("open"); + this.nameContainer.text = null; + } + } + + get artist(): string | null { + return this.getAttribute("artist"); + } + + set artist(artist: string | null) { + if (artist) { + this.setAttribute("artist", artist); + this.artistContainer.text = artist; + } else { + this.removeAttribute("open"); + this.artistContainer.text = null; + } + } + + get album(): string | null { + return this.getAttribute("album"); + } + + set album(album: string | null) { + if (album) { + this.setAttribute("album", album); + this.albumContainer.text = album; + } else { + this.removeAttribute("open"); + this.albumContainer.text = null; + } + } + + get duration(): string | null { + return this.getAttribute("duration"); + } + + set duration(duration: string | null) { + if (duration) { + this.setAttribute("duration", duration); + this.durationContainer.text = duration; + } else { + this.removeAttribute("open"); + this.durationContainer.text = null; + } + } + + connectedCallback() { + const container = document.createElement("data-card"); + container.classList.add("track-card"); + + // this.appendChild(this.trackNumberContainer); + container.appendChild(this.nameContainer); + container.appendChild(this.albumContainer); + container.appendChild(this.artistContainer); + container.appendChild(this.durationContainer); + + this.appendChild(container); + } +} diff --git a/music-player/client/src/components/track.ts b/music-player/client/src/components/track.ts deleted file mode 100644 index 55c034e..0000000 --- a/music-player/client/src/components/track.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { TrackInfo } from "../client"; - -export class TrackName extends HTMLElement { - container: HTMLElement; - - static get observedAttributes() { - return ["name"]; - } - - constructor() { - super(); - this.container = document.createElement("div"); - } - - get name(): string | null { - return this.getAttribute("name"); - } - - set name(name: string | null) { - while (this.container.lastChild) { - this.container.removeChild(this.container.lastChild); - } - if (name) { - this.setAttribute("name", name); - this.container.appendChild(document.createTextNode(name)); - } else { - this.removeAttribute("name"); - } - } - - connectedCallback() { - this.appendChild(this.container); - } -} - -export class TrackCard extends HTMLElement { - static get observedAttributes() { - return ["id", "trackNumber", "name", "album", "artist", "duration"]; - } - - constructor() { - super(); - } - - attributeChangeCallback( - attrName: string, - oldValue: string, - newValue: string - ): void { - if (newValue !== oldValue) { - this.updateContent(); - } - } - - get name(): string | null { - return this.getAttribute("name"); - } - - set name(name: string | null) { - if (name) { - this.setAttribute("name", name); - } else { - this.removeAttribute("open"); - } - this.updateContent(); - } - - get artist(): string | null { - return this.getAttribute("artist"); - } - - set artist(artist: string | null) { - if (artist) { - this.setAttribute("artist", artist); - } else { - this.removeAttribute("open"); - } - this.updateContent(); - } - - get album(): string | null { - return this.getAttribute("album"); - } - - set album(album: string | null) { - if (album) { - this.setAttribute("album", album); - } else { - this.removeAttribute("open"); - } - this.updateContent(); - } - - get length(): string | null { - return this.getAttribute("length"); - } - - set length(length: string | null) { - if (length) { - this.setAttribute("length", length); - } else { - this.removeAttribute("open"); - } - this.updateContent(); - } - - connectedCallback() { - this.updateContent(); - } - - updateContent() { - const container = document.createElement("div"); - container.classList.add("track-card"); - this.innerHTML = ""; - - this.appendChild(container); - - while (container.lastChild) { - container.removeChild(container.lastChild); - } - - if (this["name"]) { - const trackName = document.createElement("track-name"); - trackName.name = this["name"]; - container.appendChild(trackName); - } - if (this["length"]) { - container.appendChild(document.createTextNode(this["length"])); - } - if (this["album"]) { - container.appendChild(document.createTextNode(this["album"])); - } - if (this["artist"]) { - container.appendChild(document.createTextNode(this["artist"])); - } - } -} diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts index 657a044..ec8a90d 100644 --- a/music-player/client/src/main.ts +++ b/music-player/client/src/main.ts @@ -1,13 +1,17 @@ import * as _ from "lodash"; import { TrackInfo, getTracks } from "./client"; -import { TrackName, TrackCard } from "./components/track"; +import { DataCard } from "./components/DataCard"; +import { TextField } from "./components/TextField"; +import { TrackCard } from "./components/TrackCard"; -window.customElements.define("track-name", TrackName); +window.customElements.define("data-card", DataCard); +window.customElements.define("text-field", TextField); window.customElements.define("track-card", TrackCard); declare global { interface HTMLElementTagNameMap { - "track-name": TrackName; + "data-card": DataCard; + "text-field": TextField; "track-card": TrackCard; } } @@ -20,7 +24,7 @@ const updateTrackList = (tracks: TrackInfo[]) => { card.name = info.name || null; card.album = info.album || null; card.artist = info.artist || null; - card.length = (info.duration && `${info.duration}`) || null; + card.duration = (info.duration && `${info.duration}`) || null; return card; }); _.map(track_formats, (trackCard) => { diff --git a/music-player/client/styles.css b/music-player/client/styles.css index d953d3d..10f8ca3 100644 --- a/music-player/client/styles.css +++ b/music-player/client/styles.css @@ -29,17 +29,7 @@ body { margin-top: 32px; } -/* -.track-list__row:nth-child(even) { - background-color: rgb(255, 255, 255); -} - -.track-list__row:nth-child(odd) { - background-color: rgb(200, 200, 200); -} -*/ - -.track-card { +.card { border: 1px solid black; border-radius: 5px; padding: 8px; @@ -47,15 +37,32 @@ body { height: 100px; } +.track-card { + display: grid; + gap: 4px 4px; +} + .track-card__name { + display: block; + grid-column: 1 / span 1; + grid-row: 1 / span 1; } .track-card__length { + display: block; + grid-column: 1 / span 1; + grid-row: 2 / span 1; } .track-card__album { + display: block; + grid-column: 2 / span 1; + grid-row: 1 / span 1; } .track-card__artist { + display: block; + grid-column: 2 / span 1; + grid-row: 2 / span 1; }