scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2026-01-07 00:36:08 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add styling for repository filters [SCI-6232] (#3779)

Browse source 
Co-authored-by: Anton <anton@scinote.net>
This commit is contained in:
aignatov-bio 2022-01-17 10:24:57 +01:00 • committed by GitHub
parent 3e85cc0b4a
commit 8fcf4e9aa2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 152 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable SelectorDepth unknownProperties
// scss-lint:disable NestingDepth
.repository-show {
@ -18,6 +18,10 @@
}
}
#filterContainer {
padding: 0;
}
.filters-container {
display: flex;
flex-direction: column;
@ -31,7 +35,7 @@
border-bottom: $border-default;
display: flex;
flex-shrink: 0;
padding: .25em .5em;
padding: .25em 1em;
.title {
@include font-h2;
@ -42,11 +46,28 @@
}
}
.saved-filters-container {
.saved-filters-list {
padding: 0;
}
.saved-filters-element {
align-items: center;
display: flex;
padding: .5em 1em;
.btn-light {
color: $color-silver-chalice;
margin-left: auto;
}
}
}
.footer {
border-top: $border-default;
display: flex;
flex-shrink: 0;
padding: .5em;
padding: 1em;
.apply-button {
margin-left: auto !important;
@ -59,7 +80,7 @@
.column-filters-element {
cursor: pointer;
padding: .25em .5em;
padding: .5em 1em;
&:hover {
background: $color-concrete;
@ -84,8 +105,45 @@
display: flex;
}
.filter-attributes {
display: grid;
gap: .5em;
grid-auto-flow: column;
grid-template-columns: min-content auto;
.dropdown-selector-container {
width: 100%;
}
.operator-selector {
.dropdown-selector-container {
width: 120px;
}
}
input {
margin: 0;
width: 100%;
}
.date-time-picker {
display: grid;
gap: .5em;
grid-auto-flow: column;
}
.datetime-filter-attributes {
display: grid;
gap: .5em;
}
}
.filter-body {
flex-grow: 1;
}
.filter-remove {
margin-left: 0;
margin-left: auto;
}
}
}

3
app/javascript/vue/repository_filter/filter.vue
View file

@ -11,10 +11,9 @@
</div>
<div class="filter-remove">
<button class="btn btn-light icon-btn" @click="$emit('filter:delete')">
<i class="fas fa-times-circle"></i>
<i class="fas fa-trash"></i>
</button>
</div>
<hr>
</div>
</div>
</template>

15
app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
View file

@ -1,12 +1,13 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${filter.id}`"
@dropdown:changed="updateOperator"
</div>
<div class="sci-input-container">
<input v-if="operator === 'file_contains'"
class="sci-input-field"

17
app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
View file

@ -1,13 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<DropdownSelector
:optionClass="'checkbox-icon'"
:dataCombineTags="true"

14
app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="filter-attributes">
<div class="filter-operator-select">
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="operators"
@ -9,11 +9,13 @@
@dropdown:changed="updateOperator" />
</div>
<template v-if="!isPreset">
<div class="filter-datepicker-input">
<DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
</div>
<div class="filter-datepicker-to-input">
<DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" />
<div class="datetime-filter-attributes">
<div class="filter-datepicker-input">
<DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
</div>
<div class="filter-datepicker-to-input">
<DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" />
</div>
</div>
</template>
</div>

6
app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="filter-attributes">
<div class="filter-operator-select">
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="operators"
@ -12,8 +12,8 @@
<div class="filter-datepicker-input">
<DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" :onlyDate="true" />
</div>
<div class="filter-datepicker-to-input">
<DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
<div class="filter-datepicker-to-input" v-if="operator == 'between'">
<DateTimePicker @change="updateDateTo" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
</div>
</template>
</div>

17
app/javascript/vue/repository_filter/filters/repositoryListValue.vue
View file

@ -1,13 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<DropdownSelector
:optionClass="'checkbox-icon'"
:dataCombineTags="true"

16
app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
View file

@ -1,12 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<DropdownSelector
:optionClass="'checkbox-icon'"
:dataCombineTags="true"

16
app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
View file

@ -1,12 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<div v-if="operator !== 'between'" class="sci-input-container">
<input
class="sci-input-field"

17
app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
View file

@ -1,13 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<DropdownSelector
:optionClass="'checkbox-icon'"
:dataCombineTags="true"

16
app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
View file

@ -1,12 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<div class="sci-input-container">
<input
class="sci-input-field"

6
app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="filter-attributes">
<div class="filter-operator-select">
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="operators"
@ -12,8 +12,8 @@
<div class="filter-datepicker-input">
<DateTimePicker @change="updateDate" :selectorId="`TimePicker${filter.id}`" :timeOnly="true" />
</div>
<div class="filter-datepicker-to-input">
<DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
<div class="filter-datepicker-to-input" v-if="operator == 'between'">
<DateTimePicker @change="updateDateTo" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
</div>
</template>
</div>

16
app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
View file

@ -1,12 +1,14 @@
<template>
<div class="filter-attributes">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
<div class="operator-selector">
<DropdownSelector
:disableSearch="true"
:options="this.operators"
:selectedValue="this.operator"
:selectorId="`OperatorSelector${this.filter.id}`"
@dropdown:changed="updateOperator"
/>
</div>
<div class="users-filter-dropdown">
<DropdownSelector
:optionClass="'checkbox-icon'"

5
app/javascript/vue/shared/date_picker.vue
View file

@ -1,6 +1,7 @@
<template>
<div class="datepicker">
<input @change="update" type="datetime" class="form-control calendar-input" :id="this.selectorId" placeholder="" />
<div class="datepicker sci-input-container right-icon">
<input @change="update" type="datetime" class="form-control calendar-input sci-input-field" :id="this.selectorId" placeholder="" />
<i class="fas fa-calendar-alt"></i>
</div>
</template>