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

UI: Add Greyscale theme #700

Browse source
This commit is contained in:
Michael Mayer 2021-01-15 18:30:26 +01:00
parent b5492e361e
commit bc0bde4771
12 changed files with 287 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app.js
View file

@ -87,7 +87,7 @@ Vue.prototype.$isMobile = isMobile;
Vue.prototype.$rtl = rtl;
// Register Vuetify
Vue.use(Vuetify, { rtl, theme: config.theme });
Vue.use(Vuetify, { rtl, theme: config.theme.colors });
// Register other VueJS plugins
Vue.use(GetTextPlugin, {

9
frontend/src/common/config.js
View file

@ -192,10 +192,17 @@ export default class Config {
setTheme(name) {
this.themeName = name;
const el = document.getElementById("photoprism");
if (el) {
el.className = "theme-" + name;
}
this.theme = themes[name] ? themes[name] : themes["default"];
if (this.$vuetify) {
this.$vuetify.theme = this.theme;
this.$vuetify.theme = this.theme.colors;
}
return this;

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

@ -1,75 +1,74 @@
.theme-onyx .v-content__wrap,
.theme-onyx .p-page,
.theme-onyx .form,
.theme-onyx .v-content {
/* Dark Theme */
.theme-grayscale .v-content__wrap,
.theme-grayscale .p-page,
.theme-grayscale .form,
.theme-grayscale .v-content {
background: #525252 !important;
}
#photoprism.theme-onyx .theme--light.v-small-dialog__content,
#photoprism.theme-onyx .theme--light.v-sheet,
#photoprism.theme-onyx .theme--light.v-card {
#photoprism.theme-grayscale .theme--light.v-small-dialog__content,
#photoprism.theme-grayscale .theme--light.v-sheet,
#photoprism.theme-grayscale .theme--light.v-card {
background: #525252;
}
.theme-onyx .application.theme--light {
.theme-grayscale .application.theme--light {
background: #525252;
}
#photoprism.theme-onyx .theme--light .v-table {
#photoprism.theme-grayscale .theme--light .v-table {
background: #4E4E4E;
}
#photoprism.theme-onyx .theme--light.v-table thead th,
#photoprism.theme-onyx .theme--light.v-table tbody td {
#photoprism.theme-grayscale .theme--light.v-table thead th,
#photoprism.theme-grayscale .theme--light.v-table tbody td {
color: #fff;
}
#photoprism.theme-onyx .theme--light.v-table tbody tr:hover {
#photoprism.theme-grayscale .theme--light.v-table tbody tr:hover {
background: #666;
}
#photoprism.theme-onyx .theme--light.v-chip,
#photoprism.theme-onyx .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
#photoprism.theme-grayscale .theme--light.v-chip,
#photoprism.theme-grayscale .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: #777;
}
#photoprism.theme-onyx .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
#photoprism.theme-grayscale .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: #4E4E4E;
}
#photoprism.theme-onyx,
#photoprism.theme-onyx .p-page a,
#photoprism.theme-onyx .v-datatable a,
#photoprism.theme-onyx .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-onyx .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-onyx .theme--light {
#photoprism.theme-grayscale,
#photoprism.theme-grayscale .p-page a,
#photoprism.theme-grayscale .v-datatable a,
#photoprism.theme-grayscale .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-grayscale .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-grayscale .theme--light {
color: #fff;
}
#photoprism.theme-onyx .theme--light.v-list {
#photoprism.theme-grayscale .theme--light.v-list {
background: #555;
}
#photoprism.theme-onyx .theme--light.v-select .v-select__selections {
#photoprism.theme-grayscale .p-page a.text-link,
#photoprism.theme-grayscale .theme--light.v-select .v-select__selections {
color: #e3d5c3;
}
#photoprism.theme-onyx .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-onyx .accent--text {
#photoprism.theme-grayscale .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-grayscale .accent--text {
color: #e3d5c3 !important;
}
#photoprism.theme-onyx .p-page a.text-link {
color: #e3d5c3;
}
#photoprism.theme-onyx .theme--light.v-input:not(.v-input--is-disabled) input,
#photoprism.theme-onyx .theme--light.v-input:not(.v-input--is-disabled) textarea {
#photoprism.theme-grayscale .theme--light.v-input:not(.v-input--is-disabled) input,
#photoprism.theme-grayscale .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #fff;
}
#photoprism.theme-onyx .theme--light.v-btn.v-btn--disabled,
#photoprism.theme-onyx .theme--light.v-btn.v-btn--disabled .v-btn__loading,
#photoprism.theme-onyx .theme--light.v-btn.v-btn--disabled .v-icon {
#photoprism.theme-grayscale .theme--light.v-btn.v-btn--disabled,
#photoprism.theme-grayscale .theme--light.v-btn.v-btn--disabled .v-btn__loading,
#photoprism.theme-grayscale .theme--light.v-btn.v-btn--disabled .v-icon {
color: #999 !important;
}

