Skip to content

Commit 99d1888

Browse files
stuartromanekstuartromanek
committed
Merge branch 'main' of github.com:apostrophecms/apostrophe into radio-icon-buttons
2 parents a5d92c8 + 14371ac commit 99d1888

19 files changed

Lines changed: 359 additions & 154 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
* Enable `/api/v1/@apostrophecms/login/logout` and `/api/v1/@apostrophecms/login/whoami` routes when `localLogin` is `false`.
1818
* Refactored complex logic regarding data updates in `AposSchema`.
1919
* Cleaned up `annotateAreaForExternalFront` logic and added context so developers understand the reason if it fails due to a widget type with no matching module in the project.
20+
* Color fields now display their preset color swatches in the field UI rather than just the color picker popup
2021

2122
### Fixes
2223

‎modules/@apostrophecms/asset/lib/globalIcons.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ module.exports = {
6868
'format-align-left-icon': 'FormatAlignLeft',
6969
'format-align-right-icon': 'FormatAlignRight',
7070
'format-bold-icon': 'FormatBold',
71+
'format-color-fill-icon': 'FormatColorFill',
7172
'format-font-icon': 'FormatFont',
7273
'format-italic-icon': 'FormatItalic',
7374
'format-list-bulleted-icon': 'FormatListBulleted',

‎modules/@apostrophecms/color-field/index.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ module.exports = {
1515
disableAlpha: false,
1616
disableFields: false,
1717
disableSpectrum: false,
18-
presetColors: [
19-
'#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
20-
'#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
21-
'#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
22-
]
18+
presetColors: [ '#f9c80e', '#f86624', '#ea3546', '#662e9b', '#43bccd' ]
2319
};
2420
},
2521
methods(self) {

‎modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ import editableInput from '../lib/AposColorEditableInput.vue';
134134
import saturation from '../lib/AposColorSaturation.vue';
135135
import hue from '../lib/AposColorHue.vue';
136136
import alpha from '../lib/AposColorAlpha.vue';
137+
import { finalOptions } from '../logic/finalOptions.js';
137138
138139
const defaultOptions = { ...apos.modules['@apostrophecms/color-field'].defaultOptions };
139140
@@ -159,32 +160,7 @@ export default {
159160
return defaultOptions;
160161
},
161162
finalOptions() {
162-
let final = { ...this.options };
163-
164-
// Handle BC `pickerOptions` sub object.
165-
// Modern API wins out over BC conflicts
166-
if (final.pickerOptions) {
167-
final = {
168-
...final.pickerOptions,
169-
...final
170-
};
171-
delete final.pickerOptions;
172-
}
173-
174-
// Normalize disabling presetColors
175-
if (
176-
Array.isArray(final.presetColors) &&
177-
final.presetColors.length === 0
178-
) {
179-
final.presetColors = false;
180-
}
181-
182-
// If `true`, let defaults through
183-
if (final.presetColors === true) {
184-
delete final.presetColors;
185-
}
186-
187-
return Object.assign({ ...this.defaultOptions }, final);
163+
return finalOptions(this.defaultOptions, this.options);
188164
},
189165
presetColors() {
190166
return this.finalOptions.presetColors;

‎modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue‎

Lines changed: 100 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,24 @@
99
<template #body>
1010
<div class="apos-input-color">
1111
<AposColorInfo
12-
v-if="isInline"
13-
class="apos-input-color__info apos-input-color__info--inline"
12+
class="apos-input-color__info"
1413
:value="next"
15-
:is-micro="isMicro"
1614
@clear="clear"
1715
/>
18-
<div class="apos-input-color__ui">
16+
<div
17+
class="apos-input-color__ui"
18+
:class="{'apos-input-color__ui--micro': isMicro }"
19+
>
1920
<AposContextMenu
2021
:button="buttonOptions"
2122
menu-placement="bottom-start"
2223
:disabled="field.readOnly"
2324
:tooltip="tooltip"
25+
class="apos-input-color__sample-picker"
26+
:class="[
27+
{ 'apos-input-color__sample-picker--selected': customSelected },
28+
{ 'apos-input-color__sample-picker--no-value': !next }
29+
]"
2430
@open="open"
2531
@close="close"
2632
>
@@ -30,14 +36,18 @@
3036
@update:model-value="update"
3137
/>
3238
</AposContextMenu>
39+
<button
40+
v-for="preset in finalOptions.presetColors"
41+
:key="preset"
42+
v-apos-tooltip="$t('apostrophe:colorFieldColorValue', { color: preset })"
43+
class="apos-input-color__preset-button"
44+
role="button"
45+
:aria-label="$t('apostrophe:colorFieldColorValue', { color: preset })"
46+
:class="{'apos-input-color__preset-button--selected': next === preset}"
47+
:style="`background-color: ${getColorStyle(preset)}`"
48+
@click="update(preset)"
49+
/>
3350
</div>
34-
<AposColorInfo
35-
v-if="!isInline"
36-
class="apos-input-color__info"
37-
:value="next"
38-
:is-micro="isMicro"
39-
@clear="clear"
40-
/>
4151
</div>
4252
</template>
4353
</AposInputWrapper>
@@ -52,22 +62,94 @@ export default {
5262
components: {
5363
AposColorInfo
5464
},
55-
mixins: [ AposInputColorLogic ]
65+
mixins: [ AposInputColorLogic ],
66+
computed: {
67+
customSelected() {
68+
return this.next && !this.finalOptions.presetColors.includes(this.next);
69+
}
70+
},
71+
methods: {
72+
getColorStyle(str) {
73+
return str.startsWith('--')
74+
? `var(${str})`
75+
: str;
76+
}
77+
}
5678
};
5779
</script>
5880

5981
<style lang="scss" scoped>
6082
.apos-input-color {
6183
display: flex;
62-
align-items: center;
84+
flex-direction: column;
85+
gap: $spacing-base;
6386
}
6487
65-
.apos-input-color__info {
66-
margin-left: 15px;
88+
.apos-input-color__preset-buttons {
89+
display: flex;
90+
gap: $spacing-half;
91+
}
92+
93+
.apos-input-color__preset-button {
94+
all: unset;
95+
width: 40px;
96+
height: 40px;
97+
border-radius: 3px;
98+
border: 1px solid var(--a-base-8);
99+
}
100+
101+
.apos-input-color__preset-button:active,
102+
.apos-input-color__preset-button:focus,
103+
.apos-input-color__sample-picker--selected:deep(.apos-button),
104+
.apos-input-color__preset-button--selected {
105+
outline: 2px solid var(--a-primary-transparent-50);
106+
outline-offset: 2px;
107+
}
108+
109+
.apos-input-color__ui--micro .apos-input-color__preset-button,
110+
.apos-input-color__ui--micro .apos-input-color__sample-picker--selected {
111+
&:deep(.apos-button),
112+
&.apos-input-color__preset-button--selected,
113+
&:active, &:focus {
114+
outline-width: 2px;
115+
outline-offset: 0;
116+
}
117+
}
118+
119+
.apos-input-color__sample-picker--no-value:deep(.apos-button__color-preview__sample) {
120+
display: none;
121+
}
122+
123+
.apos-input-color__sample-picker--no-value:deep(.apos-button__color-preview__edit) {
124+
height: 100%;
125+
}
126+
127+
.apos-input-color__ui {
128+
display: flex;
129+
flex-wrap: wrap;
130+
gap: $spacing-base;
131+
}
132+
133+
.apos-input-color__preset-wrapper {
134+
display: contents;
135+
}
136+
137+
.apos-input-color__ui--micro .apos-input-color__preset-wrapper {
138+
display: flex;
139+
}
140+
141+
.apos-field--micro {
142+
.apos-input-color__preset-button {
143+
width: 20px;
144+
height: 20px;
145+
}
146+
147+
.apos-input-color {
148+
gap: $spacing-half;
149+
}
67150
68-
&--inline {
69-
margin-right: 5px;
70-
margin-left: 0;
151+
.apos-input-color__ui {
152+
gap: 3px;
71153
}
72154
}
73155

‎modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
33
import AposColor from '../components/AposColor.vue';
44
import { TinyColor } from '@ctrl/tinycolor';
5+
import { finalOptions } from './finalOptions.js';
6+
7+
const defaultOptions = { ...apos.modules['@apostrophecms/color-field'].defaultOptions };
58

69
export default {
710
name: 'AposInputColor',
@@ -16,6 +19,13 @@ export default {
1619
};
1720
},
1821
computed: {
22+
tooltip() {
23+
let tooltip = this.$t('apostrophe:colorFieldClickToSelect');
24+
if (this.next) {
25+
tooltip = `${this.$t('apostrophe:colorFieldColorValue', { color: this.next })} ${tooltip}`;
26+
}
27+
return tooltip;
28+
},
1929
isMicro() {
2030
return this.modifiers.includes('micro');
2131
},
@@ -32,7 +42,7 @@ export default {
3242
buttonOptions() {
3343
return {
3444
label: this.field.label,
35-
type: 'color',
45+
type: this.isMicro ? 'color-micro' : 'color',
3646
color: this.modelValue.data || ''
3747
};
3848
},
@@ -44,6 +54,9 @@ export default {
4454
'apos-input-wrapper',
4555
'apos-color'
4656
];
57+
},
58+
finalOptions() {
59+
return finalOptions(defaultOptions, this.options);
4760
}
4861
},
4962
mounted() {

‎modules/@apostrophecms/color-field/ui/apos/logic/finalOptions.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export function finalOptions(defaults, options) {
2+
let final = { ...options };
3+
4+
// Handle BC `pickerOptions` sub object.
5+
// Modern API wins out over BC conflicts
6+
if (final.pickerOptions) {
7+
final = {
8+
...final.pickerOptions,
9+
...final
10+
};
11+
delete final.pickerOptions;
12+
}
13+
14+
// Normalize disabling presetColors
15+
if (
16+
Array.isArray(final.presetColors) &&
17+
final.presetColors.length === 0
18+
) {
19+
final.presetColors = false;
20+
}
21+
22+
// If `true`, let defaults through
23+
if (final.presetColors === true) {
24+
delete final.presetColors;
25+
}
26+
27+
return Object.assign({ ...defaults }, final);
28+
};

‎modules/@apostrophecms/i18n/i18n/de.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585
"clearSelection": "Auswahl löschen",
8686
"close": "Schliessen",
8787
"closeGlobal": "Globale Einstellungen schliessen",
88+
"colorFieldClickToSelect": "Klicken, um eine Farbe auszuwählen",
89+
"colorFieldColorValue": "Farbe {{ color }}.",
8890
"collapseAll": "Alles einklappen",
8991
"commandMenuArchiveSelected": "Archiv ausgewählt",
9092
"commandMenuContent": "Inhalt",

‎modules/@apostrophecms/i18n/i18n/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@
8787
"clearSelection": "Clear Selection",
8888
"close": "Close",
8989
"closeGlobal": "Close Global Site Settings",
90+
"colorFieldClickToSelect": "Click to select a color",
91+
"colorFieldColorValue": "Color {{ color }}.",
9092
"collapseAll": "Collapse all",
9193
"commandMenuArchiveSelected": "Archive selected",
9294
"commandMenuContent": "Content",

‎modules/@apostrophecms/i18n/i18n/es.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585
"clearSelection": "Borrar Selección",
8686
"close": "Cerrar",
8787
"closeGlobal": "Cerrar Configuración Global del Sitio",
88+
"colorFieldClickToSelect": "Haz clic para seleccionar un color",
89+
"colorFieldColorValue": "Color {{ color }}.",
8890
"collapseAll": "Colapsar todo",
8991
"commandMenuArchiveSelected": "Archivo seleccionado",
9092
"commandMenuContent": "Contenido",

0 commit comments

Comments
 (0)