From b09bd8a3c5d72ae48a606570a73fa4d34d23806a Mon Sep 17 00:00:00 2001 From: Anton Date: Wed, 8 Nov 2023 13:52:24 +0100 Subject: [PATCH] Add style styling to datetime pixker [SCI-9627] --- app/assets/javascripts/my_modules.js | 2 + .../my_modules/protocols/index.scss | 4 + .../stylesheets/shared/datetime_picker.scss | 92 +++++++++++++++++-- .../packs/vue/legacy/datetime_picker.js | 2 +- .../vue/shared/date_time_picker.vue | 84 ++++++++++------- app/views/layouts/application.html.erb | 2 +- .../_module_header_due_date.html.erb | 4 +- .../_module_header_start_date.html.erb | 4 +- public/images/calendar/calendar.svg | 9 ++ public/images/calendar/navigate_before.svg | 3 + public/images/calendar/navigate_next.svg | 3 + 11 files changed, 160 insertions(+), 49 deletions(-) create mode 100644 public/images/calendar/calendar.svg create mode 100644 public/images/calendar/navigate_before.svg create mode 100644 public/images/calendar/navigate_next.svg diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js index aa7369781..dcd6e2b1a 100644 --- a/app/assets/javascripts/my_modules.js +++ b/app/assets/javascripts/my_modules.js @@ -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(); diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 6e5095245..266799e51 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -248,6 +248,10 @@ top: 0; width: 100%; + .dp__input_wrap { + opacity: 0; + } + #calendarDueDate { opacity: 0; } diff --git a/app/assets/stylesheets/shared/datetime_picker.scss b/app/assets/stylesheets/shared/datetime_picker.scss index bd87f19f7..847ded07f 100644 --- a/app/assets/stylesheets/shared/datetime_picker.scss +++ b/app/assets/stylesheets/shared/datetime_picker.scss @@ -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*/ diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js index 3da60fcbd..369a5a919 100644 --- a/app/javascript/packs/vue/legacy/datetime_picker.js +++ b/app/javascript/packs/vue/legacy/datetime_picker.js @@ -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) { diff --git a/app/javascript/vue/shared/date_time_picker.vue b/app/javascript/vue/shared/date_time_picker.vue index 3fe9f5e9b..d2df89bc4 100644 --- a/app/javascript/vue/shared/date_time_picker.vue +++ b/app/javascript/vue/shared/date_time_picker.vue @@ -1,34 +1,29 @@ @@ -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' - }, + } } } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 24fa032b6..cbd79b660 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -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'] %> diff --git a/app/views/my_modules/_module_header_due_date.html.erb b/app/views/my_modules/_module_header_due_date.html.erb index f3e347cca..cd152986f 100644 --- a/app/views/my_modules/_module_header_due_date.html.erb +++ b/app/views/my_modules/_module_header_due_date.html.erb @@ -6,9 +6,9 @@ <% if due_date_editable %>
-
+
- +
diff --git a/app/views/my_modules/_module_header_start_date.html.erb b/app/views/my_modules/_module_header_start_date.html.erb index 73596b1b7..290582292 100644 --- a/app/views/my_modules/_module_header_start_date.html.erb +++ b/app/views/my_modules/_module_header_start_date.html.erb @@ -6,9 +6,9 @@ <% if start_date_editable %>
-
+
- +
diff --git a/public/images/calendar/calendar.svg b/public/images/calendar/calendar.svg new file mode 100644 index 000000000..60a23d753 --- /dev/null +++ b/public/images/calendar/calendar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/calendar/navigate_before.svg b/public/images/calendar/navigate_before.svg new file mode 100644 index 000000000..a5c3025b0 --- /dev/null +++ b/public/images/calendar/navigate_before.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/calendar/navigate_next.svg b/public/images/calendar/navigate_next.svg new file mode 100644 index 000000000..719b44075 --- /dev/null +++ b/public/images/calendar/navigate_next.svg @@ -0,0 +1,3 @@ + + +