Merge pull request #652 from sgmap/new-tabs

Redesign the tabs so that they look more like tabs

app/assets/stylesheets/new_design/_tabs.scss

@@ -4,19 +4,53 @@
 .tabs {
   li {
     display: inline-block;
-    margin-right: 40px;
+    line-height: 36px;
-  }
+    position: relative;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 3px 3px 0 0;
+    border: 1px solid transparent;
 
     a {
-    @include vertical-padding(14px);
       display: block;
+      padding-left: 20px;
+      padding-right: 20px;
       color: $black;
-    font-size: 22px;
+    }
+
+    &.active {
+      background-color: #FFFFFF;
+      border-top: 1px solid $border-grey;
+      border-left: 1px solid $border-grey;
+      border-right: 1px solid $border-grey;
+
+      a {
+        color: $blue;
+      }
+
+      .badge {
+        color: $blue;
+      }
+    }
 
-    &.selected,
     &:hover {
-      border-bottom: 2px solid $blue;
+      a {
-      padding-bottom: 12px;
+        color: $blue;
+      }
+
+      .badge {
+        color: $blue;
+      }
+    }
+
+    .badge {
+      background-color: rgba(0, 0, 0, 0.08);
+      padding-left: 5px;
+      padding-right: 5px;
+      border-radius: 100px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 14px;
     }
   }
 }

app/assets/stylesheets/new_design/new_header.scss

@@ -25,7 +25,7 @@
   margin-right: 4 * $default-spacer;
 }
 
-.header-left-menu {
+.header-tabs {
   li {
     display: inline-block;
   }

app/assets/stylesheets/new_design/procedures_show.scss

@@ -13,57 +13,6 @@
     margin-bottom: 2 * $default-padding;
   }
 
-  .dossiers-categories {
-    li {
-      display: inline-block;
-      height: 56px;
-      width: 130px;
-      line-height: 17px;
-      position: relative;
-      text-align: center;
-      font-size: 14px;
-
-      a {
-        color: $black;
-      }
-
-      &::before,
-      &:last-child::after {
-        content: "";
-        position: absolute;
-        height: 36px;
-        width: 1px;
-        background-color: $border-grey;
-        margin-right: $default-padding;
-      }
-
-      &::before {
-        left: 0px;
-      }
-
-      &:last-child::after {
-        right: 0px;
-        top: 0px;
-        margin-right: 0px;
-      }
-
-      &.active {
-        border-bottom: 2px solid $blue;
-
-        a {
-          color: $blue;
-        }
-      }
-
-      .dossiers-count {
-        position: relative;
-        display: block;
-        font-size: 16px;
-        font-weight: bold;
-      }
-    }
-  }
-
   .dossiers-table {
     margin: (2 * $default-padding) auto;
     width: 100%;

app/views/layouts/_new_header.haml

@@ -6,7 +6,7 @@
         %img{ src: image_url("header/logo-tps.svg") }
 
       - if gestionnaire_signed_in?
-        %ul.header-left-menu
+        %ul.header-tabs
           %li
             = link_to "Procédures", procedures_path, class: "active"
 

app/views/new_gestionnaire/dossiers/_header.html.haml

@@ -6,11 +6,11 @@
       %li
         = "Dossier n° #{dossier.id}"
     %ul.tabs
-      %li
+      %li{ class: current_page?(dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
-        = link_to "Demande", dossier_path(dossier.procedure, dossier), class: ("selected" if current_page?(dossier_path(dossier.procedure, dossier)))
+        = link_to "Demande", dossier_path(dossier.procedure, dossier)
-      %li
+      %li{ class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
-        = link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier), class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
+        = link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier)
-      %li
+      %li{ class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
-        = link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier), class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
+        = link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier)
       %li
         = link_to "Historique", "#"

app/views/new_gestionnaire/procedures/show.html.haml

@@ -6,31 +6,31 @@
 
       .width-100
         %h1= @procedure.libelle
-        %ul.dossiers-categories
+        %ul.tabs
           %li{ class: (@statut == 'a-suivre') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'a-suivre')) do
-              %span.dossiers-count= @a_suivre_dossiers.count
               à suivre
+              %span.badge= @a_suivre_dossiers.count
 
           %li{ class: (@statut == 'suivis') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'suivis')) do
-              %span.dossiers-count= @followed_dossiers.count
               = t('pluralize.followed', count: @followed_dossiers.count)
+              %span.badge= @followed_dossiers.count
 
           %li{ class: (@statut == 'traites') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'traites')) do
-              %span.dossiers-count= @termines_dossiers.count
               = t('pluralize.processed', count: @termines_dossiers.count)
+              %span.badge= @termines_dossiers.count
 
           %li{ class: (@statut == 'tous') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'tous')) do
-              %span.dossiers-count= @all_state_dossiers.count
               tous les dossiers
+              %span.badge= @all_state_dossiers.count
 
           %li{ class: (@statut == 'archives') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'archives')) do
-              %span.dossiers-count= @archived_dossiers.count
               = t('pluralize.archived', count: @archived_dossiers.count)
+              %span.badge= @archived_dossiers.count
 
   .container
     - if @dossiers.present?

app/views/root/patron.html.haml

@@ -51,16 +51,6 @@
     %p
       = link_to ".button.primary.expand", "#", class: "button primary expand"
 
-    %h1 Onglets
-
-    %ul.tabs
-      %li
-        = link_to "Onglet 1", "#", class: "selected"
-      %li
-        = link_to "Onglet 2", "#"
-      %li
-        = link_to "Onglet 3", "#"
-
     %h1 Labels
 
     %span.label .label
@@ -103,12 +93,14 @@
     .container
       Titre
       %ul.tabs
+        %li.active
+          = link_to "Onglet actif", "#"
         %li
-          = link_to "Onglet 1", "#", class: "selected"
+          = link_to "Onglet inactif", "#"
         %li
-          = link_to "Onglet 2", "#"
+          = link_to "#" do
-        %li
+            Onglet avec badge
-          = link_to "Onglet 3", "#"
+            %span.badge 2
 
   .container
     %h1 Breadcrumbs