Commit 96433fb4 authored by dindigala's avatar dindigala
Browse files

Merge branch 'feature/#327-make-the-theme-switch-configurable' into 'develop'

make the theme switch configurable

See merge request !217
parents 6a7449b1 00d44e45
Pipeline #224979 passed with stages
in 5 minutes and 47 seconds
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
const path = require('path')
const path = require('path');
module.exports = function (ctx) {
// eslint-disable-next-line func-names
module.exports = function () {
return {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
......@@ -14,7 +15,7 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'style.scss'
'style.scss',
],
// https://github.com/quasarframework/quasar/tree/dev/extras
......@@ -43,11 +44,11 @@ module.exports = function (ctx) {
brand: {
primary: '#212121',
secondary: '#eee',
accent: '#1a3771'
accent: '#1a3771',
},
notify: {
color: 'gray'
}
color: 'gray',
},
},
iconSet: 'fontawesome-v5',
......@@ -56,12 +57,12 @@ module.exports = function (ctx) {
// Quasar plugins
plugins: [
'Notify'
]
'Notify',
],
},
htmlVariables: {
title: 'TIDO'
title: 'TIDO',
},
// https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
......@@ -85,34 +86,31 @@ module.exports = function (ctx) {
extractCSS: false,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
extendWebpack (cfg) {
extendWebpack(cfg) {
cfg.output = {
filename: '[name].js',
},
};
cfg.resolve.alias = {
...cfg.resolve.alias, // This adds the existing alias
'@': path.resolve(__dirname, './src/'),
},
cfg.module.rules.push(
{
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
formatter: require('eslint').CLIEngine.getFormatter('stylish')
},
test: /\.(js|vue)$/
}
)
}
};
cfg.module.rules.push({
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
formatter: require('eslint').CLIEngine.getFormatter('stylish'),
},
test: /\.(js|vue)$/,
});
},
},
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
https: false,
port: 8080,
open: false // opens browser window automatically
open: false, // opens browser window automatically
},
vendor: {
......@@ -125,7 +123,7 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
ssr: {
pwa: false
pwa: false,
},
// https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
......@@ -144,30 +142,30 @@ module.exports = function (ctx) {
{
src: 'icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
type: 'image/png',
},
{
src: 'icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
type: 'image/png',
},
{
src: 'icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
type: 'image/png',
},
{
src: 'icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
type: 'image/png',
},
{
src: 'icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
type: 'image/png',
},
],
},
},
// Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
......@@ -177,7 +175,7 @@ module.exports = function (ctx) {
// Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
hideSplashscreen: true,
},
// Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
......@@ -200,16 +198,16 @@ module.exports = function (ctx) {
builder: {
// https://www.electron.build/configuration/configuration
appId: 'q-app'
appId: 'q-app',
},
// More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
nodeIntegration: true,
extendWebpack (cfg) {
extendWebpack() {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
}
}
}
}
},
},
};
};
......@@ -16,26 +16,16 @@
>
<q-list>
<q-item
v-for="theme in themes"
:key="theme.value"
v-close-popup
clickable
@click="changeColorsTo('default')"
:class="{'theme': selectedTheme === theme.value}"
@click="changeColorsTo(theme.value)"
>
<q-item-section>{{ $t('default') }}</q-item-section>
</q-item>
<q-item
v-if="projectcolors.primary && projectcolors.secondary && projectcolors.accent"
v-close-popup
clickable
@click="changeColorsTo('emo')"
>
<q-item-section>EMo</q-item-section>
</q-item>
<q-item
v-close-popup
clickable
@click="changeColorsTo('unicorn')"
>
<q-item-section>Unicorn</q-item-section>
<q-item-section>
{{ theme.label }}
</q-item-section>
</q-item>
</q-list>
</q-menu>
......@@ -50,36 +40,42 @@ import { fasPalette } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Color',
props: {
config: {
type: Object,
default: () => {},
},
projectcolors: {
type: Object,
required: true,
},
},
data: () => ({
themes: [
{ label: 'Default', value: 'default' },
{ label: 'TIDO', value: 'tido' },
],
selectedTheme: '',
}),
mounted() {
if (this.config.themes) {
this.selectedTheme = 'tido';
}
},
created() {
this.fasPalette = fasPalette;
},
methods: {
changeColorsTo(color) {
this.selectedTheme = color;
if (color === 'default') {
if (this.projectcolors.primary && this.projectcolors.secondary && this.projectcolors.accent) {
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');
} else if (color === 'tido' && this.projectcolors.primary && this.projectcolors.secondary && this.projectcolors.accent) {
colors.setBrand('primary', this.projectcolors.primary);
colors.setBrand('secondary', this.projectcolors.secondary);
colors.setBrand('accent', this.projectcolors.accent);
}
},
},
......@@ -92,4 +88,8 @@ export default {
display: none;
}
}
.theme {
background-color: $grey-5;
}
</style>
......@@ -5,7 +5,11 @@
:config="config"
/>
<Color :projectcolors="projectcolors" />
<Color
v-if="config.themes && projectColorsSet"
:projectcolors="projectcolors"
:config="config"
/>
<Softwareinfo />
</div>
......@@ -33,5 +37,10 @@ export default {
default: () => {},
},
},
computed: {
projectColorsSet() {
return !!Object.values(this.projectcolors).every((color) => color !== null && color !== '');
},
},
};
</script>
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"annotations": {
"show": true,
"types": [
......@@ -126,7 +126,8 @@
"toggle": true
}
],
"rtl": false
"rtl": false,
"themes": false
}
</script>
......
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