Commit 64d6fff5 authored by nwindis's avatar nwindis
Browse files

Merge branch 'feature/#15-color-schema' into 'develop'

Feature/#15 color schema

See merge request subugoe/emo/Qviewer!81
parents 62d84a92 e5e5f4ca
Pipeline #154664 passed with stages
in 3 minutes and 56 seconds
......@@ -210,6 +210,7 @@ There are two files in regards to configuration. Both deal with the Viewer's sta
- show or hide individual bars (info, navigation, toggles)
- rename labels
- tell the Viewer how it will be used (standalone / embedded)
- change the color scheme
- b) configure the panels (**src/config/panels.js**)
- set the order of the panels
......@@ -235,7 +236,12 @@ As a rule of thumb, every key with a boolean value (e.g. *true* or *false*) defa
"item": "Sheet",
"manifest": "Manuscript"
},
"standalone": true
"standalone": true,
"colors": {
"primary": "false",
"secondary": "false",
"accent": "false"
}
}
</script>
```
......@@ -299,9 +305,20 @@ It's a *JSON* object. So if you are going to make any changes and you have to qu
- **standalone**
denotes if the Viewer will be used as a single page application or if it will be embedded into an existing page. If you want to use it in the latter case, please toggle the value to "false". That way the language toggle in the footer section will not show up.
denotes if the Viewer will be used as a single page application or if it will be embedded into an existing page. If you want to use it in the latter case, please toggle the value to "false". That way the language toggle in the footer section will not show up.
Defaults to `true`.
- **colors**
Set the colors used in the frontend.
`primary` and `accent` should be a darker tone, so that white text is visible if used as background. It's the other way around with `secondary`.
Hex values (like `#a1a1a1`) or color names (like `hotpink`) can be used.
If any value is left `false`, a default color scheme will be used.
## Configure the panels
b) In order to configure the panels, locate the `panels.js` file inside the `src/config` folder of your project dir and find the *panels* constant at the top of the file:
......
......@@ -50,7 +50,14 @@ module.exports = function (ctx) {
// Quasar plugins
plugins: [],
cssAddon: true
cssAddon: true,
config: {
brand: {
primary: '#212121',
secondary: '#eee',
accent: '#1a3771'
}
}
},
// https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
......
......@@ -29,7 +29,10 @@
/>
</q-page-container>
<Footer :standalone="config.standalone" />
<Footer
:standalone="config.standalone"
:projectcolors="config.colors"
/>
</q-layout>
</div>
</template>
......@@ -38,6 +41,7 @@
import Footer from '@/components/footer.vue';
import Header from '@/components/header.vue';
import PanelsMixin from '@/config/panels.js';
import { colors } from 'quasar';
export default {
name: 'Viewer',
......@@ -300,10 +304,14 @@ export default {
created() {
this.getConfig();
this.init();
this.$q.dark.set('auto');
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
if (this.config.colors.primary !== 'false') {
colors.setBrand('primary', this.config.colors.primary);
colors.setBrand('secondary', this.config.colors.secondary);
colors.setBrand('accent', this.config.colors.accent);
}
},
mounted() {
/**
......
<template>
<div class="col-xs-auto colors">
<q-btn
flat
title="Change color"
>
<q-icon
:name="fasPalette"
size="xs"
/>
<q-menu
anchor="center middle"
fit
self="center middle"
>
<q-list>
<q-item
clickable
@click="() => changeColorsTo('default')"
v-close-popup
>
<q-item-section>Default</q-item-section>
</q-item>
<q-item
clickable
@click="() => changeColorsTo('emo')"
v-close-popup
v-if="projectcolors.primary !== 'false'"
>
<q-item-section>EMo</q-item-section>
</q-item>
<q-item
clickable
@click="() => changeColorsTo('unicorn')"
v-close-popup
>
<q-item-section>Unicorn</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</template>
<script>
import { fasPalette } from '@quasar/extras/fontawesome-v5';
import { colors } from 'quasar';
export default {
name: 'color',
created() {
// this.getConfig();
// this.projectcolors = projectcolors;
this.fasPalette = fasPalette;
},
// data() {
// return {
// config: {},
// };
// },
props: {
projectcolors: Object,
},
// computed: {
// asdf() {
// // console.log(this.$colors);
// return this.$colors.primary;
// },
// },
methods: {
changeColorsTo(color) {
if (color === 'default') {
if (this.projectcolors.primary !== 'false') {
colors.setBrand('primary', this.projectcolors.primary);
colors.setBrand('secondary', this.projectcolors.secondary);
colors.setBrand('accent', this.projectcolors.accent);
} else {
colors.setBrand('primary', this.$q.config.brand.primary);
colors.setBrand('secondary', this.$q.config.brand.secondary);
colors.setBrand('accent', this.$q.config.brand.accent);
}
}
if (color === 'emo') {
colors.setBrand('primary', this.$q.config.brand.primary);
colors.setBrand('secondary', this.$q.config.brand.secondary);
colors.setBrand('accent', this.$q.config.brand.accent);
}
if (color === 'unicorn') {
colors.setBrand('primary', 'purple');
colors.setBrand('secondary', 'lightgrey');
colors.setBrand('accent', 'hotpink');
}
},
},
};
</script>
<style lang="scss" scoped>
.colors {
@media (prefers-color-scheme: dark) {
display: none;
}
}
</style>
......@@ -4,26 +4,33 @@
<div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Increase Textsize"
@click="increase()"
>
<q-icon :name="fasSearchPlus" size="sm" />
<q-icon
:name="fasSearchPlus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Decrease Textsize"
:color="$q.dark.isActive ? 'white' : 'accent'"
@click="decrease()"
>
<q-icon :name="fasSearchMinus" />
<q-icon
:name="fasSearchMinus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
</div>
</div>
......
......@@ -2,10 +2,11 @@
<q-footer
bordered
reveal
:class="$q.dark.isActive ? 'bg-black' : 'bg-white'"
class="row justify-start items-center"
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</q-footer>
</template>
......@@ -13,15 +14,18 @@
<script>
import Language from '@/components/language.vue';
import Softwareinfo from '@/components/softwareinfo.vue';
import Color from '@/components/color.vue';
export default {
name: 'Footer',
components: {
Language,
Softwareinfo,
Color,
},
props: {
standalone: Boolean,
projectcolors: Object,
},
};
</script>
<template>
<q-header
elevated
:class="$q.dark.isActive ? 'bg-black text-white' : 'bg-white text-black'"
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<div class="bar row justify-between items-center">
<Infobar v-if="config.headers.info && manifests.length"
......
......@@ -8,6 +8,7 @@
<q-icon
class="q-pb-xs q-pl-sm q-pr-sm"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasChevronRight"
/>
<span>Sheet {{ itemlabel }}</span>
......@@ -45,3 +46,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.title {
font-size: 28px !important;
letter-spacing: 2px;
}
</style>
<template>
<div class="col-xs-auto">
<q-btn
color="grey"
flat
title="Change language"
>
......
......@@ -3,6 +3,7 @@
<q-btn
class="q-mb-md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
......@@ -17,7 +18,9 @@
<q-btn
class="q-mb-md"
size="md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex >= itemurls.length - 1"
@click="toggleSheet(++itemindex)"
>
......
......@@ -4,10 +4,10 @@
<q-btn
v-for="(btn, idx) in buttons" :key="idx"
class="q-mr-sm q-mb-sm"
color="grey-8"
flat
round
size="md"
:color="$q.dark.isActive ? 'white' : 'accent'"
:id="btn.id"
>
<q-icon size="sm" :name="btn.svg" />
......@@ -76,7 +76,6 @@ figure {
display: inline-block;
height: 75vh;
margin: 0;
padding: 8px;
width: 100%;
}
</style>
<template>
<div class="softwareinfo col-xs-auto">
<div class="col-xs-auto">
<q-btn
flat
color="grey"
label=""
title="Project Info"
@click="infobox = true"
......@@ -14,6 +13,7 @@
<q-dialog v-model="infobox">
<q-card>
<q-card-section>
<!-- FIXME: this is an actual headding, but marked as DIV -->
<div class="text-h5 q-pb-md">EMo Viewer</div>
<p class="text-weight-bold">
......@@ -30,7 +30,7 @@
<q-card-section class="q-pt-none">
<q-btn
flat
href="https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/blob/develop/README.md"
href="https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/blob/main/README.md"
target="_blank"
type="a"
>
......@@ -58,8 +58,13 @@
</q-btn>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Close" v-close-popup />
<q-card-actions align="right">
<q-btn
:class="$q.dark.isActive ? 'text-white' : 'text-black'"
flat
label="Close"
v-close-popup
/>
</q-card-actions>
</q-card>
</q-dialog>
......@@ -72,8 +77,7 @@ import {
fasBug,
fasCode,
fasInfoCircle,
}
from '@quasar/extras/fontawesome-v5';
} from '@quasar/extras/fontawesome-v5';
import { version } from '../../package.json';
export default {
......
<template>
<section class="panel__position">
<q-btn class="panel__button" :icon="panelicon" @click="status = true" label="Customize" flat />
<q-btn
class="panel__button"
:icon="panelicon"
size="md"
@click="status = true"
label="Customize"
outline
/>
<q-dialog
v-model="status"
......@@ -19,11 +26,12 @@
<Dragpanelboxes :data="panelboxes" />
</q-card-section>
<q-card-actions
align="right"
:class="$q.dark.isActive ? 'bg-black' : 'bg-white'"
>
<q-btn flat label="OK" v-close-popup />
<q-card-actions align="right">
<q-btn
flat
label="OK"
v-close-popup
/>
</q-card-actions>
</q-card>
</q-dialog>
......
<template>
<!-- FIXME: semantically this is not a section -->
<section class="filter-buttons">
<q-btn-dropdown v-if="$q.screen.width < 1100"
class="q-mb-md"
color="black"
<q-btn-dropdown
v-if="$q.screen.width < 1100"
:dropdown-icon="dropicon"
label="Toggle panels ..."
outline
flat
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
class="q-mb-md q-mr-md"
label="Toggle panels"
>
<slot />
</q-btn-dropdown>
<div class="q-mb-md without-dropdown" v-else>
<div
class="q-mb-md without-dropdown q-mr-md"
v-else
>
<slot />
</div>
</section>
......
......@@ -4,25 +4,35 @@
<q-list class="toggle-list">
<div v-for="(p, i) in panels" :key="`toggle${i}`">
<q-item
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
clickable
flat
v-close-popup
:title="handleToggleTitle(i)"
@click="() => handleStatusPanel(i)"
>
<q-icon class="q-pr-xs" size="xs" :name="renderCheckIcon(i)" />
<q-icon
class="q-pr-xs"
size="xs"
:color="$q.dark.isActive ? 'bg-black' : 'accent'"
:name="renderCheckIcon(i)"
/>
{{ p.panel_label.toUpperCase() }}
</q-item>
</div>
<q-item
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-5'"
clickable
flat
title="Reset panels to default view"
v-close-popup
@click="()=> handleStatusPanel(-1, true)"
>
<q-icon class="q-pr-xs text-capitalize" size="xs" :name="fasUndo" />
<q-icon
class="q-pr-xs"
size="xs"
:color="$q.dark.isActive ? 'black' : 'accent'"
:name="fasUndo"
/>
{{ 'RESET' }}
</q-item>
</q-list>
......@@ -94,4 +104,8 @@ button {
button:last-of-type {
margin-right: 0;
}
.q-item {
min-height: 0;
}
</style>
<template>
<q-toolbar
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
>
<q-toolbar>
<q-toolbar-title class="text-h6 absolute-center">
{{ heading | capitalize }}
</q-toolbar-title>
......
<template>
<div class="q-pa-md q-gutter-sm">
<div class="q-pa-md">
<q-tree
class="view-tree"
label-key="label-key"
......
......@@ -41,9 +41,9 @@
<div class="actions">
<q-btn
class="only-bedrag"
color="dark"
class="only-bedrag panel-boxes__handle bg-accent text-white"
round
flat
size="xs"
title="Drag and drop the panels to reorder."
:icon="fasArrowsAlt"
......
......@@ -10,7 +10,7 @@ body {
position: relative;
.sticky {
background: $light;
// background: $light;
display: flex;
justify-content: flex-start;
left: 0;
......@@ -31,8 +31,11 @@ body {
}
}
.content-panel .q-tab-panel > * {
padding: 0 !important;
.content-panel .q-tab-panel {
padding: 8px;
> * {
padding: 0 !important;
}
}
.without-dropdown > * {
......@@ -65,9 +68,3 @@ body {
outline: none;
width: 100%;
}
.q-tabs__content {
.q-tab {
width: 100%;
}
}
......@@ -13,3 +13,4 @@
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$light: #fff;
$dark: #1d1d1d;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment