web/notify.moe
Code Issues Pull Requests Activity

Preparations for upcoming theme wheel

Browse Source
This commit is contained in:
Eduard Urbach 2018-04-23 16:51:11 +02:00
parent 0a22962dd3
commit 009548ef85
7 changed files with 166 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/sidebar/sidebar.pixy
View File

@ -68,7 +68,7 @@ component Sidebar(user *arn.User)
//- if user != nil && user.Role == "admin" //- if user != nil && user.Role == "admin"
//- SidebarButton("Admin", "/admin", "wrench") //- SidebarButton("Admin", "/admin", "wrench")
a.sidebar-link.action(href="#", data-action="toggleTheme", data-trigger="click") a.sidebar-link.action(href="#", data-action="nextTheme", data-trigger="click")
.sidebar-button .sidebar-button
Icon("paint-brush") Icon("paint-brush")
span.sidebar-text Theme span.sidebar-text Theme

198
scripts/Actions/Theme.ts
View File

@ -1,105 +1,157 @@
import AnimeNotifier from "../AnimeNotifier" import AnimeNotifier from "../AnimeNotifier"
let currentTheme = "light" let currentThemeName = "light"
let timeoutID: number = 0 let previewTimeoutID: number = 0
let themeWheel: HTMLElement
let themeWheelTimeoutID: number = 0
const light = {} const themes = {
const dark = { "light": {},
"hue": "45", "dark": {
"saturation": "100%", "link-color-h": "45",
"link-color-s": "100%",
"link-color-l": "66%",
"link-hover-color-l": "76%",
"text-color-l": "90%", "text-color-l": "90%",
"bg-color": "hsl(0, 0%, 18%)", "bg-color-l": "18%",
"link-color": "hsl(var(--hue), var(--saturation), 66%)", "bg-color-s": "0%",
"link-hover-color": "hsl(var(--hue), var(--saturation), 76%)", "ui-background-l": "14%",
"link-hover-text-shadow": "0 0 8px hsla(var(--hue), var(--saturation), 66%, 0.5)",
"reverse-light-color": "rgba(255, 255, 255, 0.1)",
"reverse-light-hover-color": "rgba(255, 255, 255, 0.2)",
"ui-background": "hsl(0, 0%, 14%)",
"sidebar-background": "hsla(0, 0%, 0%, 0.2)",
"sidebar-opaque-background": "hsl(0, 0%, 18%)",
"table-row-hover-background": "hsla(0, 0%, 100%, 0.01)",
"theme-white": "var(--bg-color)", "link-hover-text-shadow": "0 0 8px hsla(var(--link-color-h), var(--link-color-s), var(--link-color-l), 0.5)",
"theme-black": "var(--text-color)", "reverse-light-color": "rgba(255, 255, 255, 0.1)",
"reverse-light-hover-color": "rgba(255, 255, 255, 0.2)",
"sidebar-background": "hsla(0, 0%, 0%, 0.2)",
"sidebar-opaque-background": "hsl(0, 0%, 18%)",
"table-row-hover-background": "hsla(0, 0%, 100%, 0.01)",
"main-color": "var(--link-color)", "theme-white": "var(--bg-color)",
"link-active-color": "var(--link-hover-color)", "theme-black": "var(--text-color)",
"button-hover-color": "var(--link-hover-color)",
"button-hover-background": "hsl(0, 0%, 10%)",
"tab-background": "hsla(0, 0%, 0%, 0.1)",
"tab-hover-background": "hsla(0, 0%, 0%, 0.2)",
"tab-active-color": "hsl(0, 0%, 95%)",
"tab-active-background": "hsla(0, 0%, 2%, 0.5)",
"loading-anim-color": "var(--link-color)",
"anime-alternative-title-color": "hsla(0, 0%, 100%, 0.5)",
"anime-list-item-name-color": "var(--text-color)",
"tip-bg-color": "hsl(0, 0%, 10%)",
"post-like-color": "var(--link-color)", "link-active-color": "var(--link-hover-color)",
"post-unlike-color": "var(--link-color)", "button-hover-color": "var(--link-hover-color)",
"post-permalink-color": "var(--link-color)", "button-hover-background": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
"tab-background": "hsla(0, 0%, 0%, 0.1)",
"tab-hover-background": "hsla(0, 0%, 0%, 0.2)",
"tab-active-color": "hsl(0, 0%, 95%)",
"tab-active-background": "hsla(0, 0%, 2%, 0.5)",
"loading-anim-color": "var(--link-color)",
"anime-alternative-title-color": "hsla(0, 0%, 100%, 0.5)",
"anime-list-item-name-color": "var(--text-color)",
"tip-bg-color": "hsl(0, 0%, 10%)",
// "tip-bg-color": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
"quote-color": "var(--text-color)", "post-like-color": "var(--link-color)",
"post-unlike-color": "var(--link-color)",
"post-permalink-color": "var(--link-color)",
"calendar-hover-color": "var(--reverse-light-color)" "quote-color": "var(--text-color)",
}
// Toggle theme "calendar-hover-color": "var(--reverse-light-color)"
export function toggleTheme(arn: AnimeNotifier) {
// Clear preview interval
clearTimeout(timeoutID)
if(currentTheme === "light") {
darkTheme(arn)
return
} }
// "crimson": {
lightTheme(arn) // "base-theme": "dark",
// "link-color-h": "0",
// "link-color-l": "78%",
// "link-hover-color-l": "88%",
// "bg-color-s": "70%"
// },
// "sakura": {
// "base-theme": "light",
// "link-color-h": "348",
// "link-color-s": "100%",
// "link-color-l": "53%",
// "link-hover-color-l": "58%",
// "bg-color-h": "348",
// "bg-color-s": "100%",
// "bg-color-l": "86%",
// "ui-background-l": "91%",
// "tab-active-color": "var(--text-color)",
// "tab-active-background": "hsla(0, 0%, 98%, 0.25)",
// "button-hover-background": "hsl(var(--bg-color-h), var(--bg-color-s), 53%)"
// }
} }
// Light theme // Next theme
export function lightTheme(arn: AnimeNotifier) { export function nextTheme(arn: AnimeNotifier) {
let root = document.documentElement // if(!themeWheel) {
// themeWheel = document.createElement("div")
// themeWheel.classList.add("theme-wheel")
// themeWheel.classList.add("fade")
// themeWheel.classList.add("fade-out")
// document.body.appendChild(themeWheel)
// }
for(let property in light) { // // Show theme wheel
if(!light.hasOwnProperty(property)) { // themeWheel.classList.remove("fade-out")
continue
// // Clear theme wheel timeout
// clearTimeout(themeWheelTimeoutID)
// themeWheelTimeoutID = setTimeout(() => {
// // Hide theme wheel
// themeWheel.classList.add("fade-out")
// }, 2000)
// Sort themes by name
const themesSorted = [
"light",
"dark"
// "crimson",
// "sakura"
]
// Find current index and apply theme of next index
for(let i = 0; i < themesSorted.length; i++) {
if(themesSorted[i] === currentThemeName) {
let newIndex = (i + 1) % themesSorted.length
applyTheme(themesSorted[newIndex])
break
} }
root.style.setProperty(`--${property}`, light[property])
} }
currentTheme = "light" // Clear preview timeout
} clearTimeout(previewTimeoutID)
// Dark theme // Show preview message
export function darkTheme(arn: AnimeNotifier) { if(currentThemeName !== "light" && (!arn.user || arn.user.dataset.pro !== "true")) {
let root = document.documentElement arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000)
if(!arn.user || arn.user.dataset.pro !== "true") {
arn.statusMessage.showInfo("Previewing Dark theme for 30 seconds. If you would like to use it permanently, please support us.", 5000)
// After 30 seconds, switch back to default theme if the user doesn't own a PRO account // After 30 seconds, switch back to default theme if the user doesn't own a PRO account
timeoutID = setTimeout(() => { previewTimeoutID = setTimeout(() => {
if(currentTheme === "dark") { if(currentThemeName !== "light") {
toggleTheme(arn) applyTheme("light")
arn.statusMessage.showInfo("Dark theme preview time has ended. If you would like to use it permanently, please support us.", 5000) arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000)
} }
}, 30000) }, 30000)
} }
}
for(let property in dark) { // Apply theme
if(!dark.hasOwnProperty(property)) { export function applyTheme(themeName: string) {
let root = document.documentElement
let theme = themes[themeName]
// Apply base theme
if(theme["base-theme"]) {
applyTheme(theme["base-theme"])
}
for(let property in theme) {
if(!theme.hasOwnProperty(property)) {
continue continue
} }
if(light[property] === undefined) { if(property === "base-theme") {
light[property] = root.style.getPropertyValue(`--${property}`) continue
} }
root.style.setProperty(`--${property}`, dark[property]) if(themes.light[property] === undefined) {
themes.light[property] = root.style.getPropertyValue(`--${property}`)
}
root.style.setProperty(`--${property}`, theme[property])
} }
currentTheme = "dark" currentThemeName = themeName
} }

