alex/musicplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
Alexander Heldt
2025-12-04 20:47:23 +01:00
parent 15cda58760
commit 6a4486c407
3 changed files with 26 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/musicplayer/ui/layout.gleam
View File

@@ -24,15 +24,13 @@ pub type NodeType {
Cell Cell
} }
pub type Style {
Style(width_percent: Int, height_percent: Int)
}
/// A Nodes width and height is in percentage (of the available width/height of its parent Node) /// A Nodes width and height is in percentage (of the available width/height of its parent Node)
pub type Node { pub type Node {
Node( Node(t: NodeType, content: String, style: Style, children: List(Section))
t: NodeType,
content: String,
width_percent: Int,
height_percent: Int,
children: List(Section),
)
} }
pub type Layout { pub type Layout {
@@ -47,8 +45,7 @@ pub fn new() -> Layout {
Node( Node(
t: Container, t: Container,
content: "Music Player", content: "Music Player",
width_percent: 100, style: Style(width_percent: 100, height_percent: 100),
height_percent: 100,
children: [Header, Search, PlaybackTime], children: [Header, Search, PlaybackTime],
), ),
), ),
@@ -57,8 +54,7 @@ pub fn new() -> Layout {
Node( Node(
t: Row, t: Row,
content: "Foo (1) | Bar (2) | Baz (3)", content: "Foo (1) | Bar (2) | Baz (3)",
width_percent: 100, style: Style(width_percent: 100, height_percent: 33),
height_percent: 33,
children: [], children: [],
), ),
), ),
@@ -67,8 +63,7 @@ pub fn new() -> Layout {
Node( Node(
t: Row, t: Row,
content: "", content: "",
width_percent: 100, style: Style(width_percent: 100, height_percent: 33),
height_percent: 33,
children: [], children: [],
), ),
), ),
@@ -77,8 +72,7 @@ pub fn new() -> Layout {
Node( Node(
t: Row, t: Row,
content: "00:00", content: "00:00",
width_percent: 100, style: Style(width_percent: 100, height_percent: 33),
height_percent: 33,
children: [], children: [],
), ),
), ),
@@ -174,12 +168,12 @@ pub fn render_generic(
let margin = 2.0 let margin = 2.0
let width = let width =
container_width *. { int.to_float(node.width_percent) /. 100.0 } container_width *. { int.to_float(node.style.width_percent) /. 100.0 }
|> float.floor |> float.floor
|> float.truncate |> float.truncate
let height = let height =
container_height *. { int.to_float(node.height_percent) /. 100.0 } container_height *. { int.to_float(node.style.height_percent) /. 100.0 }
|> float.floor |> float.floor
|> float.truncate |> float.truncate
@@ -193,7 +187,7 @@ pub fn render_generic(
render_into render_into
|> renders.box(cx, cy, width, height) |> renders.box(cx, cy, width, height)
// + 2 for header margin // + 2 for header margin
|> renders.text(node.content, cx + 2, cy) |> renders.text(node.content, cx, cy)
list.index_map(node.children, fn(child, i) { #(i, child) }) list.index_map(node.children, fn(child, i) { #(i, child) })
|> list.fold(parent, fn(acc_into, ic) { |> list.fold(parent, fn(acc_into, ic) {
@@ -201,13 +195,13 @@ pub fn render_generic(
let cw = let cw =
container_width container_width
*. { int.to_float(node.width_percent) /. 100.0 } *. { int.to_float(node.style.width_percent) /. 100.0 }
-. margin -. margin
|> float.floor |> float.floor
let ch = let ch =
container_height container_height
*. { int.to_float(node.height_percent) /. 100.0 } *. { int.to_float(node.style.height_percent) /. 100.0 }
-. margin -. margin
|> float.floor |> float.floor

17
src/musicplayer/ui/layout_examples/layout_examples.gleam
View File

@@ -1,7 +1,7 @@
import gleam/dict import gleam/dict
import musicplayer/ui/internal import musicplayer/ui/internal
import musicplayer/ui/layout.{Container, Layout, Node, Section} import musicplayer/ui/layout.{Container, Layout, Node, Section, Style}
import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input} import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
pub fn main() { pub fn main() {
@@ -25,8 +25,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Node( Node(
t: Container, t: Container,
content: "container", content: "container",
width_percent: 100, style: Style(width_percent: 100, height_percent: 100),
height_percent: 100,
children: [ children: [
Section("Row1"), Section("Row1"),
Section("Row2"), Section("Row2"),
@@ -38,8 +37,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Node( Node(
t: layout.Row, t: layout.Row,
content: "row 1", content: "row 1",
width_percent: 100, style: Style(width_percent: 100, height_percent: 50),
height_percent: 50,
children: [ children: [
Section("A"), Section("A"),
Section("A"), Section("A"),
@@ -51,8 +49,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Node( Node(
t: layout.Cell, t: layout.Cell,
content: "cell 1", content: "cell 1",
width_percent: 50, style: Style(width_percent: 50, height_percent: 100),
height_percent: 100,
children: [], children: [],
), ),
), ),
@@ -61,8 +58,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Node( Node(
t: layout.Cell, t: layout.Cell,
content: "cell 2", content: "cell 2",
width_percent: 50, style: Style(width_percent: 50, height_percent: 100),
height_percent: 100,
children: [], children: [],
), ),
), ),
@@ -71,8 +67,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Node( Node(
t: layout.Row, t: layout.Row,
content: "row 2", content: "row 2",
width_percent: 100, style: Style(width_percent: 100, height_percent: 50),
height_percent: 50,
children: [], children: [],
), ),
), ),

17
test/musicplayer/ui/layout_test.gleam
View File

@@ -5,7 +5,7 @@ import gleeunit
import gleeunit/should import gleeunit/should
import musicplayer/ui/virtual_ansi import musicplayer/ui/virtual_ansi
import musicplayer/ui/layout.{Layout, Node, Section} import musicplayer/ui/layout.{Layout, Node, Section, Style}
pub fn main() -> Nil { pub fn main() -> Nil {
gleeunit.main() gleeunit.main()
@@ -22,8 +22,7 @@ pub fn foo_test() {
Node( Node(
t: layout.Container, t: layout.Container,
content: "container", content: "container",
width_percent: 100, style: Style(width_percent: 100, height_percent: 100),
height_percent: 100,
children: [ children: [
Section("Row1"), Section("Row1"),
Section("Row2"), Section("Row2"),
@@ -35,8 +34,7 @@ pub fn foo_test() {
Node( Node(
t: layout.Row, t: layout.Row,
content: "row 1", content: "row 1",
width_percent: 100, style: Style(width_percent: 100, height_percent: 50),
height_percent: 50,
children: [ children: [
Section("A"), Section("A"),
Section("B"), Section("B"),
@@ -48,8 +46,7 @@ pub fn foo_test() {
Node( Node(
t: layout.Cell, t: layout.Cell,
content: "cell 1", content: "cell 1",
width_percent: 50, style: Style(width_percent: 50, height_percent: 100),
height_percent: 100,
children: [], children: [],
), ),
), ),
@@ -58,8 +55,7 @@ pub fn foo_test() {
Node( Node(
t: layout.Cell, t: layout.Cell,
content: "cell 2", content: "cell 2",
width_percent: 50, style: Style(width_percent: 50, height_percent: 100),
height_percent: 100,
children: [], children: [],
), ),
), ),
@@ -68,8 +64,7 @@ pub fn foo_test() {
Node( Node(
t: layout.Row, t: layout.Row,
content: "row 1", content: "row 1",
width_percent: 100, style: Style(width_percent: 100, height_percent: 50),
height_percent: 50,
children: [], children: [],
), ),
), ),