mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Add preview mode for taglist widget (#4349)

Browse Source 
Credit to @Rike-cz.
This commit is contained in:
Rike-cz 2019-06-19 02:22:36 +02:00 committed by Ben Thomson
parent f4e50ddd1a
commit acf4577255
5 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,20 +3,37 @@
$availableOptions = $useKey ? $fieldOptions : array_unique(array_merge($selectedValues, $fieldOptions));
?>
<!-- Tag List -->
<select
id="<?= $field->getId() ?>"
name="<?= $field->getName() ?>[]"
class="form-control custom-select <?= !count($fieldOptions) ? 'select-no-dropdown' : '' ?> select-hide-selected"
<?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): ?>
<?php if (!strlen($option)) continue ?>
<?php if ($useKey): ?>
<option value="<?= e($key) ?>" <?= in_array($key, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
<?php else: ?>
<option value="<?= e($option) ?>" <?= in_array($option, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
<?php endif ?>
<?php endforeach ?>
</select>
<?php if ($this->previewMode || $field->readOnly || $field->disabled): ?>
<ul class="form-control taglist--preview" <?= $field->readOnly || $field->disabled ? 'disabled="disabled"' : ''; ?>>
<?php foreach ($availableOptions as $key => $option): ?>
<?php if (!strlen($option)) continue ?>
<?php if (($useKey && in_array($key, $selectedValues)) || (!$useKey && in_array($option, $selectedValues))): ?>
<li class="taglist__item"><?= e(trans($option)) ?></li>
<?php endif ?>
<?php endforeach ?>
</ul>
<?php if ($field->readOnly): ?>
<input
type="hidden"
name="<?= $field->getName() ?>"
value="<?= $field->value ?>">
<?php endif ?>
<?php else: ?>
<select
id="<?= $field->getId() ?>"
name="<?= $field->getName() ?>[]"
class="form-control custom-select <?= !count($fieldOptions) ? 'select-no-dropdown' : '' ?> select-hide-selected"
<?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): ?>
<?php if (!strlen($option)) continue ?>
<?php if ($useKey): ?>
<option value="<?= e($key) ?>" <?= in_array($key, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
<?php else: ?>
<option value="<?= e($option) ?>" <?= in_array($option, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
<?php endif ?>
<?php endforeach ?>
</select>
<?php endif ?>

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

@ -588,4 +588,4 @@
.form-inline .select2-container--default {
display: inline-block;
}
}

28
modules/system/assets/ui/less/taglist.less Normal file
View File

@ -0,0 +1,28 @@
//
// Dependencies
// --------------------------------------------------
@import "global.variables.less";
@import "select.variables.less";
// Taglist preview mode
//------------------------------------
.taglist--preview {
overflow: hidden;
list-style-type: none;
padding-top: 0; padding-left: 0;
margin: 0;
.taglist__item {
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 0 0 @padding-base-horizontal/2;
padding: 0 (@padding-base-vertical - 2);
}
}

2
modules/system/assets/ui/storm.css
View File

@ -4877,6 +4877,8 @@ ul.autocomplete.dropdown-menu.inspector-autocomplete li a {padding:5px 12px;whit
@-moz-keyframes popup-shake {10%,90% {-moz-transform:translate3d(-1px,0,0) }20%,80% {-moz-transform:translate3d(2px,0,0) }30%,50%,70% {-moz-transform:translate3d(-4px,0,0) }40%,60% {-moz-transform:translate3d(4px,0,0) }}
@-webkit-keyframes popup-shake {10%,90% {-webkit-transform:translate3d(-1px,0,0) }20%,80% {-webkit-transform:translate3d(2px,0,0) }30%,50%,70% {-webkit-transform:translate3d(-4px,0,0) }40%,60% {-webkit-transform:translate3d(4px,0,0) }}
@keyframes popup-shake {10%,90% {transform:translate3d(-1px,0,0) }20%,80% {transform:translate3d(2px,0,0) }30%,50%,70% {transform:translate3d(-4px,0,0) }40%,60% {transform:translate3d(4px,0,0) }}
.taglist--preview {overflow:hidden;list-style-type:none;padding-top:0;padding-left:0;margin:0}
.taglist--preview .taglist__item {color:#515c5d;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:default;float:left;margin:8px 0 0 6.5px;padding:0 6px}
.pika-single {display:block;position:relative;width:240px;padding:8px;color:#333;background:#fff}
.pika-single.is-hidden {display:none}
.pika-single.is-bound {position:absolute;box-shadow:0 5px 15px -5px rgba(0,0,0,0.5)}

3
modules/system/assets/ui/storm.less
View File

@ -1,5 +1,5 @@
/*
__ _____ __ __ __ __ _____ __ __
__ _____ __ __ __ __ _____ __ __
/ \/ | / \|__)|_ |__) (_ | / \|__)|\/|
\__/\__ | \__/|__)|__| \ __) | \__/| \ | |
@ -31,4 +31,5 @@
@import "less/popup.less";
@import "less/checkbox.less";
@import "less/select.less";
@import "less/taglist.less";
@import "less/datepicker.less";