Skip to content

Commit 8ef07fe

Browse files
ilhan007ilhan007
authored
fix(ui5-color-palette): remove additional dots in more-colors (#2958)
More colors text used to have 6 dots (3 from the template and 3 from the translated text) sample updated to show real-case scenario of ColorPalette with "more-colors" set.
1 parent 8e7fcdd commit 8ef07fe

File tree

2 files changed

+47
-63
lines changed

2 files changed

+47
-63
lines changed

‎packages/main/src/ColorPalette.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
design="Transparent"
2121
class="ui5-cp-more-colors"
2222
@click="{{_openMoreColorsDialog}}"
23-
>{{colorPaleteMoreColorsText}}...</ui5-button design="Transparent">
23+
>{{colorPaleteMoreColorsText}}</ui5-button>
2424
</div>
2525
{{/if}}
2626
</div>

‎packages/main/test/samples/ColorPalette.sample.html

+46-62
Original file line numberDiff line numberDiff line change
@@ -44,80 +44,64 @@ <h3>ColorPalette</h3>
4444
<section>
4545
<h3>ColorPalette in Popover</h3>
4646
<div class="snippet">
47-
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
48-
<ui5-responsive-popover id="respPopover">
49-
<div id="respPopoverHeader" slot="header" with-padding>
50-
<ui5-title>Color Palette Popover</ui5-title>
51-
</div>
47+
<section style="display:flex; align-items: center;">
48+
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
49+
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
50+
</section>
5251

53-
<ui5-color-palette>
54-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
55-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
56-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
57-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
58-
<ui5-color-palette-item value="green"></ui5-color-palette-item>
59-
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
60-
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
61-
<ui5-color-palette-item value="lightblue"></ui5-color-palette-item>
62-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
63-
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
64-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
65-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
66-
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
67-
<ui5-color-palette-item value="gray"></ui5-color-palette-item>
68-
<ui5-color-palette-item value="white"></ui5-color-palette-item>
69-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
70-
</ui5-color-palette>
52+
<ui5-popover
53+
id="palettePopover"
54+
header-text="Pick a color"
55+
placement-type="Bottom"
56+
horizontal-align="Left"
57+
no-arrow>
58+
<ui5-color-palette id="colorPaletteInPopover" more-colors>
59+
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
60+
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
61+
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
62+
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
63+
<ui5-color-palette-item value="green"></ui5-color-palette-item>
64+
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
65+
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
66+
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
67+
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
68+
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
69+
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
70+
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
71+
</ui5-color-palette>
72+
</ui5-popover>
7173

72-
<div slot="footer" class="popover-footer">
73-
<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
74-
</div>
75-
</ui5-responsive-popover>
7674
<script>
77-
colorPaletteBtn.addEventListener("click", function(event) {
78-
respPopover.open(colorPaletteBtn);
75+
colorPaletteInPopover.addEventListener("change", function(event) {
76+
inpSelectedColor.value = event.detail.color;
7977
});
80-
btnClose.addEventListener("click", function(event) {
81-
respPopover.close();
78+
btnOpenPopover.addEventListener("click", function(event) {
79+
palettePopover.openBy(btnOpenPopover);
8280
});
8381
</script>
8482
</div>
8583
<pre class="prettyprint lang-html"><xmp>
86-
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
87-
<ui5-responsive-popover id="respPopover" with-padding>
88-
<div id="respPopoverHeader" slot="header">
89-
<ui5-title>Color Palette Popover</ui5-title>
90-
</div>
84+
<section>
85+
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
86+
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
87+
</section>
9188

92-
<ui5-color-palette>
93-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
94-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
95-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
96-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
97-
<ui5-color-palette-item value="green"></ui5-color-palette-item>
98-
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
99-
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
100-
<ui5-color-palette-item value="lightblue"></ui5-color-palette-item>
101-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
102-
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
103-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
104-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
105-
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
106-
<ui5-color-palette-item value="gray"></ui5-color-palette-item>
107-
<ui5-color-palette-item value="white"></ui5-color-palette-item>
108-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
109-
</ui5-color-palette>
89+
<ui5-popover id="palettePopover" header-text="Pick a color" placement-type="Bottom">
90+
<ui5-color-palette id="colorPaletteInPopover" more-colors>
91+
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
92+
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
93+
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
94+
...
95+
</ui5-color-palette>
96+
</ui5-popover>
11097

111-
<div slot="footer" class="popover-footer">
112-
<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
113-
</div>
114-
</ui5-responsive-popover>
11598
<script>
116-
colorPaletteBtn.addEventListener("click", function(event) {
117-
respPopover.open(colorPaletteBtn);
99+
colorPaletteInPopover.addEventListener("change", event => {
100+
inpSelectedColor.value = event.detail.color;
118101
});
119-
btnClose.addEventListener("click", function(event) {
120-
respPopover.close();
102+
103+
btnOpenPopover.addEventListener("click", event => {
104+
palettePopover.openBy(btnOpenPopover);
121105
});
122106
</script>
123107
</xmp></pre>

0 commit comments

Comments
 (0)