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
}
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)
pub type Node {
Node(
t: NodeType,
content: String,
width_percent: Int,
height_percent: Int,
children: List(Section),
)
Node(t: NodeType, content: String, style: Style, children: List(Section))
}
pub type Layout {
@@ -47,8 +45,7 @@ pub fn new() -> Layout {
Node(
t: Container,
content: "Music Player",
width_percent: 100,
height_percent: 100,
style: Style(width_percent: 100, height_percent: 100),
children: [Header, Search, PlaybackTime],
),
),
@@ -57,8 +54,7 @@ pub fn new() -> Layout {
Node(
t: Row,
content: "Foo (1) | Bar (2) | Baz (3)",
width_percent: 100,
height_percent: 33,
style: Style(width_percent: 100, height_percent: 33),
children: [],
),
),
@@ -67,8 +63,7 @@ pub fn new() -> Layout {
Node(
t: Row,
content: "",
width_percent: 100,
height_percent: 33,
style: Style(width_percent: 100, height_percent: 33),
children: [],
),
),
@@ -77,8 +72,7 @@ pub fn new() -> Layout {
Node(
t: Row,
content: "00:00",
width_percent: 100,
height_percent: 33,
style: Style(width_percent: 100, height_percent: 33),
children: [],
),
),
@@ -174,12 +168,12 @@ pub fn render_generic(
let margin = 2.0
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.truncate
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.truncate
@@ -193,7 +187,7 @@ pub fn render_generic(
render_into
|> renders.box(cx, cy, width, height)
// + 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.fold(parent, fn(acc_into, ic) {
@@ -201,13 +195,13 @@ pub fn render_generic(
let cw =
container_width
*. { int.to_float(node.width_percent) /. 100.0 }
*. { int.to_float(node.style.width_percent) /. 100.0 }
-. margin
|> float.floor
let ch =
container_height
*. { int.to_float(node.height_percent) /. 100.0 }
*. { int.to_float(node.style.height_percent) /. 100.0 }
-. margin
|> float.floor

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

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