From a43b047207479c0f3a0687df48b421d2de4138ef Mon Sep 17 00:00:00 2001
From: Jeremy Lecour <jlecour@evolix.fr>
Date: Sun, 14 Mar 2021 09:11:19 +0100
Subject: [PATCH] arrangement visuel des filtres

---
 app/views/filters/_filter.html.erb | 23 --------------
 app/views/filters/show.html.erb    | 51 +++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/app/views/filters/_filter.html.erb b/app/views/filters/_filter.html.erb
index 8e37ac1..67670c7 100644
--- a/app/views/filters/_filter.html.erb
+++ b/app/views/filters/_filter.html.erb
@@ -1,22 +1,5 @@
 <div id="<%= dom_id filter %>" class="<%= filter.enabled? ? 'filter--enabled' : 'filter--disabled' %> flex space-x-2">
 
-  <div class="flex-auto">
-    <% if filter.enabled? %>
-      <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
-      <%= link_to disable_filter_path(filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "bg-green-400 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500", "aria-pressed":"false" do %>
-        <span class="sr-only">Disable</span>
-        <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
-        <span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
-      <% end %>
-    <% else %>
-      <%= link_to enable_filter_path(filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500", "aria-pressed":"false" do %>
-        <span class="sr-only">Enable</span>
-        <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
-        <span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
-      <% end %>
-    <% end %>
-  </div>
-
   <div class="flex-auto">
     <strong class="pr-1">Description:</strong>
     <%= filter.description || "<i>No description</i>".html_safe %>
@@ -31,10 +14,4 @@
     <strong class="pr-1">Inverted:</strong>
     <%= filter.inverted? ? 'Yes' : 'No' %>
   </div>
-
-  <div class="flex-none text-center">
-    <div class="">
-      <%= link_to 'Edit', edit_filter_path(@filter) %>
-    </div>
-  </div>
 </div>
diff --git a/app/views/filters/show.html.erb b/app/views/filters/show.html.erb
index 42bdd88..1f2f02b 100644
--- a/app/views/filters/show.html.erb
+++ b/app/views/filters/show.html.erb
@@ -2,16 +2,40 @@
   <h1 class="truncate">Filter #<%= @filter.id %>: <%= @filter.description %></h1>
 <% end %>
 
-<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
+<div class="grid grid-cols-3 gap-6">
 
-<%= turbo_frame_tag "filter" do %>
-  <%= render @filter %>
-<% end %>
+<div class="shadow rounded-lg bg-white">
+  <h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Filter</h2>
+  <div class="px-4 py-3">
+    <%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
-<div id="conditions">
-  <h2 class="text-xl py-1 font-semibold">Conditions</h2>
-  <div class="ml-6">
+    <%= turbo_frame_tag "filter" do %>
+      <%= render @filter %>
+    <% end %>
+
+    <div class="my-4 flex items-center">
+      <div class="flex-1 flex justify-end space-x-4">
+        <%= link_to 'Edit', edit_filter_path(@filter), class: "rounded-md relative inline-flex items-center px-4 py-2 border border-gray-100 bg-white text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
+
+        <% if @filter.enabled? %>
+          <%= link_to "Disable", disable_filter_path(@filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-yellow-200 text-sm font-medium text-yellow-700 hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" %>
+        <% else %>
+          <%= link_to "Enable", enable_filter_path(@filter), data: { method: :patch, confirm: 'Are you sure you want to disable this filter?' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-green-50 text-sm font-medium text-green-700 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" %>
+        <% end %>
+
+        <%= link_to 'Delete', @filter, method: :delete, data: { confirm: 'Are you sure you want to delete this filter? There is no undo!' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-white text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+
+<div class="shadow rounded-lg bg-white">
+  <h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Conditions</h2>
+  <div class="px-4 py-3">
     <%= render(@filter.conditions) || "<i class='italic'>No conditions yet</i>".html_safe %>
+
     <%= turbo_frame_tag "new_condition" do %>
       <div>
         <%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
@@ -20,9 +44,9 @@
   </div>
 </div>
 
-<div id="operations">
-  <h2 class="text-xl py-1 font-semibold">Operations</h2>
-  <div class="ml-6">
+<div class="shadow rounded-lg bg-white">
+  <h2 class="text-xl py-2 font-medium text-center bg-gray-50 border-b border-gray-300 rounded-t-lg">Operations</h2>
+  <div class="px-4 py-3 bg-white">
     <%= render(@filter.operations) || "<i class='italic'>No operations yet</i>".html_safe %>
     <%= turbo_frame_tag "new_operation" do %>
       <div>
@@ -32,9 +56,6 @@
   </div>
 </div>
 
-<div class="my-4 flex items-center">
-  <div class="flex-1 flex justify-between">
-    <%= link_to '← Back to filters list', filters_path, class: "rounded-md relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:text-blue-700" %>
-    <%= link_to 'Delete this filter', @filter, method: :delete, data: { confirm: 'Are you sure you want to delete this filter? There is no undo!' }, class: "rounded-md relative inline-flex items-center px-4 py-2 border border-transparent bg-white text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
-  </div>
+
+
 </div>
\ No newline at end of file