TPS/birzha
TPS
/
birzha
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for placeholder in TagList widgets (#3453) 

Credit to @GinoPane.
This commit is contained in:
Siarhei Karavai 2018-11-15 22:32:59 +03:00 committed by Luke Towers
parent 8ae863f5e7
commit ff8b967b75
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/backend/formwidgets/TagList.php
View File

@ -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();

3
modules/backend/formwidgets/taglist/partials/_taglist.htm
View File

@ -7,7 +7,8 @@
id="<?= $field->getId() ?>"
name="<?= $field->getName() ?>[]"
class="form-control custom-select <?= !count($fieldOptions) ? 'select-no-dropdown' : '' ?> select-hide-selected"
<?php if ($customSeparators): ?>data-token-separators="<?= $customSeparators ?>"<?php endif ?>
<?php if (!empty($customSeparators)): ?>data-token-separators="<?= $customSeparators ?>"<?php endif ?>
<?php if (!empty($placeholder)): ?>data-placeholder="<?= e(trans($placeholder)) ?>"<?php endif ?>
multiple
<?= $field->getAttributes() ?>>
<?php foreach ($availableOptions as $key => $option): ?>

14
modules/system/assets/ui/less/select.less
View File

@ -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 {

5
modules/system/assets/ui/less/select.variables.less
View File

@ -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);