12
frontend/src/options/options.js
View file

@ -153,30 +153,42 @@ export const Themes = () => [
{
text: $gettext("Default"),
value: "default",
disabled: false,
},
{
text: $gettext("Grayscale"),
value: "grayscale",
disabled: !config.values.sponsor,
},
{
text: $gettext("Cyano"),
value: "cyano",
disabled: false,
},
{
text: $gettext("Lavender"),
value: "lavender",
disabled: false,
},
{
text: $gettext("Moonlight"),
value: "moonlight",
disabled: false,
},
{
text: $gettext("Onyx"),
value: "onyx",
disabled: false,
},
{
text: $gettext("Raspberry"),
value: "raspberry",
disabled: false,
},
{
text: $gettext("Seaweed"),
value: "seaweed",
sdisabled: false,
},
];
export const MapsAnimate = () => [

364
frontend/src/options/themes.json
View file

@ -1,170 +1,226 @@
{
"default": {
"application": "#F5F5F5",
"form": "#eeeeee",
"primary": "#FFCA28",
"secondary-dark": "#212121",
"secondary": "#bdbdbd",
"secondary-light": "#e0e0e0",
"accent": "#757575",
"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": "#212121",
"navigation-home": "#000000"
"dark": false,
"sponsor": false,
"colors": {
"application": "#F5F5F5",
"form": "#eeeeee",
"primary": "#FFCA28",
"secondary-dark": "#212121",
"secondary": "#bdbdbd",
"secondary-light": "#e0e0e0",
"accent": "#757575",
"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": "#212121",
"navigation-home": "#000000"
}
},
"grayscale": {
"dark": true,
"sponsor": true,
"colors": {
"application": "#525252",
"form": "#e5e4e2",
"primary": "#c8bdb1",
"secondary-dark": "#aba095",
"secondary": "#444",
"secondary-light": "#666",
"accent": "#333",
"error": "#e57373",
"info": "#5a94dd",
"success": "#4db6ac",
"warning": "#e3d181",
"love": "#ef5350",
"remove": "#e35333",
"restore": "#64b5f6",
"album": "#ffab40",
"download": "#07bd9f",
"private": "#48bcd6",
"edit": "#48bcd6",
"share": "#0070a0",
"terminal": "#333333",
"navigation": "#353839",
"navigation-home": "#212121"
}
},
"cyano": {
"application": "#eceff1",
"form": "#eceff1",
"primary": "#80deea",
"secondary-dark": "#757575",
"secondary": "#b0bec5",
"secondary-light": "#eeeeee",
"accent": "#757575",
"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": "#006064",
"navigation-home": "#37474f"
"dark": false,
"sponsor": false,
"colors": {
"application": "#eceff1",
"form": "#eceff1",
"primary": "#80deea",
"secondary-dark": "#757575",
"secondary": "#b0bec5",
"secondary-light": "#eeeeee",
"accent": "#757575",
"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": "#006064",
"navigation-home": "#37474f"
}
},
"raspberry": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#ffb3cc",
"secondary-dark": "#757575",
"secondary": "#fce4ec",
"secondary-light": "#eeeeee",
"accent": "#9e9e9e",
"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": "#616161",
"navigation": "#a40e52",
"navigation-home": "#880e4f"
"dark": false,
"sponsor": false,
"colors": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#ffb3cc",
"secondary-dark": "#757575",
"secondary": "#fce4ec",
"secondary-light": "#eeeeee",
"accent": "#9e9e9e",
"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": "#616161",
"navigation": "#a40e52",
"navigation-home": "#880e4f"
}
},
"seaweed": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#26a69a",
"secondary-dark": "#26a69a",
"secondary": "#b0bec5",
"secondary-light": "#b0bec5",
"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"
"dark": false,
"sponsor": false,
"colors": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#26a69a",
"secondary-dark": "#26a69a",
"secondary": "#b0bec5",
"secondary-light": "#b0bec5",
"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": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#8c9eff",
"secondary-dark": "#8c9eff",
"secondary": "#b0bec5",
"secondary-light": "#b0bec5",
"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"
"dark": false,
"sponsor": false,
"colors": {
"application": "#fafafa",
"form": "#fafafa",
"primary": "#8c9eff",
"secondary-dark": "#8c9eff",
"secondary": "#b0bec5",
"secondary-light": "#b0bec5",
"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"
}
},
"moonlight": {
"application": "#eeeeee",
"form": "#eeeeee",
"primary": "#a5b3c0",
"secondary-dark": "#212121",
"secondary": "#bdbdbd",
"secondary-light": "#e0e0e0",
"accent": "#757575",
"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": "#212121",
"navigation-home": "#000000"
"dark": false,
"sponsor": false,
"colors": {
"application": "#eeeeee",
"form": "#eeeeee",
"primary": "#a5b3c0",
"secondary-dark": "#212121",
"secondary": "#bdbdbd",
"secondary-light": "#e0e0e0",
"accent": "#757575",
"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": "#212121",
"navigation-home": "#000000"
}
},
"onyx": {
"application": "#525252",
"form": "#e5e4e2",
"primary": "#c8bdb1",
"secondary-dark": "#aba095",
"secondary": "#444",
"secondary-light": "#666",
"accent": "#333",
"error": "#e57373",
"info": "#5a94dd",
"success": "#4db6ac",
"warning": "#e3d181",
"love": "#ef5350",
"remove": "#e35333",
"restore": "#64b5f6",
"album": "#ffab40",
"download": "#07bd9f",
"private": "#48bcd6",
"edit": "#48bcd6",
"share": "#0070a0",
"terminal": "#333333",
"navigation": "#353839",
"navigation-home": "#212121"
"dark": false,
"sponsor": false,
"colors": {
"application": "#e5e4e2",
"form": "#e5e4e2",
"primary": "#c8bdb1",
"secondary-dark": "#353839",
"secondary": "#a8a8a8",
"secondary-light": "#cdccca",
"accent": "#656565",
"error": "#e57373",
"info": "#5a94dd",
"success": "#4db6ac",
"warning": "#e3d181",
"love": "#ef5350",
"remove": "#e35333",
"restore": "#64b5f6",
"album": "#ffab40",
"download": "#07bd9f",
"private": "#48bcd6",
"edit": "#48bcd6",
"share": "#0070a0",
"terminal": "#333333",
"navigation": "#353839",
"navigation-home": "#212121"
}
}
}

