From 9c2e71afa39b9fad05b0b36012882587b3d0c4ab Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Tue, 25 Jul 2017 14:33:03 +0200 Subject: [PATCH 1/8] Form: add various champs html and style --- app/assets/stylesheets/new_design/common.scss | 3 +- .../stylesheets/new_design/dossier-link.scss | 17 +++++ app/assets/stylesheets/new_design/forms.scss | 63 ++++++++++++++++++- app/controllers/root_controller.rb | 36 +++++++++++ app/models/drop_down_list.rb | 4 ++ .../dossiers/champs/_address.html.haml | 7 +++ .../dossiers/champs/_champ_label.html.haml | 1 + .../dossiers/champs/_checkbox.html.haml | 8 +++ .../dossiers/champs/_civilite.html.haml | 10 +++ .../dossiers/champs/_date.html.haml | 7 +++ .../dossiers/champs/_datetime.html.haml | 21 +++++++ .../dossiers/champs/_departements.html.haml | 4 ++ .../dossiers/champs/_dossier_link.html.haml | 22 +++++++ .../dossiers/champs/_drop_down_list.html.haml | 8 +++ .../dossiers/champs/_email.html.haml | 7 +++ .../dossiers/champs/_engagement.html.haml | 8 +++ .../dossiers/champs/_explication.html.haml | 2 + .../dossiers/champs/_header_section.html.haml | 2 + .../champs/_multiple_drop_down_list.html.haml | 8 +++ .../dossiers/champs/_number.html.haml | 7 +++ .../dossiers/champs/_pays.html.haml | 4 ++ .../dossiers/champs/_phone.html.haml | 7 +++ .../dossiers/champs/_regions.html.haml | 4 ++ .../dossiers/champs/_text.html.haml | 7 +++ .../dossiers/champs/_textarea.html.haml | 7 +++ .../dossiers/champs/_yes_no.html.haml | 10 +++ app/views/root/patron.html.haml | 6 +- 27 files changed, 282 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/new_design/dossier-link.scss create mode 100644 app/views/new_gestionnaire/dossiers/champs/_address.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_date.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_departements.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_email.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_explication.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_number.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_pays.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_phone.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_regions.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_text.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml create mode 100644 app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml diff --git a/app/assets/stylesheets/new_design/common.scss b/app/assets/stylesheets/new_design/common.scss index 7855cb076..b4e213382 100644 --- a/app/assets/stylesheets/new_design/common.scss +++ b/app/assets/stylesheets/new_design/common.scss @@ -6,7 +6,8 @@ body, input, -textarea { +textarea, +select { @extend %new-type; font-size: 16px; line-height: 1.42857143; diff --git a/app/assets/stylesheets/new_design/dossier-link.scss b/app/assets/stylesheets/new_design/dossier-link.scss new file mode 100644 index 000000000..5cb9aaa6e --- /dev/null +++ b/app/assets/stylesheets/new_design/dossier-link.scss @@ -0,0 +1,17 @@ +@import "constants"; +@import "colors"; + +.dossier-link { + .help-block > p { + margin-top: - $default-padding; + margin-bottom: 2 * $default-padding; + } + + .text-info { + color: $blue; + } + + .text-warning { + color: $dark-red; + } +} diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 50a56c464..14f8d13cb 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -17,12 +17,15 @@ input[type=text], input[type=email], input[type=password], - textarea { + input[type=date], + input[type=number], + input[type=tel], + textarea, + select { display: block; - width: 100%; border-radius: 4px; border: solid 1px $border-grey; - margin-bottom: 4 * $default-spacer; + margin-bottom: 2 * $default-padding; padding: $default-padding; &:disabled { @@ -30,6 +33,60 @@ } } + input[type=text], + input[type=email], + input[type=password], + input[type=date], + input[type=number], + input[type=tel], + textarea { + width: 100%; + } + + input[type=email], + input[type=number], + input[type=tel], { + max-width: 500px; + } + + input[type=checkbox], + input[type=radio] { + margin-bottom: 2 * $default-padding; + } + + input[type=date] { + max-width: 180px; + } + + .datetime { + input[type=date] { + display: inline-block; + } + + select { + display: inline-block; + } + } + + .header-section { + color: #4393F3; + font-weight: bold; + font-size: 20px; + margin-bottom: 2 * $default-padding; + } + + .explication-libelle { + font-weight: bold; + font-size: 20px; + margin-bottom: $default-padding; + } + + .explication { + background-color: $light-grey; + padding: $default-padding; + margin-bottom: 2 * $default-padding; + } + .send { float: right; margin-bottom: $default-padding; diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb index b65437fa7..8d5cfec18 100644 --- a/app/controllers/root_controller.rb +++ b/app/controllers/root_controller.rb @@ -32,5 +32,41 @@ class RootController < ApplicationController end def patron + @all_champs = TypeDeChamp.type_champs + .map { |name, _| TypeDeChamp.new(type_champ: name, libelle: name) } + .map { |type_de_champ| Champ.new(type_de_champ: type_de_champ) } + .map.with_index do |champ, i| + champ.id = i + champ + end + + @all_champs + .select { |champ| champ.type_champ == 'header_section' } + .each { |champ| champ.type_de_champ.libelle = 'un super titre de section' } + + @all_champs + .select { |champ| %w(drop_down_list multiple_drop_down_list).include?(champ.type_champ) } + .each do |champ| + champ.type_de_champ.drop_down_list = DropDownList.new(type_de_champ: champ.type_de_champ) + champ.drop_down_list.value = +"option A +option B +-- avant l'option C -- +option C" + champ.value = '["option B", "option C"]' + end + + type_champ_values = { + 'date': '2016-07-26', + 'datetime': '26/07/2016 07:35', + 'textarea': 'Une description de mon projet', + 'explication': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet', + } + + type_champ_values.each do |(type_champ, value)| + @all_champs + .select { |champ| champ.type_champ == type_champ.to_s } + .each { |champ| champ.value = value } + end end end diff --git a/app/models/drop_down_list.rb b/app/models/drop_down_list.rb index 979112f4c..150bebb73 100644 --- a/app/models/drop_down_list.rb +++ b/app/models/drop_down_list.rb @@ -14,6 +14,10 @@ class DropDownList < ActiveRecord::Base champ.object.value.blank? ? [] : multiple ? JSON.parse(champ.object.value) : [champ.object.value] end + def selected_options_without_decorator(champ) + champ.value.blank? ? [] : multiple ? JSON.parse(champ.value) : [champ.value] + end + def multiple type_de_champ.type_champ == 'multiple_drop_down_list' end diff --git a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml new file mode 100644 index 000000000..34f1ce5e9 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'text', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + placeholder: champ.libelle, + value: champ.value } diff --git a/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml new file mode 100644 index 000000000..e99954f45 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml @@ -0,0 +1 @@ +%label{ for: :"champs_#{champ.id}" }>= champ.libelle diff --git a/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml new file mode 100644 index 000000000..5722da3bc --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml @@ -0,0 +1,8 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'checkbox', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + checked: ('checked' if champ.value == 'on') } + +%br diff --git a/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml b/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml new file mode 100644 index 000000000..734cf98ac --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml @@ -0,0 +1,10 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%div + %label + = radio_button_tag "champs['#{champ.id}']", "M.", champ.value == 'Mme' ? false : true + Monsieur + + %label + = radio_button_tag "champs['#{champ.id}']", "Mme", champ.value == 'Mme' + Madame diff --git a/app/views/new_gestionnaire/dossiers/champs/_date.html.haml b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml new file mode 100644 index 000000000..fc8e807ce --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ name: "champs['#{champ.id}']", + placeholder: "JJ/MM/AAAA", + id: "champs_#{champ.id}", + value: champ.value, + type: "date" } diff --git a/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml new file mode 100644 index 000000000..4819347a3 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml @@ -0,0 +1,21 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +.datetime + %input{ name: "champs['#{champ.id}']", + placeholder: champ.libelle, + id: "champs_#{champ.id}", + value: (champ.value.split(/[ ][0-9]*:[0-9]*/).first unless champ.value.nil?), + type: 'date' } + + %select{ name: "time_hour['#{champ.id}']", id: "time_hour_#{champ.id}" } + - (0..23).each do |num| + - num = "%.2i" %num + %option{ value: num, selected: (:selected if champ.same_hour?(num)) } + = num + h + %select{ name: "time_minute['#{champ.id}']", id: "time_minute_#{champ.id}" } + - (0..55).step(5) do |num| + - num = "%.2i" %num + %option{ value: num, selected: (:selected if champ.same_minute?(num)) } + = num + min diff --git a/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml b/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml new file mode 100644 index 000000000..8ef409bed --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml @@ -0,0 +1,4 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + += select_tag("champs['#{champ.id}']", + options_for_select(Champ.departements, selected: champ.value)) diff --git a/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml new file mode 100644 index 000000000..647ab8d9e --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml @@ -0,0 +1,22 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +- dossier = Dossier.find_by(id: champ.value) +- show_text_summary = dossier.present? +- show_warning = !show_text_summary && champ.value.present? +- text_summary = dossier.try(:text_summary) + +.dossier-link + %input{ name: "champs['#{ champ.id }']", + placeholder: "Numéro de dossier", + id: "champs_#{ champ.id }", + value: champ.value, + type: 'number', + 'autocomplete' => 'off', + 'data-type' => 'dossier-link' } + + .help-block + %p.text-info{ style: show_text_summary ? nil : 'display: none;' } + %span.dossier-text-summary= text_summary + + %p.text-warning{ style: show_warning ? nil : 'display: none;' } + Ce dossier est inconnu diff --git a/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml b/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml new file mode 100644 index 000000000..c915b1797 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml @@ -0,0 +1,8 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +- if champ.drop_down_list && champ.drop_down_list.options.any? + = select_tag("champs['#{champ.id}']", + options_for_select(champ.drop_down_list.options, + selected: champ.drop_down_list.selected_options_without_decorator(champ), + disabled: champ.drop_down_list.disabled_options), + multiple: false) diff --git a/app/views/new_gestionnaire/dossiers/champs/_email.html.haml b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml new file mode 100644 index 000000000..727d092e4 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'email', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + placeholder: champ.libelle, + value: champ.value } diff --git a/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml new file mode 100644 index 000000000..5722da3bc --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml @@ -0,0 +1,8 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'checkbox', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + checked: ('checked' if champ.value == 'on') } + +%br diff --git a/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml b/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml new file mode 100644 index 000000000..0baedbbae --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml @@ -0,0 +1,2 @@ +%h2.explication-libelle= champ.libelle +%p.explication= champ.value diff --git a/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml b/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml new file mode 100644 index 000000000..16c6c6c9f --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml @@ -0,0 +1,2 @@ +%h2.header-section + = champ.libelle diff --git a/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml new file mode 100644 index 000000000..2ca3fabed --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml @@ -0,0 +1,8 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +- if champ.drop_down_list && champ.drop_down_list.options.any? + = select_tag("champs['#{champ.id}']", + options_for_select(champ.drop_down_list.options, + selected: champ.drop_down_list.selected_options_without_decorator(champ), + disabled: champ.drop_down_list.disabled_options), + multiple: true) diff --git a/app/views/new_gestionnaire/dossiers/champs/_number.html.haml b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml new file mode 100644 index 000000000..dd66c4e8f --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'number', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + placeholder: champ.libelle, + value: champ.value } diff --git a/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml b/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml new file mode 100644 index 000000000..96962d7dc --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml @@ -0,0 +1,4 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + += select_tag("champs['#{champ.id}']", + options_for_select(Champ.pays, selected: champ.value)) diff --git a/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml new file mode 100644 index 000000000..fcc6e043e --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'tel', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + placeholder: champ.libelle, + value: champ.value } diff --git a/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml b/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml new file mode 100644 index 000000000..ad4cf5531 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml @@ -0,0 +1,4 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + += select_tag("champs['#{champ.id}']", + options_for_select(Champ.regions, selected: champ.value)) diff --git a/app/views/new_gestionnaire/dossiers/champs/_text.html.haml b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml new file mode 100644 index 000000000..34f1ce5e9 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%input{ type: 'text', + name: "champs['#{champ.id}']", + id: "champs_#{champ.id}", + placeholder: champ.libelle, + value: champ.value } diff --git a/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml new file mode 100644 index 000000000..4f057c115 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml @@ -0,0 +1,7 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%textarea{ name: "champs['#{champ.id}']", + placeholder: champ.description, + id: "champs_#{champ.id}", + row: '6' } + = sanitize(champ.value) diff --git a/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml b/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml new file mode 100644 index 000000000..802595b19 --- /dev/null +++ b/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml @@ -0,0 +1,10 @@ += render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } + +%div + %label + = radio_button_tag "champs['#{champ.id}']", "true", champ.value == 'true' + Oui + + %label + = radio_button_tag "champs['#{champ.id}']", "false", champ.value == 'false' + Non diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 1c417081c..762c9a6a0 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -3,10 +3,8 @@ %h1 Formulaires %form.form - %label Nom - %input{ type: "text" } - %textarea{ placeholder: "Description de votre projet" } - %label Mot de passe + - @all_champs.each do |champ| + = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ } %input{ type: "password", value: "12345678" } %input.button.send{ type: "submit", value: "Envoyer" } From e0bd42032ae0f1ed3f20473900816ab8d8893335 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Tue, 25 Jul 2017 14:33:03 +0200 Subject: [PATCH 2/8] Form: style select --- app/assets/images/icons/chevron-down.svg | 1 + app/assets/stylesheets/new_design/forms.scss | 23 ++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 app/assets/images/icons/chevron-down.svg diff --git a/app/assets/images/icons/chevron-down.svg b/app/assets/images/icons/chevron-down.svg new file mode 100644 index 000000000..22a1562fd --- /dev/null +++ b/app/assets/images/icons/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 14f8d13cb..1f8d9702c 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -58,6 +58,29 @@ max-width: 180px; } + select { + // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: image-url("icons/chevron-down.svg") no-repeat; + background-size: 14px; + background-position: right 10px center; + padding-right: 3 * $default-spacer; + + // CAUTION: IE hackery ahead + &::-ms-expand { + display: none; // remove default arrow in IE 10 and 11 */ + } + + // target Internet Explorer 9 to undo the custom arrow */ + @media screen and (min-width:0\0) { + select { + background: none\9; + } + } + } + .datetime { input[type=date] { display: inline-block; From 509b378567e54fb0fbd4f9be51d7a26e8aa97a93 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 26 Jul 2017 13:22:25 +0200 Subject: [PATCH 3/8] Form: add select2 form multiple select --- .../javascripts/new_design/application.js | 1 + .../champs/multiple_drop_down_list.js | 3 ++ app/assets/stylesheets/new_design/forms.scss | 28 ++++++++++++++++++- .../new_design/new_application.scss | 1 + .../champs/_multiple_drop_down_list.html.haml | 3 +- 5 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/new_design/champs/multiple_drop_down_list.js diff --git a/app/assets/javascripts/new_design/application.js b/app/assets/javascripts/new_design/application.js index 14e94dc84..c80a10aab 100644 --- a/app/assets/javascripts/new_design/application.js +++ b/app/assets/javascripts/new_design/application.js @@ -17,4 +17,5 @@ //= require leaflet.1.1.0 //= require highcharts //= require chartkick +//= require select2 //= require_tree . diff --git a/app/assets/javascripts/new_design/champs/multiple_drop_down_list.js b/app/assets/javascripts/new_design/champs/multiple_drop_down_list.js new file mode 100644 index 000000000..f76aa5913 --- /dev/null +++ b/app/assets/javascripts/new_design/champs/multiple_drop_down_list.js @@ -0,0 +1,3 @@ +document.addEventListener('turbolinks:load', function() { + $('select.select2').select2(); +}); diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 1f8d9702c..dac5857fe 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -58,7 +58,8 @@ max-width: 180px; } - select { + select, + .select2-selection { // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript -webkit-appearance: none; -moz-appearance: none; @@ -81,6 +82,31 @@ } } + .select2 { + min-width: 50%; + } + + .select2-container { + display: block; + margin-bottom: 2 * $default-padding; + + &.select2-container--focus { + .select2-selection { + border-color: $border-grey; + } + } + + // scss-lint:disable SelectorFormat + .select2-selection__rendered { + padding: $default-padding; + } + + .select2-selection__choice { + background-color: #FFFFFF; + } + // scss-lint:enable + } + .datetime { input[type=date] { display: inline-block; diff --git a/app/assets/stylesheets/new_design/new_application.scss b/app/assets/stylesheets/new_design/new_application.scss index 9735dc8fc..d1bcfc077 100644 --- a/app/assets/stylesheets/new_design/new_application.scss +++ b/app/assets/stylesheets/new_design/new_application.scss @@ -4,4 +4,5 @@ // = require ./utils // = require ./fonts // = require leaflet.1.1.0 +// = require select2 // = require_tree . diff --git a/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml index 2ca3fabed..248fb1932 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml @@ -5,4 +5,5 @@ options_for_select(champ.drop_down_list.options, selected: champ.drop_down_list.selected_options_without_decorator(champ), disabled: champ.drop_down_list.disabled_options), - multiple: true) + multiple: true, + class: 'select2') From 2fd486c1a3f528d6a33989d06ae9ed41cb8b14bb Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 26 Jul 2017 12:41:23 +0200 Subject: [PATCH 4/8] Form: add pseudo native form validation --- app/assets/javascripts/new_design/form_validation.js | 8 ++++++++ app/assets/stylesheets/new_design/forms.scss | 11 +++++++++++ app/views/root/patron.html.haml | 1 + 3 files changed, 20 insertions(+) create mode 100644 app/assets/javascripts/new_design/form_validation.js diff --git a/app/assets/javascripts/new_design/form_validation.js b/app/assets/javascripts/new_design/form_validation.js new file mode 100644 index 000000000..8eef828af --- /dev/null +++ b/app/assets/javascripts/new_design/form_validation.js @@ -0,0 +1,8 @@ +$(document).on('blur keydown', 'input, textarea', function() { + $(this).addClass('touched'); +}); + +$(document).on('click', 'input[type="submit"]:not([formnovalidate])', function() { + var $form = $(this).closest('form'); + $('input, textarea', $form).addClass('touched'); +}); diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index dac5857fe..f07b8a9bc 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -58,6 +58,17 @@ max-width: 180px; } + input:invalid, + textarea:invalid { + box-shadow: none; + } + + input.touched:invalid, + textarea.touched:invalid { + border-color: $dark-red; + box-shadow: 0px 0px 5px $dark-red; + } + select, .select2-selection { // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 762c9a6a0..f86987216 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -7,6 +7,7 @@ = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ } %input{ type: "password", value: "12345678" } %input.button.send{ type: "submit", value: "Envoyer" } + %input.button.send{ type: "submit", value: "Enregistrer un brouillon (formnovalidate)", formnovalidate: true } %h1 Boutons From 80023e4f7f0356d617548de08861ac2aa6c1615c Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 26 Jul 2017 12:41:58 +0200 Subject: [PATCH 5/8] Form: remove form overflow to improve box shadow on input error --- app/assets/stylesheets/new_design/forms.scss | 11 ++++++----- .../new_gestionnaire/dossiers/messagerie.html.haml | 3 ++- app/views/root/patron.html.haml | 5 +++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index f07b8a9bc..cf3ace506 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -2,8 +2,6 @@ @import "colors"; .form { - overflow: hidden; - h1 { text-align: center; margin-bottom: 20px; @@ -147,8 +145,11 @@ margin-bottom: 2 * $default-padding; } - .send { - float: right; - margin-bottom: $default-padding; + .send-wrapper { + text-align: right; + + .send { + margin-bottom: $default-padding; + } } } diff --git a/app/views/new_gestionnaire/dossiers/messagerie.html.haml b/app/views/new_gestionnaire/dossiers/messagerie.html.haml index e16cb8e3f..7d2176901 100644 --- a/app/views/new_gestionnaire/dossiers/messagerie.html.haml +++ b/app/views/new_gestionnaire/dossiers/messagerie.html.haml @@ -17,4 +17,5 @@ = form_for(Commentaire.new, url: commentaire_dossier_path(@dossier.procedure, @dossier), html: { class: 'form' }) do |f| = f.text_area :body, rows: 5, placeholder: 'Répondre ici', required: true - = f.submit 'Envoyer', class: 'button send' + .send-wrapper + = f.submit 'Envoyer', class: 'button send' diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index f86987216..1de270904 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -6,8 +6,9 @@ - @all_champs.each do |champ| = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ } %input{ type: "password", value: "12345678" } - %input.button.send{ type: "submit", value: "Envoyer" } - %input.button.send{ type: "submit", value: "Enregistrer un brouillon (formnovalidate)", formnovalidate: true } + .send-wrapper + %input.button.send{ type: "submit", value: "Enregistrer un brouillon (formnovalidate)", formnovalidate: true } + %input.button.send{ type: "submit", value: "Envoyer" } %h1 Boutons From 1a485f173e5d194c0f6e946d53d165ec250d42d7 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Thu, 27 Jul 2017 11:09:28 +0200 Subject: [PATCH 6/8] Form: add required --- app/controllers/root_controller.rb | 2 +- .../new_gestionnaire/dossiers/champs/_address.html.haml | 3 ++- .../dossiers/champs/_champ_label.html.haml | 2 +- .../new_gestionnaire/dossiers/champs/_checkbox.html.haml | 3 ++- app/views/new_gestionnaire/dossiers/champs/_date.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_datetime.html.haml | 7 ++++--- .../dossiers/champs/_dossier_link.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_email.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_engagement.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_number.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_phone.html.haml | 3 ++- app/views/new_gestionnaire/dossiers/champs/_text.html.haml | 3 ++- .../new_gestionnaire/dossiers/champs/_textarea.html.haml | 3 ++- 13 files changed, 26 insertions(+), 15 deletions(-) diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb index 8d5cfec18..0bb093d67 100644 --- a/app/controllers/root_controller.rb +++ b/app/controllers/root_controller.rb @@ -33,7 +33,7 @@ class RootController < ApplicationController def patron @all_champs = TypeDeChamp.type_champs - .map { |name, _| TypeDeChamp.new(type_champ: name, libelle: name) } + .map { |name, _| TypeDeChamp.new(type_champ: name, libelle: name, mandatory: true) } .map { |type_de_champ| Champ.new(type_de_champ: type_de_champ) } .map.with_index do |champ, i| champ.id = i diff --git a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml index 34f1ce5e9..e42aa8584 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml @@ -4,4 +4,5 @@ name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, - value: champ.value } + value: champ.value, + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml index e99954f45..7807b7c6a 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml @@ -1 +1 @@ -%label{ for: :"champs_#{champ.id}" }>= champ.libelle +%label{ for: :"champs_#{champ.id}" }> #{champ.libelle} #{champ.mandatory ? '*' : nil} diff --git a/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml index 5722da3bc..09600b354 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml @@ -3,6 +3,7 @@ %input{ type: 'checkbox', name: "champs['#{champ.id}']", id: "champs_#{champ.id}", - checked: ('checked' if champ.value == 'on') } + checked: ('checked' if champ.value == 'on'), + required: champ.mandatory } %br diff --git a/app/views/new_gestionnaire/dossiers/champs/_date.html.haml b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml index fc8e807ce..0e8060144 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_date.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml @@ -4,4 +4,5 @@ placeholder: "JJ/MM/AAAA", id: "champs_#{champ.id}", value: champ.value, - type: "date" } + type: "date", + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml index 4819347a3..8704e17bc 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml @@ -5,15 +5,16 @@ placeholder: champ.libelle, id: "champs_#{champ.id}", value: (champ.value.split(/[ ][0-9]*:[0-9]*/).first unless champ.value.nil?), - type: 'date' } + type: 'date', + required: champ.mandatory } - %select{ name: "time_hour['#{champ.id}']", id: "time_hour_#{champ.id}" } + %select{ name: "time_hour['#{champ.id}']", id: "time_hour_#{champ.id}", required: champ.mandatory } - (0..23).each do |num| - num = "%.2i" %num %option{ value: num, selected: (:selected if champ.same_hour?(num)) } = num h - %select{ name: "time_minute['#{champ.id}']", id: "time_minute_#{champ.id}" } + %select{ name: "time_minute['#{champ.id}']", id: "time_minute_#{champ.id}", required: champ.mandatory } - (0..55).step(5) do |num| - num = "%.2i" %num %option{ value: num, selected: (:selected if champ.same_minute?(num)) } diff --git a/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml index 647ab8d9e..8ecf58dc3 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml @@ -12,7 +12,8 @@ value: champ.value, type: 'number', 'autocomplete' => 'off', - 'data-type' => 'dossier-link' } + 'data-type' => 'dossier-link', + required: champ.mandatory } .help-block %p.text-info{ style: show_text_summary ? nil : 'display: none;' } diff --git a/app/views/new_gestionnaire/dossiers/champs/_email.html.haml b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml index 727d092e4..6684b7865 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_email.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml @@ -4,4 +4,5 @@ name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, - value: champ.value } + value: champ.value, + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml index 5722da3bc..09600b354 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml @@ -3,6 +3,7 @@ %input{ type: 'checkbox', name: "champs['#{champ.id}']", id: "champs_#{champ.id}", - checked: ('checked' if champ.value == 'on') } + checked: ('checked' if champ.value == 'on'), + required: champ.mandatory } %br diff --git a/app/views/new_gestionnaire/dossiers/champs/_number.html.haml b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml index dd66c4e8f..5e2b61e8d 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_number.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml @@ -4,4 +4,5 @@ name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, - value: champ.value } + value: champ.value, + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml index fcc6e043e..c1bbfd1ce 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml @@ -4,4 +4,5 @@ name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, - value: champ.value } + value: champ.value, + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_text.html.haml b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml index 34f1ce5e9..e42aa8584 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_text.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml @@ -4,4 +4,5 @@ name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, - value: champ.value } + value: champ.value, + required: champ.mandatory } diff --git a/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml index 4f057c115..37c5e031d 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml @@ -3,5 +3,6 @@ %textarea{ name: "champs['#{champ.id}']", placeholder: champ.description, id: "champs_#{champ.id}", - row: '6' } + row: '6', + required: champ.mandatory } = sanitize(champ.value) From 1b427668366f19c63c8541ef4816c9b5fedee736 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 26 Jul 2017 12:09:21 +0200 Subject: [PATCH 7/8] Form: add address auto complete --- .../javascripts/new_design/application.js | 1 + .../javascripts/new_design/champs/address.js | 27 +++++++++++++++++++ app/assets/stylesheets/new_design/forms.scss | 17 +++++++++++- .../new_design/new_application.scss | 1 + .../dossiers/champs/_address.html.haml | 1 + 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/new_design/champs/address.js diff --git a/app/assets/javascripts/new_design/application.js b/app/assets/javascripts/new_design/application.js index c80a10aab..56b132233 100644 --- a/app/assets/javascripts/new_design/application.js +++ b/app/assets/javascripts/new_design/application.js @@ -18,4 +18,5 @@ //= require highcharts //= require chartkick //= require select2 +//= require typeahead.bundle //= require_tree . diff --git a/app/assets/javascripts/new_design/champs/address.js b/app/assets/javascripts/new_design/champs/address.js new file mode 100644 index 000000000..7b9339b9e --- /dev/null +++ b/app/assets/javascripts/new_design/champs/address.js @@ -0,0 +1,27 @@ +(function () { + var display = 'label'; + + var bloodhound = new Bloodhound({ + datumTokenizer: Bloodhound.tokenizers.obj.whitespace(display), + queryTokenizer: Bloodhound.tokenizers.whitespace, + + remote: { + url: '/ban/search?request=%QUERY', + wildcard: '%QUERY' + } + }); + + bloodhound.initialize(); + + var bindTypeahead = function() { + $("input[data-address='true']").typeahead({ + minLength: 1 + }, { + display: display, + source: bloodhound, + limit: 5 + }); + }; + + document.addEventListener('turbolinks:load', bindTypeahead); +})(); diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index cf3ace506..043585de6 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -12,7 +12,7 @@ display: inline-block; } - input[type=text], + input[type=text]:not([data-address='true']), input[type=email], input[type=password], input[type=date], @@ -116,6 +116,21 @@ // scss-lint:enable } + .twitter-typeahead { + margin-bottom: 2 * $default-padding; + } + + input.tt-input, + input.tt-hint { + border-radius: 4px; + border: solid 1px $border-grey; + padding: $default-padding; + } + + input.tt-hint { + color: $grey; + } + .datetime { input[type=date] { display: inline-block; diff --git a/app/assets/stylesheets/new_design/new_application.scss b/app/assets/stylesheets/new_design/new_application.scss index d1bcfc077..e575f56c5 100644 --- a/app/assets/stylesheets/new_design/new_application.scss +++ b/app/assets/stylesheets/new_design/new_application.scss @@ -5,4 +5,5 @@ // = require ./fonts // = require leaflet.1.1.0 // = require select2 +// = require typeahead // = require_tree . diff --git a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml index e42aa8584..af9fb84c2 100644 --- a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml +++ b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml @@ -1,6 +1,7 @@ = render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ } %input{ type: 'text', + 'data-address': 'true', name: "champs['#{champ.id}']", id: "champs_#{champ.id}", placeholder: champ.libelle, From 9f890d1ea7a329b2406d1d314b1f76d19f0a99cd Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Wed, 26 Jul 2017 12:58:00 +0200 Subject: [PATCH 8/8] Form: import dossier_link js in new design --- .../new_design/champs/dossier_link.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 app/assets/javascripts/new_design/champs/dossier_link.js diff --git a/app/assets/javascripts/new_design/champs/dossier_link.js b/app/assets/javascripts/new_design/champs/dossier_link.js new file mode 100644 index 000000000..3b32782c4 --- /dev/null +++ b/app/assets/javascripts/new_design/champs/dossier_link.js @@ -0,0 +1,36 @@ +(function() { + var showNotFound = function() { + $('.dossier-link .text-info').hide(); + $('.dossier-link .text-warning').show(); + }; + + var showData = function(data) { + $('.dossier-link .dossier-text-summary').text(data.textSummary); + $('.dossier-link .text-info').show(); + $('.dossier-link .text-warning').hide(); + }; + + var hideEverything = function() { + $('.dossier-link .text-info').hide(); + $('.dossier-link .text-warning').hide(); + }; + + var fetchProcedureLibelle = function(e) { + var dossierId = $(e.target).val(); + if(dossierId) { + $.get('/users/dossiers/' + dossierId + '/text_summary') + .done(showData) + .fail(showNotFound); + } else { + hideEverything(); + } + }; + + var timeOut = null; + var debounceFetchProcedureLibelle = function(e) { + if(timeOut){ clearTimeout(timeOut); } + timeOut = setTimeout(function() { fetchProcedureLibelle(e); }, 300); + }; + + $(document).on('input', '[data-type=dossier-link]', debounceFetchProcedureLibelle); +})();