color, opacity and background css properties

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()