Commit 4dfdc94b authored by nwindis's avatar nwindis
Browse files

FEATURE dark-mode support (WIP)

#60 Dark-Mode Support
parent d24609f4
......@@ -45,6 +45,8 @@ module.exports = function (ctx) {
// (not treeshaking Quasar; biggest bundle size; convenient)
all: 'auto',
dark: 'auto', // or Boolean true/false
// components: [],
// directives: [],
......
......@@ -297,6 +297,8 @@ export default {
this.getConfig();
this.init();
this.$q.dark.set('auto');
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
},
mounted() {
......
......@@ -28,7 +28,9 @@
</div>
</div>
<!-- FIXME: remove inline style -->
<div class="row" style="display: contents">
<!-- FIXME: remove inline style -->
<div class="scroll-panel" :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content" />
</div>
</div>
......
<template>
<q-footer bordered reveal class="bg-white row justify-start items-center ">
<q-footer
bordered
reveal
:class="$q.dark.isActive ? 'bg-black' : 'bg-white'"
class="row justify-start items-center"
>
<Language v-if="standalone" />
<Softwareinfo />
</q-footer>
......
<template>
<q-header id="header" elevated class="bg-white text-black">
<q-header
id="header"
elevated
:class="$q.dark.isActive ? 'bg-black text-white' : 'bg-white text-black'"
>
<div class="bar row justify-between items-center">
<Infobar v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
......
<template>
<div class="">
<div>
<h1 class="text-h5 text-bold text-uppercase">
<span>{{ cut(collectiontitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon class="q-pb-sm" size="40px" :name="fasChevronRight" />
<span>{{ cut(manifesttitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon class="q-pb-sm" size="40px" :name="fasChevronRight" />
<span>{{ itemlabel }}</span>
</h1>
......
......@@ -6,7 +6,6 @@
title="Change language"
>
<q-icon
class=""
size="md"
:name="fasLanguage"
/>
......@@ -16,6 +15,7 @@
fit
self="center middle"
>
<!-- FIXME: remove inline style -->
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>EN</q-item-section>
......
......@@ -2,11 +2,12 @@
<div>
<q-btn
class="q-mb-md"
color="black"
color=$dark
unelevated
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
......@@ -17,12 +18,13 @@
<q-btn
class="q-mb-md"
color="black"
color=$dark
unelevated
:disabled="itemindex >= itemurls.length - 1"
@click="toggleSheet(++itemindex)"
>
{{ captionnext }}
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
:name="fasArrowRight"
size="24px"
......
<template>
<!-- FIXME: remove inline style -->
<figure id="openseadragon" style="margin-top: 0px; padding: 8px">
<nav class="sticky">
<q-btn
......
......@@ -13,7 +13,7 @@
<q-dialog v-model="infobox">
<q-card>
<q-card-section class="">
<q-card-section>
<div class="text-h5 q-pb-md">EMo Viewer</div>
<p class="text-weight-bold">
......
......@@ -3,7 +3,11 @@
<q-btn class="btn-panel" :icon="panelicon" @click="status = true" label="Customize" flat />
<q-dialog v-model="status" persistent transition-show="scale" transition-hide="scale">
<q-card class="bg-white text-black" style="width: 600px">
<!-- FIXME: remove inline style -->
<q-card
:class="$q.dark.isActive ? 'bg-black' : 'bg-white text-black'"
style="width: 600px"
>
<q-card-section>
<div class="text-h6 text-uppercase">Customize Panels</div>
</q-card-section>
......@@ -12,7 +16,10 @@
<Dragpanelboxes :data="panelboxes" />
</q-card-section>
<q-card-actions align="right" class="bg-white text-black">
<q-card-actions
align="right"
:class="$q.dark.isActive ? 'bg-black' : 'bg-white'"
>
<q-btn flat label="OK" v-close-popup />
</q-card-actions>
</q-card>
......
......@@ -3,7 +3,7 @@
<ToggleFilter>
<q-list class="toggle-list">
<q-item v-for="(p, i) in panels" :key="`toggle${i}`"
class="bg-grey-2"
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
clickable
v-close-popup
:title="handleToggleTitle(i)"
......@@ -14,7 +14,7 @@
</q-item>
<q-item
class="bg-grey-5"
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-5'"
clickable
title="Reset panels to default view"
v-close-popup
......
<template>
<q-toolbar class="bg-grey-2">
<q-toolbar
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
>
<q-toolbar-title class="text-h6 absolute-center">
{{ heading | capitalize }}
</q-toolbar-title>
......
......@@ -13,12 +13,14 @@
@dragover.prevent="dragHighlightComponent($event)"
@drop="receivingComponent($event)"
:unique-index="idx"
:class="$q.dark.isActive ? 'bg-grey-8 text-white' : 'bg-grey-1 text-black'"
>
<div>
<header>
<input
class="hidden-textinput"
type="text"
:class="$q.dark.isActive ? 'bg-grey-8 text-white' : 'bg-grey-1 text-black'"
:value="panel.panel_label"
@input="(e) => handlePanelLabel(e, idx)"
/>
......@@ -30,6 +32,7 @@
<div v-for="(comp,i) in panel.connector" :key="`pi${i}`"
draggable="true"
v-text="comp.label"
:class="$q.dark.isActive ? 'bg-black text-white' : 'bg-grey-1 text-black'"
@dragstart="dragged = comp.id; draggedPanelIdx = idx"
@dragend="dragged = null; draggedPanelIdx = null"
/>
......@@ -158,13 +161,14 @@ export default {
.components-list {
> * {
background-color: white;
background-color: $light;
border-radius: 5px;
cursor: move;
margin: 10px 0;
padding: 10px;
&:active, &:focus {
// FIXME: Quasar color variables
outline: 1px solid blue;
}
}
......
......@@ -18,6 +18,7 @@ $secondary : #26A69A;
$accent : #9C27B0;
$dark : #1D1D1D;
$light : #FFFFFF;
$positive : #21BA45;
$negative : #C10015;
......
......@@ -8,11 +8,14 @@
.q-tree__node-collapsible .q-tree__children {
> .q-tree__node--parent {
> .q-tree__node-header {
background: white;
background-color: $light;
left: 0;
position: sticky;
top: 0;
z-index: 999;
@media (prefers-color-scheme: dark) {
background-color: $grey-9;
}
}
}
}
......
......@@ -13,7 +13,7 @@
<q-card v-if="p.connector.length > 1" flat>
<div class="tabs-container">
<q-tabs v-for="(tab, i) in p.connector" :key="`pt${i}`"
active-bg-color="grey-4"
:active-bg-color="$q.dark.isActive ? 'bg-black' : 'bg-grey-4'"
class="content-tabs"
v-model="p.tab_model"
>
......
Supports Markdown
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