quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

lrl layout done

Browse source
This commit is contained in:
Xanazf 2024-11-08 09:39:43 +02:00
parent 16ac71a311
commit 09302ad58e
No known key found for this signature in database
GPG key ID: 4E4A5AD1FB748427
7 changed files with 202 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/featurelist/FeatureList.astro Normal file
View file

@ -0,0 +1,55 @@
---
import { processMarkdown } from "@config/io/markdown";
let codeString = `\`\`\`qml
// a standard desktop window
FloatingWindow {
Timer {
id: timer // give the timer a name to refer to it by
property bool invert: false // our custom property
// change the value of invert every half second
running: true; repeat: true
interval: 500 // ms
onTriggered: timer.invert = !timer.invert
}
// change the window's color when timer.invert changes
color: timer.invert ? "purple" : "green"
}
\`\`\`
`;
const codeHTML = await processMarkdown(codeString);
---
<ul class="featurelist">
<li class="featurelist-item hot-reloading left">
<section class="feature-text">
<h3 class="feature-title">See your changes in real time</h3>
<span class="feature-subtitle">Quickshell loads changes as soon as they're saved; you can iterate as fast as you can type.</span>
</section>
<section class="feature-showcase">
<span>
hot reloading video
</span>
</section>
</li>
<li class="featurelist-item qml right">
<section class="feature-text">
<h3 class="feature-title">Easy to use language</h3>
<span class="feature-subtitle">Quickshell is configured in QML, a language that reacts to changes as they happen.</span>
</section>
<section class="feature-showcase" id="qml-showcase">
<Fragment set:html={codeHTML}/>
</section>
</li>
<li class="featurelist-item cloud left">
<section class="feature-text">
<h3 class="feature-title">Fully featured</h3>
<span class="feature-subtitle">Everything you need to build your desktop, right out of the box.</span>
</section>
<section class="feature-showcase">
<span>tag cloud</span>
</section>
</li>
</ul>

36
src/components/hooks/ThemeSwitch.tsx
View file

@ -9,28 +9,31 @@ import {
import Sun from "@icons/sun.svg?raw";
import Moon from "@icons/moon.svg?raw";
interface ThemeProps {
export interface ThemeProps {
theme: "light" | "dark";
system: "light" | "dark";
}
const getCurrentTheme = (): ThemeProps => {
export const getCurrentTheme = (): ThemeProps => {
if (
typeof localStorage !== "undefined" &&
(localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches))
window.matchMedia("(prefers-color-scheme: dark)")
.matches))
) {
return {
theme: "dark",
system: window.matchMedia("(prefers-color-scheme: dark)").matches
system: window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light",
};
}
return {
theme: "light",
system: window.matchMedia("(prefers-color-scheme: dark)").matches
system: window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light",
};
@ -55,10 +58,11 @@ const updateTheme = () => {
};
export const ThemeSelect: VoidComponent = () => {
const [currentTheme, setCurrentTheme] = createSignal<ThemeProps>({
theme: "dark",
system: "dark",
});
const [currentTheme, setCurrentTheme] =
createSignal<ThemeProps>({
theme: "dark",
system: "dark",
});
const [mounted, setMounted] = createSignal(false);
const toggleTheme = () => {
@ -67,7 +71,8 @@ export const ThemeSelect: VoidComponent = () => {
if (currentTheme()!.theme !== currentTheme()!.system) {
localStorage.removeItem("theme");
} else {
localStorage.theme = currentTheme()!.theme === "dark" ? "light" : "dark";
localStorage.theme =
currentTheme()!.theme === "dark" ? "light" : "dark";
}
updateTheme();
setCurrentTheme(getCurrentTheme());
@ -79,7 +84,9 @@ export const ThemeSelect: VoidComponent = () => {
});
createEffect(() => {
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const mediaQuery = window.matchMedia(
"(prefers-color-scheme: dark)"
);
mediaQuery.addEventListener("change", updateTheme);
window.addEventListener("storage", updateTheme);
@ -94,7 +101,12 @@ export const ThemeSelect: VoidComponent = () => {
<div
onclick={toggleTheme}
class="theme-toggle"
innerHTML={(mounted() && currentTheme().theme === "light") || currentTheme().system === "light" ? Sun : Moon}
innerHTML={
(mounted() && currentTheme().theme === "light") ||
currentTheme().system === "light"
? Sun
: Moon
}
/>
);
};