diff --git a/client/src/ui/select.js b/client/src/ui/select.js index 08a9a29049..43b17fed33 100644 --- a/client/src/ui/select.js +++ b/client/src/ui/select.js @@ -42,8 +42,6 @@ import Selectize from 'lib!selectize'; * @property {'value'|'text'|'$order'|'$score'} [sortBy='$order'] Item sorting. * @property {'asc'|'desc'} [sortDirection='asc'] Sort direction. * @property {function()} [onFocus] On-focus callback. - * @property {boolean} [requestAnimationFrame] If many elements rendered on the same form, it significantly - * boosts rendering performance. */ /** @@ -121,7 +119,6 @@ const Select = { allowEmptyOption: allowedValues.includes(''), showEmptyOptionInDropdown: true, $relativeParent: $relativeParent, - requestAnimationFrame: options.requestAnimationFrame, render: { item: function (data) { return $('
') diff --git a/client/src/views/fields/enum.js b/client/src/views/fields/enum.js index e42748c736..7e36805cef 100644 --- a/client/src/views/fields/enum.js +++ b/client/src/views/fields/enum.js @@ -101,7 +101,7 @@ class EnumFieldView extends BaseFieldView { * @protected * @type {boolean} */ - requestAnimationFrame = false + nativeSelect = false; // noinspection JSCheckFunctionSignatures /** @inheritDoc */ @@ -428,10 +428,9 @@ class EnumFieldView extends BaseFieldView { this.$element.on('change', () => this.trigger('change')); } - if (this.isEditMode() || this.isSearchMode()) { + if ((this.isEditMode() || this.isSearchMode()) && !this.nativeSelect) { Select.init(this.$element, { matchAnyWord: true, - requestAnimationFrame: this.requestAnimationFrame, }); } } diff --git a/client/src/views/role/record/table.js b/client/src/views/role/record/table.js index 59aebc4b13..d86c64c483 100644 --- a/client/src/views/role/record/table.js +++ b/client/src/views/role/record/table.js @@ -1216,7 +1216,7 @@ class RoleRecordTableView extends View { class CustomEnumFieldView extends EnumFieldView { - requestAnimationFrame = true + nativeSelect = true } export default RoleRecordTableView; diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less index 8408cc6ac9..456a38d903 100644 --- a/frontend/less/espo/elements/dropdown.less +++ b/frontend/less/espo/elements/dropdown.less @@ -36,7 +36,8 @@ .selectize-dropdown, .selectize-dropdown.form-control, .autocomplete-suggestions, -.ui-timepicker-wrapper { +.ui-timepicker-wrapper, +select.form-control::picker(select) { border: var(--dropdown-border-width) solid var(--dropdown-border); box-shadow: var(--dropdown-box-shadow); border-radius: var(--dropdown-border-radius); diff --git a/frontend/less/espo/elements/form.less b/frontend/less/espo/elements/form.less index a224138151..916890d3f7 100644 --- a/frontend/less/espo/elements/form.less +++ b/frontend/less/espo/elements/form.less @@ -510,6 +510,78 @@ input[type="radio"].form-radio { user-select: none; } +select.form-control { + &, &::picker(select) { + appearance: base-select; + } + + &:open { + border-color: var(--input-border-focus); + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--input-border-focus-rgba)"); + } + + &::picker(select) { + } + + option { + padding: var(--3px) var(--padding-base-horizontal); + + &:first-child { + margin-top: var(--4px); + } + + &:last-child { + margin-bottom: var(--4px); + } + + &:focus-visible { + outline: var(--1px) solid var(--input-border-focus-rgba); + //outline-offset: var(--minus-1px); + } + + &:hover { + background-color: var(--dropdown-link-hover-bg); + } + } + + &::picker-icon { + color: var(--text-muted-color); + display: inline-block; + width: 0; + height: 0; + top: var(--16px); + right: var(--8px); + margin-left: var(--2px); + vertical-align: middle; + border-top: var(--4px) dashed; + border-right: var(--4px) solid transparent; + border-left: var(--4px) solid transparent; + position: absolute; + content: ' '; + } + + &:has(option.text-success:checked) { + color: var(--state-success-text); + } + + &:has(option.text-warning:checked) { + color: var(--state-warning-text); + } + + &:has(option.text-danger:checked) { + color: var(--state-danger-text); + } + + &:has(option.text-info:checked) { + color: var(--state-info-text); + } + + &:has(option.text-primary:checked) { + color: var(--state-primary-text); + } +} + /* .link-container { a[data-action="clearLink"] {