scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-09 16:01:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Revamp filters flyouts [SCI-8977]
This commit is contained in:
aignatov-bio 2023-08-29 10:18:54 +02:00 • committed by GitHub
commit e8f839d719
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 122 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.tailwind.css
View file

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

16
app/assets/stylesheets/repository/filters.scss
View file

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

49
app/assets/stylesheets/shared/filter_dropdown.scss
View file

@ -3,39 +3,7 @@
.filter-container { .filter-container {
position: initial; position: initial;
.filter-dropdown { .sci-flyout {
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;
}
}
.text-search-filter { .text-search-filter {
&.open { &.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 { &.filters-applied .filter-button::after {

2
app/assets/stylesheets/shared_styles/elements/input_fields.scss
View file

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

22
app/assets/stylesheets/tailwind/flyouts.css Normal file
View file

@ -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);
}
}

6
app/assets/stylesheets/tailwind/inputs.css
View file

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

4
app/javascript/vue/repository_filter/container.vue
View file

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

2
app/javascript/vue/shared/date_time_picker.vue
View file

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

18
app/javascript/vue/shared/filters/filter_dropdown.vue
View file

@ -2,18 +2,19 @@
<div class="relative"> <div class="relative">
<div ref="dropdown" class="filter-container dropdown" :class="{ 'filters-applied': appliedDotIsShown }"> <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> <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="dropdown-menu dropdown-menu-right sci-flyout" @click.stop.self>
<div class="header !-mb-2"> <div class="sci-flyout-header">
<div class="title">{{ i18n.t('filters_modal.title') }}</div> <div class="sci-flyout-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> <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>
<div class="body p-3"> <div class="sci-flyout-body">
<div v-for="filter in filters" :key="filter.key + resetFilters" class="mt-4"> <div v-for="filter in filters" :key="filter.key + resetFilters" class="">
<Component :is="`${filter.type}Filter`" :filter="filter" :value="filterValues[filter.key]" @update="updateFilter" /> <Component :is="`${filter.type}Filter`" :filter="filter" :value="filterValues[filter.key]" @update="updateFilter" />
</div> </div>
</div> </div>
<div class="footer"> <div class="sci-flyout-footer">
<div class="buttons">
<div @click.prevent="clearFilters" class="btn btn-secondary"> <div @click.prevent="clearFilters" class="btn btn-secondary">
{{ i18n.t('filters_modal.clear_btn') }} {{ i18n.t('filters_modal.clear_btn') }}
</div> </div>
@ -24,7 +25,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import TextFilter from './inputs/text_filter.vue' import TextFilter from './inputs/text_filter.vue'

2
app/javascript/vue/shared/filters/inputs/checkbox_filter.vue
View file

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

7
app/javascript/vue/shared/filters/inputs/date_range_filter.vue
View file

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

2
app/javascript/vue/shared/filters/inputs/select_filter.vue
View file

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

5
app/javascript/vue/shared/filters/inputs/text_filter.vue
View file

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

3
app/javascript/vue/shared/input_with_history.vue
View file

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

8
app/views/experiments/_table_filters.html.erb
View file

@ -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: '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' %> <%= 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"> <div class="select-block status-container mb-6">
<label><%= t('experiments.table.filters.status') %></label> <label class="sci-label"><%= t('experiments.table.filters.status') %></label>
<select class="status-filter" <select class="status-filter"
data-placeholder="<%= t('experiments.table.filters.status_placeholder') %>"> data-placeholder="<%= t('experiments.table.filters.status_placeholder') %>">
<% MyModuleStatus.all.order(:id).each do |status| %> <% MyModuleStatus.all.order(:id).each do |status| %>
@ -16,8 +16,8 @@
<% end %> <% end %>
</select> </select>
</div> </div>
<div class="select-block assigned-container"> <div class="select-block assigned-container mb-6">
<label><%= t('experiments.table.filters.assigned') %></label> <label class="sci-label"><%= t('experiments.table.filters.assigned') %></label>
<select class="assigned-filter" <select class="assigned-filter"
data-ajax-url="<%= assigned_users_to_tasks_experiment_path(@experiment) %>" data-ajax-url="<%= assigned_users_to_tasks_experiment_path(@experiment) %>"
data-placeholder="<%= t('experiments.table.filters.assigned_placeholder') %>"> data-placeholder="<%= t('experiments.table.filters.assigned_placeholder') %>">

8
app/views/projects/index/_toolbar.html.erb
View file

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

12
app/views/protocols/index/_protocol_filters.html.erb
View file

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

2
app/views/repositories/_repository_filters.html.erb
View file

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

16
app/views/shared/_filter_dropdown.html.erb
View file

@ -1,15 +1,16 @@
<div class="filter-container dropdown <%= container_class + '-dropdown' %>"> <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> <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="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="header"> <div class="sci-flyout-header">
<div class="title"><%= dropdown_title %></div> <div class="sci-flyout-title"><%= dropdown_title %></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button> <button type="button" class="ml-auto close" data-dismiss="modal" aria-label="Close">
<i class="sn-icon sn-icon-close"></i>
</button>
</div> </div>
<div class="body"> <div class="sci-flyout-body">
<%= yield %> <%= yield %>
</div> </div>
<div class="footer"> <div class="sci-flyout-footer">
<div class="buttons">
<div class="btn btn-secondary clear-button"> <div class="btn btn-secondary clear-button">
<%= t("filters_modal.clear_btn") %> <%= t("filters_modal.clear_btn") %>
</div> </div>
@ -19,4 +20,3 @@
</div> </div>
</div> </div>
</div> </div>
</div>

13
app/views/shared/filter_dropdown/_datetime_search.html.erb
View file

@ -1,8 +1,9 @@
<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"> <div class="created-on-label">
<label><%= label %></label> <label class="sci-label"><%= label %></label>
</div> </div>
<div class="datetime-picker-container"> <div class="flex items-center gap-5">
<div class="datetime-picker-container flex">
<span class="sn-icon sn-icon-calendar"></span> <span class="sn-icon sn-icon-calendar"></span>
<input type="datetime" <input type="datetime"
data-toggle='date-time-picker' data-toggle='date-time-picker'
@ -14,10 +15,7 @@
data-date-use-current="false" data-date-use-current="false"
value=""/> value=""/>
</div> </div>
<div class="datetime-picker-container flex">
<div class="connect-line"></div>
<div class="datetime-picker-container">
<span class="sn-icon sn-icon-calendar"></span> <span class="sn-icon sn-icon-calendar"></span>
<input type="datetime" <input type="datetime"
data-toggle='date-time-picker' data-toggle='date-time-picker'
@ -30,4 +28,5 @@
data-date-orientation="left" data-date-orientation="left"
value=""/> value=""/>
</div> </div>
</div>
</div> </div>

4
app/views/shared/filter_dropdown/_text_search.html.erb
View file

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