Add period and difficulty

9 files changed, 118 insertions, 30 deletions

diff --git a/src/main/scala/reading/component/index/Books.scala b/src/main/scala/reading/component/index/Books.scala
index ef0f413..39c0e67 100644
--- a/src/main/scala/reading/component/index/Books.scala
+++ b/src/main/scala/reading/component/index/Books.scala
@@ -24,12 +24,20 @@ object Books {
               div(BooksStyle.title, book.title),
               div(BooksStyle.author, book.author),
               div(
+                BooksStyle.period,
+                s"période: ${book.period}"
+              ),
+              div(
                 BooksStyle.genres,
-                span(s"genre: ${book.genres.mkString(", ")}")
+                s"genre: ${book.genres.mkString(", ")}"
               ),
               div(
                 BooksStyle.themes,
-                span(s"thème: ${book.themes.mkString(", ")}")
+                s"thème: ${book.themes.mkString(", ")}"
+              ),
+              div(
+                BooksStyle.pages,
+                s"${book.pages} pages"
               )
             )
           }
diff --git a/src/main/scala/reading/component/index/Filters.scala b/src/main/scala/reading/component/index/Filters.scala
index 1d9cc93..50b2f0e 100644
--- a/src/main/scala/reading/component/index/Filters.scala
+++ b/src/main/scala/reading/component/index/Filters.scala
@@ -8,6 +8,8 @@ import scalacss.Defaults._
 import scalacss.ScalatagsCss._
 
 import reading.component.index.style.{Filters => FiltersStyle}
+import reading.component.widget.Cross
+import reading.component.style.Col
 import reading.models.Filter
 import reading.utils.{RxTag, RxAttr}
 
