début de style pour les formulaires des filtres

This commit is contained in:
Jérémy Lecour 2021-03-03 17:50:38 +01:00 committed by Jérémy Lecour
parent 540fb7bd0b
commit 3a53418039
3 changed files with 171 additions and 56 deletions

View file

@ -12,43 +12,94 @@
</div>
<% end %>
<div class="field">
<%= form.label :enabled %>
<%= form.radio_button :enabled, true %>
<%= form.label :enabled_true, "Yes" %>
<%= form.radio_button :enabled, false %>
<%= form.label :enabled_false, "No" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_true, "Yes", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, false, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_false, "No", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Property type</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :property_type, "header", class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :property_type_header, "Header", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :property_type, "body", class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :property_type_body, "Body", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="field">
<%= form.label :property_type %>
<%= form.text_field :property_type %>
<%= form.label :property_value, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :property_value, class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
</div>
<div class="field">
<%= form.label :property_value %>
<%= form.text_field :property_value %>
<%= form.label :test_method, class: "block text-sm font-medium text-gray-700" %>
<%= form.select :test_method, I18n.t("condition.test_methods").map { |key, value| [value, key] }, {}, class: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
</div>
<div class="field">
<%= form.label :test_method %>
<%= form.select :test_method, I18n.t("condition.test_methods").map { |key, value| [value, key] } %>
<%= form.label :test_value, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :test_value, class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
</div>
<div class="field">
<%= form.label :test_value %>
<%= form.text_field :test_value %>
</div>
<div class="field">
<%= form.label :inverted %>
<%= form.radio_button :inverted, true %>
<%= form.label :inverted_true, "Yes" %>
<%= form.radio_button :inverted, false %>
<%= form.label :inverted_false, "No" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Inverted?</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :inverted, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :inverted_true, "Yes", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :inverted, false, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :inverted_false, "No", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="actions">
<%= form.submit %>
<%= form.submit class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div>
<% end %>

View file

@ -13,36 +13,84 @@
<% end %>
<div class="field">
<%= form.label :description %>
<%= form.text_field :description %>
<%= form.label :description, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :description, class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
</div>
<div class="field">
<%= form.label :enabled %>
<%= form.radio_button :enabled, true %>
<%= form.label :enabled_true, "Yes" %>
<%= form.radio_button :enabled, false %>
<%= form.label :enabled_false, "No" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_true, "Yes", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, false, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_false, "No", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="field">
<%= form.label :operator %>
<%= form.radio_button :operator, "AND" %>
<%= form.label :operator_and, "AND" %>
<%= form.radio_button :operator, "OR" %>
<%= form.label :operator_or, "OR" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Operator</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :operator, "AND", class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :operator_true, "AND", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :operator, "OR", class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :operator_false, "OR", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="field">
<%= form.label :inverted %>
<%= form.radio_button :inverted, true %>
<%= form.label :inverted_true, "Yes" %>
<%= form.radio_button :inverted, false %>
<%= form.label :inverted_false, "No" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Inverted?</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :inverted, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :inverted_true, "Yes", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :inverted, false, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :inverted_false, "No", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="actions">
<%= form.submit %>
<%= form.submit class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div>
<% end %>
<% end %>

View file

@ -12,25 +12,41 @@
</div>
<% end %>
<div class="field">
<%= form.label :enabled %>
<%= form.radio_button :enabled, true %>
<%= form.label :enabled_true, "Yes" %>
<%= form.radio_button :enabled, false %>
<%= form.label :enabled_false, "No" %>
<div class="field flex items-center">
<fieldset>
<legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_true, "Yes", class: "font-medium text-gray-700" %>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<%= form.radio_button :enabled, false, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
</div>
<div class="ml-3 text-sm">
<%= form.label :enabled_false, "No", class: "font-medium text-gray-700" %>
</div>
</div>
</div>
</fieldset>
</div>
<div class="field">
<%= form.label :class_name %>
<%= form.text_field :class_name %>
<%= form.label :class_name, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :class_name, class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
</div>
<div class="field">
<%= form.label :argument %>
<%= form.text_field :argument %>
<%= form.label :argument, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :argument, class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
</div>
<div class="operations">
<%= form.submit %>
<%= form.submit class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div>
<% end %>