Refs #2518: adding form-filter component (sass)

4 files changed, 162 insertions, 4 deletions

diff --git a/app/assets/javascripts/forms.coffee b/app/assets/javascripts/forms.coffee
new file mode 100644
index 000000000..49858eb52
--- /dev/null
+++ b/app/assets/javascripts/forms.coffee
@@ -0,0 +1,6 @@
+@togglableFilter = ->
+  $('.form-group.togglable').on 'click', ->
+    $(this).siblings().removeClass 'open'
+    $(this).toggleClass 'open'
+
+$(document).on 'ready page:load', togglableFilter
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index f0667555a..6ca364738 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -88,6 +88,7 @@ $cbx-size: 20px
   > input
     &[type='checkbox']:not(:checked), &[type='checkbox']:checked
       position: absolute
+      margin: 0
       left: -9999px
 
       + label
@@ -129,3 +130,151 @@ $cbx-size: 20px
 
     &[type='checkbox']:checked + label:before
       background-color: $blue
+
+// Form filter
+.form.form-filter
+  display: block
+  position: relative
+  border-top: 1px solid rgba(#fff, 0.6)
+  border-left: 1px solid rgba(#fff, 0.6)
+  border-right: 1px solid rgba(#fff, 0.6)
+  padding-right: 167px
+  min-height: 40px
+
+  > *
+    display: inline-block
+    vertical-align: top
+    padding: 7px 15px
+
+  > .form-group
+    border-right: 1px solid rgba(#fff, 0.6)
+    margin: 0
+    min-height: 40px
+
+    .control-label
+      font-weight: 700
+      line-height: 40px - 14px
+
+  > .actions
+    position: absolute
+    right: 15px
+    top: 50%
+    padding: 0
+    margin-top: -13px
+    z-index: 1
+
+    .btn
+      color: #fff
+      font-weight: 700
+      background-color: transparent
+      padding: 2px 20px
+
+      &.btn-link
+        padding: 2px 10px
+      &.btn-default
+        border: 1px solid #fff
+
+  > .form-group
+    position: relative
+
+    &.togglable
+      padding-right: 44px
+      cursor: pointer
+
+      &:hover, &.open
+        background-color: rgba(#fff, 0.5)
+
+      &:before
+        content: '\f078'
+        font: normal normal normal 14px/1 FontAwesome
+        font-size: inherit
+        text-rendering: auto
+        -webkit-font-smoothing: antialiased
+        position: absolute
+        right: 15px
+        top: 0
+        height: 40px
+        width: 15px
+        color: #fff
+        text-align: center
+        line-height: 40px
+
+      &.open:before
+        content: '\f077'
+
+      > .control-label + *
+        display: none
+
+      &.open > .control-label + *
+        display: block
+
+    > .checkbox_list
+      margin: 0
+      padding: 5px 0
+      position: absolute
+      z-index: 555
+      top: 100%
+      left: 0
+      min-width: 100%
+      background-color: #fff
+      color: $darkgrey
+      box-shadow: 0 0 3px $darkgrey
+
+      $cbx-size-xs: 14px
+      > .checkbox
+        width: 100%
+        height: auto
+        margin: 0
+
+        > label
+          position: relative
+          display: block
+          padding: 5px 15px
+          min-height: $cbx-size-xs
+
+          &:hover
+            background-color: whitesmoke
+
+          > input
+            &[type='checkbox']:not(:checked), &[type='checkbox']:checked
+              position: absolute
+              left: -9999px
+              margin: 0
+
+              + span
+                padding-left: $cbx-size-xs + 10
+                position: relative
+
+                > .fa:last-child
+                  margin-left: 5px
+
+                &:before
+                  content: ''
+                  position: absolute
+                  left: 0
+                  top: 50%
+                  margin-top: -($cbx-size-xs / 2)
+                  width: $cbx-size-xs
+                  height: $cbx-size-xs
+                  border: 2px solid $blue
+                  background-color: #fff
+                  border-radius: 3px
+
+                &:after
+                  content: '\f00c'
+                  font: normal normal normal 14px/1 FontAwesome
+                  font-size: inherit
+                  text-rendering: auto
+                  -webkit-font-smoothing: antialiased
+                  position: absolute
+                  left: 0
+                  top: 50%
+                  margin-top: -($cbx-size-xs / 2)
+                  font-size: $cbx-size-xs - 2px
+                  width: $cbx-size-xs
+                  line-height: $cbx-size-xs
+                  text-align: center
+                  color: #fff
+
+            &[type='checkbox']:checked + span:before
+              background-color: $blue
diff --git a/app/views/workbenches/_filters.html.slim b/app/views/workbenches/_filters.html.slim
index 0cea2ea5e..0fcc2de2a 100644
--- a/app/views/workbenches/_filters.html.slim
+++ b/app/views/workbenches/_filters.html.slim
@@ -1,5 +1,5 @@
 .form.form-filter
-  .form-group
+  .form-group.togglable
     .control-label Etat
     .checkbox_list
       .checkbox
@@ -15,7 +15,7 @@
             |2
             span.fa.fa-paw
 
-  .form-group
+  .form-group.togglable
     .control-label Organisation(s)
     .checkbox_list
       .checkbox
@@ -31,7 +31,7 @@
             |2
             span.fa.fa-paw
 
-  .form-group
+  .form-group.togglable
     .control-label Nombre de lignes
     .checkbox_list
       .checkbox
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index 8df65f50c..b1c8a2bf4 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -24,9 +24,12 @@
             button.btn.btn-default type='submit'
               span.fa.fa-search
 
-  .row
+  .row.mt-xs
     .col-lg-12
       = render 'filters'
+        
+      / br
+      / = "filtres par: etat, orga, nb lignes, plage de validité, date publi. btns: clear filter et filtrer"
 
 / PageContent
 .page_content