@@ -22,10 +24,11 @@ object Filters {
           FiltersStyle.filters,
 
           filters().sortBy(_.name).map { filter =>
-            button(
+            div(
               FiltersStyle.filter,
               RxAttr(onclick, Rx(() => filters() = filters().filter(!Filter.equals(_, filter)))),
-              filter.name
+              span(FiltersStyle.name, filter.name),
+              Cross(15.px, Col.white)
             )
           }
         )
diff --git a/src/main/scala/reading/component/index/FiltersMenu.scala b/src/main/scala/reading/component/index/FiltersMenu.scala
index 880c3e7..81220e3 100644
--- a/src/main/scala/reading/component/index/FiltersMenu.scala
+++ b/src/main/scala/reading/component/index/FiltersMenu.scala
@@ -8,41 +8,47 @@ import scalacss.Defaults._
 import scalacss.ScalatagsCss._
 
 import reading.component.index.style.{FiltersMenu => FiltersMenuStyle}
-import reading.models.{Book, Filter, Genre, Theme, FilterFactory}
+import reading.models.{Book, Filter, Period, Genre, Theme, Difficulty}
 import reading.utils.{RxTag, RxAttr}
 
 object FiltersMenu {
   def apply(books: Rx[Seq[Book]], filters: Var[Seq[Filter]]): Frag =
     div(
       FiltersMenuStyle.render,
-      group(books, filters, "Genre", Genre.values),
-      group(books, filters, "Theme", Theme.values)
+      FiltersMenuStyle.groups,
+      group(books, filters, "Période", Period.values.map(Filter.apply(_))),
+      group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
+      group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
+      group(books, filters, "Difficulté", Difficulty.filters)
     )
 
-  def group[T: FilterFactory](books: Rx[Seq[Book]], filters: Var[Seq[Filter]], name: String, groupFilters: Seq[T]): Frag = {
+  def group(books: Rx[Seq[Book]], filters: Var[Seq[Filter]], name: String, groupFilters: Seq[Filter]): Frag = {
     val filtersWithCount = Rx {
       groupFilters
-        .filter(filter => !Filter.contains(filters(), Filter(filter)))
-        .map(filter => (filter, Book.filter(books(), Filter(filter) +: filters()).length))
+        .filter(filter => !Filter.contains(filters(), filter))
+        .map(filter => (filter, Book.filter(books(), filter +: filters()).length))
         .filter(_._2 > 0)
     }
 
-    div(
-      FiltersMenuStyle.group,
-
-      div(FiltersMenuStyle.groupTitle, name),
-
-      RxTag { implicit context =>
+    RxTag { implicit context =>
+      if(filtersWithCount().isEmpty)
+        span("")
+      else
         div(
-          filtersWithCount().map { case (filter, count) =>
-            button(
-              FiltersMenuStyle.filter,
-              RxAttr(onclick, Rx(() => filters() = Filter(filter) +: filters())),
-              span(s"${filter.toString} ($count)")
-            )
-          }
+          FiltersMenuStyle.group,
+
+          div(FiltersMenuStyle.groupTitle, name),
+
+          div(
+            filtersWithCount().map { case (filter, count) =>
+              button(
+                FiltersMenuStyle.filter,
+                RxAttr(onclick, Rx(() => filters() = filter +: filters())),
+                span(s"${filter.name} ($count)")
+              )
+            }
+          )
         )
-      }
-    )
+    }
   }
 }
diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala
index fa97849..c023e66 100644
--- a/src/main/scala/reading/component/index/style/Books.scala
+++ b/src/main/scala/reading/component/index/style/Books.scala
@@ -17,7 +17,7 @@ object Books extends StyleSheet.Inline {
   val title = style(
     display.inlineBlock,
     fontWeight.bold,
-    marginBottom(10.px),
+    marginBottom(15.px),
     marginRight(10.px),
     color(Col.congoBrown)
   )
@@ -26,12 +26,22 @@ object Books extends StyleSheet.Inline {
     display.inlineBlock
   )
 
+  val period = style(
+    marginLeft(20.px),
+    marginBottom(10.px)
+  )
+
   val genres = style(
     marginLeft(20.px),
     marginBottom(10.px)
   )
 
   val themes = style(
+    marginLeft(20.px),
+    marginBottom(10.px)
+  )
+
+  val pages = style(
     marginLeft(20.px)
   )
 }
diff --git a/src/main/scala/reading/component/index/style/Filters.scala b/src/main/scala/reading/component/index/style/Filters.scala
index c2d0aaf..5ca9dfe 100644
--- a/src/main/scala/reading/component/index/style/Filters.scala
+++ b/src/main/scala/reading/component/index/style/Filters.scala
@@ -13,9 +13,17 @@ object Filters extends StyleSheet.Inline {
   )
 
   val filter = style(
+    display.flex,
+    alignItems.center,
     backgroundColor(Col.gray),
     color(Col.white),
-    padding(5.px, 10.px),
-    marginRight(10.px)
+    padding(10.px),
+    marginRight(10.px),
+    borderRadius(2.px),
+    &.hover(cursor.pointer)
+  )
+
+  val name = style(
+    marginRight(5.px)
   )
 }
diff --git a/src/main/scala/reading/component/index/style/FiltersMenu.scala b/src/main/scala/reading/component/index/style/FiltersMenu.scala
index 9fd50f0..7168e1b 100644
--- a/src/main/scala/reading/component/index/style/FiltersMenu.scala
+++ b/src/main/scala/reading/component/index/style/FiltersMenu.scala
@@ -7,6 +7,10 @@ import reading.component.style.Col
 object FiltersMenu extends StyleSheet.Inline {
   import dsl._
 
+  val groups = style(
+    width(250.px)
+  )
+
   val group = style(
     marginBottom(30.px)
   )
diff --git a/src/main/scala/reading/component/style/Color.scala b/src/main/scala/reading/component/style/Color.scala
index b9f9cf4..0d13158 100644
--- a/src/main/scala/reading/component/style/Color.scala
+++ b/src/main/scala/reading/component/style/Color.scala
@@ -10,7 +10,5 @@ object Col extends StyleSheet.Inline {
   val white      = c"#FFFFFF"
   val gray       = c"#7E7E7E"
   val eastBay    = c"#505080"
-  val tawnyPort  = c"#7F2447"
-  val cosmic     = c"#683649"
   val congoBrown = c"#57363E"
 }
diff --git a/src/main/scala/reading/component/widget/Cross.scala b/src/main/scala/reading/component/widget/Cross.scala
new file mode 100644
index 0000000..8692aeb
--- /dev/null
+++ b/src/main/scala/reading/component/widget/Cross.scala
@@ -0,0 +1,20 @@
+package reading.component.widget
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+import scalacss.internal.ValueT, ValueT.Color
+
+import reading.component.widget.style.{Cross => CrossStyle}
+
+object Cross {
+  def apply(size: String, color: ValueT[Color]): HtmlTag =
+    div(
+      CrossStyle.render,
+      CrossStyle.cross,
+      width := size,
+      height := size,
+      div(CrossStyle.line1, backgroundColor := color.value),
+      div(CrossStyle.line2, backgroundColor := color.value)
+    )
+}
diff --git a/src/main/scala/reading/component/widget/style/Cross.scala b/src/main/scala/reading/component/widget/style/Cross.scala
new file mode 100644
index 0000000..1d96958
--- /dev/null
+++ b/src/main/scala/reading/component/widget/style/Cross.scala
@@ -0,0 +1,31 @@
+package reading.component.widget.style
+
+import scalacss.Defaults._
+
+object Cross extends StyleSheet.Inline {
+  import dsl._
+
+  val cross = style(
+    position.relative
+  )
+
+  val line1 = style(
+    content := "\"\"",
+    position.absolute,
+    left(40.%%),
+    width(20.%%),
+    height(100.%%),
+
+    transform := "rotate(45deg)"
+  )
+
+  val line2 = style(
+    content := "\"\"",
+    position.absolute,
+    left(40.%%),
+    width(20.%%),
+    height(100.%%),
+
+    transform := "rotate(-45deg)"
+  )
+}