Skip to content

Commit 121bb2c

Browse files
fifoosidfifoosid
authored
feat(ui5-color-palette): implement more-colors property (#2853)
1 parent 6fd6a5e commit 121bb2c

11 files changed

+262
-19
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import "@ui5/webcomponents-icons-tnt/dist/Assets.js";
3838

3939
import "./dist/features/InputElementsFormSupport.js";
4040
import "./dist/features/InputSuggestions.js";
41+
import "./dist/features/ColorPaletteMoreColors.js";
4142

4243
import Avatar from "./dist/Avatar.js";
4344
import AvatarGroup from "./dist/AvatarGroup.js";

‎packages/main/src/ColorPalette.hbs

+25-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
<div class="ui5-cp-item-container"
2-
role="region"
3-
aria-label="{{colorContainerLabel}}"
4-
@click={{_onclick}}
5-
@keyup={{_onkeyup}}
6-
@keydown={{_onkeydown}}>
7-
{{#each this.displayedColors}}
8-
<slot
9-
name="{{this._individualSlot}}"
10-
>
11-
</slot>
12-
{{/each}}
1+
<div class="ui5-cp-root">
2+
<div class="ui5-cp-item-container"
3+
role="region"
4+
aria-label="{{colorContainerLabel}}"
5+
@click={{_onclick}}
6+
@keyup={{_onkeyup}}
7+
@keydown={{_onkeydown}}>
8+
{{#each this.displayedColors}}
9+
<slot
10+
name="{{this._individualSlot}}"
11+
>
12+
</slot>
13+
{{/each}}
14+
</div>
15+
16+
{{#if showMoreColors}}
17+
<div class="ui5-cp-more-colors-wrapper">
18+
<div class="ui5-cp-separator"></div>
19+
<ui5-button
20+
design="Transparent"
21+
class="ui5-cp-more-colors"
22+
@click="{{_openMoreColorsDialog}}"
23+
>{{colorPaleteMoreColorsText}}...</ui5-button design="Transparent">
24+
</div>
25+
{{/if}}
1326
</div>

‎packages/main/src/ColorPalette.js

+74-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,18 @@ import {
88
isSpace,
99
isEnter,
1010
} from "@ui5/webcomponents-base/dist/Keys.js";
11+
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
1112
import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
13+
import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
1214
import ColorPaletteItem from "./ColorPaletteItem.js";
1315
import {
1416
COLORPALETTE_CONTAINER_LABEL,
17+
COLOR_PALETTE_MORE_COLORS_TEXT,
1518
} from "./generated/i18n/i18n-defaults.js";
1619

1720
// Styles
1821
import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
22+
import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
1923

2024
/**
2125
* @public
@@ -24,6 +28,17 @@ const metadata = {
2428
tag: "ui5-color-palette",
2529
managedSlots: true,
2630
properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
31+
/**
32+
* Defines whether the user can choose a custom color from a color picker
33+
* <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
34+
* @type {Boolean}
35+
* @public
36+
* @since 1.0.0-rc.12
37+
*/
38+
moreColors: {
39+
type: Boolean,
40+
},
41+
2742
/**
2843
*
2944
* The selected color.
@@ -103,12 +118,22 @@ class ColorPalette extends UI5Element {
103118
return ColorPaletteCss;
104119
}
105120

121+
static get staticAreaStyles() {
122+
return ColorPaletteStaticAreaCss;
123+
}
124+
106125
static get template() {
107126
return ColorPaletteTemplate;
108127
}
109128

129+
static get staticAreaTemplate() {
130+
return ColorPaletteDialogTemplate;
131+
}
132+
110133
static get dependencies() {
111-
return [ColorPaletteItem];
134+
const moreColorsFeature = getFeature("ColorPaletteMoreColors");
135+
136+
return [ColorPaletteItem].concat(moreColorsFeature ? moreColorsFeature.dependencies : []);
112137
}
113138

114139
static async onDefine() {
@@ -129,13 +154,26 @@ class ColorPalette extends UI5Element {
129154
this.displayedColors.forEach((item, index) => {
130155
item.index = index + 1;
131156
});
157+
158+
if (this.moreColors) {
159+
const moreColorsFeature = getFeature("ColorPaletteMoreColors");
160+
if (moreColorsFeature) {
161+
this.moreColorsFeature = new moreColorsFeature();
162+
} else {
163+
throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
164+
}
165+
}
132166
}
133167

134168
selectColor(item) {
135169
item.focus();
136170
this._itemNavigation.setCurrentItem(item);
137171

138-
this.value = item.value;
172+
this._setColor(item.value);
173+
}
174+
175+
_setColor(color) {
176+
this.value = color;
139177

140178
this.fireEvent("change", {
141179
color: this.value,
@@ -161,13 +199,47 @@ class ColorPalette extends UI5Element {
161199
}
162200
}
163201

202+
async _chooseCustomColor() {
203+
const colorPicker = await this.getColorPicker();
204+
this._setColor(colorPicker.color);
205+
this._closeDialog();
206+
}
207+
208+
async _closeDialog() {
209+
const dialog = await this._getDialog();
210+
dialog.close();
211+
}
212+
213+
async _openMoreColorsDialog() {
214+
const dialog = await this._getDialog();
215+
dialog.open();
216+
}
217+
164218
get displayedColors() {
165219
return this.colors.filter(item => item.value).slice(0, 15);
166220
}
167221

168222
get colorContainerLabel() {
169223
return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
170224
}
225+
226+
get colorPaleteMoreColorsText() {
227+
return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
228+
}
229+
230+
get showMoreColors() {
231+
return this.moreColors && this.moreColorsFeature;
232+
}
233+
234+
async _getDialog() {
235+
const staticAreaItem = await this.getStaticAreaItemDomRef();
236+
return staticAreaItem.querySelector("ui5-dialog");
237+
}
238+
239+
async getColorPicker() {
240+
const dialog = await this._getDialog();
241+
return dialog.content[0].querySelector("ui5-color-picker");
242+
}
171243
}
172244

173245
ColorPalette.define();

‎packages/main/src/ColorPaletteDialog.hbs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<ui5-dialog
2+
header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
3+
>
4+
<div class="ui5-cp-dialog-content">
5+
<ui5-color-picker></ui5-color-picker>
6+
</div>
7+
8+
<div slot="footer" class="ui5-cp-dialog-footer">
9+
<ui5-button
10+
design="Transparent"
11+
@click="{{_chooseCustomColor}}"
12+
>{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
13+
<ui5-button
14+
design="Transparent"
15+
@click="{{_closeDialog}}"
16+
>{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
17+
</div>
18+
</ui5-dialog>

‎packages/main/src/Popup.js

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const metadata = {
2929
*/
3030
"default": {
3131
type: HTMLElement,
32+
propertyName: "content",
3233
},
3334
},
3435
properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {

‎packages/main/src/features/ColorPaletteMoreColors.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
2+
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
3+
4+
import Dialog from "../Dialog.js";
5+
import Button from "../Button.js";
6+
import ColorPicker from "../ColorPicker.js";
7+
8+
import {
9+
COLOR_PALETTE_DIALOG_CANCEL_BUTTON,
10+
COLOR_PALETTE_DIALOG_OK_BUTTON,
11+
COLOR_PALETTE_DIALOG_TITLE,
12+
} from "../generated/i18n/i18n-defaults.js";
13+
14+
class ColorPaletteMoreColors {
15+
constructor() {
16+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
17+
}
18+
19+
static get dependencies() {
20+
return [
21+
Dialog,
22+
Button,
23+
ColorPicker,
24+
];
25+
}
26+
27+
get colorPaletteDialogTitle() {
28+
return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
29+
}
30+
31+
get colorPaletteDialogOKButton() {
32+
return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);
33+
}
34+
35+
get colorPaletteCancelButton() {
36+
return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
37+
}
38+
}
39+
40+
registerFeature("ColorPaletteMoreColors", ColorPaletteMoreColors);
41+
42+
export default ColorPaletteMoreColors;

‎packages/main/src/i18n/messagebundle.properties

+12
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,18 @@ COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
4949
#XFLD: Label of the color box
5050
COLORPALETTE_COLOR_LABEL=Color
5151

52+
#XFLD: Color Palette dialog button
53+
COLOR_PALETTE_DIALOG_CANCEL_BUTTON=Cancel
54+
55+
#XFLD: Color Palette dialog button
56+
COLOR_PALETTE_DIALOG_OK_BUTTON=OK
57+
58+
#XTIT: Color Palette dialog title of the Color Picker
59+
COLOR_PALETTE_DIALOG_TITLE=Change Color
60+
61+
#XTIT: Color Palette dialog title of the Color Picker
62+
COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
63+
5264
#XACT: DatePicker 'Open Picker' icon title
5365
DATEPICKER_OPEN_ICON_TITLE=Open Picker
5466

‎packages/main/src/themes/ColorPalette.css

+17-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,26 @@
22
display: inline-block;
33
}
44

5+
.ui5-cp-root {
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
510
.ui5-cp-item-container {
611
display: flex;
712
max-width: var(--_ui5_color-palette-row-width);
813
flex-flow: wrap;
914
max-height: var(--_ui5_color-palette-row-height);
1015
overflow: hidden;
11-
}
16+
}
17+
18+
.ui5-cp-separator {
19+
height: 0.0625rem;
20+
background: var(--sapToolbar_SeparatorColor);
21+
}
22+
23+
.ui5-cp-more-colors {
24+
width: 100%;
25+
text-align: center;
26+
border: none;
27+
}

‎packages/main/src/themes/ColorPaletteStaticArea.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.ui5-cp-dialog-content {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
margin: 1rem 0;
6+
}
7+
8+
.ui5-cp-dialog-footer {
9+
width: 100%;
10+
display: flex;
11+
justify-content: flex-end;
12+
margin: 0.1875rem 1rem;
13+
}
14+
15+
.ui5-cp-dialog-footer ui5-button:first-child{
16+
margin-right: 1rem;
17+
}

‎packages/main/test/pages/ColorPalette.html

+29-3
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<body style="background-color: var(--sapBackgroundColor);">
3838

3939
</body>
40-
<ui5-color-palette id="cp1">
40+
<ui5-color-palette id="cp1" more-colors>
4141
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
4242
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
4343
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
@@ -51,10 +51,16 @@
5151
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
5252
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
5353
</ui5-color-palette>
54-
<br>
54+
<br/>
55+
<br/>
56+
<br/>
57+
<br/>
58+
<br/>
59+
<br/>
60+
<br/>
5561
<ui5-input id="changeResult" value="Nothing selected"></ui5-input>
5662
<br>
57-
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
63+
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button>
5864
<ui5-responsive-popover id="respPopover" with-padding>
5965
<div id="respPopoverHeader" slot="header">
6066
<ui5-title>Color Palette Popover</ui5-title>
@@ -83,6 +89,26 @@
8389
<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
8490
</div>
8591
</ui5-responsive-popover>
92+
93+
<br/>
94+
<br/>
95+
<br/>
96+
97+
<ui5-color-palette id="cp3" more-colors>
98+
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
99+
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
100+
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
101+
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
102+
<ui5-color-palette-item value="green"></ui5-color-palette-item>
103+
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
104+
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
105+
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
106+
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
107+
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
108+
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
109+
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
110+
</ui5-color-palette>
111+
86112
<script>
87113
cp1.addEventListener("change", function(event) {
88114
changeResult.value = event.detail.color;

0 commit comments

Comments
 (0)