Merge pull request #5411 from betagouv/toggle-switch-creation

Création d'un toggle-switch

app/assets/stylesheets/new_design/toggle-switch.scss

@@ -0,0 +1,89 @@
+@import "colors";
+@import "constants";
+
+// Toggle-switch
+// The switch - the box around
+.form label.toggle-switch {
+  position: relative;
+  display: inline-block;
+  height: 24px;
+  margin: 0;
+  margin-right: 15px;
+}
+
+// Hide default HTML checkbox
+.form label.toggle-switch input[type="checkbox"] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+// The control
+.toggle-switch-control {
+  position: absolute;
+  width: 47px;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $border-grey;
+  transition: 0.4s;
+  border: 1px solid transparent;
+}
+
+.toggle-switch-control::before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 1px;
+  bottom: 1px;
+  background-color: $white;
+  transition: 0.4s;
+}
+
+input:checked + .toggle-switch-control {
+  background-color: $green;
+}
+
+input:focus + .toggle-switch-control {
+  border-color: $blue;
+  box-shadow: 0px 0px 2px 1px $blue;
+}
+
+input:checked + .toggle-switch-control::before {
+  transform: translateX(23px);
+}
+
+.toggle-switch-label {
+  margin-left: 47px;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.toggle-switch-label.on {
+  color: $green;
+}
+
+.toggle-switch-label.off {
+  color: $grey;
+}
+
+.toggle-switch-checkbox:checked ~ .toggle-switch-label.off {
+  display: none;
+}
+
+.toggle-switch-checkbox:not(:checked) ~ .toggle-switch-label.on {
+  display: none;
+}
+
+// Rounded control
+.toggle-switch-control.round {
+  border-radius: 24px;
+}
+
+.toggle-switch-control.round::before {
+  border-radius: 50%;
+}

app/views/root/patron.html.haml

@@ -64,6 +64,13 @@
             Option B
             %p.notice Une autre option, pas mal non plus.
 
+        %h3.header-subsection Interrupteur
+        %label.toggle-switch
+          = f.check_box :archived, class: 'toggle-switch-checkbox'
+          %span.toggle-switch-control.round
+          %span.toggle-switch-label.on Activé
+          %span.toggle-switch-label.off Désactivé
+
         .send-wrapper
           = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
           = f.submit 'Envoyer', class: 'button send primary'