beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UI: Improve theme styles and remove "Seaweed" #2916

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2022-11-21 12:27:26 +01:00
parent 72fffc92fc
commit e1405eba54
15 changed files with 75 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/package-lock.json generated
View file

@ -3450,9 +3450,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001431",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
"integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
"version": "1.0.30001434",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
"integrity": "sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==",
"funding": [
{
"type": "opencollective",
@ -7671,9 +7671,13 @@
}
},
"node_modules/js-sdsl": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
"integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q=="
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
"integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/js-sdsl"
}
},
"node_modules/js-stringify": {
"version": "1.0.2",

16
frontend/src/component/photo/cards.vue
View file

@ -35,9 +35,9 @@
>
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:data-uid="photo.UID"
class="accent lighten-3 result placeholder"
class="card result placeholder"
>
<div class="accent lighten-2 image"/>
<div class="card darken-1 image"/>
<div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px"/>
<div class="pa-3 card-details">
<div>
@ -73,17 +73,15 @@
</div>
</div>
<div v-else
tile
:data-id="photo.ID"
:data-uid="photo.UID"
class="result accent lighten-3"
class="result card"
:class="photo.classes()"
@contextmenu.stop="onContextMenu($event, index)">
<div class="card-background accent lighten-3"></div>
<div class="card-background card"></div>
<div :key="photo.Hash"
:alt="photo.Title"
:title="photo.Title"
class="accent lighten-2 clickable image"
class="card darken-1 clickable image"
:style="`background-image: url(${photo.thumbnailUrl('tile_500')})`"
@touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@ -161,7 +159,7 @@
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
<v-layout row wrap align-center>
<v-flex xs6 class="text-xs-center pa-1">
<v-btn color="accent lighten-2"
<v-btn color="card darken-1"
small depressed dark block :round="false"
class="action-archive text-xs-center"
:title="$gettext('Archive')" @click.stop="photo.archive()">
@ -169,7 +167,7 @@
</v-btn>
</v-flex>
<v-flex xs6 class="text-xs-center pa-1">
<v-btn color="accent lighten-2"
<v-btn color="card darken-1"
small depressed dark block :round="false"
class="action-approve text-xs-center"
:title="$gettext('Approve')" @click.stop="photo.approve()">

4
frontend/src/component/photo/list.vue
View file

@ -52,14 +52,14 @@
<div
v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:key="photo.Hash"
class="image accent lighten-2"
class="image card darken-1"
/>
<div
v-else
:key="photo.Hash"
:alt="photo.Title"
:style="`background-image: url(${photo.thumbnailUrl('tile_50')})`"
class="accent lighten-2 clickable image"
class="card darken-1 clickable image"
@touchstart="onMouseDown($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@mousedown="onMouseDown($event, index)"

4
frontend/src/component/photo/mosaic.vue
View file

@ -40,7 +40,7 @@
<div class="image-container">
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
:data-uid="photo.UID"
class="accent lighten-2 result image"
class="card darken-1 result image"
/>
<div v-else
:key="photo.Hash"
@ -48,7 +48,7 @@
:data-id="photo.ID"
:data-uid="photo.UID"
:style="`background-image: url(${photo.thumbnailUrl('tile_224')})`"
:class="photo.classes().join(' ') + ' accent lighten-2 result clickable image'"
:class="photo.classes().join(' ') + ' card darken-1 result clickable image'"
:alt="photo.Title"
:title="photo.Title"
@contextmenu.stop="onContextMenu($event, index)"

12
frontend/src/css/themes.css
View file

@ -21,6 +21,18 @@ body.dark-theme #photoprism .v-tabs .v-badge__badge {
color: #000000;
}
body.dark-theme #photoprism .theme--light.v-table thead th {
color: #ffffff;
}
.card {
background-color: #77787e;
}
body.dark-theme .card {
background-color: #4c4e52;
}
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: transparent;
}

12
frontend/src/css/themes/electra.css
View file

@ -1,7 +1,7 @@
/* Electra Theme */
body.dark-theme.theme-electra {
background: #161025 !important;
background: #26243a !important;
}
#photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
@ -25,21 +25,21 @@ body.dark-theme.theme-electra {
.theme-electra .p-page,
.theme-electra .form,
.theme-electra .v-content {
background: #161025 !important;
background: #26243a !important;
}
#photoprism.theme-electra .theme--light.v-small-dialog__content,
#photoprism.theme-electra .theme--light.v-sheet,
#photoprism.theme-electra .theme--light.v-card {
background: #161025;
background: #26243a;
}
.theme-electra .application.theme--light {
background: #161025;
background: #26243a;
}
#photoprism.theme-electra .theme--light .v-table {
background: #161025;
background: #26243a;
}
#photoprism. .theme--light.v-table thead th,
@ -48,7 +48,7 @@ body.dark-theme.theme-electra {
}
#photoprism.theme-electra .theme--light.v-table tbody tr:hover {
background: #23164f;
background: #403e54;
}
#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {

2
frontend/src/dialog/photo/edit/details.vue
View file

@ -15,7 +15,7 @@
<v-img v-touch="{left, right}"
:src="model.thumbnailUrl('tile_500')"
aspect-ratio="1"
class="accent lighten-2 elevation-0 clickable"
class="card darken-1 elevation-0 clickable"
@click.exact="openPhoto()"
>
</v-img>

2
frontend/src/dialog/photo/edit/files.vue
View file

@ -30,7 +30,7 @@
aspect-ratio="1"
max-width="112"
max-height="112"
class="accent lighten-2 elevation-0 clickable my-1"
class="card darken-1 elevation-0 clickable my-1"
@click.exact="openFile(file)"
>
</v-img>

6
frontend/src/dialog/photo/edit/people.vue
View file

@ -23,12 +23,12 @@
:data-id="marker.UID"
style="user-select: none;"
:class="marker.classes()"
class="result accent lighten-3">
<div class="card-background accent lighten-3"></div>
class="result card">
<div class="card-background card"></div>
<v-img :src="marker.thumbnailUrl('tile_320')"
:transition="false"
aspect-ratio="1"
class="accent lighten-2">
class="card darken-1">
<v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject"
icon flat small absolute :title="$gettext('Remove')"
@click.stop.prevent="onReject(marker)">

54
frontend/src/options/themes.js
View file

