Skip to content

Commit 754d9c3

Browse files
qzminskiqzminski
committed
Improve backend assets
1 parent 7957703 commit 754d9c3

18 files changed

Lines changed: 183 additions & 94 deletions

‎assets/add--dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/add.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/tags-widget.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,22 @@ application.register('codefog--tags-widget', class extends Controller {
1717

1818
connect() {
1919
this.tomSelect = new TomSelect(this.inputTarget, this.#getOptions())
20-
21-
// TODO: remove items on click
2220
}
2321

2422
disconnect() {
2523
this.tomSelect.destroy()
2624
}
2725

28-
select(event) {
26+
add(event) {
2927
this.tomSelect.addItem(event.target.value)
3028
}
3129

32-
#getOptions() {
33-
let config = {};
34-
35-
try {
36-
config = JSON.parse(this.configValue);
37-
} catch {
38-
console.error(`Could not parse JSON options for Tags widget: ${this.configValue}`);
30+
remove(event) {
31+
this.tomSelect.removeItem(event.target.value)
32+
}
3933

40-
return {};
41-
}
34+
#getOptions() {
35+
const config = this.configValue;
4236

4337
const options = {
4438
delimiter: ',',
@@ -47,6 +41,8 @@ application.register('codefog--tags-widget', class extends Controller {
4741
persist: false,
4842
render: {
4943
option_create: (data, escape) => `<div class="create">${config.addLabel} <strong>${escape(data.input)}</strong>&hellip;</div>`,
44+
item: (data, escape) => `<div>${escape(data.text)}<button type="button" class="cfg-tags-widget__remove" value="${data.value}" aria-label="${config.removeLabel} ${escape(data.text)}" data-action="click->codefog--tags-widget#remove:prevent">${config.removeLabel}</button></div>`,
45+
no_results: (data,escape) => `<div class="no-results">${config.noResultsLabel}</div>`,
5046
}
5147
};
5248

‎assets/tags-widget.scss‎

Lines changed: 145 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,160 @@
1+
$select-border-radius: var(--border-radius);
2+
$select-color-border: var(--form-border);
3+
$select-color-dropdown-item-active-text: #fff;
4+
$select-color-dropdown-item-active: var(--choices-highlighted);
5+
$select-color-dropdown-item-create-text: var(--text);
6+
$select-color-dropdown: var(--choices-bg-color-dropdown, #fff);
7+
$select-color-input: var(--form-bg);
8+
$select-font-size: inherit;
9+
$select-line-height: 13px;
10+
$select-max-height-dropdown: 300px;
11+
$select-padding-dropdown-item-x: 6px;
12+
$select-padding-dropdown-item-y: 3px;
13+
$select-padding-x: 6px;
14+
$select-padding-y: 5px;
15+
16+
@import "~tom-select/dist/scss/tom-select";
17+
118
.cfg-tags-widget {
2-
padding-top: 5px;
3-
position: relative;
4-
z-index: 1;
5-
}
19+
margin-top: 3px;
20+
margin-bottom: 3px;
621

7-
.cfg-tags-widget:has(.selectize-input.input-active.dropdown-active) {
8-
z-index: 2;
9-
}
22+
&__all {
23+
display: flex;
24+
flex-wrap: wrap;
25+
gap: 3px;
26+
margin-bottom: 3px;
27+
}
1028

11-
.cfg-tags-widget-all {
12-
padding: 5px 0 5px 0;
13-
}
29+
&__tag {
30+
display: block;
31+
padding: 5px 10px 5px 25px;
32+
background: var(--form-button) url('./add.svg') no-repeat 6px center;
33+
border: 1px solid var(--form-border);
34+
border-radius: var(--border-radius);
35+
box-sizing: border-box;
36+
font-size: 13px;
37+
cursor: pointer;
38+
transition: background 0.2s ease;
1439

15-
.cfg-tags-widget-all span {
16-
display: inline-block;
17-
margin: 0 4px 5px 0;
18-
padding: 5px 10px;
19-
background: #eaeaea;
20-
border-radius: 3px;
21-
cursor: pointer;
22-
white-space: nowrap;
23-
}
40+
html[data-color-scheme=dark] & {
41+
background-image: url('./add--dark.svg');
42+
}
2443

25-
.cfg-tags-widget-all span:hover {
26-
background: #589b0e !important;
27-
color: #fff;
28-
}
44+
&:hover {
45+
color: inherit;
46+
background-color: var(--form-button-hover);
47+
}
2948

30-
.cfg-tags-widget .selectize-control.multi .selectize-input > div {
31-
margin-right: 7px;
32-
padding: 5px 10px;
33-
background: #eaeaea;
34-
border-radius: 3px;
35-
line-height: 1;
36-
}
49+
&:active {
50+
color: var(--form-button-active);
51+
}
52+
}
3753

38-
.cfg-tags-widget .selectize-control.multi .selectize-input > div:hover {
39-
background: #c33 !important;
40-
color: #fff;
41-
}
54+
&__remove {
55+
position: relative;
56+
display: inline-block;
57+
width: var(--choices-button-dimension, 8px);
58+
margin: 0 calc(var(--choices-button-offset, 8px) * -.5) 0 var(--choices-button-offset, 8px);
59+
padding-bottom: 2px;
60+
padding-left: calc(var(--choices-button-offset, 8px) * 2);
61+
border: 0;
62+
border-left: 1px solid var(--choices-border);
63+
border-radius: var(--choices-button-border-radius, 0);
64+
background-color: transparent;
65+
background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
66+
background-position: center;
67+
background-repeat: no-repeat;
68+
background-size: var(--choices-button-dimension, 8px);
69+
opacity: var(--choices-button-opacity, 0.75);
70+
cursor: pointer;
71+
line-height: var(--choices-button-line-height, 1);
72+
text-indent: -9999px;
73+
appearance: none;
4274

43-
/* Dark scheme */
44-
html[data-color-scheme="dark"] .cfg-tags-widget-all span,
45-
html[data-color-scheme="dark"] .selectize-dropdown-header,
46-
html[data-color-scheme="dark"] .selectize-control.single .selectize-input.input-active {
47-
background: #292c32;
48-
}
75+
html:not([data-color-scheme=dark]) & {
76+
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMjIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==)
77+
}
4978

50-
html[data-color-scheme="dark"] .selectize-input,
51-
html[data-color-scheme="dark"] .selectize-dropdown {
52-
background: #151619;
53-
border-color: #44464b;
54-
}
79+
&:is(:hover, :focus) {
80+
--choices-button-opacity: var(--choices-button-opacity-hover, 1);
81+
}
5582

56-
html[data-color-scheme="dark"] .selectize-input.dropdown-active::before {
57-
background-color: #44464b;
58-
}
83+
&:focus {
84+
box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75)
85+
}
86+
}
5987

60-
html[data-color-scheme="dark"] .selectize-dropdown,
61-
html[data-color-scheme="dark"] .selectize-input,
62-
html[data-color-scheme="dark"] .selectize-input input {
63-
color: var(--text);
64-
}
88+
.ts-wrapper {
89+
&.dropdown-active .ts-control {
90+
border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
91+
}
6592

66-
html[data-color-scheme="dark"] .selectize-dropdown .active {
67-
background: #1b1d21;
68-
color: #fff;
69-
}
93+
&.multi.has-items .ts-control {
94+
padding-left: 3px;
7095

71-
html[data-color-scheme="dark"] .cfg-tags-widget .selectize-control.multi .selectize-input > div {
72-
background: #292c32;
73-
color: var(--text);
74-
}
96+
input {
97+
margin: -3px 4px 0 4px !important;
98+
}
99+
}
100+
101+
.ts-control {
102+
> div {
103+
margin: 0 3px 3px 0;
104+
padding: 1px 5px 1px 6px;
105+
background-color: var(--choices-bg);
106+
border: 1px solid var(--choices-border);
107+
border-radius: 3px;
108+
color: var(--choices-item-color, #fff);
109+
cursor: auto;
110+
}
111+
112+
input {
113+
color: var(--text);
114+
}
115+
}
116+
117+
.create {
118+
padding-left: 25px !important;
119+
background-image: url('./add.svg');
120+
background-repeat: no-repeat;
121+
background-position: 6px center;
122+
123+
&.active,
124+
html[data-color-scheme=dark] & {
125+
background-image: url('./add--dark.svg');
126+
}
127+
}
128+
}
129+
130+
.ts-dropdown {
131+
margin-top: -1px;
132+
border: 1px solid var(--choices-keyline-color, #ddd);
133+
border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
134+
box-shadow: none;
135+
overflow: hidden;
136+
137+
* {
138+
font-size: 13px;
139+
}
140+
141+
.no-results {
142+
color: var(--text);
143+
}
144+
145+
[data-selectable] {
146+
&.option {
147+
color: var(--text);
148+
}
149+
150+
&.active {
151+
color: #fff;
152+
}
75153

76-
html[data-color-scheme="dark"] .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
77-
background: #292c32 !important;
154+
.highlight {
155+
background-color: var(--orange);
156+
color: #fff;
157+
}
158+
}
159+
}
78160
}

‎config/listener.yml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
services:
2-
codefog_tags.listener.insert_tags:
3-
class: Codefog\TagsBundle\EventListener\InsertTagsListener
4-
public: true
2+
_defaults:
3+
autoconfigure: true
4+
5+
codefog_tags.listener.add_assets:
6+
class: Codefog\TagsBundle\EventListener\AddAssetsListener
57
arguments:
6-
- "@codefog_tags.manager_registry"
8+
- "@assets.packages"
9+
- "@request_stack"
10+
- "@contao.routing.scope_matcher"
711

812
codefog_tags.listener.tag_manager:
913
class: Codefog\TagsBundle\EventListener\TagManagerListener
@@ -13,7 +17,6 @@ services:
1317

1418
codefog_tags.listener.data_container.tag:
1519
class: Codefog\TagsBundle\EventListener\DataContainer\TagListener
16-
public: true
1720
arguments:
1821
- "@database_connection"
1922
- "@codefog_tags.manager_registry"

‎contao/templates/backend/widget/tags.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<div{{ widget_attributes }}>
99
{% block widget_inner %}
1010
{% if all_tags and not hide_list %}
11-
<div class="cfg-tags-widget-all">
11+
<div class="cfg-tags-widget__all">
1212
{% for tag in all_tags %}
13-
<button type="button" value="{{ tag.value }}" data-action="click->codefog--tags-widget#select:prevent">{{ tag.text }}</button>
13+
<button type="button" value="{{ tag.value }}" class="cfg-tags-widget__tag" data-action="click->codefog--tags-widget#add:prevent">{{ tag.text }}</button>
1414
{% endfor %}
1515
</div>
1616
{% endif %}

‎public/entrypoints.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"entrypoints": {
33
"tags-widget": {
44
"css": [
5-
"/bundles/codefogtags/tags-widget.d74a7ab5.css"
5+
"/bundles/codefogtags/tags-widget.c2ea0e46.css"
66
],
77
"js": [
8-
"/bundles/codefogtags/tags-widget.1b1a476c.js"
8+
"/bundles/codefogtags/tags-widget.70907cda.js"
99
]
1010
}
1111
}

‎public/images/add--dark.642bad3d.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/add.a31d1889.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/manifest.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
2-
"tags-widget.css": "/bundles/codefogtags/tags-widget.d74a7ab5.css",
3-
"tags-widget.js": "/bundles/codefogtags/tags-widget.1b1a476c.js",
4-
"tags-widget.d74a7ab5.css.map": "/bundles/codefogtags/tags-widget.d74a7ab5.css.map",
5-
"tags-widget.1b1a476c.js.map": "/bundles/codefogtags/tags-widget.1b1a476c.js.map"
2+
"tags-widget.css": "/bundles/codefogtags/tags-widget.c2ea0e46.css",
3+
"tags-widget.js": "/bundles/codefogtags/tags-widget.70907cda.js",
4+
"images/add--dark.svg": "/bundles/codefogtags/images/add--dark.642bad3d.svg",
5+
"images/add.svg": "/bundles/codefogtags/images/add.a31d1889.svg",
6+
"tags-widget.c2ea0e46.css.map": "/bundles/codefogtags/tags-widget.c2ea0e46.css.map",
7+
"tags-widget.70907cda.js.map": "/bundles/codefogtags/tags-widget.70907cda.js.map"
68
}

0 commit comments

Comments
 (0)