refine-rails 2.11.1 → 2.11.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 067afd99260828f8192b8ce127189aa5c0cab8514529f4ccab9215317ad059fc
-  data.tar.gz: c147b239f2a4d0842dfc2d2dfd5a401373cbcf79e2612466d97110013084ea6c
+  metadata.gz: da49445eb684d8187ebe0ba05aa919d6293ec55e63e7df2dad3e58051712e901
+  data.tar.gz: d732551892233793e9cf3fbba13143b59698fb27a4029c8635a9202e2ca9b5b2
 SHA512:
-  metadata.gz: c06cf0c4e004a1155377ce81786d404b764ada2bd1b9cac9d080f9575cb0c6e874b9fbcd58a7a220f3f8d2eadbfe9311a412d8d52a50bb148a45065824aa2417
-  data.tar.gz: 4296eb537929877a63fd60e7cb4907db7b5ad62a842ee3e186bb6a04708d84172c828e902bb7738de177e2fe0d4fbc6247650b7b17d11988334bf0f83ca03c57
+  metadata.gz: b46d8c7809b3c0fa10a1122b2ff16b81e4fdbf36100a426a822c928eccb3d30d6c75b7a073abee80c46a9345b960cf04936cb59d0e77e4373df4484371a17fd4
+  data.tar.gz: cb90e961a890efaa351999f60279380ebc51f7bd7e28bd9856f19856b074c0c8b7a39a06e405f70be95525426af76adb6f0f98d57332b5c72469b65160e9e8b9

data/app/assets/stylesheets/index.css

@@ -1219,7 +1219,14 @@
 }
 
 .refine--groups-wrapper {
-  flex-grow: 1;
+  display: flex;
+  gap: 10px;
+  row-gap: 15px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.refine--or-group {
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -1229,7 +1236,16 @@
 
 .refine--filter-control-group {
   text-wrap: nowrap;
+  flex-wrap: wrap;
   display: flex;
+  align-items: center;
+}
+
+@media (max-width: 960px) {
+  .refine--filter-control-group {
+    justify-content: end;
+    width: 25%;
+  }
 }
 
 .refine--group-join, .refine--condition-join {
@@ -1244,6 +1260,11 @@
   }
 }
 
+.refine--group-join-stack {
+  width: 100%;
+  text-align: left;
+}
+
 .refine--group {
   display: flex;
   gap: 10px;
@@ -1320,67 +1341,27 @@
   position: relative;
 }
 
-.refine--condition-pill-start {
-  padding: 0 0 0 10px;
-  &:before {
-    content: "";
-    position: absolute;
-    left: -10px;
-    top: -2px;
-    bottom: -2px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:before{
-      border-color: #aaa;
-    }
-  }
-  &:before {
-    border-radius: 6px 0 0 6px;
-    left: 0;
-    border-right: none;
-  }
-}
-
-.refine--condition-pill-end {
-  padding: 0 10px 0 0;
-  &:after {
-    content: "";
-    position: absolute;
-    right: -10px;
-    top: -6px;
-    bottom: -6px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:after {
-      border-color: #aaa;
-    }
-  }
-  &:after {
-    border-radius: 0 6px 6px 0;
-    border-left: none;
-  }
-}
-
 .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;
@@ -1388,6 +1369,10 @@
   }
 }
 
+.refine--condition-pill-button {
+  display: flex;
+}
+
 .refine--filter-condition {
   display: flex;
   align-items: center;
@@ -1398,30 +1383,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 ;
   }
 }
 
@@ -1452,8 +1429,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 */
@@ -1699,41 +1686,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-button {
-  margin-left: 10px;
+.refine--add-group-wrapper {
+  padding-left: 10px;
+  border-left: 1px solid #E5E7EB;
 }
 
 .refine--has-many-groups .refine--add-button-label {
@@ -1857,7 +1839,9 @@ button.refine--apply-button {
 }
 
 .refine--save-filter-link-label, .refine--clear-filter-link-label {
-  border-bottom: 1px dotted #111;
+  &:hover {
+    border-bottom: 1px dotted #111;
+  }
 }
 
 .refine--save-filter-input-wrapper {
@@ -1895,6 +1879,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);
@@ -1914,6 +1902,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

@@ -398,7 +398,14 @@
 }
 
 .refine--groups-wrapper {
-  flex-grow: 1;
+  display: flex;
+  gap: 10px;
+  row-gap: 15px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.refine--or-group {
   display: flex;
   gap: 10px;
   row-gap: 15px;
@@ -408,7 +415,16 @@
 
 .refine--filter-control-group {
   text-wrap: nowrap;
+  flex-wrap: wrap;
   display: flex;
+  align-items: center;
+}
+
+@media (max-width: 960px) {
+  .refine--filter-control-group {
+    justify-content: end;
+    width: 25%; 
+  }
 }
 
 .refine--group-join, .refine--condition-join {
@@ -423,6 +439,11 @@
   }
 }
 
+.refine--group-join-stack {
+  width: 100%;
+  text-align: left;
+}
+
 .refine--group {
   display: flex;
   gap: 10px;
@@ -500,68 +521,27 @@
   position: relative;
 }
 
-.refine--condition-pill-start {
-  padding: 0 0 0 10px;
-  &:before {
-    content: "";
-    position: absolute;
-    left: -10px;
-    top: -2px;
-    bottom: -2px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:before{
-      border-color: #aaa;
-    }
-  }
-  &:before {
-    border-radius: 6px 0 0 6px;
-    left: 0;
-    border-right: none;
-  }
-  
-}
-
-.refine--condition-pill-end {
-  padding: 0 10px 0 0;
-  &:after {
-    content: "";
-    position: absolute;
-    right: -10px;
-    top: -6px;
-    bottom: -6px;
-    border: 2px solid #eee;
-    width: 3px;
-  }
-  &:hover {
-    &:after {
-      border-color: #aaa;
-    }
-  }
-  &:after {
-    border-radius: 0 6px 6px 0;
-    border-left: none;
-  }
-}
-
 .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;
@@ -569,6 +549,10 @@
   }
 }
 
