diff --git a/modules/backend/formwidgets/TagList.php b/modules/backend/formwidgets/TagList.php index 88e62d645..5d1e51b28 100644 --- a/modules/backend/formwidgets/TagList.php +++ b/modules/backend/formwidgets/TagList.php @@ -47,6 +47,11 @@ class TagList extends FormWidgetBase */ public $useKey = false; + /** + * @var string Placeholder for empty TagList widget + */ + public $placeholder = ''; + // // Object properties // @@ -68,6 +73,7 @@ class TagList extends FormWidgetBase 'mode', 'nameFrom', 'useKey', + 'placeholder' ]); } @@ -86,6 +92,7 @@ class TagList extends FormWidgetBase */ public function prepareVars() { + $this->vars['placeholder'] = $this->placeholder; $this->vars['useKey'] = $this->useKey; $this->vars['field'] = $this->formField; $this->vars['fieldOptions'] = $this->getFieldOptions(); diff --git a/modules/backend/formwidgets/taglist/partials/_taglist.htm b/modules/backend/formwidgets/taglist/partials/_taglist.htm index c34a6f443..2e491c6dc 100644 --- a/modules/backend/formwidgets/taglist/partials/_taglist.htm +++ b/modules/backend/formwidgets/taglist/partials/_taglist.htm @@ -7,7 +7,8 @@ id="getId() ?>" name="getName() ?>[]" class="form-control custom-select select-hide-selected" - data-token-separators="" + data-token-separators="" + data-placeholder="" multiple getAttributes() ?>> $option): ?> diff --git a/modules/system/assets/ui/less/select.less b/modules/system/assets/ui/less/select.less index cfbeb6fd1..fe595434a 100644 --- a/modules/system/assets/ui/less/select.less +++ b/modules/system/assets/ui/less/select.less @@ -320,14 +320,14 @@ // Make Multi Select2's choices match default button styles. // .select2-selection__choice { - color: @input-color; + color: @color-select-text; background: @color-select-choice-bg; border: 1px solid @color-select-choice-border; border-radius: 4px; cursor: default; float: left; - margin: (@padding-base-vertical - 1) 0 0 @padding-base-horizontal/2; - padding: 0 @padding-base-vertical; + margin: (@padding-base-vertical - 2) 0 0 @padding-base-horizontal/2; + padding: 0 (@padding-base-vertical - 2); } // @@ -349,7 +349,9 @@ cursor: pointer; display: inline-block; font-weight: bold; - margin-right: @padding-base-vertical / 2; + font-size: 1.2em; + float: right; + margin: -2px 0 1px 8px; &:hover { color: #333; @@ -396,8 +398,8 @@ .select2-selection__choice { font-size: @font-size-small; line-height: @line-height-small; - margin: (@padding-small-vertical - 1) 0 0 @padding-small-horizontal/2; - padding: 0 @padding-small-vertical; + margin: (@padding-small-vertical - 2) 0 0 @padding-small-horizontal/2; + padding: 0 (@padding-small-vertical - 2); } .select2-search--inline .select2-search__field { diff --git a/modules/system/assets/ui/less/select.variables.less b/modules/system/assets/ui/less/select.variables.less index 410f9360e..552fef689 100644 --- a/modules/system/assets/ui/less/select.variables.less +++ b/modules/system/assets/ui/less/select.variables.less @@ -12,8 +12,9 @@ @color-select-active-bg: #4da7e8; @color-select-header: @gray-light; @color-select-link-disabled: @gray-light; -@color-select-choice-bg: #fff; -@color-select-choice-border: #ccc; +@color-select-choice-bg: #fff; +@color-select-choice-border: #ccc; +@color-select-text: #515c5d; @select-box-shadow: 0 3px 6px rgba(0,0,0,.075); @select-box-shadow-above: 0 -3px 6px rgba(0,0,0,.075);