diff options
Diffstat (limited to 'src/main/kotlin/pl/treksoft/kvision')
4 files changed, 145 insertions, 3 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt index 6a7d2ee0..ab88be28 100644 --- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt +++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt @@ -4,7 +4,11 @@ import pl.treksoft.kvision.basic.Label import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Img import pl.treksoft.kvision.core.Root +import pl.treksoft.kvision.css.BGATTACH +import pl.treksoft.kvision.css.BGREPEAT +import pl.treksoft.kvision.css.BGSIZE import pl.treksoft.kvision.css.BORDERSTYLE +import pl.treksoft.kvision.css.Background import pl.treksoft.kvision.css.Border import pl.treksoft.kvision.css.COLOR import pl.treksoft.kvision.dropdown.DD.* @@ -17,6 +21,7 @@ import pl.treksoft.kvision.modal.Confirm import pl.treksoft.kvision.modal.Modal import pl.treksoft.kvision.panel.* import pl.treksoft.kvision.routing.routing +import pl.treksoft.kvision.utils.perc import pl.treksoft.kvision.utils.px class Showcase : ApplicationBase() { @@ -122,6 +127,7 @@ class Showcase : ApplicationBase() { root.add(list2) val img = Image(Img("kotlin.png"), "Image", true, IMAGESHAPE.ROUNDED) + img.opacity = 0.5 root.add(img) val grid = ResponsiveGridPanel(align = ALIGN.RIGHT) @@ -156,6 +162,8 @@ class Showcase : ApplicationBase() { root.add(vPanel) val grid3 = GridPanel(templateColumns = "1fr 1fr 1fr") + grid3.background = Background(0xCCCCCC, Img("kotlin.png"), 50.perc(), 50.perc(), size = BGSIZE.CONTAIN, + repeat = BGREPEAT.NOREPEAT, attachment = BGATTACH.FIXED) grid3.add(Label("hh1")) grid3.add(Label("hh2")) grid3.add(Label("hh3")) @@ -163,6 +171,7 @@ class Showcase : ApplicationBase() { root.add(grid3) val grid4 = GridPanel(justifyItems = GRIDJUSTIFY.CENTER) + grid4.colorHex = 0x00ff00 grid4.add(Label("hh1"), 1, 1) grid4.add(Label("hh2"), 2, 2) grid4.add(Label("hh3"), 3, 3) @@ -170,6 +179,7 @@ class Showcase : ApplicationBase() { root.add(grid4) val dock = DockPanel() + dock.colorName = COLOR.AQUA dock.add(Label("left<br/>left", rich = true), SIDE.LEFT) dock.add(Label("right"), SIDE.RIGHT) dock.add(Label("up"), SIDE.UP) @@ -196,6 +206,7 @@ class Showcase : ApplicationBase() { button.setEventListener<Button> { click = { _ -> println(self.text) + grid4.colorHex = 0xff0000 dd3.text = "Zmiana" dd3.style = BUTTONSTYLE.WARNING dd3.disabled = true diff --git a/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt b/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt index 5dea72ef..414e4561 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt @@ -1,6 +1,9 @@ package pl.treksoft.kvision.core +import pl.treksoft.kvision.css.Background import pl.treksoft.kvision.css.Border +import pl.treksoft.kvision.css.COLOR +import pl.treksoft.kvision.css.Color import pl.treksoft.kvision.css.CssSize import pl.treksoft.kvision.snabbdom.StringPair @@ -111,6 +114,32 @@ abstract class StyledComponent : KVObject { field = value refresh() } + var color: Color? = null + set(value) { + field = value + refresh() + } + var colorHex: Int? + get() = null + set(value) { + color = if (value != null) Color(value) else null + } + var colorName: COLOR? + get() = null + set(value) { + color = if (value != null) Color(value) else null + } + var opacity: Double? = null + set(value) { + field = value + refresh() + } + var background: Background? = null + set(value) { + field = value + refresh() + } + private var snStyleCache: List<StringPair>? = null @@ -127,7 +156,7 @@ abstract class StyledComponent : KVObject { }() } - @Suppress("ComplexMethod") + @Suppress("ComplexMethod", "LongMethod") protected open fun getSnStyle(): List<StringPair> { val snstyle = mutableListOf<StringPair>() width?.let { @@ -193,6 +222,15 @@ abstract class StyledComponent : KVObject { paddingLeft?.let { snstyle.add("padding-left" to it.first.toString() + it.second.unit) } + color?.let { + snstyle.add("color" to it.asString()) + } + opacity?.let { + snstyle.add("opacity" to it.toString()) + } + background?.let { + snstyle.add("background" to it.asString()) + } return snstyle } } diff --git a/src/main/kotlin/pl/treksoft/kvision/css/Css.kt b/src/main/kotlin/pl/treksoft/kvision/css/Css.kt index ce92813f..e2a4122b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/css/Css.kt +++ b/src/main/kotlin/pl/treksoft/kvision/css/Css.kt @@ -1,5 +1,6 @@ package pl.treksoft.kvision.css +import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.utils.Utils @Suppress("EnumNaming", "EnumEntryName") @@ -181,6 +182,36 @@ enum class COLOR(val color: String) { YELLOWGREEN("yellowgreen") } +enum class BGSIZE(val size: String) { + COVER("cover"), + CONTAIN("contain") +} + +enum class BGREPEAT(val repeat: String) { + REPEAT("repeat"), + REPEATX("repeat-x"), + REPEATY("repeat-y"), + NOREPEAT("no-repeat") +} + +enum class BGATTACH(val attachment: String) { + SCROLL("scroll"), + FIXED("fixed"), + LOCAL("local") +} + +enum class BGORIGIN(val origin: String) { + PADDING("padding-box"), + BORDER("border-box"), + CONTENT("content-box") +} + +enum class BGCLIP(val clip: String) { + PADDING("padding-box"), + BORDER("border-box"), + CONTENT("content-box") +} + class Border private constructor(private val width: CssSize? = null, private val style: BORDERSTYLE? = null, private val color: String? = null) { constructor(width: CssSize? = null, style: BORDERSTYLE? = null) : this(width, style, null) @@ -193,6 +224,68 @@ class Border private constructor(private val width: CssSize? = null, private val val w = width?.let { it.first.toString() + it.second.unit } - return w.orEmpty() + " " + style?.borderStyle.orEmpty() + " " + color.orEmpty() + return w.orEmpty() + " " + (style?.borderStyle).orEmpty() + " " + color.orEmpty() + } +} + +class Color private constructor(private val color: String? = null) { + constructor(color: Int) : this("#" + Utils.intToHexString(color)) + constructor(color: COLOR) : this(color.color) + + fun asString(): String { + return color.orEmpty() + } +} + +class Background private constructor(private val color: String? = null, private val image: ResString? = null, + private val positionX: CssSize? = null, private val positionY: CssSize? = null, + private val sizeX: CssSize? = null, private val sizeY: CssSize? = null, + private val size: BGSIZE? = null, private val repeat: BGREPEAT? = null, + private val origin: BGORIGIN? = null, private val clip: BGCLIP? = null, + private val attachment: BGATTACH? = null) { + constructor(image: ResString? = null, positionX: CssSize? = null, positionY: CssSize? = null, + sizeX: CssSize? = null, sizeY: CssSize? = null, size: BGSIZE? = null, + repeat: BGREPEAT? = null, origin: BGORIGIN? = null, clip: BGCLIP? = null, + attachment: BGATTACH? = null) : this(null, + image, positionX, positionY, sizeX, sizeY, size, repeat, origin, clip, attachment) + + constructor(color: Int, image: ResString? = null, positionX: CssSize? = null, + positionY: CssSize? = null, + sizeX: CssSize? = null, sizeY: CssSize? = null, size: BGSIZE? = null, + repeat: BGREPEAT? = null, origin: BGORIGIN? = null, clip: BGCLIP? = null, + attachment: BGATTACH? = null) : this("#" + + Utils.intToHexString(color), image, positionX, positionY, sizeX, sizeY, size, repeat, origin, clip, + attachment) + + constructor(color: COLOR, image: ResString? = null, positionX: CssSize? = null, + positionY: CssSize? = null, sizeX: CssSize? = null, sizeY: CssSize? = null, + size: BGSIZE? = null, repeat: BGREPEAT? = null, origin: BGORIGIN? = null, clip: BGCLIP? = null, + attachment: BGATTACH? = null) : this(color.color, image, + positionX, positionY, sizeX, sizeY, size, repeat, origin, clip, attachment) + + fun asString(): String { + val img = image?.let { + "url($image)" + } + val posX = positionX?.let { + it.first.toString() + it.second.unit + } + val posY = positionY?.let { + it.first.toString() + it.second.unit + } + val sX = sizeX?.let { + it.first.toString() + it.second.unit + } + val sY = sizeY?.let { + it.first.toString() + it.second.unit + } + return color.orEmpty() + " " + img.orEmpty() + " " + posX.orEmpty() + " " + posY.orEmpty() + + if (sX != null || sY != null || size != null) { + (if (posX != null || posY != null) " / " else " 0px 0px / ") + + sX.orEmpty() + " " + sY.orEmpty() + " " + (size?.size).orEmpty() + } else { + "" + } + " " + (repeat?.repeat).orEmpty() + " " + (origin?.origin).orEmpty() + " " + + (clip?.clip).orEmpty() + " " + (attachment?.attachment).orEmpty() } } diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt index 50840f71..7097bdab 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt @@ -14,7 +14,7 @@ enum class IMAGESHAPE(val className: String) { open class Image(src: ResString, alt: String? = null, responsive: Boolean = false, shape: IMAGESHAPE? = null, centered: Boolean = false, classes: Set<String> = setOf()) : Widget(classes) { - private var src = src + internal var src = src set(value) { field = value refresh() |