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

Frontend: Implement dark theme (Onyx) #700

Browse source
This commit is contained in:
Michael Mayer 2021-01-14 19:18:34 +01:00
parent 0ffdc9c457
commit 8175b33d46
10 changed files with 89 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="photoprism">
<div id="photoprism" :class="'theme-' + $config.themeName">
<p-loading-bar height="4"></p-loading-bar>
<p-notify></p-notify>

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

@ -50,6 +50,7 @@ export default class Config {
console.warn("config: values are empty");
this.debug = true;
this.demo = false;
this.themeName = "";
this.values = {};
this.page = {
title: "PhotoPrism",
@ -190,6 +191,7 @@ export default class Config {
}
setTheme(name) {
this.themeName = name;
this.theme = themes[name] ? themes[name] : themes["default"];
if (this.$vuetify) {

6
frontend/src/component/footer.vue
View file

@ -1,7 +1,7 @@
<template>
<v-card flat tile class="ma-0 pa-0 application p-about-footer">
<v-card-actions class="px-4 py-2">
<v-layout wrap align-top>
<v-layout wrap align-top pt-3>
<v-flex xs12 sm6 class="px-0 pb-2 body-1">
<router-link to="/about">
PhotoPrism®
@ -11,11 +11,11 @@
</v-flex>
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-xs-left text-sm-right">
<a href="https://docs.photoprism.org/credits/" class="primary--text text--darken-4"
<a href="https://docs.photoprism.org/credits/"
target="_blank">Thank you</a> to everyone who made this possible!
<br>
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE"
class="primary--text text--darken-4" target="_blank">
target="_blank">
3rd-party software packages</a>
</v-flex>
</v-layout>

2
frontend/src/component/navigation.vue
View file

@ -60,7 +60,7 @@
</v-list-tile>
<v-list-tile v-if="isMini" to="/browse" class="nav-browse" @click.stop="">
<v-list-tile-action :title="$gettext('Photos')">
<v-list-tile-action :title="$gettext('Search')">
<v-icon>image_search</v-icon>
</v-list-tile-action>

1
frontend/src/css/app.css
View file

@ -31,6 +31,7 @@ https://docs.photoprism.org/developer-guide/
@import url("../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
@import url("../../node_modules/vuetify/dist/vuetify.min.css");
@import url("../../node_modules/mapbox-gl/dist/mapbox-gl.css");
@import url("themes.css");
@import url("animate.css");
@import url("navigation.css");
@import url("logs.css");

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

@ -0,0 +1,67 @@
.theme-onyx .v-content__wrap,
.theme-onyx .p-page,
.theme-onyx .form,
.theme-onyx .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 {
background: #525252;
}
#photoprism.theme-onyx .theme--light .v-table,
.theme-onyx .application.theme--light {
background: #525252;
}
#photoprism.theme-onyx .theme--light.v-table thead th,
#photoprism.theme-onyx .theme--light.v-table tbody td {
color: #fff;
}
#photoprism.theme-onyx .theme--light.v-table tbody tr:hover {
background: #666;
}
#photoprism.theme-onyx .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: #525252;
}
#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 {
color: #fff;
}
/* #photoprism.theme-onyx .v-dialog .theme--light {
color: #333;
} */
#photoprism.theme-onyx .theme--light.v-list {
background: #555;
}
#photoprism.theme-onyx .theme--light.v-select .v-select__selections {
color: #e3d5c3;
}
#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 {
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 {
color: #999 !important;
}

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

@ -2,7 +2,7 @@
<div class="p-tab p-tab-photo-files">
<v-expansion-panel expand class="pa-0 elevation-0 secondary" :value="state">
<v-expansion-panel-content v-for="(file, index) in model.fileModels()" :key="index"
class="pa-0 elevation-0 grey lighten-4" style="margin-top: 1px;">
class="pa-0 elevation-0 secondary-light" style="margin-top: 1px;">
<template #header>
<div class="caption">{{ file.baseName(70) }}</div>
</template>

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