@ -10,6 +10,7 @@ let themes = {
colors: {
application: "#F5F5F5",
form: "#eeeeee",
card: "#bdbdbd",
primary: "#FFCA28",
"primary-button": "#212121",
"secondary-dark": "#212121",
@ -40,6 +41,7 @@ let themes = {
colors: {
application: "#525252",
form: "#e5e4e2",
card: "#444444",
primary: "#c8bdb1",
"primary-button": "#726e69",
"secondary-dark": "#c8bdb1",
@ -70,6 +72,7 @@ let themes = {
colors: {
application: "#eceff1",
form: "#eceff1",
card: "#bdbdbd",
primary: "#80deea",
"primary-button": "#757575",
"secondary-dark": "#757575",
@ -100,6 +103,7 @@ let themes = {
colors: {
application: "#FDEDF5",
form: "#fafafa",
card: "#bdbdbd",
primary: "#ffb3cc",
"primary-button": "#EA3495",
"secondary-dark": "#EA3495",
@ -123,36 +127,6 @@ let themes = {
"navigation-home": "#891A55",
},
},
seaweed: {
name: "seaweed",
dark: false,
sponsor: false,
colors: {
application: "#fafafa",
form: "#fafafa",
primary: "#26a69a",
"primary-button": "#3b5e5b",
"secondary-dark": "#1c7d73",
secondary: "#b0bec5",
"secondary-light": "#c1ccd1",
accent: "#b0bec5",
error: "#e57373",
info: "#00acc1",
success: "#4db6ac",
warning: "#ffd740",
remove: "#e57373",
restore: "#64b5f6",
album: "#ffab00",
download: "#00bfa5",
private: "#00b8d4",
edit: "#00b8d4",
share: "#9575cd",
love: "#ef5350",
terminal: "#333333",
navigation: "#37474f",
"navigation-home": "#263238",
},
},
lavender: {
name: "lavender",
dark: false,
@ -160,6 +134,7 @@ let themes = {
colors: {
application: "#fafafa",
form: "#fafafa",
card: "#bdbdbd",
primary: "#9ca2c9",
"primary-button": "#6c6f84",
"secondary-dark": "#475185",
@ -190,6 +165,7 @@ let themes = {
colors: {
application: "#eeeeee",
form: "#eeeeee",
card: "#bdbdbd",
primary: "#a5b3c0",
"primary-button": "#212121",
"secondary-dark": "#212121",
@ -220,6 +196,7 @@ let themes = {
colors: {
application: "#e5e4e2",
form: "#e5e4e2",
card: "#bdbdbd",
primary: "#c8bdb1",
"primary-button": "#353839",
"secondary-dark": "#353839",
@ -250,6 +227,7 @@ let themes = {
colors: {
application: "#444",
form: "#eeeeee",
card: "#3c3f41",
primary: "#c4f1e5",
"primary-button": "#74817d",
"secondary-dark": "#c8e3e7",
@ -280,6 +258,7 @@ let themes = {
colors: {
application: "#444",
form: "#eeeeee",
card: "#3c3f41",
primary: "#ffb700",
"primary-button": "#918c7d",
"secondary-dark": "#ffb700",
@ -310,6 +289,7 @@ let themes = {
colors: {
application: "#212121",
form: "#AFB42B",
card: "#3c3f41",
primary: "#04acaf",
"primary-button": "#444444",
"secondary-dark": "#04acaf",
@ -340,6 +320,7 @@ let themes = {
colors: {
application: "#212121",
form: "#AFB42B",
card: "#3c3f41",
primary: "#814fd9",
"primary-button": "#7e57c2",
"secondary-dark": "#814fd9",
@ -370,6 +351,7 @@ let themes = {
colors: {
application: "#353535",
form: "#eeeeee",
card: "#3c3f41",
primary: "#AFB4D4",
"primary-button": "#545465",
"secondary-dark": "#9BA0C5",
@ -399,12 +381,13 @@ let themes = {
title: "Electra",
name: "electra",
colors: {
application: "#161025",
application: "#26243a",
form: "#eeeeee",
card: "#3b394e",
primary: "#D3CBFF",
"primary-button": "#53478a",
"secondary-dark": "#9c8aef",
secondary: "#0f0723",
secondary: "#0c0910",
"secondary-light": "#2f2b44",
accent: "#262238",
error: "#e57373",
@ -420,7 +403,7 @@ let themes = {
share: "#9575cd",
love: "#ef5350",
terminal: "#070121",
navigation: "#070121",
navigation: "#0f0e1f",
"navigation-home": "#02000e",
},
},
@ -484,11 +467,6 @@ let options = [
value: "raspberry",
disabled: false,
},
{
text: $gettext("Seaweed"),
value: "seaweed",
disabled: false,
},
{
text: $gettext("Shadow"),
value: "shadow",

6
frontend/src/page/albums.vue
View file

@ -85,19 +85,19 @@
<v-card tile
:data-uid="album.UID"
style="user-select: none"
class="result accent lighten-3"
class="result card"
:class="album.classes(selection.includes(album.UID))"
:to="album.route(view)"
@contextmenu.stop="onContextMenu($event, index)"
>
<div class="card-background accent lighten-3" style="user-select: none"></div>
<div class="card-background card" style="user-select: none"></div>
<v-img
:src="album.thumbnailUrl('tile_500')"
:alt="album.Title"
:transition="false"
aspect-ratio="1"
style="user-select: none"
class="accent lighten-2 clickable"
class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/labels.vue
View file

@ -63,19 +63,19 @@
<v-card tile
:data-uid="label.UID"
style="user-select: none"
class="result accent lighten-3"
class="result card"
:class="label.classes(selection.includes(label.UID))"
:to="label.route(view)"
@contextmenu.stop="onContextMenu($event, index)"
>
<div class="card-background accent lighten-3"></div>
<div class="card-background card"></div>
<v-img
:src="label.thumbnailUrl('tile_500')"
:alt="label.Name"
:transition="false"
aspect-ratio="1"
style="user-select: none"
class="accent lighten-2 clickable"
class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/library/browse.vue
View file

@ -51,18 +51,18 @@
>
<v-card tile
:data-uid="model.UID"
class="result accent lighten-3"
class="result card"
:class="model.classes(selection.includes(model.UID))"
@contextmenu.stop="onContextMenu($event, index)"
>
<div class="card-background accent lighten-3"></div>
<div class="card-background card"></div>
<v-img
:src="model.thumbnailUrl('tile_500')"
:alt="model.Name"
:transition="false"
loading="lazy"
aspect-ratio="1"
class="accent lighten-2 clickable"
class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)"

6
frontend/src/page/people/new.vue
View file

@ -46,12 +46,12 @@
<v-card :data-id="model.ID"
tile style="user-select: none;"
:class="model.classes()"
class="result accent lighten-3">
<div class="card-background accent lighten-3"></div>
class="result card">
<div class="card-background card"></div>
<v-img :src="model.thumbnailUrl('tile_320')"
:transition="false"
aspect-ratio="1"
class="accent lighten-2 clickable"
class="card darken-1 clickable"
@click.stop.prevent="onView(model)">
<v-btn :ripple="false" :depressed="false" class="input-hidden"
icon flat small absolute

6
frontend/src/page/people/recognized.vue
View file

@ -69,19 +69,19 @@
<v-card tile
:data-uid="model.UID"
style="user-select: none"
class="result accent lighten-3"
class="result card"
:class="model.classes(selection.includes(model.UID))"
:to="model.route(view)"
@contextmenu.stop="onContextMenu($event, index)"
>
<div class="card-background accent lighten-3"></div>
<div class="card-background card"></div>
<v-img
:src="model.thumbnailUrl('tile_320')"
:alt="model.Name"
:transition="false"
aspect-ratio="1"
style="user-select: none"
class="accent lighten-2 clickable"
class="card darken-1 clickable"
@touchstart.passive="input.touchStart($event, index)"
@touchend.stop.prevent="onClick($event, index)"
@mousedown.stop.prevent="input.mouseDown($event, index)"