2
scripts/AnimeNotifier.ts
View File

@ -110,7 +110,7 @@ export default class AnimeNotifier {
// Theme // Theme
if(this.user && this.user.dataset.pro === "true" && this.user.dataset.theme !== "light") { if(this.user && this.user.dataset.pro === "true" && this.user.dataset.theme !== "light") {
actions.darkTheme(this) actions.applyTheme(this.user.dataset.theme)
} }
// Status message // Status message

29
styles/include/config.scarlet
View File

@ -3,10 +3,21 @@ text-color-h = 0
text-color-s = 0% text-color-s = 0%
text-color-l = 23.5% text-color-l = 23.5%
text-color = hsl(text-color-h, text-color-s, text-color-l) text-color = hsl(text-color-h, text-color-s, text-color-l)
bg-color = rgb(246, 246, 246)
main-color = rgb(248, 165, 130) bg-color-h = 0
link-color = rgb(215, 38, 15) bg-color-s = 0%
link-hover-color = rgb(242, 60, 30) bg-color-l = 96%
bg-color = hsl(bg-color-h, bg-color-s, bg-color-l)
link-color-h = 7
link-color-s = 87%
link-color-l = 45%
link-color = hsl(link-color-h, link-color-s, link-color-l)
link-hover-color-l = 53%
link-hover-color = hsl(link-color-h, link-color-s, link-hover-color-l)
// link-hover-color = hsl(8, 89%, 53%)
link-active-color = link-hover-color link-active-color = link-hover-color
pro-color = hsla(0, 100%, 73%, 0.87) pro-color = hsla(0, 100%, 73%, 0.87)
anime-alternative-title-color = hsla(0, 0%, 0%, 0.5) anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
@ -24,7 +35,10 @@ ui-border-color = rgba(0, 0, 0, 0.1)
ui-border = 1px solid ui-border-color ui-border = 1px solid ui-border-color
ui-hover-border-color = rgba(0, 0, 0, 0.15) ui-hover-border-color = rgba(0, 0, 0, 0.15)
ui-hover-border = 1px solid ui-hover-border-color ui-hover-border = 1px solid ui-hover-border-color
ui-background = rgb(254, 254, 254)
ui-background-l = 99.5%
ui-background = hsl(bg-color-h, bg-color-s, ui-background-l)
// ui-hover-background = rgb(254, 254, 254) // ui-hover-background = rgb(254, 254, 254)
// ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) // ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
// ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) // ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
@ -36,8 +50,11 @@ input-height = 2.5rem
input-focus-border-color = rgb(248, 165, 130) input-focus-border-color = rgb(248, 165, 130)
// Button // Button
button-color = link-color
button-hover-color = white button-hover-color = white
button-hover-background = link-hover-color button-hover-background = link-hover-color
// Tab
tab-background = rgba(0, 0, 0, 0.02) tab-background = rgba(0, 0, 0, 0.02)
tab-hover-background = bg-color tab-hover-background = bg-color
tab-active-color = white tab-active-color = white
@ -92,7 +109,7 @@ feature-card-icon-color = white
tip-bg-color = white tip-bg-color = white
// Loading animation // Loading animation
loading-anim-color = main-color loading-anim-color = hsl(18, 89%, 74%)
// Shadow // Shadow
shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05) shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)

