1 files changed, 44 insertions, 22 deletions
diff --git a/src/main/scala/reading/component/index/Menu.scala b/src/main/scala/reading/component/index/Menu.scala
index 5ffbd25..6a9bcef 100644
--- a/src/main/scala/reading/component/index/Menu.scala
+++ b/src/main/scala/reading/component/index/Menu.scala
@@ -1,7 +1,5 @@
 package reading.component.index
 
-import org.scalajs.dom
-
 import rx._
 import Ctx.Owner.Unsafe._
 
@@ -24,29 +22,27 @@ object Menu {
 
         header(showFiltersMenu, filters().length),
 
-        filters().find(_.kind == FilterKind.Grade) match {
-          case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_)))
-          case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade))
-        },
-        group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
-        group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
-        group(books, filters, "Niveau", Level.values.map(Filter.apply(_))),
-        group(books, filters, "Période", Period.values.map(Filter.apply(_)))
+        div(
+          MenuStyle.groups,
+          filters().find(_.kind == FilterKind.Grade) match {
+            case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_)))
+            case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade))
+          },
+          group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
+          group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
+          group(books, filters, "Niveau", Level.values.map(Filter.apply(_))),
+          group(books, filters, "Période", Period.values.map(Filter.apply(_)))
+        ),
+
+        footer(Rx(books().length), filters, showFiltersMenu)
       )
     }
 
   def header(showFiltersMenu: Var[Boolean], count: Int): HtmlTag =
     div(
       MenuStyle.header,
-      span(
-        MenuStyle.close,
-        RxAttr(onclick, Rx(() => {
-          showFiltersMenu() = false
-          dom.document.body.style.overflowY = "scroll"
-        }))
-      ),
       "Filtrer",
-      if (count > 0) span(MenuStyle.count, count) else span("")
+      if (count > 0) span(MenuStyle.filtersCount, count) else span("")
     )
 
   def group(
@@ -72,10 +68,15 @@ object Menu {
         MenuStyle.filterGroup,
         div(
           MenuStyle.filterTitle,
-          parentFilter.map(filter =>
-            RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))).getOrElse(""),
+          parentFilter.map { filter =>
+            RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))
+          }.getOrElse(""),
           if (parentFilter.isDefined) MenuStyle.activeFilter else "",
-          name
+          name,
+          RxTag { implicit context =>
+            val count = filters().filter(f => groupFilters.exists(Filter.equals(f, _))).length
+            if (count > 0) span(MenuStyle.filterTitleCount, count) else span("")
+          }
         ),
         div(
           filtersWithCount().map {
@@ -89,7 +90,10 @@ object Menu {
                   filters,
                   if (isActive) Filter.remove(filters(), filter) else filter +: filters()
                 ))),
-                span(s"${filter.name.capitalize} ($count)")
+                span(
+                  span(filter.name.capitalize),
+                  span(MenuStyle.filterCount, count)
+                )
               )
             }
           }
@@ -101,4 +105,22 @@ object Menu {
     filters() = newFilters
     Route.push(Route.Books(newFilters))
   }
+
+  def footer(bookCount: Rx[Int], filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean]): HtmlTag =
+    div(
+      MenuStyle.footer,
+      div(
+        MenuStyle.clear,
+        RxAttr(onclick, Rx(() => filters() = Nil)),
+        "Effacer"
+      ),
+      div(
+        MenuStyle.returnToBooks,
+        RxAttr(onclick, Rx(() => showFiltersMenu() = false)),
+        "Afficher",
+        RxTag { implicit context =>
+          span(MenuStyle.bookCount, bookCount())
+        }
+      )
+    )
 }