scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 06:35:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add style styling to datetime pixker [SCI-9627]

Browse source
This commit is contained in:
Anton 2023-11-08 13:52:24 +01:00
parent e94ef564b0
commit b09bd8a3c5
11 changed files with 160 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/my_modules.js
View file

@ -56,6 +56,7 @@
// Bind ajax for editing due dates
function initStartDatePicker() {
window.initDateTimePickerComponent('#calendarStartDateContainer');
$('.datetime-picker-container#start-date').on('dp:ready', () => {
$('#calendarStartDate').data('dateTimePicker').onChange = () => {
updateStartDate();
@ -84,6 +85,7 @@
// Bind ajax for editing due dates
function initDueDatePicker() {
window.initDateTimePickerComponent('#calendarDueDateContainer');
$('.datetime-picker-container#due-date').on('dp:ready', () => {
$('#calendarDueDate').data('dateTimePicker').onChange = () => {
updateDueDate();

4
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -248,6 +248,10 @@
top: 0;
width: 100%;
.dp__input_wrap {
opacity: 0;
}
#calendarDueDate {
opacity: 0;
}

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

@ -1,11 +1,86 @@
// scss-lint:disable SelectorDepth NestingDepth
.dp--menu-wrapper {
font-weight: normal;
.dp__menu {
border: 0;
box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
}
.dp__action_buttons {
flex: 1;
gap: .5rem;
}
.dp__active_date {
background-color: var(--sn-science-blue);
}
.dp__calendar_header_separator {
display: none;
}
.dp__month_year_wrap {
font-weight: bold;
}
.dp__month_year_row {
margin-bottom: 1rem;
}
.dp__menu_inner {
border-bottom: 1px solid var(--sn-light-grey);
margin: 0 1rem 1rem;
padding: 1rem 0;
}
.dp--tp-wrap {
border-bottom: 1px solid var(--sn-light-grey);
margin: 0 1rem 1rem;
padding-bottom: 1rem;
}
.dp__action_cancel {
color: var(--sn-blue);
}
.dp__action_button {
margin-inline-start: 0;
white-space: nowrap;
}
.dp__inner_nav {
border-radius: .25rem;
}
.dp--arrow-btn-nav {
display: flex;
height: 40px;
padding: 0;
width: 40px;
.dp__inner_nav {
height: 40px;
padding: 0;
width: 40px;
}
}
}
.dp__input_wrap {
.dp__input_icon {
height: 1.5rem;
left: .5rem;
}
.dp__input {
height: 2.25rem;
line-height: unset;
}
}
.dp__theme_light {
--dp-background-color: var(--sn-white);
--dp-text-color: var(--sn-black);
@ -15,7 +90,7 @@
--dp-primary-color: var(--sn-blue);
--dp-primary-disabled-color: var(--sn-super-light-blue);
--dp-primary-text-color: var(--sn-white);
--dp-secondary-color: var(--sn-light-grey);
--dp-secondary-color: var(--sn-grey);
--dp-border-color: var(--sn-light-grey);
--dp-menu-border-color: var(--sn-light-grey);
--dp-border-color-hover: var(--sn-light-grey);
@ -37,7 +112,7 @@
:root {
/*General*/
--dp-font-family: 'Roboto', sans-serif; /*Font family*/
--dp-font-family: inherit; /*Font family*/
--dp-border-radius: .25rem; /*Configurable border-radius*/
--dp-cell-border-radius: .25rem; /*Specific border radius for the calendar cell*/
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
@ -50,21 +125,22 @@
--dp-cell-size: 2.5rem; /*Width and height of calendar cell*/
--dp-cell-padding: .25rem; /*Padding in the cell*/
--dp-common-padding: 1rem; /*Common padding used*/
--dp-input-icon-padding: 2.5rem; /*Padding on the left side of the input if icon is present*/
--dp-input-padding: .3em 2rem .3rem 1rem; /*Padding in the input*/
--dp-menu-min-width: 320px; /*Adjust the min width of the menu*/
--dp-action-buttons-padding: .5rem 1rem; /*Adjust padding for the action buttons in action row*/
--dp-action-button-height: 2.5rem; /*Adjust height for the action buttons in action row*/
--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-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
--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*/
--dp-time-inc-dec-button-size: 1.5rem; /*Sizing for arrow buttons in the time picker*/
--dp-menu-padding: .5rem; /*Menu padding*/
--dp-menu-padding: 1rem; /*Menu padding*/
--dp-input-icon-padding: 2rem; /*Padding on the left side of the input if icon is present*/
/*Font sizes*/
--dp-font-size: .875rem; /*Default font-size*/
--dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
--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*/
/*Transitions*/

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

@ -19,7 +19,7 @@ window.initDateTimePickerComponent = (id) => {
},
mounted() {
if (this.$refs.input.dataset.default) {
let defaultDate = new Date(this.$refs.input.dataset.default);
const defaultDate = new Date(this.$refs.input.dataset.default.replace(/-/g, '/')); // Safari fix
this.date = this.formatDate(defaultDate);
this.$refs.vueDateTime.datetime = defaultDate;
} else if (this.date) {

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

@ -1,34 +1,29 @@
<template>
<div class="date-time-picker grow">
<VueDatePicker
v-if="mode == 'datetime'"
v-model="datetime"
v-model="compDatetime"
:teleport="teleport"
text-input
:text-input="true"
:no-today="true"
:clearable="clearable"
time-picker-inline
:format="dateTimeFormat"
:placeholder="placeholder" ></VueDatePicker>
<VueDatePicker
v-if="mode == 'date'"
v-model="datetime"
:teleport="teleport"
:clearable="clearable"
text-input
:format="dateFormat"
:enable-time-picker="false"
:placeholder="placeholder" ></VueDatePicker>
<VueDatePicker
v-if="mode == 'time'"
v-model="time"
:teleport="teleport"
:clearable="clearable"
text-input
:format="timeFormat"
time-picker
:placeholder="placeholder" ></VueDatePicker>
:format="format"
:month-change-on-scroll="false"
:six-weeks="true"
:markers="markers"
:time-picker-inline="mode == 'datetime'"
:enable-time-picker="mode == 'datetime'"
:time-picker="mode == 'time'"
:placeholder="placeholder" >
<template #arrow-right>
<img class="slot-icon" src="/images/calendar/navigate_next.svg"/>
</template>
<template #arrow-left>
<img class="slot-icon" src="/images/calendar/navigate_before.svg"/>
</template>
<template #input-icon>
<img class="input-slot-image" src="/images/calendar/calendar.svg"/>
</template>
</VueDatePicker>
</div>
</template>
@ -47,7 +42,14 @@
data() {
return {
datetime: this.defaultValue,
time: null
time: null,
markers: [
{
date: new Date(),
type: 'dot',
color: '#3B99FD',
},
]
}
},
created() {
@ -106,15 +108,27 @@
}
},
computed: {
dateTimeFormat() {
compDatetime: {
get () {
if (this.mode == 'time') {
return this.time
} else {
return this.datetime
}
},
set (val) {
if (this.mode == 'time') {
this.time = val
} else {
this.datetime = val
}
}
},
format() {
if (this.mode == 'time') return 'HH:mm'
if (this.mode == 'date') return document.body.dataset.datetimePickerFormatVue
return `${document.body.dataset.datetimePickerFormatVue} HH:mm`
},
dateFormat() {
return document.body.dataset.datetimePickerFormatVue
},
timeFormat() {
return 'HH:mm'
},
}
}
}
</script>

2
app/views/layouts/application.html.erb
View file

@ -24,8 +24,8 @@
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'session_end' %>
<%= javascript_include_tag 'sidebar_toggle' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag 'application_pack', media: 'all' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<% if MarvinJsService.enabled? && ENV['MARVINJS_API_KEY'] %>

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

@ -6,9 +6,9 @@
</span>
<% if due_date_editable %>
<div class="datetime-picker-container" id="due-date">
<div id="calendarDueDateContainer" class="vue-date-time-picker opacity-0">
<div id="calendarDueDateContainer">
<input type="hidden" ref="input" v-model="date" id="calendarDueDate" data-default="<%= my_module.due_date %>" />
<date-time-picker class="w-full" ref="vueDateTime" @change="updateDate" mode="date" :placeholder="'<%= t('my_modules.details.no_due_date_placeholder') %>'"></date-time-picker>
<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>
</div>

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

@ -6,9 +6,9 @@
</span>
<% if start_date_editable %>
<div class="datetime-picker-container" id="start-date">
<div id="calendarStartDateContainer" class="vue-date-time-picker opacity-0">
<div id="calendarStartDateContainer">
<input type="hidden" ref="input" v-model="date" id="calendarStartDate" data-default="<%= my_module.started_on %>" />
<date-time-picker class="w-full" ref="vueDateTime" @change="updateDate" mode="date" :placeholder="'<%= t('my_modules.details.no_start_date_placeholder') %>'"></date-time-picker>
<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>
</div>

9
public/images/calendar/calendar.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 11C4.26 11 4.49 10.9 4.69 10.7C4.89 10.5 5 10.26 5 9.98C5 9.72 4.9 9.49 4.69 9.29C4.49 9.09 4.25 8.99 4 8.99C3.75 8.99 3.51 9.09 3.31 9.29C3.11 9.49 3 9.72 3 9.98C3 10.26 3.1 10.5 3.31 10.7C3.51 10.9 3.74 11 4 11Z" fill="#1D2939"/>
<path d="M4 15C4.26 15 4.49 14.9 4.69 14.7C4.89 14.5 5 14.26 5 13.98C5 13.72 4.9 13.49 4.69 13.29C4.49 13.09 4.25 12.99 4 12.99C3.75 12.99 3.51 13.09 3.31 13.29C3.11 13.49 3 13.72 3 13.98C3 14.26 3.1 14.5 3.31 14.7C3.51 14.9 3.74 15 4 15Z" fill="#1D2939"/>
<path d="M12 11C12.26 11 12.49 10.9 12.69 10.7C12.89 10.5 13 10.26 13 9.98C13 9.72 12.9 9.49 12.69 9.29C12.49 9.09 12.25 8.99 12 8.99C11.75 8.99 11.51 9.09 11.31 9.29C11.11 9.49 11 9.72 11 9.98C11 10.26 11.1 10.5 11.31 10.7C11.51 10.9 11.74 11 12 11Z" fill="#1D2939"/>
<path d="M12 15C12.26 15 12.49 14.9 12.69 14.7C12.89 14.5 13 14.26 13 13.98C13 13.72 12.9 13.49 12.69 13.29C12.49 13.09 12.25 12.99 12 12.99C11.75 12.99 11.51 13.09 11.31 13.29C11.11 13.49 11 13.72 11 13.98C11 14.26 11.1 14.5 11.31 14.7C11.51 14.9 11.74 15 12 15Z" fill="#1D2939"/>
<path d="M8.02 11C8.28 11 8.51 10.9 8.71 10.7C8.91 10.5 9.02 10.26 9.02 9.98C9.02 9.72 8.92 9.49 8.71 9.29C8.51 9.09 8.27 8.99 8.02 8.99C7.77 8.99 7.53 9.09 7.33 9.29C7.13 9.49 7.02 9.72 7.02 9.98C7.02 10.26 7.12 10.5 7.33 10.7C7.53 10.9 7.76 11 8.02 11Z" fill="#1D2939"/>
<path d="M8.02 15C8.28 15 8.51 14.9 8.71 14.7C8.91 14.5 9.02 14.26 9.02 13.98C9.02 13.72 8.92 13.49 8.71 13.29C8.51 13.09 8.27 12.99 8.02 12.99C7.77 12.99 7.53 13.09 7.33 13.29C7.13 13.49 7.02 13.72 7.02 13.98C7.02 14.26 7.12 14.5 7.33 14.7C7.53 14.9 7.76 15 8.02 15Z" fill="#1D2939"/>
<path d="M14 2H12V0H11V2H5V0H4V2H2C0.9 2 0 2.9 0 4V16C0 17.1 0.9 18 2 18H14C15.1 18 16 17.1 16 16V4C16 2.9 15.1 2 14 2ZM15 16C15 16.55 14.55 17 14 17H2C1.45 17 1 16.55 1 16V7H15V16ZM1 6V4C1 3.45 1.45 3 2 3H14C14.55 3 15 3.45 15 4V6H1Z" fill="#1D2939"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3 16.6L8 11.3L13.3 6L14 6.7L9.4 11.3L14 15.9L13.3 16.6Z" fill="#1D2939"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 190 B

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

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.7 16.6L9 15.9L13.6 11.3L9 6.7L9.7 6L15 11.3L9.7 16.6Z" fill="#1D2939"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B