Frontend: Refactored theme colors

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2019-12-02 14:17:03 +01:00
parent 4eb53c3994
commit 9571e1bef2
23 changed files with 77 additions and 77 deletions

View file

@ -1,6 +1,6 @@
<template>
<div id="p-navigation">
<v-toolbar dark scroll-off-screen color="dark-background" class="hidden-lg-and-up p-navigation-small"
<v-toolbar dark scroll-off-screen color="navigation" class="hidden-lg-and-up p-navigation-small"
@click.stop="showNavigation()">
<v-toolbar-side-icon class="p-navigation-show"></v-toolbar-side-icon>
@ -11,7 +11,7 @@
<v-navigation-drawer
v-model="drawer"
:mini-variant="mini"
class="p-navigation-sidebar dark-background"
class="p-navigation-sidebar navigation"
width="270"
fixed dark app
>

View file

@ -12,7 +12,7 @@
>
<v-btn
slot="activator"
color="grey darken-2"
color="accent darken-2"
dark
fab
class="p-photo-clipboard-menu"
@ -90,7 +90,7 @@
fab
dark
small
color="grey"
color="accent"
@click.stop="clearClipboard()"
class="p-photo-clipboard-clear"
>

View file

@ -18,13 +18,13 @@
<v-hover>
<v-card tile slot-scope="{ hover }"
:dark="$clipboard.has(photo)"
:class="$clipboard.has(photo) ? 'elevation-10 ma-0 grey darken-1 white--text' : 'elevation-0 ma-1 grey lighten-3'">
:class="$clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'">
<v-img
:src="photo.getThumbnailUrl('tile_500')"
aspect-ratio="1"
v-bind:class="{ selected: $clipboard.has(photo) }"
style="cursor: pointer"
class="grey lighten-2"
class="accent lighten-2"
@click="openPhoto(index)"
>
@ -35,7 +35,7 @@
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
<v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
</v-layout>
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@ -43,7 +43,7 @@
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
<v-icon v-else color="accent lighten-3">radio_button_off</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@ -52,7 +52,7 @@
@click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite
</v-icon>
<v-icon v-else color="grey lighten-3">favorite_border</v-icon>
<v-icon v-else color="accent lighten-3">favorite_border</v-icon>
</v-btn>
</v-img>

View file

@ -14,8 +14,8 @@
<v-btn icon small :ripple="false"
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(props.item)">
<v-icon v-if="selection.length && $clipboard.has(props.item)" color="grey darken-2">check_circle</v-icon>
<v-icon v-else-if="!$clipboard.has(props.item)" color="grey lighten-4">radio_button_off</v-icon>
<v-icon v-if="selection.length && $clipboard.has(props.item)" color="accent darken-2">check_circle</v-icon>
<v-icon v-else-if="!$clipboard.has(props.item)" color="accent lighten-4">radio_button_off</v-icon>
</v-btn>
</td>
<td @click="openPhoto(props.index)" class="p-pointer">{{ props.item.PhotoTitle }}</td>
@ -26,7 +26,7 @@
class="p-photo-like"
@click.stop.prevent="props.item.toggleLike()">
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
<v-icon v-else color="grey lighten-4">favorite_border</v-icon>
<v-icon v-else color="accent lighten-4">favorite_border</v-icon>
</v-btn>
</td>
</template>

View file

@ -22,7 +22,7 @@
:title="photo.PhotoTitle">
<v-img :src="photo.getThumbnailUrl('tile_224')"
aspect-ratio="1"
class="grey lighten-2"
class="accent lighten-2"
style="cursor: pointer"
@click="openPhoto(index)"
>
@ -34,7 +34,7 @@
ma-0
>
<v-progress-circular indeterminate
color="grey lighten-5"></v-progress-circular>
color="accent lighten-5"></v-progress-circular>
</v-layout>
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@ -42,7 +42,7 @@
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
<v-icon v-else color="accent lighten-3">radio_button_off</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@ -50,7 +50,7 @@
class="p-photo-like"
@click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
<v-icon v-else color="grey lighten-3">favorite_border</v-icon>
<v-icon v-else color="accent lighten-3">favorite_border</v-icon>
</v-btn>
</v-img>

View file

@ -1,13 +1,13 @@
<template>
<v-form ref="form" autocomplete="off" class="p-photo-search" lazy-validation @submit.prevent="filterChange" dense>
<v-toolbar flat color="medium-background">
<v-toolbar flat color="secondary">
<v-text-field class="pt-3 pr-3 p-search-field"
autocomplete="off"
single-line
label="Search"
prepend-inner-icon="search"
clearable
color="blue-grey"
color="secondary-dark"
@click:clear="clearQuery"
v-model="filter.q"
@keyup.enter.native="filterChange"
@ -42,7 +42,7 @@
<v-card class="pt-1"
flat
color="light-background"
color="secondary-light"
v-show="searchExpanded">
<v-card-text>
<v-layout row wrap>
@ -50,7 +50,7 @@
<v-select @change="dropdownChange"
label="Country"
flat solo hide-details
color="blue-grey"
color="secondary-dark"
item-value="LocCountryCode"
item-text="LocCountry"
v-model="filter.country"
@ -61,7 +61,7 @@
<v-select @change="dropdownChange"
label="Camera"
flat solo hide-details
color="blue-grey"
color="secondary-dark"
item-value="ID"
item-text="CameraModel"
v-model="filter.camera"
@ -72,7 +72,7 @@
<v-select @change="dropdownChange"
label="View"
flat solo hide-details
color="blue-grey"
color="secondary-dark"
v-model="settings.view"
:items="options.views"
id="viewSelect">
@ -82,7 +82,7 @@
<v-select @change="dropdownChange"
label="Sort By"
flat solo hide-details
color="blue-grey"
color="secondary-dark"
v-model="filter.order"
:items="options.sorting">
</v-select>

View file

@ -22,7 +22,7 @@
:title="photo.PhotoTitle">
<v-img :src="photo.getThumbnailUrl('tile_500')"
aspect-ratio="1"
class="grey lighten-2"
class="accent lighten-2"
style="cursor: pointer"
@click="openPhoto(index)"
>
@ -34,7 +34,7 @@
ma-0
>
<v-progress-circular indeterminate
color="grey lighten-5"></v-progress-circular>
color="accent lighten-5"></v-progress-circular>
</v-layout>
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@ -42,7 +42,7 @@
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
<v-icon v-else-if="!$clipboard.has(photo)" color="grey lighten-3">radio_button_off</v-icon>
<v-icon v-else-if="!$clipboard.has(photo)" color="accent lighten-3">radio_button_off</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@ -50,7 +50,7 @@
class="p-photo-like"
@click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
<v-icon v-else color="grey lighten-3">favorite_border</v-icon>
<v-icon v-else color="accent lighten-3">favorite_border</v-icon>
</v-btn>
</v-img>

View file

@ -1,7 +1,7 @@
<template>
<transition name="fade-transition">
<v-btn
color="grey darken-2"
color="accent darken-2"
dark
fab
fixed

View file

@ -3,13 +3,13 @@
:infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-albums-search" lazy-validation @submit.prevent="updateQuery" dense>
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-text-field class="pt-3 pr-3"
single-line
label="Search"
prepend-inner-icon="search"
clearable
color="blue-grey"
color="secondary-dark"
@click:clear="clearQuery"
v-model="filter.q"
@keyup.enter.native="updateQuery"
@ -44,12 +44,12 @@
xs6 sm4 md3 lg2 d-flex
>
<v-hover>
<v-card tile class="elevation-0 ma-1 grey lighten-3">
<v-card tile class="elevation-0 ma-1 accent lighten-3">
<v-img
:src="album.getThumbnailUrl('tile_500')"
aspect-ratio="1"
style="cursor: pointer"
class="grey lighten-2"
class="accent lighten-2"
@click.prevent="openAlbum(index)"
>
<v-layout
@ -59,7 +59,7 @@
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
<v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
</v-layout>
</v-img>
@ -69,7 +69,7 @@
<v-btn icon @click.stop.prevent="album.toggleLike()">
<v-icon v-if="album.AlbumFavorite" color="#FFD600">star
</v-icon>
<v-icon v-else color="grey lighten-2">star</v-icon>
<v-icon v-else color="accent lighten-2">star</v-icon>
</v-btn>
</v-card-actions>
</v-card>

