vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use custom select button and override fileupload

pull/7048/head
Cagatay Civici 2025-01-04 13:59:48 +03:00
parent 20b4de467c
commit b34d32df14
3 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/showcase/assets/styles/layout/_designer.scss
View File

@ -180,6 +180,27 @@
color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem;
}
}
.p-fileupload-choose-button {
padding: 0.5rem 0.75rem;
background: light-dark(#09090b, #ffffff);
border-color: light-dark(#09090b, #ffffff);
color: light-dark(#ffffff, #000000);
cursor: pointer;
font-weight: medium;
border-radius: 4px;
transition: background 0.2s;
&:hover {
background: light-dark(#27272a, #f3f4f6);
border-color: light-dark(#27272a, #f3f4f6);
}
&:focus-visible {
outline: 1px solid light-dark(#09090b, #ffffff);
outline-offset: 2px;
box-shadow: none;
}
}
}

18
apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View File

@ -12,7 +12,23 @@
<span class="font-semibold">Base Theme</span>
<span class="text-muted-color">Variety of built-in themes with distinct characteristics.</span>
<div class="flex justify-between">
<SelectButton v-model="basePreset" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
<div class="flex">
<button
v-for="presetOption of presetOptions"
:key="presetOption.label"
type="button"
@click="basePreset = presetOption.value"
:class="[
'border border-surface-200 dark:border-surface-700 px-3 py-2 border-r-0 last:border-r first:rounded-l-md last:rounded-r-md transition-colors duration-200',
{
'bg-zinc-950 text-white dark:bg-white dark:text-black': presetOption.value === basePreset,
'hover:bg-gray-100 dark:hover:bg-surface-800': presetOption.value !== basePreset
}
]"
>
{{ presetOption.label }}
</button>
</div>
<button type="button" @click="createThemeFromPreset" class="btn-design">Create</button>
</div>
</div>

2
apps/showcase/components/layout/designer/editor/DesignTokenField.vue
View File

@ -38,7 +38,7 @@
</div>
</template>
</AutoComplete>
<div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-2 w-4 h-4 rounded-full border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
<div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-2 w-4 h-4 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
</div>
</div>
</template>