10
frontend/src/pages/settings/general.vue
View file

@ -14,8 +14,8 @@
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select
:disabled="busy"
v-model="settings.ui.theme"
:disabled="busy"
:items="options.Themes()"
:label="$gettext('Theme')"
color="secondary-dark"
@ -28,8 +28,8 @@
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select
:disabled="busy"
v-model="settings.ui.language"
:disabled="busy"
:items="options.Languages()"
:label="$gettext('Language')"
color="secondary-dark"
@ -240,8 +240,8 @@
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select
:disabled="busy"
v-model="settings.maps.style"
:disabled="busy"
:items="options.MapsStyle()"
:label="$gettext('Style')"
color="secondary-dark"
@ -254,8 +254,8 @@
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select
:disabled="busy"
v-model="settings.maps.animate"
:disabled="busy"
:items="options.MapsAnimate()"
:label="$gettext('Animation')"
color="secondary-dark"
@ -307,7 +307,7 @@ export default {
this.$config.load().then(() => {
this.settings.setValues(this.$config.settings());
this.busy = false;
})
});
},
onChange() {
const reload = this.settings.changed("ui", "language");

2
frontend/src/share.js
View file

@ -86,7 +86,7 @@ Vue.prototype.$isMobile = isMobile;
Vue.prototype.$rtl = rtl;
// Register Vuetify
Vue.use(Vuetify, { rtl, theme: config.theme });
Vue.use(Vuetify, { rtl, theme: config.theme.colors });
// Register other VueJS plugins
Vue.use(GetTextPlugin, {

4
internal/config/client.go
View file

@ -25,6 +25,7 @@ type ClientConfig struct {
SiteAuthor string `json:"siteAuthor"`
Debug bool `json:"debug"`
Demo bool `json:"demo"`
Sponsor bool `json:"sponsor"`
ReadOnly bool `json:"readonly"`
UploadNSFW bool `json:"uploadNSFW"`
Public bool `json:"public"`
@ -166,6 +167,7 @@ func (c *Config) PublicConfig() ClientConfig {
Copyright: c.Copyright(),
Debug: c.Debug(),
Demo: c.Demo(),
Sponsor: c.Sponsor(),
ReadOnly: c.ReadOnly(),
Public: c.Public(),
Experimental: c.Experimental(),
@ -216,6 +218,7 @@ func (c *Config) GuestConfig() ClientConfig {
Copyright: c.Copyright(),
Debug: c.Debug(),
Demo: c.Demo(),
Sponsor: c.Sponsor(),
ReadOnly: true,
UploadNSFW: c.UploadNSFW(),
Public: true,
@ -260,6 +263,7 @@ func (c *Config) UserConfig() ClientConfig {
Copyright: c.Copyright(),
Debug: c.Debug(),
Demo: c.Demo(),
Sponsor: c.Sponsor(),
ReadOnly: c.ReadOnly(),
UploadNSFW: c.UploadNSFW(),
Public: c.Public(),

5
internal/config/config.go
View file

@ -270,6 +270,11 @@ func (c *Config) Demo() bool {
return c.options.Demo
}
// Your continuous support helps to pay for development, hosting, and external services like satellite maps.
func (c *Config) Sponsor() bool {
return c.options.Sponsor
}
// Public tests if app runs in public mode and requires no authentication.
func (c *Config) Public() bool {
if c.Demo() {

1
internal/config/config_test.go
View file

@ -251,6 +251,7 @@ func TestConfig_ClientConfig(t *testing.T) {
assert.NotEmpty(t, cc.ManifestHash)
assert.Equal(t, true, cc.Debug)
assert.Equal(t, false, cc.Demo)
assert.Equal(t, false, cc.Sponsor)
assert.Equal(t, false, cc.ReadOnly)
}

6
internal/config/flags.go
View file

@ -18,6 +18,12 @@ var GlobalFlags = []cli.Flag{
Usage: "run in demo mode",
EnvVar: "PHOTOPRISM_DEMO",
},
cli.BoolFlag{
Name: "sponsor",
Hidden: true,
Usage: "your continuous support helps to pay for development, hosting, and external services like satellite maps",
EnvVar: "PHOTOPRISM_SPONSOR",
},
cli.BoolFlag{
Name: "public, p",
Usage: "no authentication required, disables password protection",

1
internal/config/options.go
View file

@ -35,6 +35,7 @@ type Options struct {
Copyright string `json:"-"`
Debug bool `yaml:"Debug" json:"Debug" flag:"debug"`
Demo bool `yaml:"Demo" json:"-" flag:"demo"`
Sponsor bool `yaml:"-" json:"-" flag:"sponsor"`
Public bool `yaml:"Public" json:"-" flag:"public"`
ReadOnly bool `yaml:"ReadOnly" json:"ReadOnly" flag:"read-only"`
Experimental bool `yaml:"Experimental" json:"Experimental" flag:"experimental"`