+.refine--condition-pill-button {
+  display: flex;
+}
+
 .refine--filter-condition {
   display: flex;
   align-items: center;
@@ -579,31 +563,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;
@@ -630,8 +607,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 */
@@ -870,42 +857,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-button {
-  margin-left: 10px;
+.refine--add-group-wrapper {
+  padding-left: 10px;
+  border-left: 1px solid #E5E7EB;
 }
 
 .refine--has-many-groups .refine--add-button-label {
@@ -1023,7 +1004,9 @@ button.refine--apply-button {
 }
 
 .refine--save-filter-link-label, .refine--clear-filter-link-label {
-  border-bottom: 1px dotted #111;
+  &:hover {
+    border-bottom: 1px dotted #111;
+  }
 }
 .refine--save-filter-input-wrapper {
   display: flex;
@@ -1060,6 +1043,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);
@@ -1079,6 +1066,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/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

@@ -10,8 +10,10 @@
 
 <% if @refine_filter.criteria_limit_reached? %>
   <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",
@@ -19,8 +21,10 @@
     src: refine_inline_criteria_path(criterion.to_params) do
   %>
     <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/_criterion.html.erb

@@ -1,26 +1,21 @@
 <%# Filter Pill partial %>
-<% 
-  pill_class = if placement == 0
-    "refine--condition-pill-start"
-  end
-%>
 
 <%= render "refine/inline/filters/popup",
   frame_id: dom_id(criterion) do
 %>
 
-  <div class="refine--condition-pill-wrapper <%= pill_class %>">
+  <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,7 +1,12 @@
+<% render_stack ||= false %>
+
+<% if render_stack %>
+  <div class="refine--or-group">
+<% end %>
 <% 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, placement: i, size: group.length %>
 <% end %>
-<%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
+<%= render "refine/inline/filters/and_button", position: group.last.position + 1, show_label: (group_count < 2 && condition_count < 2) %>
+<% if render_stack %>
+  </div> 
+<% end %>

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

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

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

@@ -3,6 +3,7 @@
 
   root_data = (defined?(data) && data) || {}
 
+  render_stack = defined?(render_stack) ? render_stack : false
   main_row_class = class_names "refine--filter-row" => true,
     "refine--has-many-groups" => groups.many?
 %>
@@ -15,12 +16,18 @@
       <div class="refine--groups-wrapper">
         <% groups.each.with_index do |group, i| %>
           <% unless i == 0 %>
-              <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
+            <% if render_stack %>
+              <div class="refine--group-join-stack">
             <% end %>
-            <%= render "refine/inline/filters/group", group: group %>
-            <% if i == groups.length - 1 %>
-              <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
+              <div class="refine--group-join"><%= t("refine.inline.filters.or") %></div>
+            <% if render_stack %>
+              </div>
             <% end %>
+          <% end %>
+          <%= render "refine/inline/filters/group", group: group, group_count: groups.count, condition_count: group.count, render_stack: render_stack %>
+          <% if i == groups.length - 1 %>
+            <%= render "refine/inline/filters/or_button", position: @refine_filter.blueprint.length %>
+          <% end %>
         <% end %>
 
       </div>

data/lib/refine/rails/version.rb

@@ -1,5 +1,5 @@
 module Refine
   module Rails
-    VERSION = "2.11.1"
+    VERSION = "2.11.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: refine-rails
 version: !ruby/object:Gem::Version
-  version: 2.11.1
+  version: 2.11.3
 platform: ruby
 authors:
 - Colleen Schnettler
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-09 00:00:00.000000000 Z
+date: 2024-09-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails