jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made color picker compatible with dark mode

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-15 12:17:12 +02:00
parent 1103248574
commit 09b2c38b43
1 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
app/imports/ui/components/ColorPicker.vue
View File

@@ -11,64 +11,66 @@
>
<v-icon>format_paint</v-icon>
</v-btn>
<div class="white overflow-hidden">
<v-item-group v-model="color" mandatory>
<v-layout row wrap>
<v-item
v-for="kebabColorOption in colors"
:key="kebabColorOption"
:value="kebabToCamelCase(kebabColorOption)"
>
<div
slot-scope="{ active, toggle }"
:class="[kebabColorOption, kebabShade]"
class="color-swatch d-flex align-center"
@click="toggle"
>
<v-scroll-y-transition>
<v-icon
v-if="active"
:dark="isDark(kebabColorOption, kebabShade)"
>
check
</v-icon>
</v-scroll-y-transition>
</div>
</v-item>
<div class="spacer" v-for="i in 8"/>
</v-layout>
</v-item-group>
<v-item-group class="mt-2" v-model="shade" mandatory>
<v-layout wrap>
<v-item
v-for="kebabShadeOption in shades"
:key="kebabShadeOption"
:value="kebabToCamelCase(kebabShadeOption)"
>
<div
slot-scope="{ active, toggle }"
:class="[kebabColor, kebabShadeOption]"
class="shade-swatch d-flex align-center"
@click="toggle"
>
<v-scroll-y-transition>
<v-icon
v-if="active"
:dark="isDark(kebabColor, kebabShadeOption)"
>
check
</v-icon>
</v-scroll-y-transition>
</div>
</v-item>
<div class="spacer" v-for="i in 8"/>
</v-layout>
</v-item-group>
<v-layout row class="mt-2">
<v-card class="overflow-hidden">
<v-card-text>
<v-item-group v-model="color" mandatory>
<v-layout row wrap>
<v-item
v-for="kebabColorOption in colors"
:key="kebabColorOption"
:value="kebabToCamelCase(kebabColorOption)"
>
<div
slot-scope="{ active, toggle }"
:class="[kebabColorOption, kebabShade]"
class="color-swatch d-flex align-center"
@click="toggle"
>
<v-scroll-y-transition>
<v-icon
v-if="active"
:class="{dark: isDark(kebabColorOption, kebabShade)}"
>
check
</v-icon>
</v-scroll-y-transition>
</div>
</v-item>
<div class="spacer" v-for="i in 8"/>
</v-layout>
</v-item-group>
<v-item-group class="mt-2" v-model="shade" mandatory>
<v-layout wrap>
<v-item
v-for="kebabShadeOption in shades"
:key="kebabShadeOption"
:value="kebabToCamelCase(kebabShadeOption)"
>
<div
slot-scope="{ active, toggle }"
:class="[kebabColor, kebabShadeOption]"
class="shade-swatch d-flex align-center"
@click="toggle"
>
<v-scroll-y-transition>
<v-icon
v-if="active"
:class="{dark: isDark(kebabColor, kebabShadeOption)}"
>
check
</v-icon>
</v-scroll-y-transition>
</div>
</v-item>
<div class="spacer" v-for="i in 8"/>
</v-layout>
</v-item-group>
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn flat @click="opened = false">Done</v-btn>
</v-layout>
</div>
</v-card-actions>
</v-card>
</v-menu>
</template>
@@ -178,6 +180,12 @@
.v-icon {
height: 30px;
}
.v-icon {
color: black;
}
.dark.v-icon {
color: white;
}
.layout {
max-width: 270px;
}