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" type="button"
style="width:36px;height:36px;border:none;padding:0;cursor:pointer;border-radius:4px" style="width:36px;height:36px;border:none;padding:0;cursor:pointer;border-radius:4px"
:style="{ background: newTagColor }" :style="{ background: newTagColor }"
title="Tag colour" title="Tag Color"
data-testid="tag-color-swatch" data-testid="tag-color-swatch"
@click="showColorDialog = true" @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 <v-btn
icon="ri-add-line" icon="ri-add-line"
size="small" size="small"
@@ -80,10 +72,10 @@
</div> </div>
</template> </template>
<!-- Colour picker dialog --> <!-- Color picker dialog -->
<v-dialog v-model="showColorDialog" max-width="260" data-testid="color-dialog"> <v-dialog v-model="showColorDialog" max-width="260" data-testid="color-dialog">
<v-card rounded="lg"> <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"> <v-card-text class="pa-4 pt-0">
<div class="d-flex flex-wrap ga-2"> <div class="d-flex flex-wrap ga-2">
<button <button
@@ -96,16 +88,26 @@
:data-testid="`preset-color-${color}`" :data-testid="`preset-color-${color}`"
@click="onSelectPresetColor(color)" @click="onSelectPresetColor(color)"
/> />
<button <div style="position:relative;width:32px;height:32px">
type="button" <button
class="d-flex align-center justify-center" type="button"
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)" class="d-flex align-center justify-center"
title="Custom colour" 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)"
data-testid="custom-color-trigger" title="Custom Color"
@click="customColorInputRef?.click()" data-testid="custom-color-trigger"
> @click="customColorInputRef?.click()"
<v-icon size="16" color="white">ri-palette-line</v-icon> >
</button> <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> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>