feat(ui5-color-palette): implement show-recent-color functionality (#3113)

fifoosid · web-flow · commit 4bcd049cc436 · 2021-04-07T14:07:34.000+03:00
diff --git a/packages/main/src/ColorPalette.hbs b/packages/main/src/ColorPalette.hbs
@@ -23,4 +23,13 @@
 			>{{colorPaleteMoreColorsText}}</ui5-button>
 		</div>
 	{{/if}}
+
+	{{#if showRecentColors}}
+		<div class="ui5-cp-separator"></div>
+		<div class="ui5-cp-recent-colors-wrapper">
+			{{#each recentColors}}
+				<ui5-color-palette-item value="{{this}}"></ui5-color-palette-item>
+			{{/each}}
+		</div>
+	{{/if}}
 </div>
diff --git a/packages/main/src/ColorPalette.js b/packages/main/src/ColorPalette.js
@@ -28,6 +28,17 @@ const metadata = {
 	tag: "ui5-color-palette",
 	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+
+		/**
+		 * Defines whether the user can see the last used colors in the bottom of the <code>ui5-color-palette</code>
+		 * @type {boolean}
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		showRecentColors: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the user can choose a custom color from a color picker
 		 * <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
@@ -47,7 +58,7 @@ const metadata = {
 		 */
 		value: {
 			type: CSSColor,
-		 },
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
 		/**
@@ -147,6 +158,8 @@ class ColorPalette extends UI5Element {
 			rowSize: 5,
 			behavior: ItemNavigationBehavior.Cyclic,
 		});
+
+		this._recentColors = [];
 	}
 
 	onBeforeRendering() {
@@ -173,6 +186,9 @@ class ColorPalette extends UI5Element {
 
 	_setColor(color) {
 		this.value = color;
+		if (this._recentColors[0] !== this.value) {
+			this._recentColors.unshift(this.value);
+		}
 
 		this.fireEvent("change", {
 			color: this.value,
@@ -230,6 +246,18 @@ class ColorPalette extends UI5Element {
 		return this.moreColors && this.moreColorsFeature;
 	}
 
+	get recentColors() {
+		if (this._recentColors.length > 5) {
+			this._recentColors = this._recentColors.slice(0, 5);
+		}
+
+		while (this._recentColors.length < 5) {
+			this._recentColors.push("");
+		}
+
+		return this._recentColors;
+	}
+
 	async _getDialog() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-dialog]");
diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css
@@ -25,3 +25,8 @@
 	text-align: center;
 	border: none;
 }
+
+.ui5-cp-more-colors-wrapper {
+	display: flex;
+    flex-direction: column;
+}
diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html
@@ -94,7 +94,7 @@
 	<br/>
 	<br/>
 
-	<ui5-color-palette id="cp3" more-colors>
+	<ui5-color-palette id="cp3" more-colors show-recent-colors>
 		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
 		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
 		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
@@ -109,6 +109,21 @@
 		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
 	</ui5-color-palette>
 
+	<ui5-color-palette id="cp4" more-colors show-recent-colors>
+		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+		<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+		<ui5-color-palette-item value="green"></ui5-color-palette-item>
+		<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+		<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+		<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+	</ui5-color-palette>
+
 	<script>
 		cp1.addEventListener("change", function(event) {
 			changeResult.value = event.detail.color;
diff --git a/packages/main/test/samples/ColorPalette.sample.html b/packages/main/test/samples/ColorPalette.sample.html
@@ -7,7 +7,43 @@ <h2 class="control-header">ColorPalette</h2>
 <div class="control-tag">&lt;ui5-color-palette&gt;</div>
 
 <section>
-	<h3>ColorPalette</h3>
+	<h3>ColorPalette With More Colors & Recent Colours Functionality</h3>
+	<div class="snippet">
+		<ui5-color-palette show-more show-recent-colors>
+			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+			<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+			<ui5-color-palette-item value="green"></ui5-color-palette-item>
+			<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+			<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+			<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+			<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+		</ui5-color-palette>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-color-palette show-more show-recent-colors>
+	<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+	<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+	<ui5-color-palette-item value="green"></ui5-color-palette-item>
+	<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+	<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+	<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+	<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+	<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+</ui5-color-palette>
+</xmp></pre>
+</section>
+
+<section>
+	<h3>Basic ColorPalette</h3>
 	<div class="snippet">
 		<ui5-color-palette>
 			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
@@ -41,6 +77,7 @@ <h3>ColorPalette</h3>
 </ui5-color-palette>
 </xmp></pre>
 </section>
+
 <section>
 	<h3>ColorPalette in Popover</h3>
 	<div class="snippet">
diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js
@@ -98,4 +98,25 @@ describe("ColorPalette interactions", () => {
 
 		assert.strictEqual(colorPalette.getProperty("value"), "#fafafa", "Custom color is selected from the color picker");
 	})
+
+	it("Tests show-recent-colors functionality", () => {
+		const colorPalette = browser.$("#cp4");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+
+		const colorPaletteRecentColorsWrapper = colorPalette.shadow$(".ui5-cp-recent-colors-wrapper");
+		const colorPaletteRecentColorsWrapperEntries = colorPaletteRecentColorsWrapper.$$("[ui5-color-palette-item]");
+
+		colorPaletteEntries[0].click();
+		colorPaletteEntries[1].click();
+		colorPaletteEntries[2].click();
+		colorPaletteEntries[3].click();
+		colorPaletteEntries[4].click();
+
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries.length, 5, "Only the latest 5 colors are shown");
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries[0].getProperty("value"), "green");
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries[1].getProperty("value"), "rgb(0,200,0)");
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries[2].getProperty("value"), "#444444");
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries[3].getProperty("value"), "darkblue");
+		assert.strictEqual(colorPaletteRecentColorsWrapperEntries[4].getProperty("value"), "pink");
+	});
 });

Original file line number	Diff line number	Diff line change
`@@ -25,3 +25,8 @@`
`25`	`25`	`text-align: center;`
`26`	`26`	`border: none;`
`27`	`27`	`}`
	`28`	`+`
	`29`	`+.ui5-cp-more-colors-wrapper {`
	`30`	`+ display: flex;`
	`31`	`+ flex-direction: column;`
	`32`	`+}`