@ -144,13 +144,13 @@
"navigation-home": "#000000"
},
"onyx": {
"application": "#e5e4e2",
"application": "#525252",
"form": "#e5e4e2",
"primary": "#c8bdb1",
"secondary-dark": "#353839",
"secondary": "#a8a8a8",
"secondary-light": "#cdccca",
"accent": "#656565",
"secondary-dark": "#aba095",
"secondary": "#444",
"secondary-light": "#666",
"accent": "#333",
"error": "#e57373",
"info": "#5a94dd",
"success": "#4db6ac",

14
frontend/src/pages/about/about.vue
View file

@ -13,20 +13,20 @@
</v-toolbar>
<v-container fluid class="pa-4">
<h2 class="pb-2 subheading">Funding</h2>
<p class="body-1">This <a href="https://photoprism.app/" target="_blank" class="primary--text text--darken-4">software</a> is about freedom and privacy but not necessarily about free beer. We feel like it
<p class="body-1">This <a href="https://photoprism.app/" target="_blank" class="text-link">software</a> is about freedom and privacy but not necessarily about free beer. We feel like it
would be a mistake to state there will be no costs, because clearly we have huge expenses, your server hardware
will have a price tag, and then maybe you'd like to have some extra features that need to be developed.</p>
<p class="body-1">You're welcome to support us via <a href="https://github.com/sponsors/photoprism" target="_blank" class="primary--text text--darken-4">GitHub
<p class="body-1">You're welcome to support us via <a href="https://github.com/sponsors/photoprism" target="_blank" class="text-link">GitHub
Sponsors</a>,
especially if you have feature requests, or need help with using our software.
In addition, you can find us on <a href="https://www.patreon.com/photoprism" target="_blank" class="primary--text text--darken-4">Patreon</a>
and <a href="https://www.paypal.me/photoprism" target="_blank" class="primary--text text--darken-4">PayPal</a>.</p>
In addition, you can find us on <a href="https://www.patreon.com/photoprism" target="_blank" class="text-link">Patreon</a>
and <a href="https://www.paypal.me/photoprism" target="_blank" class="text-link">PayPal</a>.</p>
<p class="body-1">Your continuous support helps...</p>
<ul class="pb-3 body-1">
<li>to pay for hosting, hardware and external services like satellite maps</li>
<li>developing new features, and keeping them free for everyone 🌈</li>
</ul>
<p class="body-1">Also, please <a href="https://github.com/photoprism/photoprism/stargazers" target="_blank" class="primary--text text--darken-4">leave a star</a> on
<p class="body-1">Also, please <a href="https://github.com/photoprism/photoprism/stargazers" target="_blank" class="text-link">leave a star</a> on
GitHub if you like this project.
It provides additional motivation to keep going.</p>
<p class="body-1">Thank you very much! ❤️</p>
@ -34,11 +34,11 @@
<h2 class="py-2 subheading">Roadmap</h2>
<p class="body-1">Our vision is to provide the most user-friendly solution for browsing, organizing and sharing
your personal photo collection.
The <a href="https://github.com/photoprism/photoprism/projects/5" target="_blank" class="primary--text text--darken-4">roadmap</a> shows what tasks are in progress,
The <a href="https://github.com/photoprism/photoprism/projects/5" target="_blank" class="text-link">roadmap</a> shows what tasks are in progress,
what needs testing, and which feature requests are going to be implemented next.</p>
<p class="body-1">Please give ideas you like a thumbs-up, so that we know what is most popular.
Ideas backed by one or more eligible <a
href="https://github.com/photoprism/photoprism/blob/develop/SPONSORS.md" target="_blank" class="primary--text text--darken-4">sponsors</a> will be prioritized as
href="https://github.com/photoprism/photoprism/blob/develop/SPONSORS.md" target="_blank" class="text-link">sponsors</a> will be prioritized as
well.</p>
<h2 class="py-2 subheading">

2
frontend/src/share.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="photoprism">
<div id="photoprism" :class="'theme-' + $config.themeName">
<p-loading-bar height="4"></p-loading-bar>
<p-notify></p-notify>