Skip to content
Permalink
Browse files

Added support for easily adding ad-hoc CSS

Continued work on Bootstrap support
  • Loading branch information...
darkfrog26 committed May 13, 2018
1 parent 5bd37d7 commit 740012876b9cc1b11f9f6f53c29d3a36337e66c2
@@ -17,9 +17,8 @@ trait UIScreen extends Screen with PathActivation {
container.size.width := ui.size.width
container.size.height := ui.size.height

createUI().map { _ =>
ui.children += container
}
ui.children += container
createUI()
}

def createUI(): Future[Unit]
@@ -59,6 +59,12 @@ object dom extends ExtendedElement(None) {
}
}

def addCSS(css: String): Unit = {
val style = create[html.Style]("style")
style.innerHTML = css
document.head.appendChild(style)
}

implicit class StringExtras(s: String) {
def toElement[T <: Element]: T = {
val temp = document.createElement("div")
@@ -52,6 +52,7 @@ object ClientExampleApplication extends ExampleApplication with ClientApplicatio

// Bootstrap
val bootstrapButton: BootstrapButtonExample = new BootstrapButtonExample
val bootstrapLogin: BootstrapLoginExample = new BootstrapLoginExample

// val imageChange = ImageChangeExample
// val hitTest = HitTestExample
@@ -0,0 +1,63 @@
package io.youi.example.ui

import io.youi.{Color, Template, dom}
import io.youi.dom._
import io.youi.component.Component
import io.youi.component.bootstrap.Button
import io.youi.component.extras.HTMLComponent
import io.youi.example.screen.UIExampleScreen
import org.scalajs.dom._

import scala.concurrent.Future

class BootstrapLoginExample extends UIExampleScreen {
override def title: String = "Bootstrap Login"
override def path: String = "/examples/bootstrap/login.html"

private lazy val form: html.Form = Template.byId[html.Form]("../login-example.html", "login-form", "youi")

override def createUI(): Future[Unit] = {
Button.color := Color.White
container.background := Color.fromLong(0xf5f5f5ff)
dom.addCSS(
"""
|.form-signin {
| width: 100%;
| max-width: 330px;
| padding: 15px;
| margin: 0 auto;
|}
|.form-signin .checkbox {
| font-weight: 400;
|}
|.form-signin .form-control {
| position: relative;
| box-sizing: border-box;
| height: auto;
| padding: 10px;
| font-size: 16px;
|}
|.form-signin .form-control:focus {
| z-index: 2;
|}
|.form-signin input[type="email"] {
| margin-bottom: -1px;
| border-bottom-right-radius: 0;
| border-bottom-left-radius: 0;
|}
|.form-signin input[type="password"] {
| margin-bottom: 10px;
| border-top-left-radius: 0;
| border-top-right-radius: 0;
|}
""".stripMargin)

val parent = HTMLComponent.element(container)
parent.appendChild(form)

val button = Button.existing("sign-in", parent)
scribe.info(s"Button: ${button.block()}")

Future.successful(())
}
}

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,21 @@
<html>
<head>
<title>Login Example</title>
</head>
<body>
<form id="login-form" class="form-signin text-center" style="width: 330px; margin: 0 auto;">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" style="font-weight: 400;" value="remember-me"> Remember me
</label>
</div>
<button id="sign-in" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
</form>
</body>
</html>
@@ -1,18 +1,21 @@
package io.youi.component.bootstrap

import io.youi.component.extras.Classifiable
import io.youi.style.FontFamily
import io.youi.{Color, dom}
import io.youi.Color
import io.youi.dom._
import io.youi.theme.Theme
import io.youi.theme.bootstrap.ButtonTheme
import org.scalajs.dom._
import reactify.Var

class Button(override val element: html.Button) extends BootstrapComponent[html.Button] with ButtonTheme {
def this() = {
this(dom.create[html.Button]("button"))
this(create[html.Button]("button"))
}

override lazy val theme: Var[ButtonTheme] = Var(Button)
// TODO: clean this up
override protected def defaultThemeParent: Option[Theme] = Some(Button)
override lazy val theme: Var[ButtonTheme] = Var(this)
override def componentType: String = "bootstrap.Button"

element.classList.add("btn")
@@ -29,4 +32,10 @@ class Button(override val element: html.Button) extends BootstrapComponent[html.
val block: Var[Boolean] = classifyFlag(Var(false), on = Some("btn-block"))
}

object Button extends ButtonTheme
object Button extends ButtonTheme {
def existing(id: String, in: html.Element = document.body): Button = {
val e = in.byId[html.Button](id)
val b = new Button(e)
b
}
}
@@ -18,10 +18,10 @@ trait HTMLComponent[E <: html.Element] extends Component {

override lazy val event: EventSupport = new HTMLEvents(this, element)

connect(size.width, if (element.offsetWidth > 0.0) Some(element.offsetWidth) else None, (v: Double) => if (v > 0.0) element.style.width = s"${v}px")
connect(size.height, if (element.offsetHeight > 0.0) Some(element.offsetHeight) else None, (v: Double) => if (v > 0.0) element.style.height = s"${v}px")
connect(size.width, if (element.offsetWidth > 0.0) Some(element.offsetWidth) else None, (v: Double) => if (v > 0.0 && v != size.measured.width()) element.style.width = s"${v}px" else element.style.removeProperty("width"))
connect(size.height, if (element.offsetHeight > 0.0) Some(element.offsetHeight) else None, (v: Double) => if (v > 0.0 && v != size.measured.height()) element.style.height = s"${v}px" else element.style.removeProperty("height"))

connect(visible, if (element.style.visibility == "hidden") Some(false) else None, (b: Boolean) => element.style.visibility = if (b) "visible" else "hidden")
connect(visible, if (element.style.visibility == "hidden") Some(false) else None, (b: Boolean) => if (b) element.style.removeProperty("visibility") else element.style.visibility = "hidden")
connect(opacity, element.style.opacity match {
case null | "" => None
case s => {
@@ -32,7 +32,7 @@ trait HTMLComponent[E <: html.Element] extends Component {
Some(o)
}
}
}, (d: Double) => element.style.opacity = d.toString)
}, (d: Double) => if (d == 1.0) element.style.removeProperty("opacity") else element.style.opacity = d.toString)
connect(background, None, (p: Paint) => element.style.background = p.asCSS())

override protected def init(): Unit = {

0 comments on commit 7400128

Please sign in to comment.
You can’t perform that action at this time.