scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-07 21:55:20 +08:00
Code Issues Projects Releases Packages Wiki Activity

Date time picker improvments [SCI-9678][SCI-9688]

Browse source
This commit is contained in:
Anton 2023-11-14 10:58:38 +01:00
parent 66c3a766bd
commit b7f876aa37
15 changed files with 107 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/repositories/index.js
View file

@ -105,6 +105,7 @@
}],
fnInitComplete: function(e) {
initActionToolbar();
window.actionToolbarComponent.setReloadCallback(() =>
initRepositoriesDataTable('#repositoriesList', archived));
window.actionToolbarComponent.setBottomOffset(68);

1
app/assets/javascripts/repositories/repository_datatable.js
View file

@ -791,6 +791,7 @@ var RepositoryDatatable = (function(global) {
fnInitComplete: function() {
window.initActionToolbar();
window.actionToolbarComponent.setBottomOffset(68);
initHeaderTooltip();
disableCheckboxToggleOnCheckboxPreview();

55
app/assets/stylesheets/shared/datetime_picker.scss
View file

@ -3,9 +3,10 @@
.dp--menu-wrapper {
font-weight: normal;
.dp__menu {
.dp__menu,
&.dp__menu {
border: 0;
box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
box-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15)
}
.dp__action_buttons {
@ -26,17 +27,34 @@
}
.dp__month_year_row {
margin-bottom: 1rem;
margin-bottom: .5rem;
}
.dp__menu_inner {
border-bottom: 1px solid var(--sn-light-grey);
margin: 0 1rem 1rem;
margin: 0 1rem;
padding: 1rem 0;
}
.dp__time_picker_overlay_container {
padding-bottom: .5rem;
}
.dp__button_bottom {
background-color: var(--sn-white);
margin-bottom: .5rem;
}
.dp--tp-wrap {
padding: 0 1rem 1rem;
border-top: 1px solid var(--sn-light-grey);
padding: .5rem 1rem;
.dp__time_display {
margin: .5rem 0;
}
.dp__button_bottom {
margin-bottom: 0;
}
}
.dp__action_cancel {
@ -61,19 +79,14 @@
justify-content: center;
}
.dp__btn:hover {
.dp__tp_inline_btn_bar {
background-color: var(--sn-science-blue);
}
}
.dp--overlay-absolute {
padding: 1rem 1rem 0;
}
.dp__overlay_action {
width: calc(100% - 2rem);
.dp__overlay_container {
padding-bottom: .5rem;
}
.dp--arrow-btn-nav {
@ -102,6 +115,16 @@
}
}
.dp__main.only-time {
.dp--tp-wrap {
border-top: none;
}
.dp__overlay_container {
padding-bottom: 0;
}
}
.dp__theme_light {
--dp-background-color: var(--sn-white);
@ -148,11 +171,11 @@
--dp-cell-padding: 0rem; /*Padding in the cell*/
--dp-common-padding: 1rem; /*Common padding used*/
--dp-input-padding: .3em 2rem .3rem 1rem; /*Padding in the input*/
--dp-menu-min-width: 342px; /*Adjust the min width of the menu*/
--dp-menu-min-width: 276px; /*Adjust the min width of the menu*/
--dp-action-row-padding: 0 1rem 1rem; /*Adjust padding for the action row*/
--dp-action-buttons-padding: 0 .625rem; /*Adjust padding for the action buttons in action row*/
--dp-action-button-height: 1.875rem; /*Adjust height for the action buttons in action row*/
--dp-row-margin: .25rem 0; /*Adjust the spacing between rows in the calendar*/
--dp-row-margin: 2px 0; /*Adjust the spacing between rows in the calendar*/
--dp-calendar-header-cell-padding: .5rem; /*Adjust padding in calendar header cells*/
--dp-two-calendars-spacing: .75rem; /*Space between multiple calendars*/
--dp-overlay-col-padding: .25rem; /*Padding in the overlay column*/
@ -163,7 +186,7 @@
/*Font sizes*/
--dp-font-size: .875rem; /*Default font-size*/
--dp-preview-font-size: .75rem; /*Font size of the date preview in the action row*/
--dp-time-font-size: 3rem; /*Font size in the time picker*/
--dp-time-font-size: 1.875rem; /*Font size in the time picker*/
/*Transitions*/
--dp-animation-duration: 0.1s; /*Transition duration*/

10
app/controllers/my_modules_controller.rb
View file

@ -488,6 +488,16 @@ class MyModulesController < ApplicationController
def my_module_params
permitted_params = params.require(:my_module).permit(:name, :description, :started_on, :due_date, :archived)
if permitted_params[:started_on].present?
permitted_params[:started_on] =
Time.zone.strptime(permitted_params[:started_on], '%Y/%m/%d %H:%M')
end
if permitted_params[:due_date].present?
permitted_params[:due_date] =
Time.zone.strptime(permitted_params[:due_date], '%Y/%m/%d %H:%M')
end
permitted_params
end

5
app/javascript/packs/vue/action_toolbar.js
View file

@ -5,11 +5,14 @@ import ActionToolbar from '../../vue/components/action_toolbar.vue';
import { mountWithTurbolinks } from './helpers/turbolinks.js';
window.initActionToolbar = () => {
if (window.actionToolbarComponent) return;
if (notTurbolinksPreview()) {
const app = createApp({});
app.component('ActionToolbar', ActionToolbar);
app.config.globalProperties.i18n = window.I18n;
mountWithTurbolinks(app, '#actionToolbar');
mountWithTurbolinks(app, '#actionToolbar', () => {
window.actionToolbarComponent = null
});
}
}

7
app/javascript/packs/vue/helpers/turbolinks.js
View file

@ -1,9 +1,12 @@
function mountWithTurbolinks(app, target) {
function mountWithTurbolinks(app, target, callback = null) {
const originalHtml = document.querySelector(target).innerHTML;
document.addEventListener('turbolinks:before-cache', () => {
app.unmount();
document.querySelector(target).innerHTML = originalHtml;
if (document.querySelector(target)) {
document.querySelector(target).innerHTML = originalHtml;
}
if (callback) callback();
}, { once: true });
return app.mount(target);

6
app/javascript/packs/vue/legacy/datetime_picker.js
View file

@ -18,14 +18,15 @@ window.initDateTimePickerComponent = (id) => {
},
mounted() {
if (this.$refs.input.dataset.default) {
const defaultDate = new Date(this.$refs.input.dataset.default.replace(/-/g, '/')); // Safari fix
const defaultDate = new Date(this.$refs.input.dataset.default.replace(/([^!\s])-/g, '$1/')); // Safari fix
this.date = this.formatDate(defaultDate);
this.$refs.vueDateTime.manualUpdate = true;
this.$refs.vueDateTime.datetime = defaultDate;
} else if (this.date) {
this.$refs.vueDateTime.manualUpdate = true;
this.$refs.vueDateTime.datetime = new Date(this.date);
}
$(this.$refs.input).data('dateTimePicker', this);
$(this.$el.parentElement).parent().trigger('dp:ready');
},
@ -50,6 +51,7 @@ window.initDateTimePickerComponent = (id) => {
},
setDate(date) {
this.date = this.formatDate(date);
this.$refs.vueDateTime.manualUpdate = true;
this.$refs.vueDateTime.datetime = date;
this.$nextTick(() => {
if (this.onChange) this.onChange(date);

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

@ -1,6 +1,9 @@
<template>
<div class="date-time-picker grow">
<VueDatePicker
:class="{
'only-time': mode == 'time',
}"
v-model="compDatetime"
:teleport="teleport"
:text-input="true"
@ -12,7 +15,6 @@
:auto-apply="true"
:partial-flow="true"
:markers="markers"
:time-picker-inline="mode == 'datetime'"
:enable-time-picker="mode == 'datetime'"
:time-picker="mode == 'time'"
:placeholder="placeholder" >
@ -22,12 +24,24 @@
<template #arrow-left>
<img class="slot-icon" src="/images/calendar/navigate_before.svg"/>
</template>
<template #input-icon>
<template v-if="mode == 'time'" #input-icon>
<img class="input-slot-image" src="/images/calendar/clock.svg"/>
</template>
<template v-else #input-icon>
<img class="input-slot-image" src="/images/calendar/calendar.svg"/>
</template>
<template #clock-icon>
<img class="slot-icon" src="/images/calendar/clock.svg"/>
</template>
<template #calendar-icon>
<img class="slot-icon" src="/images/calendar/calendar.svg"/>
</template>
<template #arrow-up>
<img class="slot-icon" src="/images/calendar/up.svg"/>
</template>
<template #arrow-down>
<img class="slot-icon" src="/images/calendar/down.svg"/>
</template>
</VueDatePicker>
</div>
</template>
@ -46,6 +60,7 @@
},
data() {
return {
manualUpdate: false,
datetime: this.defaultValue,
time: null,
markers: [
@ -77,6 +92,11 @@
}
},
datetime: function () {
if (this.manualUpdate) {
this.manualUpdate = false;
return;
}
if (this.mode == 'time') {
this.time = {
hours: this.datetime ? this.datetime.getHours() : 0,
@ -94,6 +114,11 @@
}
},
time: function () {
if (this.manualUpdate) {
this.manualUpdate = false;
return;
}
if (this.mode != 'time') return;
let newDate;

4
app/views/experiments/_table_due_date.html.erb
View file

@ -11,8 +11,8 @@
</span>
<% if due_date_editable %>
<div class="datetime-picker-container vue-date-time-picker h-full" id="calendarDueDateContainer<%= my_module.id %>">
<input ref="input" type="hidden" v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= my_module.due_date %>" />
<date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="date" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
<input ref="input" type="hidden" data-simple-format="true" v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= my_module.due_date %>" />
<date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
</div>
<div class="sn-icon sn-icon-close clear-date <%= 'tw-hidden' if !my_module.due_date %>"
data-toggle='clear-date-time-picker'

4
app/views/my_modules/_due_date.html.erb
View file

@ -3,7 +3,7 @@
<%= t('my_modules.due_date.label') %>
</label>
<div id="date-time-picker" class="vue-date-time-picker">
<input ref="input" type="hidden" v-model="date" name="my_module[due_date]" data-default="<%= @my_module.due_date %>" />
<date-time-picker class="w-64" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="date"></date-time-picker>
<input ref="input" type="hidden" v-model="date" data-simple-format="true" name="my_module[due_date]" data-default="<%= l(@my_module.due_date, format: :full) if @my_module.due_date %>" />
<date-time-picker class="w-64" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime"></date-time-picker>
</div>
<% end %>

3
app/views/my_modules/_module_header_due_date.html.erb
View file

@ -7,7 +7,8 @@
<% if due_date_editable %>
<div class="datetime-picker-container" id="due-date">
<div id="calendarDueDateContainer">
<input type="hidden" ref="input" v-model="date" id="calendarDueDate" data-default="<%= my_module.due_date %>" />
<input type="hidden" ref="input" v-model="date" data-simple-format="true" id="calendarDueDate" data-default="<%= l(my_module.due_date, format: :full) if my_module.due_date %>
" />
<date-time-picker class="w-full" ref="vueDateTime" :teleport="false" @change="updateDate" mode="datetime" :placeholder="'<%= t('my_modules.details.no_due_date_placeholder') %>'"></date-time-picker>
</div>
<span class="sn-icon sn-icon-close clear-date" data-toggle='clear-date-time-picker' data-target='calendarDueDate'></span>

2
app/views/my_modules/_module_header_start_date.html.erb
View file

@ -7,7 +7,7 @@
<% if start_date_editable %>
<div class="datetime-picker-container" id="start-date">
<div id="calendarStartDateContainer">
<input type="hidden" ref="input" v-model="date" id="calendarStartDate" data-default="<%= my_module.started_on %>" />
<input type="hidden" ref="input" v-model="date" data-simple-format="true" id="calendarStartDate" data-default="<%= l(my_module.started_on, format: :full) if my_module.started_on %>" />
<date-time-picker class="w-full" ref="vueDateTime" :teleport="false" @change="updateDate" mode="datetime" :placeholder="'<%= t('my_modules.details.no_start_date_placeholder') %>'"></date-time-picker>
</div>
<span class="sn-icon sn-icon-close clear-date" data-toggle='clear-date-time-picker' data-target='calendarStartDate'></span>

2
app/views/my_modules/modals/_new_modal.html.erb
View file

@ -23,7 +23,7 @@
<div class="my-module-due-date-container">
<label class="sci-label" for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
<div id="date-time-picker-my-module" class="vue-date-time-picker w-full">
<input ref="input" type="hidden" class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]" />
<input ref="input" type="hidden" data-simple-format="true" class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]" />
<date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>" @change="updateDate" mode="datetime"></date-time-picker>
</div>
</div>

5
public/images/calendar/down.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="down">
<path id="down_2" d="M7.02502 9.69999L7.72502 8.99999L12.685 13.96L17.635 8.99999L18.335 9.69999L12.685 15.36L7.02502 9.69999Z" fill="#1D2939"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

3
public/images/calendar/up.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.335 14.135L17.635 14.835L12.675 9.87498L7.72502 14.835L7.02502 14.135L12.675 8.47498L18.335 14.135Z" fill="#1D2939"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 234 B