From fc899e19cbe3ef8ad934b377480f2b6439c30038 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 16 Sep 2020 14:10:03 -0400 Subject: [PATCH] feat(editors): add Clear Date button to Date Editor --- .../editors/__tests__/dateEditor.spec.ts | 4 +- .../angular-slickgrid/editors/dateEditor.ts | 48 ++- .../styles/_variables-theme-material.scss | 270 ++++++++------- .../styles/_variables-theme-salesforce.scss | 326 +++++++++--------- .../angular-slickgrid/styles/_variables.scss | 12 +- .../styles/slick-editors.scss | 44 ++- 6 files changed, 392 insertions(+), 312 deletions(-) diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts index 4a1091701..b6d5016e7 100644 --- a/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts +++ b/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts @@ -205,7 +205,7 @@ describe('DateEditor', () => { editor = new DateEditor(editorArguments); editor.loadValue(mockItemData); editor.focus(); - const editorInputElm = divContainer.querySelector('input.flatpickr'); + const editorInputElm = divContainer.querySelector('.flatpickr input'); editorInputElm.value = '2024-04-02T16:02:02.239Z'; editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); @@ -396,7 +396,7 @@ describe('DateEditor', () => { editor = new DateEditor(editorArguments); editor.loadValue(mockItemData); editor.flatInstance.toggle(); - const editorInputElm = divContainer.querySelector('input.flatpickr'); + const editorInputElm = divContainer.querySelector('.flatpickr input'); expect(editor.pickerOptions).toBeTruthy(); expect(editorInputElm.value).toBe(''); diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts index dd9d44215..33277bef4 100644 --- a/src/app/modules/angular-slickgrid/editors/dateEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/dateEditor.ts @@ -1,4 +1,11 @@ import { TranslateService } from '@ngx-translate/core'; +import * as moment_ from 'moment-mini'; +import { BaseOptions as FlatpickrBaseOptions } from 'flatpickr/dist/types/options'; +import * as _flatpickr from 'flatpickr'; +import { FlatpickrFn } from 'flatpickr/dist/types/instance'; +const flatpickr: FlatpickrFn = _flatpickr as any; // patch for rollup +const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670 + import { Constants } from './../constants'; import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, setDeepValue, getDescendantProperty } from './../services/utilities'; import { @@ -12,8 +19,6 @@ import { FlatpickrOption, GridOption, } from './../models/index'; -import * as moment_ from 'moment-mini'; -const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670 declare function require(name: string); require('flatpickr'); @@ -28,6 +33,8 @@ declare const $: any; export class DateEditor implements Editor { private _$inputWithData: any; private _$input: any; + private _$editorInputElm: any; + private _originalDate: string; private _pickerMergedOptions: FlatpickrOption; /** The translate library */ @@ -109,6 +116,7 @@ export class DateEditor implements Editor { altFormat: outputFormat, dateFormat: inputFormat, closeOnSelect: true, + wrap: true, locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en', onChange: () => this.save(), errorHandler: () => { @@ -118,14 +126,26 @@ export class DateEditor implements Editor { // merge options with optional user's custom options this._pickerMergedOptions = { ...pickerOptions, ...(this.editorOptions as FlatpickrOption) }; - const inputCssClasses = `.editor-text.editor-${columnId}.flatpickr`; + const inputCssClasses = `.editor-text.editor-${columnId}.form-control`; if (this._pickerMergedOptions.altInput) { - this._pickerMergedOptions.altInputClass = 'flatpickr-alt-input editor-text'; + this._pickerMergedOptions.altInputClass = 'flatpickr-alt-input form-control'; + } + + this._$editorInputElm = $(`
`); + const closeButtonElm = $(` + + `); + this._$input = $(``); + this._$input.appendTo(this._$editorInputElm); + + // show clear date button (unless user specifically doesn't want it) + const isCloseButtonHidden = this.columnEditor && this.columnEditor.params && this.columnEditor.params.hideClearButton || false; + if (!isCloseButtonHidden) { + closeButtonElm.appendTo(this._$editorInputElm); } - this._$input = $(``); - this._$input.appendTo(this.args.container); - this.flatInstance = (this._$input[0] && typeof this._$input[0].flatpickr === 'function') ? this._$input[0].flatpickr(this._pickerMergedOptions) : null; + this._$editorInputElm.appendTo(this.args.container); + this.flatInstance = (flatpickr && this._$editorInputElm[0] && typeof this._$editorInputElm[0].flatpickr === 'function') ? this._$editorInputElm[0].flatpickr(this._pickerMergedOptions) : flatpickr(this._$editorInputElm, this._pickerMergedOptions as unknown as Partial); // when we're using an alternate input to display data, we'll consider this input as the one to do the focus later on // else just use the top one @@ -141,6 +161,9 @@ export class DateEditor implements Editor { destroy() { this.hide(); this._$input.remove(); + if (this._$editorInputElm && this._$editorInputElm.remove) { + this._$editorInputElm.remove(); + } if (this._$inputWithData && typeof this._$inputWithData.remove === 'function') { this._$inputWithData.remove(); } @@ -196,17 +219,18 @@ export class DateEditor implements Editor { } } - isValueChanged() { + isValueChanged(): boolean { const elmValue = this._$input.val(); const inputFormat = mapMomentDateFormatWithFieldType(this.columnEditor.type || (this.columnDef && this.columnDef.type) || FieldType.dateIso); const outputTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.outputType || this.columnEditor.type || this.columnDef.type)) || FieldType.dateUtc); const elmDateStr = elmValue ? moment(elmValue, inputFormat, false).format(outputTypeFormat) : ''; - const orgDateStr = this.originalDate ? moment(this.originalDate, inputFormat, false).format(outputTypeFormat) : ''; + const orgDateStr = this._originalDate ? moment(this._originalDate, inputFormat, false).format(outputTypeFormat) : ''; if (elmDateStr === 'Invalid date' || orgDateStr === 'Invalid date') { return false; } - return (!(elmDateStr === '' && orgDateStr === '')) && (elmDateStr !== orgDateStr); + const isChanged = (!(elmDateStr === '' && orgDateStr === '')) && (elmDateStr !== orgDateStr); + return isChanged; } loadValue(item: any) { @@ -217,10 +241,8 @@ export class DateEditor implements Editor { const isComplexObject = fieldName && fieldName.indexOf('.') > 0; const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName]; - this.originalDate = value; + this._originalDate = value; this.flatInstance.setDate(value); - this.show(); - this.focus(); } } diff --git a/src/app/modules/angular-slickgrid/styles/_variables-theme-material.scss b/src/app/modules/angular-slickgrid/styles/_variables-theme-material.scss index 1c8bddb26..403b272c3 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables-theme-material.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables-theme-material.scss @@ -6,134 +6,142 @@ * - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) */ -$primary-color: #009530 !default; -$font-family: Roboto, "Helvetica Neue", sans-serif !default; -$font-size-base-value: 14 !default; -$icon-color: #3f3e3e !default; -$icon-font-family: "Material Design Icons" !default; -$icon-font-size: 18px !default; -$icon-width: 18px !default; -$group-totals-formatter-color: #666666 !default; -$cell-border-top: none !default; -$cell-font-weight: 400 !default; -$cell-padding-top-bottom: 8px !default; -$cell-padding-right-left: 7px !default; -$cell-odd-background-color: #f5f5f5 !default; -$cell-text-color: rgba(0, 0, 0, 0.87) !default; -$header-row-filter-padding: 8px 4px !default; -$header-font-size: 12px !default; -$header-font-weight: 700 !default; -$header-text-color: rgba(0, 0, 0, 0.87) !default; -$header-border-bottom: transparent !default; -$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; -$header-resizable-hover: 2px solid lighten(#48c774, 15%) !default; -$header-resizable-hover-border-bottom: $header-resizable-hover !default; -$header-resizable-hover-border-left: $header-resizable-hover !default; -$header-resizable-hover-border-right: $header-resizable-hover !default; -$header-resizable-hover-border-top: $header-resizable-hover !default; -$header-resizable-hover-width: 4px !default; -$header-resizable-hover-border-radius: 8px !default; -$header-resizable-hover-right: 0 !default; -$header-resizable-hover-opacity: 0.4 !default; -$slick-pane-top-border-top: 1px solid #d0d0d0 !default; -$container-border-top: 1px solid #ccc !default; -$container-border-bottom: 1px solid #ccc !default; -$container-border-left: 1px solid #ccc !default; -$container-border-right: 1px solid #ccc !default; -$icon-sort-color: $primary-color !default; -$icon-sort-asc: url('data:image/svg+xml,') !default; -$icon-sort-desc: url('data:image/svg+xml,') !default; -$icon-sort-font-size: $icon-width !default; -$icon-sort-position-right: 14px !default; -$icon-sort-width: $icon-width !default; -$checkbox-selector-size: 22px !default; -$checkbox-selector-color: $primary-color !default; -$checkbox-selector-icon-width: $checkbox-selector-size !default; -$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$checkbox-selector-opacity: 1 !default; -$checkbox-selector-opacity-hover: 0.9 !default; -$column-picker-checkbox-color: $primary-color !default; -$column-picker-checkbox-size: $icon-width !default; -$column-picker-checkbox-font-weight: normal !default; -$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$column-picker-checkbox-width: $icon-width !default; -$column-picker-close-btn-font-size: 23px !default; -$column-picker-title-font-size: 18px !default; -$cell-menu-close-btn-margin: -4px 1px 1px 1px !default; -$cell-menu-icon-margin-right: 6px !default; -$cell-menu-title-font-size: 18px !default; -$context-menu-item-font-size: 16px !default; -$context-menu-icon-font-size: $icon-width !default; -$icon-group-width: 22px !default; -$icon-group-color: $primary-color !default; -$icon-group-collapsed: url('data:image/svg+xml,') !default; -$icon-group-expanded: url('data:image/svg+xml,') !default; -$icon-group-font-weight: normal !default; -$icon-group-margin-right: 0 !default; -$draggable-group-drop-width: 100% !default; -$draggable-group-drop-radius: 0 !default; -$draggable-group-delete-vertical-align: middle !default; -$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; -$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; -$draggable-group-title-height: 24px !default; -$draggable-group-title-line-height: 24px !default; -$draggable-group-title-vertical-align: top !default; -$grid-menu-checkbox-size: $column-picker-checkbox-width !default; -$grid-menu-checkbox-font-weight: normal !default; -$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-width: $column-picker-checkbox-width !default; -$grid-menu-icon-font-size: $icon-width !default; -$grid-menu-icon-width: $icon-width !default; -$grid-menu-icon-top-margin: 8px !default; -$grid-menu-title-font-size: 18px !default; -$header-menu-button-icon-font-size: 24px !default; -$header-menu-button-icon-width: 24px !default; -$header-menu-button-icon-color: $icon-color !default; -$header-menu-button-icon: url('data:image/svg+xml,') !default; -$header-menu-button-margin-right: 8px !default; -$header-menu-display: inline-block !default; -$header-menu-icon-margin-right: 6px !default; -$header-menu-icon-font-size: $icon-width !default; -$header-menu-icon-width: $icon-width !default; -$autocomplete-loading-icon-color: $icon-color !default; -$autocomplete-loading-icon: url('data:image/svg+xml,') !default; -$autocomplete-loading-icon-width: 22px !default; -$autocomplete-loading-icon-margin-left: -26px !default; -$autocomplete-loading-icon-line-height: 0px !default; -$autocomplete-loading-icon-vertical-align: sub !default; -$multiselect-icon-arrow-font-size: 16px !default; -$multiselect-icon-color: $primary-color !default; -$multiselect-icon-height: 16px !default; -$multiselect-icon-width: 16px !default; -$multiselect-icon-margin: 0px 4px 0 0 !default; -$multiselect-icon-checked: $checkbox-selector-icon-checked !default; -$multiselect-icon-unchecked: $checkbox-selector-icon-unchecked !default; -$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; -$multiselect-unchecked-opacity: 0.8 !default; -$preheader-border-right: 1px solid #e2e2e2 !default; -$row-move-plugin-cursor: grab !default; -$row-move-plugin-icon-color: $icon-color !default; -$row-move-plugin-icon: url('data:image/svg+xml,') !default; -$slider-editor-height: 26px !default; -$row-mouse-hover-color: #ebfaef !default; -$row-selected-color: #d4f6d7 !default; -$detail-view-icon-collapse-color: $primary-color !default; -$detail-view-icon-expand-color: $primary-color !default; -$detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$detail-view-icon-expand: url('data:image/svg+xml,') !default; -$pagination-icon-color: $primary-color !default; -$pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$pagination-icon-seek-first-width: $icon-width !default; -$pagination-icon-seek-prev-width: $icon-width !default; -$pagination-icon-seek-next-width: $icon-width !default; -$pagination-icon-seek-end-width: $icon-width !default; -$pagination-button-padding: 6px 9px !default; -$pagination-button-border-radius: 2px !default; -$pagination-page-input-border-radius: 3px !default; +$primary-color: #009530 !default; +$font-family: Roboto, "Helvetica Neue", sans-serif !default; +$font-size-base-value: 14 !default; +$icon-color: #3f3e3e !default; +$icon-font-family: "Material Design Icons" !default; +$icon-font-size: 18px !default; +$icon-width: 18px !default; +$group-totals-formatter-color: #666666 !default; +$cell-border-top: none !default; +$cell-font-weight: 400 !default; +$cell-padding-top-bottom: 8px !default; +$cell-padding-right-left: 7px !default; +$cell-odd-background-color: #f5f5f5 !default; +$cell-text-color: rgba(0, 0, 0, 0.87) !default; +$header-row-filter-padding: 8px 4px !default; +$header-font-size: 12px !default; +$header-font-weight: 700 !default; +$header-text-color: rgba(0, 0, 0, 0.87) !default; +$header-border-bottom: transparent !default; +$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; +$header-resizable-hover: 2px solid lighten(#48c774, 15%) !default; +$header-resizable-hover-border-bottom: $header-resizable-hover !default; +$header-resizable-hover-border-left: $header-resizable-hover !default; +$header-resizable-hover-border-right: $header-resizable-hover !default; +$header-resizable-hover-border-top: $header-resizable-hover !default; +$header-resizable-hover-width: 4px !default; +$header-resizable-hover-border-radius: 8px !default; +$header-resizable-hover-right: 0 !default; +$header-resizable-hover-opacity: 0.4 !default; +$slick-pane-top-border-top: 1px solid #d0d0d0 !default; +$container-border-top: 1px solid #ccc !default; +$container-border-bottom: 1px solid #ccc !default; +$container-border-left: 1px solid #ccc !default; +$container-border-right: 1px solid #ccc !default; +$icon-sort-color: $primary-color !default; +$icon-sort-asc: url('data:image/svg+xml,') !default; +$icon-sort-desc: url('data:image/svg+xml,') !default; +$icon-sort-font-size: $icon-width !default; +$icon-sort-position-right: 14px !default; +$icon-sort-width: $icon-width !default; +$checkbox-selector-size: 22px !default; +$checkbox-selector-color: $primary-color !default; +$checkbox-selector-icon-width: $checkbox-selector-size !default; +$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; +$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; +$checkbox-selector-opacity: 1 !default; +$checkbox-selector-opacity-hover: 0.9 !default; +$column-picker-checkbox-color: $primary-color !default; +$column-picker-checkbox-size: $icon-width !default; +$column-picker-checkbox-font-weight: normal !default; +$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; +$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$column-picker-checkbox-width: $icon-width !default; +$column-picker-close-btn-font-size: 23px !default; +$column-picker-title-font-size: 18px !default; +$cell-menu-close-btn-margin: -4px 1px 1px 1px !default; +$cell-menu-icon-margin-right: 6px !default; +$cell-menu-title-font-size: 18px !default; +$context-menu-item-font-size: 16px !default; +$context-menu-icon-font-size: $icon-width !default; +$icon-group-width: 22px !default; +$icon-group-color: $primary-color !default; +$icon-group-collapsed: url('data:image/svg+xml,') !default; +$icon-group-expanded: url('data:image/svg+xml,') !default; +$icon-group-font-weight: normal !default; +$icon-group-margin-right: 0 !default; +$draggable-group-drop-width: 100% !default; +$draggable-group-drop-radius: 0 !default; +$draggable-group-delete-vertical-align: middle !default; +$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; +$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; +$draggable-group-title-height: 24px !default; +$draggable-group-title-line-height: 24px !default; +$draggable-group-title-vertical-align: top !default; +$grid-menu-checkbox-size: $column-picker-checkbox-width !default; +$grid-menu-checkbox-font-weight: normal !default; +$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-width: $column-picker-checkbox-width !default; +$grid-menu-icon-font-size: $icon-width !default; +$grid-menu-icon-width: $icon-width !default; +$grid-menu-icon-top-margin: 8px !default; +$grid-menu-title-font-size: 18px !default; +$header-menu-button-icon-font-size: 24px !default; +$header-menu-button-icon-width: 24px !default; +$header-menu-button-icon-color: $icon-color !default; +$header-menu-button-icon: url('data:image/svg+xml,') !default; +$header-menu-button-margin-right: 8px !default; +$header-menu-display: inline-block !default; +$header-menu-icon-margin-right: 6px !default; +$header-menu-icon-font-size: $icon-width !default; +$header-menu-icon-width: $icon-width !default; +$autocomplete-loading-icon-color: $icon-color !default; +$autocomplete-loading-icon: url('data:image/svg+xml,') !default; +$autocomplete-loading-icon-width: 22px !default; +$autocomplete-loading-icon-margin-left: -26px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: sub !default; +$multiselect-icon-arrow-font-size: 16px !default; +$multiselect-icon-color: $primary-color !default; +$multiselect-icon-height: 16px !default; +$multiselect-icon-width: 16px !default; +$multiselect-icon-margin: 0px 4px 0 0 !default; +$multiselect-icon-checked: $checkbox-selector-icon-checked !default; +$multiselect-icon-unchecked: $checkbox-selector-icon-unchecked !default; +$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; +$multiselect-unchecked-opacity: 0.8 !default; +$preheader-border-right: 1px solid #e2e2e2 !default; +$row-move-plugin-cursor: grab !default; +$row-move-plugin-icon-color: $icon-color !default; +$row-move-plugin-icon: url('data:image/svg+xml,') !default; +$date-editor-clear-button-icon-color: $icon-color !default; +$date-editor-clear-button-icon: url('data:image/svg+xml,') !default; +$date-editor-clear-button-icon-margin-top: unset !default; +$date-editor-clear-button-icon-padding: 1px 6px !default; +$date-editor-clear-button-icon-size: calc(#{$icon-font-size} + 2px) !default; +$date-editor-clear-button-icon-vertical-align: initial !default; +$date-editor-clear-button-icon-height: 14px !default; +$date-editor-clear-button-icon-width: 14px !default; +$slider-editor-height: 26px !default; +$row-mouse-hover-color: #ebfaef !default; +$row-selected-color: #d4f6d7 !default; +$detail-view-icon-collapse-color: $primary-color !default; +$detail-view-icon-expand-color: $primary-color !default; +$detail-view-icon-collapse: url('data:image/svg+xml,') !default; +$detail-view-icon-expand: url('data:image/svg+xml,') !default; +$pagination-icon-color: $primary-color !default; +$pagination-icon-seek-first: url('data:image/svg+xml,') !default; +$pagination-icon-seek-end: url('data:image/svg+xml,') !default; +$pagination-icon-seek-next: url('data:image/svg+xml,') !default; +$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; +$pagination-icon-seek-first-width: $icon-width !default; +$pagination-icon-seek-prev-width: $icon-width !default; +$pagination-icon-seek-next-width: $icon-width !default; +$pagination-icon-seek-end-width: $icon-width !default; +$pagination-button-padding: 6px 9px !default; +$pagination-button-border-radius: 2px !default; +$pagination-page-input-border-radius: 3px !default; diff --git a/src/app/modules/angular-slickgrid/styles/_variables-theme-salesforce.scss b/src/app/modules/angular-slickgrid/styles/_variables-theme-salesforce.scss index 232eb647d..924811154 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables-theme-salesforce.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables-theme-salesforce.scss @@ -7,162 +7,170 @@ * - (colors, extra-styling, material-svg-icons, material-svg-utilities, slick-without-bootstrap-min-styling) */ -$primary-color: #006DCC !default; -$highlight-color: #0070D2 !default; -$bare-color: #b5b5b5 !default; -$icon-color: #514f4d !default; -$font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default; -$cell-active-box-shadow: inset 0 0 0 1px $highlight-color !default; -$cell-border-top: none !default; -$cell-border-bottom: none !default; -$cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default; -$cell-font-weight: 400 !default; -$cell-odd-background-color: #f3f2f2 !default; -$cell-odd-background-color: #ffffff !default; -$cell-text-color: #080707 !default; -$font-size-base-value: 13 !default; -$icon-font-size: 18px !default; -$icon-width: 18px !default; -$frozen-border-right: 2px solid $highlight-color !default; -$group-totals-formatter-color: #666666 !default; -$header-background-color: #fafaf9 !default; -$header-border-bottom: transparent !default; -$header-font-size: 13px !default; -$header-font-weight: 700 !default; -$header-text-color: #514f4d !default; -$header-border-bottom: transparent !default; -$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; -$slick-pane-top-border-top: 1px solid #d0d0d0 !default; -$header-resizable-hover: 2px solid $highlight-color !default; -$header-resizable-hover-border-bottom: $header-resizable-hover !default; -$header-resizable-hover-border-left: $header-resizable-hover !default; -$header-resizable-hover-border-right: $header-resizable-hover !default; -$header-resizable-hover-border-top: $header-resizable-hover !default; -$header-resizable-hover-width: 4px !default; -$header-resizable-hover-border-radius: 8px !default; -$header-resizable-hover-right: 0 !default; -$header-resizable-hover-opacity: 0.5 !default; -$container-border-top: 1px solid #ccc !default; -$container-border-bottom: 1px solid #ccc !default; -$container-border-left: 0px solid #ccc !default; -$container-border-right: 0px solid #ccc !default; -$icon-sort-color: $highlight-color !default; -$icon-sort-asc: url('data:image/svg+xml,') !default; -$icon-sort-desc: url('data:image/svg+xml,') !default; -$icon-sort-font-size: 13px !default; -$icon-sort-width: 13px !default; -$icon-sort-position-right: 12px !default; -$checkbox-selector-checked-color: $highlight-color !default; -$checkbox-selector-unchecked-color: $bare-color !default; -$checkbox-selector-size: 12px !default; -$checkbox-selector-icon-font-weight: normal !default; -$checkbox-selector-icon-height: calc(#{$checkbox-selector-size} + 4px) !default; -$checkbox-selector-icon-width: calc(#{$checkbox-selector-size} + 4px) !default; -$checkbox-selector-icon-margin: 2px 0 0 0 !default; -$checkbox-selector-icon-border: 1px solid #d6d4d4 !default; -$checkbox-selector-icon-border-radius: 0.125rem !default; -$checkbox-selector-icon-bg-color: white !default; -$checkbox-selector-color: $highlight-color !default; -$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; -$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; -$checkbox-selector-opacity: 1 !default; -$checkbox-selector-opacity-hover: 0.9 !default; -$column-picker-checkbox-color: $primary-color !default; -$column-picker-checkbox-size: $icon-width !default; -$column-picker-checkbox-font-weight: normal !default; -$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; -$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$column-picker-checkbox-width: 13px !default; -$column-picker-close-btn-font-size: 23px !default; -$column-picker-title-font-size: 18px !default; -$cell-menu-icon-margin-right: 6px !default; -$cell-menu-close-btn-height: 14px !default; -$cell-menu-close-btn-margin: -4px 1px 1px 1px !default; -$cell-menu-title-font-size: 18px !default; -$context-menu-item-font-size: 16px !default; -$context-menu-icon-font-size: 16px !default; -$context-menu-icon-margin-right: 5px !default; -$icon-group-color: $primary-color !default; -$icon-group-collapsed: url('data:image/svg+xml,') !default; -$icon-group-expanded: url('data:image/svg+xml,') !default; -$icon-group-font-weight: normal !default; -$icon-group-margin-right: 4px !default; -$draggable-group-drop-width: 100% !default; -$draggable-group-drop-radius: 0 !default; -$draggable-group-delete-vertical-align: middle !default; -$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; -$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; -$draggable-group-title-height: 24px !default; -$draggable-group-title-line-height: 24px !default; -$draggable-group-title-vertical-align: top !default; -$grid-menu-checkbox-size: $column-picker-checkbox-width !default; -$grid-menu-checkbox-font-weight: normal !default; -$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; -$grid-menu-checkbox-margin-right: 5px !default; -$grid-menu-checkbox-width: $column-picker-checkbox-width !default; -$grid-menu-icon-font-size: 18px !default; -$grid-menu-icon-width: 18px !default; -$grid-menu-title-font-size: 18px !default; -$header-menu-button-icon-font-size: 26px !default; -$header-menu-button-icon-color: #706e6b !default; -$header-menu-button-icon: url('data:image/svg+xml,') !default; -$header-menu-button-margin-right: 8px !default; -$header-menu-display: inline-block !default; -$header-menu-icon-margin-right: 6px !default; -$header-menu-icon-font-size: $icon-width !default; -$header-menu-icon-width: $icon-width !default; -$autocomplete-loading-icon-color: $icon-color !default; -$autocomplete-loading-icon: url('data:image/svg+xml,') !default; -$autocomplete-loading-icon-width: 22px !default; -$autocomplete-loading-icon-margin-left: -26px !default; -$autocomplete-loading-icon-line-height: 0px !default; -$autocomplete-loading-icon-vertical-align: sub !default; -$multiselect-icon-arrow-font-size: $icon-font-size - 4px !default; -$multiselect-icon-checked-color: $highlight-color !default; -$multiselect-icon-border: 1px solid #d6d4d4 !default; -$multiselect-icon-height: 15px !default; -$multiselect-icon-width: 15px !default; -$multiselect-icon-margin: 0px 4px 2px 0 !default; -$multiselect-icon-border-radius: 0.125rem !default; -$multiselect-icon-unchecked-color: $bare-color !default; -$multiselect-icon-radio-color: $highlight-color !default; -$multiselect-icon-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-unchecked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; -$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; -$multiselect-icon-font-size: 10px !default; -$multiselect-icon-radio-border-radius: 50% !default; -$multiselect-unchecked-opacity: 0.8 !default; -$preheader-border-right: 1px solid #e8e8e8 !default; -$preheader-grouped-title-justify: center !default; -$preheader-font-size: 14px !default; -$preheader-height: 21px !default; -$row-move-plugin-icon-color: $cell-text-color !default; -$row-move-plugin-cursor: grab !default; -$row-move-plugin-icon-width: 18px !default; -$row-move-plugin-icon: url('data:image/svg+xml,') !default; -$editor-focus-box-shadow: 0 0 3px $primary-color !default; -$large-editor-button-border-radius: 2px !default; -$slider-editor-height: 24px !default; -$slider-filter-thumb-color: #3C97DD !default; -$slider-filter-runnable-track-bgcolor: #ECEBEA !default; -$row-selected-color: darken(#f3f2f2, 2%) !default; -$row-mouse-hover-color: #f3f2f2 !default; -$row-mouse-hover-box-shadow: 0 0 0 2px #dddbda !default; -$detail-view-icon-collapse-color: $primary-color !default; -$detail-view-icon-expand-color: $primary-color !default; -$detail-view-icon-collapse: url('data:image/svg+xml,') !default; -$detail-view-icon-expand: url('data:image/svg+xml,') !default; -$pagination-icon-color: $primary-color !default; -$pagination-icon-seek-first: url('data:image/svg+xml,') !default; -$pagination-icon-seek-end: url('data:image/svg+xml,') !default; -$pagination-icon-seek-next: url('data:image/svg+xml,') !default; -$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; -$pagination-icon-seek-first-width: $icon-width !default; -$pagination-icon-seek-prev-width: $icon-width !default; -$pagination-icon-seek-next-width: $icon-width !default; -$pagination-icon-seek-end-width: $icon-width !default; -$pagination-button-padding: 6px 9px !default; -$pagination-button-border-radius: 2px !default; -$pagination-page-input-border-radius: 3px !default; +$primary-color: #006DCC !default; +$highlight-color: #0070D2 !default; +$bare-color: #b5b5b5 !default; +$icon-color: #514f4d !default; +$font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default; +$cell-active-box-shadow: inset 0 0 0 1px $highlight-color !default; +$cell-border-top: none !default; +$cell-border-bottom: none !default; +$cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default; +$cell-font-weight: 400 !default; +$cell-odd-background-color: #f3f2f2 !default; +$cell-odd-background-color: #ffffff !default; +$cell-text-color: #080707 !default; +$font-size-base-value: 13 !default; +$icon-font-size: 18px !default; +$icon-width: 18px !default; +$frozen-border-right: 2px solid $highlight-color !default; +$group-totals-formatter-color: #666666 !default; +$header-background-color: #fafaf9 !default; +$header-border-bottom: transparent !default; +$header-font-size: 13px !default; +$header-font-weight: 700 !default; +$header-text-color: #514f4d !default; +$header-border-bottom: transparent !default; +$header-filter-row-border-bottom: 1px solid #d0d0d0 !default; +$slick-pane-top-border-top: 1px solid #d0d0d0 !default; +$header-resizable-hover: 2px solid $highlight-color !default; +$header-resizable-hover-border-bottom: $header-resizable-hover !default; +$header-resizable-hover-border-left: $header-resizable-hover !default; +$header-resizable-hover-border-right: $header-resizable-hover !default; +$header-resizable-hover-border-top: $header-resizable-hover !default; +$header-resizable-hover-width: 4px !default; +$header-resizable-hover-border-radius: 8px !default; +$header-resizable-hover-right: 0 !default; +$header-resizable-hover-opacity: 0.5 !default; +$container-border-top: 1px solid #ccc !default; +$container-border-bottom: 1px solid #ccc !default; +$container-border-left: 0px solid #ccc !default; +$container-border-right: 0px solid #ccc !default; +$icon-sort-color: $highlight-color !default; +$icon-sort-asc: url('data:image/svg+xml,') !default; +$icon-sort-desc: url('data:image/svg+xml,') !default; +$icon-sort-font-size: 13px !default; +$icon-sort-width: 13px !default; +$icon-sort-position-right: 12px !default; +$checkbox-selector-checked-color: $highlight-color !default; +$checkbox-selector-unchecked-color: $bare-color !default; +$checkbox-selector-size: 12px !default; +$checkbox-selector-icon-font-weight: normal !default; +$checkbox-selector-icon-height: calc(#{$checkbox-selector-size} + 4px) !default; +$checkbox-selector-icon-width: calc(#{$checkbox-selector-size} + 4px) !default; +$checkbox-selector-icon-margin: 2px 0 0 0 !default; +$checkbox-selector-icon-border: 1px solid #d6d4d4 !default; +$checkbox-selector-icon-border-radius: 0.125rem !default; +$checkbox-selector-icon-bg-color: white !default; +$checkbox-selector-color: $highlight-color !default; +$checkbox-selector-icon-checked: url('data:image/svg+xml,') !default; +$checkbox-selector-icon-unchecked: url('data:image/svg+xml,') !default; +$checkbox-selector-opacity: 1 !default; +$checkbox-selector-opacity-hover: 0.9 !default; +$column-picker-checkbox-color: $primary-color !default; +$column-picker-checkbox-size: $icon-width !default; +$column-picker-checkbox-font-weight: normal !default; +$column-picker-checkbox-icon-checked: url('data:image/svg+xml,') !default; +$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$column-picker-checkbox-width: 13px !default; +$column-picker-close-btn-font-size: 23px !default; +$column-picker-title-font-size: 18px !default; +$cell-menu-icon-margin-right: 6px !default; +$cell-menu-close-btn-height: 14px !default; +$cell-menu-close-btn-margin: -4px 1px 1px 1px !default; +$cell-menu-title-font-size: 18px !default; +$context-menu-item-font-size: 16px !default; +$context-menu-icon-font-size: 16px !default; +$context-menu-icon-margin-right: 5px !default; +$icon-group-color: $primary-color !default; +$icon-group-collapsed: url('data:image/svg+xml,') !default; +$icon-group-expanded: url('data:image/svg+xml,') !default; +$icon-group-font-weight: normal !default; +$icon-group-margin-right: 4px !default; +$draggable-group-drop-width: 100% !default; +$draggable-group-drop-radius: 0 !default; +$draggable-group-delete-vertical-align: middle !default; +$draggable-group-toggle-collapsed-icon: $icon-group-collapsed !default; +$draggable-group-toggle-expanded-icon: $icon-group-expanded !default; +$draggable-group-title-height: 24px !default; +$draggable-group-title-line-height: 24px !default; +$draggable-group-title-vertical-align: top !default; +$grid-menu-checkbox-size: $column-picker-checkbox-width !default; +$grid-menu-checkbox-font-weight: normal !default; +$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked !default; +$grid-menu-checkbox-margin-right: 5px !default; +$grid-menu-checkbox-width: $column-picker-checkbox-width !default; +$grid-menu-icon-font-size: 18px !default; +$grid-menu-icon-width: 18px !default; +$grid-menu-title-font-size: 18px !default; +$header-menu-button-icon-font-size: 26px !default; +$header-menu-button-icon-color: #706e6b !default; +$header-menu-button-icon: url('data:image/svg+xml,') !default; +$header-menu-button-margin-right: 8px !default; +$header-menu-display: inline-block !default; +$header-menu-icon-margin-right: 6px !default; +$header-menu-icon-font-size: $icon-width !default; +$header-menu-icon-width: $icon-width !default; +$autocomplete-loading-icon-color: $icon-color !default; +$autocomplete-loading-icon: url('data:image/svg+xml,') !default; +$autocomplete-loading-icon-width: 22px !default; +$autocomplete-loading-icon-margin-left: -26px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: sub !default; +$multiselect-icon-arrow-font-size: $icon-font-size - 4px !default; +$multiselect-icon-checked-color: $highlight-color !default; +$multiselect-icon-border: 1px solid #d6d4d4 !default; +$multiselect-icon-height: 15px !default; +$multiselect-icon-width: 15px !default; +$multiselect-icon-margin: 0px 4px 2px 0 !default; +$multiselect-icon-border-radius: 0.125rem !default; +$multiselect-icon-unchecked-color: $bare-color !default; +$multiselect-icon-radio-color: $highlight-color !default; +$multiselect-icon-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-unchecked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-checked: url('data:image/svg+xml,') !default; +$multiselect-icon-radio-unchecked: url('data:image/svg+xml,') !default; +$multiselect-icon-font-size: 10px !default; +$multiselect-icon-radio-border-radius: 50% !default; +$multiselect-unchecked-opacity: 0.8 !default; +$preheader-border-right: 1px solid #e8e8e8 !default; +$preheader-grouped-title-justify: center !default; +$preheader-font-size: 14px !default; +$preheader-height: 21px !default; +$row-move-plugin-icon-color: $cell-text-color !default; +$row-move-plugin-cursor: grab !default; +$row-move-plugin-icon-width: 18px !default; +$row-move-plugin-icon: url('data:image/svg+xml,') !default; +$date-editor-clear-button-icon-color: $icon-color !default; +$date-editor-clear-button-icon: url('data:image/svg+xml,') !default; +$date-editor-clear-button-icon-margin-top: unset !default; +$date-editor-clear-button-icon-padding: 1px 6px !default; +$date-editor-clear-button-icon-size: calc(#{$icon-font-size} + 2px) !default; +$date-editor-clear-button-icon-vertical-align: initial !default; +$date-editor-clear-button-icon-height: 14px !default; +$date-editor-clear-button-icon-width: 14px !default; +$editor-focus-box-shadow: 0 0 3px $primary-color !default; +$large-editor-button-border-radius: 2px !default; +$slider-editor-height: 24px !default; +$slider-filter-thumb-color: #3C97DD !default; +$slider-filter-runnable-track-bgcolor: #ECEBEA !default; +$row-selected-color: darken(#f3f2f2, 2%) !default; +$row-mouse-hover-color: #f3f2f2 !default; +$row-mouse-hover-box-shadow: 0 0 0 2px #dddbda !default; +$detail-view-icon-collapse-color: $primary-color !default; +$detail-view-icon-expand-color: $primary-color !default; +$detail-view-icon-collapse: url('data:image/svg+xml,') !default; +$detail-view-icon-expand: url('data:image/svg+xml,') !default; +$pagination-icon-color: $primary-color !default; +$pagination-icon-seek-first: url('data:image/svg+xml,') !default; +$pagination-icon-seek-end: url('data:image/svg+xml,') !default; +$pagination-icon-seek-next: url('data:image/svg+xml,') !default; +$pagination-icon-seek-prev: url('data:image/svg+xml, ') !default; +$pagination-icon-seek-first-width: $icon-width !default; +$pagination-icon-seek-prev-width: $icon-width !default; +$pagination-icon-seek-next-width: $icon-width !default; +$pagination-icon-seek-end-width: $icon-width !default; +$pagination-button-padding: 6px 9px !default; +$pagination-button-border-radius: 2px !default; +$pagination-page-input-border-radius: 3px !default; diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss index e85445f33..b1e443d52 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables.scss @@ -485,10 +485,20 @@ $checkbox-selector-opacity-hover: 0.35 !default; /* Editors */ + $editor-input-height: 24px !default; $editor-focus-border-color: lighten($primary-color, 10%) !default; $editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default; + $date-editor-input-padding: 6px 2px !default; $date-editor-focus-border-color: $editor-focus-border-color !default; $date-editor-focus-box-shadow: $editor-focus-box-shadow !default; + $date-editor-height: $editor-input-height !default; + $date-editor-clear-button-icon: "\f00d" !default; + $date-editor-clear-button-icon-margin-top: -14px !default; + $date-editor-clear-button-icon-height: initial !default; + $date-editor-clear-button-icon-padding: 6px !default; + $date-editor-clear-button-icon-size: inherit !default; + $date-editor-clear-button-icon-width: initial !default; + $date-editor-clear-button-icon-vertical-align: middle !default; $large-editor-background-color: #ffffff !default; $large-editor-border: 2px solid #a0a0a0 !default; $large-editor-text-padding: 5px !default; @@ -516,7 +526,7 @@ $text-editor-focus-border-color: $editor-focus-border-color !default; $text-editor-focus-box-shadow: $editor-focus-box-shadow !default; $text-editor-readonly-color: #f0f0f0 !default; - $slider-editor-height: 24px !default; + $slider-editor-height: $editor-input-height !default; $slider-editor-runnable-track-padding: 0 6px !default; $slider-editor-number-padding: 4px 6px !default; $slider-editor-focus-border-color: $editor-focus-border-color !default; diff --git a/src/app/modules/angular-slickgrid/styles/slick-editors.scss b/src/app/modules/angular-slickgrid/styles/slick-editors.scss index c5cdb71c9..a6fb807c7 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-editors.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-editors.scss @@ -42,14 +42,46 @@ } } - .flatpickr-alt-input.editor-text { + .flatpickr.input-group { + .input-group-btn { + .btn { + border-left: 0 !important; + background-color: #eeeeee; + border: 1px solid #cccccc; + padding: $date-editor-clear-button-icon-padding; + border-top-right-radius: $text-editor-border-radius; + border-bottom-right-radius: $text-editor-border-radius; + cursor: pointer; + height: $date-editor-height; + &.icon-close:before { + font-family: $icon-font-family; + font-size: $date-editor-clear-button-icon-size; + content: $date-editor-clear-button-icon; + vertical-align: $date-editor-clear-button-icon-vertical-align; + display: inline-block; + height: $date-editor-clear-button-icon-height; + width: $date-editor-clear-button-icon-width; + margin-top: $date-editor-clear-button-icon-margin-top; + } + } + } + } + .flatpickr-alt-input { cursor: pointer; - background-color: $flatpickr-bgcolor; + height: $date-editor-height; + border-top-left-radius: $text-editor-border-radius !important; + border-bottom-left-radius: $text-editor-border-radius !important; + padding: $date-editor-input-padding; - &:focus { - outline: 0; - border-color: $date-editor-focus-border-color; - box-shadow: $date-editor-focus-box-shadow; + &.editor-text { + cursor: pointer; + background-color: $flatpickr-bgcolor; + + &:focus { + outline: 0; + border-color: $date-editor-focus-border-color; + box-shadow: $date-editor-focus-box-shadow; + } } } }