summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-27 19:17:51 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-27 19:17:51 +0200
commit6395d1ec4362fedd7854fc9a103bad8bf7ae5d3d (patch)
tree93a2d01ec76ef5b78e36d3f5f2ad284d1286d928 /components
parent74f689fefb77328f22772bbdf9ebc6aefb01cdab (diff)
Dark mode
Diffstat (limited to 'components')
-rw-r--r--components/FilePreview.vue10
-rw-r--r--components/ModelBoxCard.vue4
-rw-r--r--components/ModelForm.vue26
-rw-r--r--components/ModelReportsList.vue10
-rw-r--r--components/VHeader.vue4
5 files changed, 30 insertions, 24 deletions
diff --git a/components/FilePreview.vue b/components/FilePreview.vue
index 3892857..878ca5b 100644
--- a/components/FilePreview.vue
+++ b/components/FilePreview.vue
@@ -8,13 +8,13 @@
v-else-if="isStl(path)"
:rotate="rotate"
:src="baseAPI + '' + path"
- :backgroundColor="bg ? bg : '#D1D5DB'"
+ :backgroundColor="color ? color : '#D1D5DB'"
:controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
)
model-obj(
v-else-if="isObj(path)"
:src="baseAPI + '' + path"
- :backgroundColor="bg ? bg : '#D1D5DB'"
+ :backgroundColor="color ? color : '#D1D5DB'"
:controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
)
</template>
@@ -33,6 +33,7 @@ export default {
y: 0,
z: 0,
},
+ color: "",
};
},
components: {
@@ -41,6 +42,11 @@ export default {
},
created() {
this.baseAPI = this.$config.api;
+ if (this.$colorMode.preference == "light") {
+ this.color = this.bg;
+ } else {
+ this.color = "#ecfdf5";
+ }
},
methods: {
checkExt(path, ext) {
diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
index 110c234..bdd8a8f 100644
--- a/components/ModelBoxCard.vue
+++ b/components/ModelBoxCard.vue
@@ -1,6 +1,6 @@
<template lang="pug">
.model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300(
- class="hover:ease-out hover:shadow-md"
+ class="hover:ease-out hover:shadow-md dark:bg-gray-600 dark:text-white"
)
a(:href="'/models/'+model.id")
.image.bg-gray-900.rounded-xl.w-full.h-48.overflow-hidden
@@ -17,7 +17,7 @@
.mr-3.float-left
user-avatar(:data="model.author")
p.leading-8
- a.text-green-800(class="hover:text-green-700" :href="'/user/'+model.author_id")
+ a.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :href="'/user/'+model.author_id")
| @
span.underline {{ model.author.username }}
diff --git a/components/ModelForm.vue b/components/ModelForm.vue
index f0edb64..d09c1ab 100644
--- a/components/ModelForm.vue
+++ b/components/ModelForm.vue
@@ -46,21 +46,21 @@
@click="boxDeleteModelUpload = 0"
) Cancel
.shadow(class="sm:overflow-hidden sm:rounded-md")
- .grid.grid-cols-2(v-if="form.id")
+ .grid.grid-cols-2(v-if="form.id" class="dark:bg-gray-600")
button.p-2.duration-100(
type="button"
- :class="{'hover:bg-white': true, 'bg-white border-green-600 border-b-2': tab == 'info'}"
+ :class="{'dark:hover:bg-gray-300 hover:bg-white': true, 'bg-white dark:bg-gray-300 border-green-600 border-b-2': tab == 'info'}"
@click="tab = 'info'"
) Info
button.p-2.duration-100(
type="button"
- :class="{'hover:bg-white': true, 'bg-white border-green-600 border-b-2': tab == 'files'}"
+ :class="{'dark:hover:bg-gray-300 hover:bg-white': true, 'bg-white dark:bg-gray-300 border-green-600 border-b-2': tab == 'files'}"
@click="tab = 'files'"
) Files
div(v-if="tab == 'info'")
- .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
+ .space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-600")
div
- label.block.text-sm.font-medium.text-gray-700(for="name") Name
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="name") Name
.mt-1
input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="name"
@@ -70,7 +70,7 @@
v-model="form.name"
)
div
- label.block.text-sm.font-medium.text-gray-700(for="description") Description
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="description") Description
span.text-gray-300 (Optional)
.mt-1
textarea#description.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -80,7 +80,7 @@
v-model="form.description"
)
div
- label.block.text-sm.font-medium.text-gray-700(for="duration") Duration
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="duration") Duration
.mt-1
input#duration.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="duration"
@@ -92,7 +92,7 @@
)
p.text-sm.text-gray-500 Print duration in minutes
div
- label.block.text-sm.font-medium.text-gray-700(for="height") Height
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="height") Height
.mt-1
input#height.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="height"
@@ -104,7 +104,7 @@
)
p.text-sm.text-gray-500 Height in mm
div
- label.block.text-sm.font-medium.text-gray-700(for="weight") Weight
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="weight") Weight
.mt-1
input#weight.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="weight"
@@ -116,7 +116,7 @@
)
p.text-sm.text-gray-500 Weight in g
div
- label.block.text-sm.font-medium.text-gray-700(for="printer") Printer
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="printer") Printer
span.text-gray-300 (Optional)
.mt-1
input#printer.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -126,7 +126,7 @@
v-model="form.printer"
)
div
- label.block.text-sm.font-medium.text-gray-700(for="material") Material
+ label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="material") Material
span.text-gray-300 (Optional)
.mt-1
input#material.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -150,7 +150,7 @@
| Save
p.text-sm.text-gray-700.mt-2(v-if="!form.id") You will add assets like images and STL/OBJ later.
div(v-else)
- .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
+ .space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-600 dark:text-white")
h3(v-if="form.uploads") Manage '{{ form.name }}' already uploaded files
ul.divide-y.divide-gray-200.rounded-b-md.border.border-gray-200(role="list" v-if="form.uploads")
li.flex.items-center.justify-between.py-3.pl-3.pr-4.text-sm(v-for="upload in form.uploads" :key="upload.id")
@@ -160,7 +160,7 @@
span.ml-2.w-0.flex-1.truncate {{ getFileName(upload.filepath) }}
.ml-4
a.font-medium.text-black-700.cursor-pointer.mr-2(class="hover:underline" @click="openPreview = upload.filepath") Preview
- a.font-medium.text-red-700.cursor-pointer(class="hover:underline" @click="boxDeleteModelUpload = upload.id") Delete
+ a.font-medium.text-red-700.cursor-pointer(class="hover:underline dark:text-red-500" @click="boxDeleteModelUpload = upload.id") Delete
hr(v-if="form.uploads")
h3 Add new uploads
label.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm.cursor-pointer(
diff --git a/components/ModelReportsList.vue b/components/ModelReportsList.vue
index 37ffaf9..9ea9475 100644
--- a/components/ModelReportsList.vue
+++ b/components/ModelReportsList.vue
@@ -1,5 +1,5 @@
<template lang="pug">
- .shadow-sm.rounded-lg.bg-white.p-4.w-full.mb-5(v-if="warnings.length")
+ .shadow-sm.rounded-lg.bg-white.p-4.w-full.mb-5(class="dark:bg-gray-600" v-if="warnings.length")
.relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxToResolve > 0")
.fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
.fixed.inset-0.z-10.overflow-y-auto
@@ -35,16 +35,16 @@
.flow-root
.float-left
- h2.text-xl.font-bold(v-if="me && me.is_staff") Reports
- h2.text-xl.font-bold(v-else) My reports
- .float-right.flex.cursor-pointer(@click="expandList = !expandList")
+ h2.text-xl.font-bold(class="dark:text-white" v-if="me && me.is_staff") Reports
+ h2.text-xl.font-bold(class="dark:text-white" v-else) My reports
+ .float-right.flex.cursor-pointer(class="dark:text-white" @click="expandList = !expandList")
span {{ notResolved(warnings) }} not resolved
svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6")
path(stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" v-if="!expandList")
path(stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" v-else)
ul(role="list" v-if="me && expandList")
- li.text-sm.rounded-md.border.border-gray-200.mt-3(v-for="warning in warnings" :key="warning.id")
+ li.text-sm.rounded-md.border.border-gray-200.mt-3(class="dark:bg-gray-50" v-for="warning in warnings" :key="warning.id")
.py-3.pl-3.pr-4(v-if="!me.is_staff")
h3.flex.leading-6.mb-2.float-right
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-6 h-6">
diff --git a/components/VHeader.vue b/components/VHeader.vue
index 3ab2ca7..1f6a5d3 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -1,7 +1,7 @@
<template lang="pug">
div
- nav.bg-green-800
- .mx-auto.max-w-7xl.px-2(class="sm:px-6 lg:px-8")
+ nav.bg-green-800(class="dark:bg-gray-900")
+ .mx-auto.max-w-7xl.px-2(class="sm:px-6 lg:px-8 dark:border-b-1 dark:border-green-300")
.relative.flex.h-16.items-center.justify-between
.absolute.inset-y-0.left-0.flex.items-center(class="sm:hidden")
button.inline-flex.items-center.justify-center.rounded-md.p-2.text-gray-400(