Skip to content

Commit 9c608e0

Browse files
utmputmp
committed
added theme controller
better tooltip preview
1 parent 1ce531f commit 9c608e0

5 files changed

Lines changed: 70 additions & 49 deletions

File tree

‎src/renderer/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<title>OpenConvert</title>
1111
</head>
1212
<body
13-
class="bg-background border border-solid border-transparent h-full m-0 overflow-hidden"
13+
class="bg-base-200 border border-solid border-transparent h-full m-0 overflow-hidden"
1414
>
1515

1616
<div id="app"></div>

‎src/renderer/src/assets/main.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@import "tailwindcss";
2-
@plugin "daisyui";
2+
@plugin "daisyui"{
3+
themes: light --default, dark --prefersdark;
34

5+
}
46
@theme{
57
--color-midnight:#191e24;
68
--color-background : #222831;
7-
}
9+
}

‎src/renderer/src/components/Plugins.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,14 @@ async function uninstallPlugin(pluginId) {
5050
</script>
5151
<template>
5252
<div class="p-6">
53-
<h2 class="text-2xl font-bold text-gray-200 mb-6">Plugins</h2>
53+
<h2 class="text-2xl font-bold mb-6">Plugins</h2>
5454

5555
<div class="w-full">
5656
<!-- Plugin list -->
5757
<div v-for="plugin in plugins"
5858
:key="plugin.id"
59-
class="p-4 flex relative m-4 items-center gap-4 border-5 border-midnight rounded-lg hover:border-indigo-500 group">
59+
class="p-4 flex relative m-4 items-center gap-4 border-5 bg-custom-bg border-slate-900 rounded-lg hover:border-indigo-500 group">
6060

61-
<!-- Plugin Icon (maybe in future releases)-->
6261
<div class="flex-shrink-0">
6362
<div class="bg-gray-600 h-32 w-32 rounded flex items-center justify-center">
6463
<img src="https://mupdf.readthedocs.io/en/latest/_static/mupdf-sidebar-logo-light.png">
@@ -68,22 +67,22 @@ async function uninstallPlugin(pluginId) {
6867

6968
<!-- Main Plugin Info -->
7069
<div class="w-1/2 flex flex-col justify-between">
71-
<div class="text-sm text-gray-300 space-y-2">
70+
<div class="text-sm space-y-2">
7271
<!-- Name and Publisher -->
7372
<h3 class="text-lg font-semibold">{{ plugin.name }}</h3>
74-
<p class="text-gray-400">by {{ plugin.publisher }}</p>
73+
<p class="">by {{ plugin.publisher }}</p>
7574
<!-- Summary -->
76-
<p class="text-gray-400 text-sm ">{{ plugin.summary }}</p>
75+
<p class=" text-sm ">{{ plugin.summary }}</p>
7776
</div>
7877
</div>
7978

8079
<!-- Plugin Details -->
81-
<div class="w-1/3 flex flex-col text-sm text-gray-400 space-y-2">
80+
<div class="w-1/3 flex flex-col text-sm space-y-2">
8281
<div class="flex items-center gap-2">
8382
<img src="../assets/github.svg" class="w-4 h-4" alt="GitHub">
8483
<a :href="plugin.github"
8584
target="_blank"
86-
class="hover:text-gray-200">GitHub</a>
85+
class="hover:">GitHub</a>
8786
</div>
8887
<div class="flex items-center gap-2">
8988
<img src="../assets/filetype.svg" class="w-5 h-5" alt="Version">

‎src/renderer/src/components/Sidebar.vue‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
<script setup>
2+
import { ref, onMounted } from 'vue'
3+
const isDarkMode = ref(localStorage.getItem('theme') === 'dark')
4+
function toggleTheme(event) {
5+
const isChecked = event.target.checked
6+
const theme = isChecked ? 'dark' : 'light'
7+
localStorage.setItem('theme', theme)
8+
document.documentElement.setAttribute('data-theme', theme)
9+
isDarkMode.value = isChecked
10+
}
11+
onMounted(() => {
12+
const savedTheme = localStorage.getItem('theme') || 'light'
13+
document.documentElement.setAttribute('data-theme', savedTheme)
14+
isDarkMode.value = savedTheme === 'dark'
15+
})
216
</script>
317

418
<template>
519
<div class="fixed top-0 left-0 flex h-screen w-16 flex-col justify-between border-e bg-[#000000] border-gray-800">
620
<div>
721
<div class="inline-flex size-16 items-center justify-center">
822

9-
<img src="../assets/logo.svg" class="grid size-10 place-content-center rounded-lg "
23+
<img src="../assets/logo.svg" class="grid size-10 place-content-center rounded-lg"
1024
>
1125
</div>
1226

@@ -19,13 +33,9 @@
1933
class="group relative flex justify-center rounded px-2 py-1.5 text-gray-500 hover:bg-[#ffffff1a] hover:text-gray-700"
2034
:class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/' }"
2135
>
22-
<img src="../assets/convert.svg" class="size-6">
23-
24-
<span
25-
class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
26-
>
27-
Convert
28-
</span>
36+
<div class="tooltip tooltip-right" data-tip="Convert">
37+
<img src="../assets/convert.svg" class="size-6">
38+
</div>
2939
</a>
3040
</li>
3141
<li>
@@ -35,12 +45,10 @@
3545
:class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/plugins' }"
3646

3747
>
38-
<img src="../assets/plugins.svg" class="size-7">
39-
<span
40-
class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
41-
>
42-
Plugins
43-
</span>
48+
<div class="tooltip tooltip-right" data-tip="Plugins">
49+
<img src="../assets/plugins.svg" class="size-7">
50+
</div>
51+
4452
</router-link>
4553
</li>
4654
<li>
@@ -50,31 +58,43 @@
5058
:class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/history' }"
5159

5260
>
61+
<div class="tooltip tooltip-right" data-tip="History">
5362
<img src="../assets/history.svg" class="size-6">
54-
<span class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
55-
>
56-
History
57-
</span>
63+
</div>
5864
</router-link>
5965
</li>
6066
</ul>
6167
</div>
6268
</div>
6369
</div>
64-
65-
<div class="sticky inset-x-0 bottom-0 border-t border-gray-800 bg-[#000000] p-2">
66-
<router-link
67-
to="/settings"
68-
class="group relative flex w-full justify-center rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:bg-[#ffffff1a] hover:text-gray-700"
69-
:class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/settings' }"
70-
>
71-
<img src="../assets/settings.svg" class="size-7">
72-
<span
73-
class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
74-
>
75-
Settings
76-
</span>
77-
</router-link>
70+
<div class="tooltip tooltip-right" data-tip="switch theme">
71+
<div class="sticky inset-x-0 bottom-0 border-t border-gray-800 bg-base-400 p-2 flex justify-center">
72+
<label class="swap swap-rotate">
73+
<!-- this hidden checkbox controls the state -->
74+
<input type="checkbox"
75+
class="theme-controller"
76+
:checked="isDarkMode"
77+
@change="toggleTheme"
78+
/>
79+
<svg
80+
class="swap-on h-9 w-9"
81+
fill="#fff"
82+
xmlns="http://www.w3.org/2000/svg"
83+
viewBox="0 0 24 24">
84+
<path
85+
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
86+
</svg>
87+
<svg
88+
class="swap-off h-9 w-9"
89+
fill="#fff"
90+
xmlns="http://www.w3.org/2000/svg"
91+
viewBox="0 0 24 24">
92+
<path
93+
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
94+
</svg>
95+
</label>
96+
</div>
7897
</div>
98+
7999
</div>
80100
</template>

‎src/renderer/src/components/Upload.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -316,15 +316,15 @@ onMounted(async() => {
316316
<div v-if="showUploadArea" class="drop-area flex items-center justify-center min-h-screen">
317317
<label
318318
for="dropzone-file"
319-
class="flex flex-col items-center justify-center w-4/5 h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500"
319+
class="flex flex-col items-center justify-center w-4/5 h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer"
320320
:class="{ 'border-primary': isDragging }"
321321
>
322322
<div class="flex flex-col items-center justify-center pt-5 pb-6">
323323
<img src="../assets/folder.svg" alt="folder" class="folder-icon size-24" />
324324
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
325325
<span class="font-semibold">Click to upload</span> or drag and drop
326326
</p>
327-
<p class="text-xs text-gray-500 dark:text-gray-400">Files will be processed here</p>
327+
<p class="text-xs text-gray-500">Files will be processed here</p>
328328
</div>
329329
</label>
330330
</div>
@@ -336,7 +336,7 @@ onMounted(async() => {
336336
@click="clickInput"
337337
class="btn btn-sm btn-outline btn-primary"
338338
><img src="../assets/plus.svg" class="w-5 h-5">
339-
Add More Files
339+
Add Files
340340
</button>
341341
<div class="flex gap-2">
342342
@@ -412,7 +412,7 @@ onMounted(async() => {
412412
413413
<!-- File info -->
414414
<div class="w-1/3 flex flex-col justify-between">
415-
<div class="text-sm text-gray-300 space-y-2">
415+
<div class="text-sm space-y-2">
416416
<div class="flex items-center gap-2">
417417
<img src="../assets/file.svg" class="w-5 h-5" alt="File Icon" />
418418
<p class="truncate" :title="preview.name">{{ preview.name }}</p>
@@ -436,7 +436,7 @@ onMounted(async() => {
436436
<img src="../assets/arrow.svg" class="w-14 rotate-180">
437437
</div>
438438
<!-- convert file info's -->
439-
<div class="w-1/3 ml-12 flex flex-col text-xs text-gray-400 space-y-2">
439+
<div class="w-1/3 ml-12 flex flex-col text-xs space-y-2">
440440
<div class="flex items-center gap-2">
441441
<img src="../assets/output.svg" class="w-5 h-5" alt="">
442442
<span>{{ fileOptions[index].format.toUpperCase() }}</span>
@@ -471,7 +471,7 @@ onMounted(async() => {
471471
</div>
472472
<!-- Open options popup-->
473473
<dialog :id="`options_modal_${index}`" class="modal">
474-
<div class="modal-box bg-gray-800">
474+
<div class="modal-box bg-info-content">
475475
<form method="dialog">
476476
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-white">✕</button>
477477
</form>

0 commit comments

Comments
 (0)