From f9533463cedcfee16177107932c64a444b269b85 Mon Sep 17 00:00:00 2001
From: Jakob Odersky <jakob@odersky.com>
Date: Wed, 9 May 2018 01:53:04 -0700
Subject: Add bootstrap and fancy UI

---
 common/shared/src/main/scala/Templates.scala | 50 ++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

(limited to 'common/shared/src/main/scala/Templates.scala')

diff --git a/common/shared/src/main/scala/Templates.scala b/common/shared/src/main/scala/Templates.scala
index 82e1dda..10ee116 100644
--- a/common/shared/src/main/scala/Templates.scala
+++ b/common/shared/src/main/scala/Templates.scala
@@ -4,13 +4,51 @@ class Templates[Builder, Output <: FragT, FragT](
     val bundle: scalatags.generic.Bundle[Builder, Output, FragT]) {
   import bundle.all._
 
-  def message(msg: Message) = li(
-    div(`class` := "from")(msg.author),
-    div(`class` := "content")(msg.content)
+  val colorStyles = List(
+    "bg-primary",
+    "bg-secondary",
+    "bg-success",
+    "bg-danger",
+    "bg-warning",
+    "bg-info",
+    "bg-dark"
   )
+  // pick a "random" style by computing a hash of arbitrary data
+  def dataStyle(data: String) = {
+    val dataHash = data.foldLeft(7) {
+      case (hash, char) =>
+        (hash * 31 + char.toInt)
+    }
+    colorStyles(
+      ((dataHash % colorStyles.length) + colorStyles.length) % colorStyles.length)
+  }
 
-  def conversation(messages: Seq[Message]): Tag = ul(id := "conversation")(
-    for (msg <- messages.sortBy(_.timestamp)) yield message(msg)
-  )
+  def message(msg: Message) = {
+    val tags = msg.hashTags.map(
+      hashTag =>
+        span(`class` := "badge badge-light float-right ml-1")(
+          hashTag
+      ))
+    div(`class` := "col-xs-12 col-sm-6 col-md-3 col-lg-2")(
+      div(`class` := s"card text-white mb-3 ${dataStyle(msg.author)}")(
+        div(`class` := "card-header")(
+          msg.author,
+          tags
+        ),
+        div(`class` := "card-body")(
+          div(`class` := "card-text")(
+            msg.content
+          )
+        )
+      )
+    )
+  }
+
+  def conversation(messages: Seq[Message]): Tag =
+    div(`class` := "container-fluid")(
+      div(id := "conversation", `class` := "row")(
+        for (msg <- messages.sortBy(_.timestamp)) yield message(msg)
+      )
+    )
 
 }
-- 
cgit v1.2.3