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> </div>
<% end %> <% end %>
<div class="field"> <div class="field flex items-center">
<%= form.label :enabled %> <fieldset>
<%= form.radio_button :enabled, true %> <legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<%= form.label :enabled_true, "Yes" %> <div class="mt-4 space-y-4">
<%= form.radio_button :enabled, false %> <div class="flex items-start">
<%= form.label :enabled_false, "No" %> <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>
<div class="field"> <div class="field">
<%= form.label :property_type %> <%= form.label :property_value, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :property_type %> <%= 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>
<div class="field"> <div class="field">
<%= form.label :property_value %> <%= form.label :test_method, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :property_value %> <%= 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>
<div class="field"> <div class="field">
<%= form.label :test_method %> <%= form.label :test_value, class: "block text-sm font-medium text-gray-700" %>
<%= form.select :test_method, I18n.t("condition.test_methods").map { |key, value| [value, key] } %> <%= 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>
<div class="field"> <div class="field flex items-center">
<%= form.label :test_value %> <fieldset>
<%= form.text_field :test_value %> <legend class="block text-sm font-medium text-gray-700">Inverted?</legend>
</div> <div class="mt-4 space-y-4">
<div class="flex items-start">
<div class="field"> <div class="flex items-center h-5">
<%= form.label :inverted %> <%= form.radio_button :inverted, true, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" %>
<%= form.radio_button :inverted, true %> </div>
<%= form.label :inverted_true, "Yes" %> <div class="ml-3 text-sm">
<%= form.radio_button :inverted, false %> <%= form.label :inverted_true, "Yes", class: "font-medium text-gray-700" %>
<%= form.label :inverted_false, "No" %> </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>
<div class="actions"> <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> </div>
<% end %> <% end %>

View file

@ -13,36 +13,84 @@
<% end %> <% end %>
<div class="field"> <div class="field">
<%= form.label :description %> <%= form.label :description, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :description %> <%= 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>
<div class="field"> <div class="field flex items-center">
<%= form.label :enabled %> <fieldset>
<%= form.radio_button :enabled, true %> <legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<%= form.label :enabled_true, "Yes" %> <div class="mt-4 space-y-4">
<%= form.radio_button :enabled, false %> <div class="flex items-start">
<%= form.label :enabled_false, "No" %> <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>
<div class="field"> <div class="field flex items-center">
<%= form.label :operator %> <fieldset>
<%= form.radio_button :operator, "AND" %> <legend class="block text-sm font-medium text-gray-700">Operator</legend>
<%= form.label :operator_and, "AND" %> <div class="mt-4 space-y-4">
<%= form.radio_button :operator, "OR" %> <div class="flex items-start">
<%= form.label :operator_or, "OR" %> <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>
<div class="field"> <div class="field flex items-center">
<%= form.label :inverted %> <fieldset>
<%= form.radio_button :inverted, true %> <legend class="block text-sm font-medium text-gray-700">Inverted?</legend>
<%= form.label :inverted_true, "Yes" %> <div class="mt-4 space-y-4">
<%= form.radio_button :inverted, false %> <div class="flex items-start">
<%= form.label :inverted_false, "No" %> <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>
<div class="actions"> <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> </div>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -12,25 +12,41 @@
</div> </div>
<% end %> <% end %>
<div class="field"> <div class="field flex items-center">
<%= form.label :enabled %> <fieldset>
<%= form.radio_button :enabled, true %> <legend class="block text-sm font-medium text-gray-700">Enabled?</legend>
<%= form.label :enabled_true, "Yes" %> <div class="mt-4 space-y-4">
<%= form.radio_button :enabled, false %> <div class="flex items-start">
<%= form.label :enabled_false, "No" %> <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>
<div class="field"> <div class="field">
<%= form.label :class_name %> <%= form.label :class_name, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :class_name %> <%= 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>
<div class="field"> <div class="field">
<%= form.label :argument %> <%= form.label :argument, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :argument %> <%= 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>
<div class="operations"> <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> </div>
<% end %> <% end %>