Skip to content

Commit

Permalink
fix(ui5-color-palette): remove additional dots in more-colors (#2958)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@ilhan007
ilhan007 committed Mar 17, 2021
1 parent 8e7fcdd commit 8ef07fe
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 63 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/ColorPalette.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
design="Transparent"
class="ui5-cp-more-colors"
@click="{{_openMoreColorsDialog}}"
>{{colorPaleteMoreColorsText}}...</ui5-button design="Transparent">
>{{colorPaleteMoreColorsText}}</ui5-button>
</div>
{{/if}}
</div>
108 changes: 46 additions & 62 deletions packages/main/test/samples/ColorPalette.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,80 +44,64 @@ <h3>ColorPalette</h3>
<section>
<h3>ColorPalette in Popover</h3>
<div class="snippet">
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
<ui5-responsive-popover id="respPopover">
<div id="respPopoverHeader" slot="header" with-padding>
<ui5-title>Color Palette Popover</ui5-title>
</div>
<section style="display:flex; align-items: center;">
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
</section>

<ui5-color-palette>
<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="lightblue"></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-item value="blue"></ui5-color-palette-item>
<ui5-color-palette-item value="gray"></ui5-color-palette-item>
<ui5-color-palette-item value="white"></ui5-color-palette-item>
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
</ui5-color-palette>
<ui5-popover
id="palettePopover"
header-text="Pick a color"
placement-type="Bottom"
horizontal-align="Left"
no-arrow>
<ui5-color-palette id="colorPaletteInPopover" more-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>
</ui5-popover>

<div slot="footer" class="popover-footer">
<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
</div>
</ui5-responsive-popover>
<script>
colorPaletteBtn.addEventListener("click", function(event) {
respPopover.open(colorPaletteBtn);
colorPaletteInPopover.addEventListener("change", function(event) {
inpSelectedColor.value = event.detail.color;
});
btnClose.addEventListener("click", function(event) {
respPopover.close();
btnOpenPopover.addEventListener("click", function(event) {
palettePopover.openBy(btnOpenPopover);
});
</script>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
<ui5-responsive-popover id="respPopover" with-padding>
<div id="respPopoverHeader" slot="header">
<ui5-title>Color Palette Popover</ui5-title>
</div>
<section>
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
</section>

<ui5-color-palette>
<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="lightblue"></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-item value="blue"></ui5-color-palette-item>
<ui5-color-palette-item value="gray"></ui5-color-palette-item>
<ui5-color-palette-item value="white"></ui5-color-palette-item>
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
</ui5-color-palette>
<ui5-popover id="palettePopover" header-text="Pick a color" placement-type="Bottom">
<ui5-color-palette id="colorPaletteInPopover" more-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>
</ui5-popover>

<div slot="footer" class="popover-footer">
<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
</div>
</ui5-responsive-popover>
<script>
colorPaletteBtn.addEventListener("click", function(event) {
respPopover.open(colorPaletteBtn);
colorPaletteInPopover.addEventListener("change", event => {
inpSelectedColor.value = event.detail.color;
});
btnClose.addEventListener("click", function(event) {
respPopover.close();

btnOpenPopover.addEventListener("click", event => {
palettePopover.openBy(btnOpenPopover);
});
</script>
</xmp></pre>
Expand Down

0 comments on commit 8ef07fe

Please sign in to comment.