refine-rails 2.11.0 → 2.11.2

data/app/assets/stylesheets/index.css

@@ -1203,20 +1203,23 @@
 .refine--filter-wrapper {
   font-size: 14px;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   gap: 12px;
   margin-top: 12px;
 }
 
 .refine--filter-row {
   display: flex;
+  width: 100%;
   gap: 10px;
   row-gap: 15px;
   align-items: center;
-  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
 }
 
 .refine--groups-wrapper {
+  flex-grow: 1;
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -1224,6 +1227,13 @@
   flex-wrap: wrap;
 }
 
+.refine--filter-control-group {
+  text-wrap: nowrap;
+  flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+}
+
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -1250,6 +1260,7 @@
   position: relative;
   padding: 0 10px;
   align-items: center;
+  flex-wrap: wrap;
   &:before , &:after {
     content: "";
     position: absolute;
@@ -1304,7 +1315,7 @@
   text-decoration: none;
 }
 
-.refine--condition-pill-wrapper-wrapper {
+.refine--condition-pill-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
@@ -1312,21 +1323,26 @@
 }
 
 .refine--condition-pill {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  border-bottom-color: #999;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
+  padding: 4px 8px;
   &:hover {
-    border-color: #999;
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
     .refine--remove-condition {
       display: block;
     }
   }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:not(:hover){
     .refine--condition-value-wrapper {
       display: none;
@@ -1334,6 +1350,10 @@
   }
 }
 
+.refine--condition-pill-button {
+  display: flex;
+}
+
 .refine--filter-condition {
   display: flex;
   align-items: center;
@@ -1344,30 +1364,22 @@
   padding: 4px;
 }
 
-.refine--condition-pill-name {
-  padding: 4px 8px;
-  display: block;
-}
-
 .refine--remove-condition {
   display: none;
-  border: 2px solid #fff;
-  padding: 6px 4px;
+  color: #fff;
+  padding: 0px 2px 0px 2px;
   border-radius: 50%;
   position: absolute;
   top: -8px;
   right:-8px;
-  background-color: #aaa;
+  background-color: #ee3f3f;
   z-index: 999;
-  &:hover {
-    background-color: #ee3f3f;
-  }
-  &:before {
-    display: block;
-    content: "";
-    width: 6px;
-    height: 2px;
-    background-color: #fff;
+  line-height: 1;
+  border: 1.5px solid #fff;
+  .material-icons-outlined.refine--icon-sm,
+  .material-icons.refine--icon-sm,
+  .icon.refine--icon-sm {
+    padding: 2px 0 ;
   }
 }
 
@@ -1398,8 +1410,18 @@
           animation-fill-mode: both;
 }
 
-.refine--condition-value-clause {
-  color: rgba(255,255,255,0.7);
+.refine--condition-value-clause, .refine--condition-value-self  {
+  padding-left: 4px;
+}
+
+.refine--condition-pill-name, .refine--condition-value-self  {
+  font-weight: 600;
+}
+
+.refine--condition-value-self {
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 /* Form widgets */
@@ -1634,10 +1656,6 @@ input.refine--text-condition-input:focus {
   text-decoration: none;
 }
 
-.refine--save-filter-link-label {
-  border-bottom: 1px dotted #111;
-}
-
 /*
   *********************************************
   Inline Final Styles
@@ -1649,36 +1667,36 @@ input.refine--text-condition-input:focus {
   color: #767676;
 }
 
-.refine--add-condition-button.refine--add-first-condition-button,
-.refine--add-condition-group-button.refine--add-first-condition-button {
-  border: 1px dotted #aaa;
-  padding-right: 8px;
-  line-height: 16px;
-  &:hover {
-    background-color: #fff;
-    border-style: solid;
-    color: #111;
-  }
-}
-
 .refine--add-condition-button, .refine--add-group-button {
   display: flex;
   gap: 5px;
   color: #767676;
   font-size: 14px;
   border-radius: 6px;
-  padding: 5px;
   align-items: center;
-  background-color: #fff;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-weight: 600;
+  &:hover {
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
+  }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:disabled {
-    color: #111;
-    background-color: #f8f8f8;
+    opacity: 0.5;
     cursor: not-allowed;
   }
-  &:not([disabled]):hover {
-    color: #111;
-    background-color: #f8f8f8;
-  }
+}
+
+.refine--add-group-wrapper {
+  padding-left: 10px;
+  border-left: 1px solid #E5E7EB;
 }
 
 .refine--has-many-groups .refine--add-button-label {
@@ -1791,16 +1809,22 @@ button.refine--apply-button {
   }
 }
 
-.refine--save-filter-link {
+.refine--save-filter-link, .refine--clear-filter-link {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 3px 0 3px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
 }
 
+.refine--save-filter-link-label, .refine--clear-filter-link-label {
+  &:hover {
+    border-bottom: 1px dotted #111;
+  }
+}
+
 .refine--save-filter-input-wrapper {
   display: flex;
   gap: 5px;
@@ -1836,6 +1860,10 @@ input.refine--save-filter-input {
   z-index: 9999;
 }
 
+.refine--save-filter-form {
+  margin-left: 8px;
+}
+
 .refine--hotkey {
   border-radius: 4px;
   background-color: rgba(255,255,255,.3);
@@ -1855,6 +1883,7 @@ input.refine--save-filter-input {
 .material-icons.refine--icon-sm,
 .icon.refine--icon-sm {
   font-size: 14px;
+  padding: 3px 0;
 }
 
 .refine--search-box {

data/app/assets/stylesheets/index.tailwind.css

@@ -382,20 +382,23 @@
 .refine--filter-wrapper {
   font-size: 14px;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   gap: 12px;
   margin-top: 12px;
 }
 
 .refine--filter-row {
   display: flex;
+  width: 100%;
   gap: 10px;
   row-gap: 15px;
   align-items: center;
-  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
 }
 
 .refine--groups-wrapper {
+  flex-grow: 1;
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -403,6 +406,13 @@
   flex-wrap: wrap;
 }
 
+.refine--filter-control-group {
+  text-wrap: nowrap;
+  flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+}
+
 .refine--group-join, .refine--condition-join {
   position: relative;
   padding: 5px 0;
@@ -429,6 +439,7 @@
   position: relative;
   padding: 0 10px;
   align-items: center;
+  flex-wrap: wrap;
 
   &:before , &:after {
     content: "";
@@ -484,7 +495,7 @@
   text-decoration: none;
 }
 
-.refine--condition-pill-wrapper-wrapper {
+.refine--condition-pill-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
@@ -492,21 +503,26 @@
 }
 
 .refine--condition-pill {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  border-bottom-color: #999;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
+  padding: 4px 8px;
   &:hover {
-    border-color: #999;
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
     .refine--remove-condition {
       display: block;
     }
   }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:not(:hover){
     .refine--condition-value-wrapper {
       display: none;
@@ -514,6 +530,10 @@
   }
 }
 
+.refine--condition-pill-button {
+  display: flex;
+}
+
 .refine--filter-condition {
   display: flex;
   align-items: center;
@@ -524,31 +544,24 @@
   padding: 4px;
 }
 
-.refine--condition-pill-name {
-  padding: 4px 8px;
-  display: block;
-}
-
 .refine--remove-condition {
   display: none;
-  border: 2px solid #fff;
-  padding: 6px 4px;
+  color: #fff;
+  padding: 0px 2px 0px 2px;
   border-radius: 50%;
   position: absolute;
   top: -8px;
   right:-8px;
-  background-color: #aaa;
+  background-color: #ee3f3f;
   z-index: 999;
-  &:hover {
-    background-color: #ee3f3f;
-  }
-  &:before {
-    display: block;
-    content: "";
-    width: 6px;
-    height: 2px;
-    background-color: #fff;
+  line-height: 1;
+  border: 1.5px solid #fff;
+  .material-icons-outlined.refine--icon-sm,
+  .material-icons.refine--icon-sm,
+  .icon.refine--icon-sm {
+    padding: 2px 0 ;
   }
+
 }
 &:hover {
   border-color: #999;
@@ -575,8 +588,18 @@
   animation-fill-mode: both;
 }
 
-.refine--condition-value-clause {
-  color: rgba(255,255,255,0.7);
+.refine--condition-value-clause, .refine--condition-value-self  {
+  padding-left: 4px;
+}
+
+.refine--condition-pill-name, .refine--condition-value-self  {
+  font-weight: 600;
+}
+
+.refine--condition-value-self {
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 /* Form widgets */
@@ -805,9 +828,6 @@ input.refine--text-condition-input:focus {
   text-decoration: none;
 }
 
-.refine--save-filter-link-label {
-  border-bottom: 1px dotted #111;
-}
 /*
   *********************************************
   Inline Final Styles
@@ -818,37 +838,36 @@ input.refine--text-condition-input:focus {
   color: #767676;
 }
 
-
-.refine--add-condition-button.refine--add-first-condition-button,
-.refine--add-condition-group-button.refine--add-first-condition-button {
-    border: 1px dotted #aaa;
-    padding-right: 8px;
-    line-height: 16px;
-    &:hover {
-      background-color: #fff;
-      border-style: solid;
-      color: #111;
-    }
-}
-
 .refine--add-condition-button, .refine--add-group-button {
   display: flex;
   gap: 5px;
   color: #767676;
   font-size: 14px;
   border-radius: 6px;
-  padding: 5px;
   align-items: center;
-  background-color: #fff;
+  background-color: #F2F4F7;
+  border: 1px solid #EBEBEB;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-weight: 600;
+  &:hover {
+    border-color: #D1D5DB;
+    background-color: #E5E7EB;
+  }
+  &:active {
+    border-color: #E5E7EB;
+  }
   &:disabled {
-    color: #111;
-    background-color: #f8f8f8;
+    opacity: 0.5;
     cursor: not-allowed;
   }
-  &:not([disabled]):hover {
-    color: #111;
-    background-color: #f8f8f8;
-  }
+}
+
+.refine--add-group-wrapper {
+  padding-left: 10px;
+  border-left: 1px solid #E5E7EB;
 }
 
 .refine--has-many-groups .refine--add-button-label {
@@ -955,16 +974,21 @@ button.refine--apply-button {
   }
 }
 
-.refine--save-filter-link {
+.refine--save-filter-link, .refine--clear-filter-link {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 3px 0 3px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
 }
 
+.refine--save-filter-link-label, .refine--clear-filter-link-label {
+  &:hover {
+    border-bottom: 1px dotted #111;
+  }
+}
 .refine--save-filter-input-wrapper {
   display: flex;
   gap: 5px;
@@ -1000,6 +1024,10 @@ input.refine--save-filter-input {
   z-index: 9999;
 }
 
+.refine--save-filter-form {
+  margin-left: 8px;
+}
+
 .refine--hotkey {
   border-radius: 4px;
   background-color: rgba(255,255,255,.3);
@@ -1019,6 +1047,7 @@ input.refine--save-filter-input {
 .material-icons.refine--icon-sm,
 .icon.refine--icon-sm {
   font-size: 14px;
+  padding: 3px 0;
 }
 
 .refine--search-box {

data/app/controllers/refine/inline/criteria_controller.rb

@@ -1,7 +1,6 @@
 class Refine::Inline::CriteriaController < ApplicationController
   layout false
   before_action :set_refine_filter
-
   # List available conditions for new criteria
   # Carries position and index forward
   def index
@@ -88,8 +87,18 @@ class Refine::Inline::CriteriaController < ApplicationController
     handle_filter_update(@refine_filter.to_stable_id)
   end
 
+  def clear
+    @refine_filter.clear_blueprint!
+    @criterion = Refine::Inline::Criterion.new(criterion_params.merge(refine_filter: @refine_filter))
+    handle_filter_update()
+  end
+
   private
 
+  def set_blank_filter
+    @refine_filter = Refine::Rails.configuration.stabilizer_classes[:url].new
+  end
+
   def set_refine_filter
     @refine_filter ||= Refine::Rails.configuration.stabilizer_classes[:url]
       .new
@@ -131,12 +140,14 @@ class Refine::Inline::CriteriaController < ApplicationController
   end
 
   # either directly redirect or emit a `filter-submit-success` event
-  def handle_filter_update(stable_id)
+  def handle_filter_update(stable_id=nil)
     # update_stable_id in url
     uri = URI(request.referrer)
     new_query_ar = URI.decode_www_form(String(uri.query))
     new_query_ar.reject! { |(k, _v)| k == "stable_id" }
-    new_query_ar << ["stable_id", stable_id]
+    if stable_id
+      new_query_ar << ["stable_id", stable_id]
+    end
     uri.query = URI.encode_www_form(new_query_ar)
 
     respond_to do |format|
@@ -146,7 +157,9 @@ class Refine::Inline::CriteriaController < ApplicationController
         @refine_client_id = @criterion.client_id
         render :create
       end
-      format.html {redirect_to uri.to_s }
+      format.html do 
+        redirect_to uri.to_s 
+      end
     end
   end
 

data/app/models/refine/filter.rb

@@ -316,5 +316,9 @@ module Refine
     def has_category_ordering?
       respond_to?(:category_order) && category_order.is_a?(Array) && category_order.any?
     end
+
+    def clear_blueprint!
+      @blueprint = []
+    end
   end
 end

data/app/views/refine/inline/filters/_add_first_condition_button.html.erb

@@ -13,7 +13,7 @@
   src: refine_inline_criteria_path(criterion.to_params) do
 %>
   <button class="refine--add-condition-button refine--add-first-condition-button" href="#" data-action="click->refine--popup#show" type="button">
-    <span class="icon material-icons-outlined refine--icon-sm">add</span>
     <span><%= t(".filter") %></span>
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
   </button>
 <% end %>

data/app/views/refine/inline/filters/_and_button.html.erb

@@ -9,18 +9,22 @@
 %>
 
 <% if @refine_filter.criteria_limit_reached? %>
-  <button disabled class="refine--add-condition-button" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+  <button disabled class="refine--add-condition-button refine--group-last-item refine--condition-pill-end" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+    <% if show_label %>
+      <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+    <% end %>
     <span class="icon material-icons-outlined refine--icon-sm">add</span>
-    <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
   </button>
 <% else %>
   <%= render "refine/inline/filters/popup",
     frame_id: dom_id(criterion),
     src: refine_inline_criteria_path(criterion.to_params) do
   %>
-    <button class="refine--add-condition-button" type="button" data-action="click->refine--popup#show">
+    <button class="refine--add-condition-button refine--group-last-item refine--condition-pill-end" type="button" data-action="click->refine--popup#show">
+      <% if show_label %>
+        <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+      <% end %>
       <span class="icon material-icons-outlined refine--icon-sm">add</span>
-      <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
     </button>
   <% end %>
 <% end %>

data/app/views/refine/inline/filters/_clear_button.html.erb

@@ -0,0 +1,13 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    client_id: @refine_client_id,
+  )
+%>
+
+<%= link_to clear_refine_inline_criteria_path(criterion.to_params), method: :post,
+  class: "refine--clear-filter-link", data: {turbo_stream: true, turbo_method: :post} do %>
+    <span class="material-icons-outlined refine--icon-sm">clear</span>
+    <span class="refine--clear-filter-link-label"><%= t('refine.inline.filters.clear_filter') %></span>
+<% end %>
+

data/app/views/refine/inline/filters/_criterion.html.erb

@@ -6,16 +6,16 @@
 
   <div class="refine--condition-pill-wrapper">
     <div class="refine--condition-pill">
-      <%= link_to criterion.condition_display, edit_refine_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--condition-pill-name", data: {controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} %>
-      <div class="refine--remove-condition"></div>
       <%= link_to refine_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--remove-condition", data: {turbo_method: :delete, controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} do %>
+        <span class="material-icons-outlined refine--icon-sm">clear</span>
+      <% end %>
+      <%= link_to edit_refine_inline_criterion_path(criterion.position, criterion.to_params), class:"refine--condition-pill-button", data: {controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} do %>
+        <div class="refine--condition-pill-name"><%= criterion.condition_display %></div>
+        <div class="refine--condition-value-clause"><%= criterion.clause_display %></div>
+        <div class="refine--condition-value-self" title="<%= criterion.human_readable_value %>">
+          <%= criterion.human_readable_value %>
+        </div>
       <% end %>
-      <div class="refine--condition-value-wrapper">
-         <div class="refine--condition-value-clause"><%= criterion.clause_display %></div>
-         <div class="refine--condition-value-self">
-            <div><%= criterion.human_readable_value.truncate(64) %></div>
-         </div>
-      </div>
     </div>
   </div>
 

data/app/views/refine/inline/filters/_group.html.erb

@@ -1,13 +1,4 @@
-<div class="refine--group">
-  <div class="refine--group-conditions-wrapper">
-    <div class="refine--group-conditions">
-      <% group.each.with_index do |criterion, i| %>
-        <% unless i == 0 %>
-          <div class="refine--condition-join"><%= t(".and") %></div>
-        <% end %>
-        <%= render "refine/inline/filters/criterion", criterion: criterion %>
-      <% end %>
-    </div>
-    <%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
-  </div>
-</div>
+<% group.each.with_index do |criterion, i| %>
+  <%= render "refine/inline/filters/criterion", criterion: criterion, placement: i, size: group.length %>
+<% end %>
+<%= render "refine/inline/filters/and_button", position: group.last.position + 1, show_label: (group_count < 2 && condition_count < 2) %>