Merge pull request #6088 from aignatov-bio/ai-sci-8977-ui-revamp-filters-modal

Revamp filters flyouts [SCI-8977]

app/assets/stylesheets/application.tailwind.css

@@ -1,6 +1,7 @@
 @import "tailwind/inputs";
 @import "tailwind/buttons";
 @import "tailwind/modals";
+@import "tailwind/flyouts";
 
 @tailwind base;
 @tailwind components;

app/assets/stylesheets/repository/filters.scss

@@ -51,7 +51,6 @@
     max-height: calc(100vh - 300px);
     min-height: 300px;
     padding: 0;
-    width: 475px;
 
     .dropdown-selector,
     .users-filter-dropdown {
@@ -60,10 +59,9 @@
 
     .header {
       align-items: center;
-      border-bottom: $border-default;
       display: flex;
       flex-shrink: 0;
-      padding: .25em 1em;
+      margin-bottom: 1.5rem;
 
       .title {
         @include font-h2;
@@ -145,16 +143,16 @@
     .filters-list {
       flex-grow: 1;
       overflow-y: auto;
-      padding: .5em 1.6rem;
+      overflow-x: hidden;
     }
 
     .filter-container {
-      width: 424px;
-      margin-bottom: .5em;
+      margin-bottom: 1.5rem;
+      width: 552px;
 
       .filter-title {
-        @include font-small;
-        font-weight: bold;
+        color: var(--sn-grey);
+        margin-bottom: .25rem;
       }
 
       .filter-element {
@@ -240,8 +238,6 @@
 
   @media (max-width: 992px) {
     .filters-container {
-      width: 200px;
-
       .filter-container {
         .filter-attributes {
           display: flex;

app/assets/stylesheets/shared/filter_dropdown.scss

@@ -3,39 +3,7 @@
 .filter-container {
   position: initial;
 
-  .filter-dropdown {
-    padding: 0;
-    width: 230px;
-
-    .header {
-      align-items: center;
-      border-bottom: $border-default;
-      display: flex;
-      height: 2.75em;
-      margin-bottom: 1em;
-      padding: 1em;
-
-      .title {
-        @include font-h2;
-        flex-grow: 1;
-        user-select: none;
-
-      }
-    }
-
-    .select-block {
-      display: inline-block;
-      padding: 0 1em 1em;
-      position: relative;
-      width: 100%;
-
-      label {
-        @include font-small;
-        font-weight: bold;
-        margin-bottom: .3em;
-        user-select: none;
-      }
-    }
+  .sci-flyout {
 
     .text-search-filter {
       &.open {
@@ -84,21 +52,6 @@
         }
       }
     }
-
-    .footer {
-      align-items: center;
-      border-top: $border-default;
-      display: flex;
-      height: 4.25em;
-      justify-content: center;
-      padding: 0 1em;
-      position: relative;
-      width: 100%;
-
-      .clear-button {
-        margin-right: .375rem;
-      }
-    }
   }
 
   &.filters-applied .filter-button::after {

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -15,7 +15,7 @@
   .sci-input-field {
     @include font-button;
     animation-timing-function: $timing-function-sharp;
-    border: $border-secondary;
+    border: 1px solid var(--sn-sleepy-grey);
     border-radius: $border-radius-default !important;
     box-shadow: none;
     height: 36px;

app/assets/stylesheets/tailwind/flyouts.css

@@ -0,0 +1,22 @@
+@layer components {
+  .sci-flyout {
+    @apply w-[400px] !p-6;
+  }
+
+  .sci-flyout-medium {
+    @apply w-[600px];
+  }
+
+  .sci-flyout .sci-flyout-header {
+    @apply flex items-center mb-6;
+  }
+
+  .sci-flyout .sci-flyout-header .sci-flyout-title {
+    @apply text-xl font-bold;
+  }
+
+  .sci-flyout .sci-flyout-footer {
+    @apply flex pt-6 justify-end gap-6 border-0 border-t border-solid;
+    border-color: var(--sn-light-grey);
+  }
+}

app/assets/stylesheets/tailwind/inputs.css

@@ -1,4 +1,10 @@
 @layer components {
+
+  .sci-label {
+    @apply text-sm font-medium;
+    color: var(--sn-grey);
+  }
+
   .sci-input-container-v2 {
     @apply relative h-[2.5rem] flex items-center;
   }

app/javascript/vue/repository_filter/container.vue

@@ -29,8 +29,8 @@
       :key="filterListKey ? 1 : 0"
       @filter:update="updateFilter"
       @filter:delete="deleteFilter" />
-    <div class="footer">
-      <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
+    <div class="sci-flyout-footer">
+      <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown mr-auto" @click="toggleColumnsFilters">
         <button class="btn btn-secondary add-filter prevent-shrink" >
           <i class="sn-icon sn-icon-new-task"></i>
           {{ i18n.t('repositories.show.filters.add_filter') }}

app/javascript/vue/shared/date_time_picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="date-time-picker">
+  <div class="date-time-picker grow">
     <DatePicker v-if="!timeOnly"
       @change="updateDate"
       :placeholder="placeholder"

app/javascript/vue/shared/filters/filter_dropdown.vue

@@ -2,24 +2,24 @@
   <div class="relative">
     <div ref="dropdown" class="filter-container dropdown" :class="{ 'filters-applied': appliedDotIsShown }">
       <button class="btn btn-light icon-btn filter-button" :title="i18n.t('filters_modal.title')" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></button>
-      <div class="dropdown-menu dropdown-menu-right filter-dropdown" @click.stop.self>
-        <div class="header !-mb-2">
-          <div class="title">{{ i18n.t('filters_modal.title') }}</div>
-          <button @click="toggleDropdown" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <div class="dropdown-menu dropdown-menu-right sci-flyout" @click.stop.self>
+        <div class="sci-flyout-header">
+          <div class="sci-flyout-title">{{ i18n.t('filters_modal.title') }}</div>
+          <button @click="toggleDropdown" type="button" class="ml-auto btn btn-light btn-black icon-btn" data-dismiss="modal" aria-label="Close">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
         </div>
-        <div class="body p-3">
-          <div v-for="filter in filters" :key="filter.key + resetFilters" class="mt-4">
+        <div class="sci-flyout-body">
+          <div v-for="filter in filters" :key="filter.key + resetFilters" class="">
             <Component :is="`${filter.type}Filter`" :filter="filter" :value="filterValues[filter.key]" @update="updateFilter" />
           </div>
         </div>
-        <div class="footer">
-          <div class="buttons">
-            <div @click.prevent="clearFilters" class="btn btn-secondary">
-              {{ i18n.t('filters_modal.clear_btn') }}
-            </div>
-            <div @click.prevent="applyFilters" class="btn btn-primary">
-              {{ i18n.t('filters_modal.show_btn.one') }}
-            </div>
+        <div class="sci-flyout-footer">
+          <div @click.prevent="clearFilters" class="btn btn-secondary">
+            {{ i18n.t('filters_modal.clear_btn') }}
+          </div>
+          <div @click.prevent="applyFilters" class="btn btn-primary">
+            {{ i18n.t('filters_modal.show_btn.one') }}
           </div>
         </div>
       </div>

app/javascript/vue/shared/filters/inputs/checkbox_filter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>TODO</div>
+  <div class="mb-6">TODO</div>
 </template>
 
 <script>

app/javascript/vue/shared/filters/inputs/date_range_filter.vue

@@ -1,14 +1,13 @@
 <template>
-  <div>
-    <label>{{ filter.label }}</label>
-    <div class="flex center justify-between">
+  <div class="mb-6">
+    <label class="sci-label">{{ filter.label }}</label>
+    <div class="flex items-center gap-5">
       <DateTimePicker
         @change="updateDateFrom"
         :placeholder="i18n.t('From')"
         :dateOnly="true"
         :selectorId="`DatePicker${filter.key}`"
       />
-      <div class="px-2 mt-2"> — </div>
       <DateTimePicker
         @change="updateDateTo"
         :placeholder="i18n.t('To')"

app/javascript/vue/shared/filters/inputs/select_filter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>TODO</div>
+  <div class="mb-6">TODO</div>
 </template>
 
 <script>

app/javascript/vue/shared/filters/inputs/text_filter.vue

@@ -1,7 +1,6 @@
 <template>
-  <div>
-    <label>{{ filter.label }}</label>
-    <inputWithHistory :modelValue="value" @update:modelValue="update" :placeholder="filter.placeholder" :id="'textSearch' + filter.key"/>
+  <div class="mb-6">
+    <inputWithHistory :modelValue="value" :label="filter.label" @update:modelValue="update" :placeholder="filter.placeholder" :id="'textSearch' + filter.key"/>
   </div>
 </template>
 

app/javascript/vue/shared/input_with_history.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
+    <label v-if="label" class="sci-label" :for="id">{{ label }}</label>
     <div class="sci-input-container-v2">
+
       <input :value="modelValue"
              :placeholder="placeholder"
              :id="id"
@@ -28,6 +30,7 @@
   export default {
     name: 'inputWithHistory',
     props: {
+      label: { type: String },
       modelValue: { type: String },
       placeholder: { type: String },
       id: { type: String }

app/views/experiments/_table_filters.html.erb

@@ -7,8 +7,8 @@
     <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'due-date-filter', label: t('experiments.table.filters.due_date'), view_mode: nil } %>
     <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } if params[:view_mode] == 'archived' %>
 
-    <div class="select-block status-container">
-      <label><%= t('experiments.table.filters.status') %></label>
+    <div class="select-block status-container mb-6">
+      <label class="sci-label"><%= t('experiments.table.filters.status') %></label>
       <select class="status-filter"
               data-placeholder="<%= t('experiments.table.filters.status_placeholder') %>">
         <% MyModuleStatus.all.order(:id).each do |status| %>
@@ -16,8 +16,8 @@
         <% end %>
       </select>
     </div>
-    <div class="select-block assigned-container">
-      <label><%= t('experiments.table.filters.assigned') %></label>
+    <div class="select-block assigned-container mb-6">
+      <label class="sci-label"><%= t('experiments.table.filters.assigned') %></label>
       <select class="assigned-filter"
               data-ajax-url="<%= assigned_users_to_tasks_experiment_path(@experiment) %>"
               data-placeholder="<%= t('experiments.table.filters.assigned_placeholder') %>">

app/views/projects/index/_toolbar.html.erb

@@ -65,16 +65,16 @@
         } do %>
           <%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
           <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'created-on-filter', label: t("filters_modal.created_on.label"), view_mode: nil } %>
-          <div class="select-block">
-            <label><%= t("projects.index.filters_modal.members.label") %></label>
+          <div class="select-block mb-6">
+            <label class="sci-label"><%= t("projects.index.filters_modal.members.label") %></label>
             <select class="members-filter"
                     data-ajax-url="<%= users_filter_projects_path %>"
                     data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
             </select>
           </div>
           <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } %>
-          <div class="select-block folders">
-            <span class="sci-checkbox-container">
+          <div class="select-block folders mb-6">
+            <span class="sci-checkbox-container mr-3">
               <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
               <span class="sci-checkbox-label"></span>
             </span>

app/views/protocols/index/_protocol_filters.html.erb

@@ -7,22 +7,22 @@
     <%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: '', label_text: t('filters_modal.text.label_name_and_keywords')} %>
     <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'published-on-filter', label: 'Published on', view_mode: nil } %>
     <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'modified-on-filter', label: 'Modified on', view_mode: nil } %>
-    <div class="select-block">
-      <label>Published by</label>
+    <div class="select-block mb-6">
+      <label class="sci-label">Published by</label>
       <select class="published-by-filter"
               data-ajax-url="<%= users_filter_projects_path %>"
               data-placeholder="Select a publisher">
       </select>
     </div>
-    <div class="select-block">
-      <label>Access</label>
+    <div class="select-block mb-6">
+      <label class="sci-label">Access</label>
       <select class="access-by-filter"
               data-ajax-url="<%= users_filter_projects_path %>"
               data-placeholder="Select who has access">
       </select>
     </div>
-    <div class="select-block has-draft">
-      <span class="sci-checkbox-container">
+    <div class="select-block has-draft mb-6">
+      <span class="sci-checkbox-container mr-3">
         <%= check_box_tag :has_draft, 'accepted', false, {class: "sci-checkbox"} %>
         <span class="sci-checkbox-label"></span>
       </span>

app/views/repositories/_repository_filters.html.erb

@@ -11,7 +11,7 @@
         <span class="sn-icon sn-icon-filter"></span>
       </button>
       <div
-        class="dropdown-menu dropdown-menu-right"
+        class="dropdown-menu dropdown-menu-right sci-flyout sci-flyout-medium"
         id="filterContainer"
         data-columns-url="<%= describe_all_repository_repository_columns_path(@repository) %>"
         data-my-modules-url="<%= assigned_my_modules_repository_path(@repository) %>"

app/views/shared/_filter_dropdown.html.erb

@@ -1,21 +1,21 @@
 <div class="filter-container dropdown <%= container_class + '-dropdown' %>">
       <button class="btn btn-light icon-btn btn-black filter-button" title="<%= t("filters_modal.title") %>" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></button>
-      <div class="dropdown-menu dropdown-menu-right filter-dropdown <%= container_class %>" role="menu" data-team-id="<%= current_team.id %>" data-search-field-history-key="<%= search_field_history_key %>">
-        <div class="header">
-          <div class="title"><%= dropdown_title %></div>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+      <div class="dropdown-menu dropdown-menu-right sci-flyout <%= container_class %>" role="menu" data-team-id="<%= current_team.id %>" data-search-field-history-key="<%= search_field_history_key %>">
+        <div class="sci-flyout-header">
+          <div class="sci-flyout-title"><%= dropdown_title %></div>
+          <button type="button" class="ml-auto close" data-dismiss="modal" aria-label="Close">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
         </div>
-        <div class="body">
+        <div class="sci-flyout-body">
           <%= yield %>
         </div>
-        <div class="footer">
-          <div class="buttons">
-            <div class="btn btn-secondary clear-button">
-              <%= t("filters_modal.clear_btn") %>
-            </div>
-            <div class="btn btn-primary apply-filters">
-              <%= t("filters_modal.show_btn.one") %>
-            </div>
+        <div class="sci-flyout-footer">
+          <div class="btn btn-secondary clear-button">
+            <%= t("filters_modal.clear_btn") %>
+          </div>
+          <div class="btn btn-primary apply-filters">
+            <%= t("filters_modal.show_btn.one") %>
           </div>
         </div>
       </div>

app/views/shared/filter_dropdown/_datetime_search.html.erb

@@ -1,33 +1,32 @@
-<div class="select-block <%= container_class %>" <%= "data-view-mode=#{view_mode}" if view_mode %>>
+<div class="<%= container_class %> mb-6" <%= "data-view-mode=#{view_mode}" if view_mode %>>
     <div class="created-on-label">
-      <label><%= label %></label>
+      <label class="sci-label"><%= label %></label>
     </div>
-    <div class="datetime-picker-container">
-      <span class="sn-icon sn-icon-calendar"></span>
-      <input type="datetime"
-             data-toggle='date-time-picker'
-             class="form-control calendar-input from-date"
-             readonly
-             placeholder="<%= t('filters_modal.from_placeholder') %>"
-             data-date-format="<%= datetime_picker_format_full %>"
-             data-date-locale="<%= I18n.locale %>"
-             data-date-use-current="false"
-             value=""/>
-    </div>
-
-    <div class="connect-line"></div>
-
-    <div class="datetime-picker-container">
-      <span class="sn-icon sn-icon-calendar"></span>
-      <input type="datetime"
-             data-toggle='date-time-picker'
-             class="form-control calendar-input to-date"
-             readonly
-             placeholder="<%= t('filters_modal.to_placeholder') %>"
-             data-date-format="<%= datetime_picker_format_full %>"
-             data-date-locale="<%= I18n.locale %>"
-             data-date-use-current="false"
-             data-date-orientation="left"
-             value=""/>
+    <div class="flex items-center gap-5">
+      <div class="datetime-picker-container flex">
+        <span class="sn-icon sn-icon-calendar"></span>
+        <input type="datetime"
+              data-toggle='date-time-picker'
+              class="form-control calendar-input from-date"
+              readonly
+              placeholder="<%= t('filters_modal.from_placeholder') %>"
+              data-date-format="<%= datetime_picker_format_full %>"
+              data-date-locale="<%= I18n.locale %>"
+              data-date-use-current="false"
+              value=""/>
+      </div>
+      <div class="datetime-picker-container flex">
+        <span class="sn-icon sn-icon-calendar"></span>
+        <input type="datetime"
+              data-toggle='date-time-picker'
+              class="form-control calendar-input to-date"
+              readonly
+              placeholder="<%= t('filters_modal.to_placeholder') %>"
+              data-date-format="<%= datetime_picker_format_full %>"
+              data-date-locale="<%= I18n.locale %>"
+              data-date-use-current="false"
+              data-date-orientation="left"
+              value=""/>
+      </div>
     </div>
 </div>

app/views/shared/filter_dropdown/_text_search.html.erb

@@ -1,5 +1,5 @@
-<div class="select-block dropdown-selector-container">
-  <label><%= defined?(label_text) ? label_text : t('filters_modal.text.label') %></label>
+<div class="select-block dropdown-selector-container mb-6">
+  <label class="sci-label"><%= defined?(label_text) ? label_text : t('filters_modal.text.label') %></label>
   <div class="input-field dropdown text-search-filter">
     <input id="textSearchFilterInput"
            class="dropdown-toggle search-field"