43
styles/include/dark.scarlet
View File

@ -1,43 +0,0 @@
// // Dark theme
// // Main color
// hue = 45
// saturation = 100%
// // Main
// text-color = hsl(0, 0%, 90%)
// bg-color = hsl(0, 0%, 24%)
// link-color = hsl(hue, saturation, 66%)
// link-hover-color = hsl(hue, saturation, 76%)
// link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5)
// ui-background = hsla(0, 0%, 8%, 0.3)
// sidebar-background = rgba(0, 0, 0, 0.2)
// sidebar-opaque-background = ui-background
// table-row-hover-background = hsla(0, 0%, 100%, 0.01)
// // White/black
// theme-white = bg-color
// theme-black = text-color
// main-color = link-color
// link-active-color = link-hover-color
// button-hover-color = link-hover-color
// button-hover-background = hsla(0, 0%, 12%, 0.5)
// tab-background = hsla(0, 0%, 0%, 0.1)
// tab-hover-background = hsla(0, 0%, 0%, 0.2)
// tab-active-color = hsl(0, 0%, 95%)
// tab-active-background = hsla(0, 0%, 2%, 0.5)
// loading-anim-color = link-color
// anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)
// anime-list-item-name-color = text-color
// // Forum
// post-like-color = link-color
// post-unlike-color = link-color
// post-permalink-color = link-color
// // Quote
// quote-color = text-color
// Calendar
// calendar-hover-color = reverse-light-color

2
styles/input.scarlet
View File

@ -40,7 +40,7 @@ input
button, .button button, .button
horizontal horizontal
padding 0.5rem 1rem padding 0.5rem 1rem
color link-color color button-color
align-items center align-items center
pointer-events all pointer-events all
height input-height height input-height

15
styles/theme-wheel.scarlet Normal file
View File

@ -0,0 +1,15 @@
.theme-wheel
position fixed
right content-padding
bottom content-padding
width 200px
height 200px
border 1px solid red
background rgba(255, 255, 255, 0.1)
border-radius 50%
&.fade-out
pointer-events none
.theme-wheel-theme
//