wamplerj/mic-check
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tag color picker copy and native picker positioning

Browse Source 
Dialog/button titles said "colour" instead of "Color", and the
hidden native color input had no positioned ancestor so the browser
picker opened at the top-left of the viewport instead of near the
dialog.
This commit is contained in:
James Wampler
2026-07-01 13:25:45 -07:00
parent 6a5f6a7765
commit f74e16b8aa
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/admin/src/components/features/TagsChipInput.vue
View File

@@ -55,18 +55,10 @@
type="button"
style="width:36px;height:36px;border:none;padding:0;cursor:pointer;border-radius:4px"
:style="{ background: newTagColor }"
title="Tag colour"
title="Tag Color"
data-testid="tag-color-swatch"
@click="showColorDialog = true"
/>
<input
ref="customColorInputRef"
v-model="newTagColor"
type="color"
style="position:absolute;width:0;height:0;opacity:0;pointer-events:none"
data-testid="custom-color-input"
@input="showColorDialog = false"
/>
<v-btn
icon="ri-add-line"
size="small"
@@ -80,10 +72,10 @@
</div>
</template>
<!-- Colour picker dialog -->
<!-- Color picker dialog -->
<v-dialog v-model="showColorDialog" max-width="260" data-testid="color-dialog">
<v-card rounded="lg">
<v-card-title class="pa-4 pb-2 text-body-1">Tag colour</v-card-title>
<v-card-title class="pa-4 pb-2 text-body-1">Tag Color</v-card-title>
<v-card-text class="pa-4 pt-0">
<div class="d-flex flex-wrap ga-2">
<button
@@ -96,16 +88,26 @@
:data-testid="`preset-color-${color}`"
@click="onSelectPresetColor(color)"
/>
<button
type="button"
class="d-flex align-center justify-center"
style="width:32px;height:32px;border:1px solid rgba(0,0,0,0.2);padding:0;cursor:pointer;border-radius:4px;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)"
title="Custom colour"
data-testid="custom-color-trigger"
@click="customColorInputRef?.click()"
>
<v-icon size="16" color="white">ri-palette-line</v-icon>
</button>
<div style="position:relative;width:32px;height:32px">
<button
type="button"
class="d-flex align-center justify-center"
style="width:32px;height:32px;border:1px solid rgba(0,0,0,0.2);padding:0;cursor:pointer;border-radius:4px;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)"
title="Custom Color"
data-testid="custom-color-trigger"
@click="customColorInputRef?.click()"
>
<v-icon size="16" color="white">ri-palette-line</v-icon>
</button>
<input
ref="customColorInputRef"
v-model="newTagColor"
type="color"
style="position:absolute;inset:0;width:32px;height:32px;opacity:0;pointer-events:none"
data-testid="custom-color-input"
@input="showColorDialog = false"
/>
</div>
</div>
</v-card-text>
</v-card>