View file

@ -1,6 +1,6 @@
<template>
<div>
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-toolbar-title>Events</v-toolbar-title>
<v-spacer></v-spacer>

View file

@ -3,13 +3,13 @@
:infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-labels-search" lazy-validation @submit.prevent="updateQuery" dense>
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-text-field class="pt-3 pr-3"
single-line
label="Search"
prepend-inner-icon="search"
clearable
color="blue-grey"
color="secondary-dark"
@click:clear="clearQuery"
v-model="filter.q"
@keyup.enter.native="updateQuery"
@ -40,12 +40,12 @@
xs6 sm4 md3 lg2 d-flex
>
<v-hover>
<v-card tile class="elevation-0 ma-1 grey lighten-3">
<v-card tile class="elevation-0 ma-1 accent lighten-3">
<v-img
:src="label.getThumbnailUrl('tile_500')"
aspect-ratio="1"
style="cursor: pointer"
class="grey lighten-2"
class="accent lighten-2"
@click.prevent="openLabel(index)"
>
<v-layout
@ -55,7 +55,7 @@
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
<v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
</v-layout>
</v-img>
@ -65,7 +65,7 @@
<v-btn icon @click.stop.prevent="label.toggleLike()">
<v-icon v-if="label.LabelFavorite" color="#FFD600">star
</v-icon>
<v-icon v-else color="grey lighten-2">star</v-icon>
<v-icon v-else color="accent lighten-2">star</v-icon>
</v-btn>
</v-card-actions>
</v-card>

View file

@ -4,8 +4,8 @@
v-model="active"
flat
grow
color="blue-grey lighten-4"
slider-color="blue-grey darken-1"
color="secondary"
slider-color="secondary-dark"
height="64"
>
<v-tab id="tab-upload" v-if="!readonly" ripple @click="changePath('/library/upload')">

View file

@ -9,11 +9,11 @@
<span v-else>Press button to import photos from directory...</span>
</p>
<v-progress-linear color="blue-grey" :value="completed" :indeterminate="busy"></v-progress-linear>
<v-progress-linear color="secondary-dark" :value="completed" :indeterminate="busy"></v-progress-linear>
<v-btn
:disabled="busy"
color="blue-grey"
color="secondary-dark"
class="white--text ml-0 mt-2"
depressed
@click.stop="startImport()"

View file

@ -9,11 +9,11 @@
<span v-else>Press button to re-index existing files and photos...</span>
</p>
<v-progress-linear color="blue-grey" :value="completed" :indeterminate="busy"></v-progress-linear>
<v-progress-linear color="secondary-dark" :value="completed" :indeterminate="busy"></v-progress-linear>
<v-btn
:disabled="busy"
color="blue-grey"
color="secondary-dark"
class="white--text ml-0 mt-2"
depressed
@click.stop="startIndexing()"

View file

@ -11,11 +11,11 @@
<span v-else-if="completed === 100">Done.</span>
</p>
<v-progress-linear color="blue-grey" v-model="completed" :indeterminate="indexing"></v-progress-linear>
<v-progress-linear color="secondary-dark" v-model="completed" :indeterminate="indexing"></v-progress-linear>
<v-btn
:disabled="busy"
color="blue-grey"
color="secondary-dark"
class="white--text ml-0 mt-2"
depressed
@click.stop="uploadDialog()"

View file

@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-login">
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer></v-spacer>
@ -13,7 +13,7 @@
<v-form ref="form" autocomplete="off" class="p-form-login" @submit.prevent="login" dense>
<v-text-field
label="Password"
color="grey"
color="accent"
v-model="password"
solo
flat
@ -21,7 +21,7 @@
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = !showPassword"
></v-text-field>
<v-btn color="blue-grey"
<v-btn color="secondary-dark"
class="white--text ml-0"
depressed
@click.stop="login">

View file

