matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Less global rounding, more consistent

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-05 02:24:18 +01:00
parent 15007e7dc7
commit 58c9dae65b
6 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/HSVInput.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<div
class="flex p-4 font-heading rounded-b-xl border-x border-b border-zinc-800"
:class="{'rounded-t-xl': roundedTop}"
class="flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
:class="{'rounded-t-lg': roundedTop}"
:style="{backgroundColor: color.hex()}">
<div
ref="colorFieldText" class="w-full flex opacity-70"

6
src/components/common/PaletteInput.vue
View File

@@ -3,11 +3,11 @@
class="px-4 py-2"
:style="{background: `linear-gradient(180deg, ${options[currentOption].color.hex()+'11'}, ${options[currentOption].color.hex()+'30'} 25%, ${options[currentOption].color.hex()+'30'} 40%, transparent 60%`}">
<div
class="flex font-heading rounded-t-xl overflow-hidden border-x border-t border-zinc-800">
class="flex font-heading rounded-t-lg overflow-hidden border-x border-t border-zinc-800 bg-zinc-900">
<button
v-for="(option, key) in options" :key="key"
class="flex-1 pt-2 items-center text-center"
:class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground bg-zinc-900' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
class="flex-1 pt-2 items-center text-center rounded-lg"
:class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
@click="currentOption = key">
{{ $t(option.titleKey) }}
<span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />

2
src/components/common/TabSelect.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-2 border-solid border-0 border-b">
<div class="flex rounded-xl overflow-hidden border border-zinc-800">
<div class="flex rounded-lg overflow-hidden border border-zinc-800">
<TabSelectButton
v-for="(option, key) in options" :key="key"
:ref="(el) => buttons[key] = el"

2
src/components/common/TabSelectButton.vue
View File

@@ -1,6 +1,6 @@
<template>
<button
class="flex-1 flex flex-col items-center rounded-xl p-2 gap-2 font-heading transition-all"
class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all"
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
@click="$emit('select'); $refs.title.scramble()">

14
src/components/profile/ProfileButton.vue
View File

@@ -1,11 +1,11 @@
<template>
<div
class="h-12 flex"
class="h-12 flex overflow-hidden rounded-lg m-2"
@mouseenter="hover=true" @mouseleave="hover=false">
<form
v-if="nameEditable && editing"
class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
:class="{'bg-zinc-200' : selected}"
:class="{'bg-zinc-300' : selected}"
@submit.prevent="profile.name = nameInput; editing=false">
<input
ref="profileNameInput" v-model="nameInput"
@@ -17,7 +17,7 @@
<button
ref="nameSubmitButton"
type="submit"
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors ">
<Check class="h-4 w-4" />
@@ -25,7 +25,7 @@
</form>
<button
v-else
:class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
@@ -49,7 +49,7 @@
<template v-if="!confirmDelete">
<button
v-if="nameEditable"
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@@ -57,7 +57,7 @@
<PenLine class="h-4 w-4" />
</button>
<button
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@@ -83,7 +83,7 @@
<Check class="h-4 w-4" />
</button>
<button
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"

2
src/components/profile/ProfileManager.vue
View File

@@ -63,12 +63,10 @@
<CollapsibleContent>
<ProfileButton
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
class="border-0 border-b"
:selected="store.selectedProfile?.id === profile.id"
@select="store.selectProfile(profile.id); showProfileList=false"
@duplicate="store.duplicateProfile(profile.id)"
@delete="store.deleteProfile(profile.id)" />
<Separator />
</CollapsibleContent>
</Collapsible>
</div>