rnentjes/vst-chip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout

Browse Source
This commit is contained in:
rnentjes
2024-06-28 19:22:16 +02:00
parent ccc7e9a4e9
commit f22a800c93
1 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt
View File

@@ -28,6 +28,7 @@ import nl.astraeus.css.properties.px
import nl.astraeus.css.properties.rem import nl.astraeus.css.properties.rem
import nl.astraeus.css.properties.vh import nl.astraeus.css.properties.vh
import nl.astraeus.css.properties.vw import nl.astraeus.css.properties.vw
import nl.astraeus.css.style.Style
import nl.astraeus.css.style.cls import nl.astraeus.css.style.cls
import nl.astraeus.komp.HtmlBuilder import nl.astraeus.komp.HtmlBuilder
import nl.astraeus.komp.Komponent import nl.astraeus.komp.Komponent
@@ -240,7 +241,7 @@ object MainView : Komponent(), CssName {
} }
} }
div { div {
span(ButtonCss.name) { span(ButtonBarCss.name) {
+"Sine" +"Sine"
if (VstChipWorklet.waveform == 0) { if (VstChipWorklet.waveform == 0) {
classes += SelectedCss.name classes += SelectedCss.name
@@ -250,7 +251,7 @@ object MainView : Komponent(), CssName {
requestUpdate() requestUpdate()
} }
} }
span(ButtonCss.name) { span(ButtonBarCss.name) {
+"Square" +"Square"
if (VstChipWorklet.waveform == 1) { if (VstChipWorklet.waveform == 1) {
classes += SelectedCss.name classes += SelectedCss.name
@@ -260,7 +261,7 @@ object MainView : Komponent(), CssName {
requestUpdate() requestUpdate()
} }
} }
span(ButtonCss.name) { span(ButtonBarCss.name) {
+"Triangle" +"Triangle"
if (VstChipWorklet.waveform == 2) { if (VstChipWorklet.waveform == 2) {
classes += SelectedCss.name classes += SelectedCss.name
@@ -270,7 +271,7 @@ object MainView : Komponent(), CssName {
requestUpdate() requestUpdate()
} }
} }
span(ButtonCss.name) { span(ButtonBarCss.name) {
+"Sawtooth" +"Sawtooth"
if (VstChipWorklet.waveform == 3) { if (VstChipWorklet.waveform == 3) {
classes += SelectedCss.name classes += SelectedCss.name
@@ -368,6 +369,7 @@ object MainView : Komponent(), CssName {
object MainDivCss : CssName object MainDivCss : CssName
object ActiveCss : CssName object ActiveCss : CssName
object ButtonCss : CssName object ButtonCss : CssName
object ButtonBarCss : CssName
object SelectedCss : CssName object SelectedCss : CssName
object NoteBarCss : CssName object NoteBarCss : CssName
object StartSplashCss : CssName object StartSplashCss : CssName
@@ -400,25 +402,18 @@ object MainView : Komponent(), CssName {
//transition() //transition()
noTextSelect() noTextSelect()
} }
select("select", "input", "textarea") { select("input", "textarea") {
backgroundColor(Css.currentStyle.mainBackgroundColor) backgroundColor(Css.currentStyle.inputBackgroundColor)
color(Css.currentStyle.mainFontColor) color(Css.currentStyle.mainFontColor)
border("none")
} }
select(cls(ButtonCss)) { select(cls(ButtonCss)) {
display(Display.inlineBlock)
margin(1.rem) margin(1.rem)
padding(1.rem) commonButton()
backgroundColor(Css.currentStyle.buttonBackgroundColor) }
borderColor(Css.currentStyle.buttonBorderColor) select(cls(ButtonBarCss)) {
borderWidth(Css.currentStyle.buttonBorderWidth) margin(1.rem, 0.px)
color(Css.currentStyle.mainFontColor) commonButton()
hover {
backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
}
and(SelectedCss.cls()) {
backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
}
} }
select(cls(ActiveCss)) { select(cls(ActiveCss)) {
//backgroundColor(Css.currentStyle.selectedBackgroundColor) //backgroundColor(Css.currentStyle.selectedBackgroundColor)
@@ -438,7 +433,7 @@ object MainView : Komponent(), CssName {
backgroundImage("url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg')") backgroundImage("url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg')")
background("right 0.8em center/1.4em") background("right 0.8em center/1.4em")
backgroundColor(Css.currentStyle.inputBackgroundColor) backgroundColor(Css.currentStyle.inputBackgroundColor)
//color(Css.currentStyle.entryFontColor) color(Css.currentStyle.mainFontColor)
borderRadius(0.25.em) borderRadius(0.25.em)
} }
select(cls(StartSplashCss)) { select(cls(StartSplashCss)) {
@@ -448,7 +443,7 @@ object MainView : Komponent(), CssName {
width(100.vw) width(100.vw)
height(100.vh) height(100.vh)
zIndex(100) zIndex(100)
backgroundColor(hsla(32, 0, 50, 0.6)) backgroundColor(hsla(32, 0, 5, 0.65))
select(cls(StartBoxCss)) { select(cls(StartBoxCss)) {
position(Position.relative) position(Position.relative)
@@ -456,7 +451,9 @@ object MainView : Komponent(), CssName {
top(25.vh) top(25.vh)
width(50.vw) width(50.vw)
height(50.vh) height(50.vh)
backgroundColor(hsla(0, 0, 50, 0.25)) backgroundColor(hsla(239, 50, 10, 1.0))
borderColor(Css.currentStyle.mainFontColor)
borderWidth(2.px)
select(cls(StartButtonCss)) { select(cls(StartButtonCss)) {
position(Position.absolute) position(Position.absolute)
@@ -481,5 +478,21 @@ object MainView : Komponent(), CssName {
} }
} }
private fun Style.commonButton() {
display(Display.inlineBlock)
padding(1.rem)
backgroundColor(Css.currentStyle.buttonBackgroundColor)
borderColor(Css.currentStyle.buttonBorderColor)
borderWidth(Css.currentStyle.buttonBorderWidth)
color(Css.currentStyle.mainFontColor)
hover {
backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
}
and(SelectedCss.cls()) {
backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
}
}
} }