@ -1,6 +1,6 @@
<template>
<div>
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-toolbar-title>Not implemented yet</v-toolbar-title>
<v-spacer></v-spacer>

View file

@ -2,7 +2,7 @@
<v-container fluid fill-height class="pa-0 p-page p-page-places">
<l-map :zoom="zoom" :center="center" :bounds="bounds" :options="options">
<l-control position="bottomright">
<v-toolbar dense floating color="grey lighten-4" v-on:dblclick.stop v-on:click.stop>
<v-toolbar dense floating color="accent lighten-4" v-on:dblclick.stop v-on:click.stop>
<v-btn icon v-on:click="currentPosition()">
<v-icon>my_location</v-icon>
</v-btn>
@ -12,7 +12,7 @@
label="Search"
prepend-inner-icon="search"
clearable
color="blue-grey"
color="secondary-dark"
@click:clear="clearQuery"
v-model="query.q"
@keyup.enter.native="formChange"

View file

@ -4,8 +4,8 @@
v-model="active"
flat
grow
color="blue-grey lighten-4"
slider-color="blue-grey darken-1"
color="secondary"
slider-color="secondary-dark"
height="64"
>
<v-tab id="tab-settings-general" @click="changePath('/settings')">

View file

@ -7,7 +7,7 @@
<v-select
:items="options.languages"
label="Language"
color="blue-grey"
color="secondary-dark"
v-model="settings.language"
flat
></v-select>
@ -17,14 +17,14 @@
<v-select
:items="options.themes"
label="Theme"
color="blue-grey"
color="secondary-dark"
v-model="settings.theme"
flat
></v-select>
</v-flex>
</v-layout>
<v-btn color="blue-grey"
<v-btn color="secondary-dark"
class="white--text ml-0 mt-2"
depressed
@click.stop="save">

View file

@ -1,6 +1,6 @@
<template>
<div>
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-toolbar-title>Not implemented yet</v-toolbar-title>
<v-spacer></v-spacer>

View file

@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-todo">
<v-toolbar flat color="blue-grey lighten-4">
<v-toolbar flat color="secondary">
<v-toolbar-title>Not implemented yet</v-toolbar-title>
<v-spacer></v-spacer>

View file

@ -1,8 +1,10 @@
{
"default": {
"primary": "#FFD600",
"secondary": "#b0bec5",
"accent": "#00B8D4",
"secondary-dark": "#607D8B",
"secondary": "#CFD8DC",
"secondary-light": "#ECEFF1",
"accent": "#9E9E9E",
"error": "#E57373",
"info": "#00B8D4",
"success": "#00BFA5",
@ -10,14 +12,14 @@
"delete": "#E57373",
"love": "#EF5350",
"terminal": "#333333",
"dark-background": "#424242",
"medium-background": "#CFD8DC",
"light-background": "#ECEFF1"
"navigation": "#424242"
},
"whale": {
"primary": "#82B1FF",
"secondary": "#b0bec5",
"accent": "#00B8D4",
"secondary-dark": "#757575",
"secondary": "#E0E0E0",
"secondary-light": "#EEEEEE",
"accent": "#9E9E9E",
"error": "#E57373",
"info": "#00B8D4",
"success": "#00BFA5",
@ -25,14 +27,14 @@
"delete": "#E57373",
"love": "#EF5350",
"terminal": "#333333",
"dark-background": "#616161",
"medium-background": "#E0E0E0",
"light-background": "#EEEEEE"
"navigation": "#616161"
},
"raspberry": {
"primary": "#F48FB1",
"secondary": "#b0bec5",
"accent": "#00B8D4",
"secondary-dark": "#757575",
"secondary": "#E0E0E0",
"secondary-light": "#EEEEEE",
"accent": "#9E9E9E",
"error": "#E57373",
"info": "#00B8D4",
"success": "#00BFA5",
@ -40,8 +42,6 @@
"delete": "#E57373",
"love": "#EF5350",
"terminal": "#333333",
"dark-background": "#616161",
"medium-background": "#E0E0E0",
"light-background": "#EEEEEE"
"navigation": "#616161"
}
}