From 38e8a5df117a9e367bdccb98ffe08651d3d7e82b Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 23 Nov 2018 19:11:46 +0900 Subject: [PATCH] Added experimental theme color picker --- mixins/Input.pixy | 4 +-- pages/explore/explorecolor/explorecolor.pixy | 2 +- pages/settings/style.pixy | 26 +++++++++++++++++++- scripts/Actions/Serialization.ts | 3 +++ scripts/Actions/Theme.ts | 22 ++++++++++++++--- scripts/AnimeNotifier.ts | 8 +++--- styles/input.scarlet | 18 ++++++++++++++ styles/mixins/ui.scarlet | 5 ++-- 8 files changed, 74 insertions(+), 14 deletions(-) diff --git a/mixins/Input.pixy b/mixins/Input.pixy index e267b041..38e8b99e 100644 --- a/mixins/Input.pixy +++ b/mixins/Input.pixy @@ -5,7 +5,7 @@ component InputText(id string, value string, label string, placeholder string) component InputBool(id string, value bool, label string, title string) .widget-section - label(for=id)= label + ":" + label= label + ":" if value button.action(id=id, data-action="disable", data-trigger="click", data-field=id, title=title) Icon("toggle-on") @@ -45,7 +45,7 @@ component InputSelection(id string, value string, label string, placeholder stri component InputFileUpload(id string, label string, uploadType string, endpoint string) .widget-section - label(for=id)= label + ":" + label= label + ":" button.action(id=id, data-action="selectFile", data-trigger="click", data-endpoint=endpoint, data-type=uploadType) Icon("upload") span Select file diff --git a/pages/explore/explorecolor/explorecolor.pixy b/pages/explore/explorecolor/explorecolor.pixy index dfd2d16a..8f12c848 100644 --- a/pages/explore/explorecolor/explorecolor.pixy +++ b/pages/explore/explorecolor/explorecolor.pixy @@ -4,7 +4,7 @@ component ExploreColor(animes []*arn.Anime, nextIndex int, totalCount int, color for saturation := 0.75; saturation >= 0.25; saturation -= 0.25 .tabs.color-stripes for hue := 0.0; hue < 1.0; hue += 0.05 - a.tab.color-stripe.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100)) + a.tab.color-stripe.color-box.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100)) .explore-anime if totalCount == 0 diff --git a/pages/settings/style.pixy b/pages/settings/style.pixy index 83cfe9d6..c48bcca4 100644 --- a/pages/settings/style.pixy +++ b/pages/settings/style.pixy @@ -23,4 +23,28 @@ component SettingsStyle(user *arn.User) option(value="romaji") Romaji option(value="japanese") 日本語 - InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1") \ No newline at end of file + InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1") + + if arn.IsDevelopment() + .widget.mountable(data-api="/api/settings/" + user.ID) + h3.widget-title + Icon("paint-brush") + span= stringutils.Capitalize(user.Settings().Theme) + + .widget-section + label(for="LinkColor")= "Link color:" + + .color-picker-container + .widget-ui-element.color-picker.color-box.action(data-color="var(--link-color)", data-variable="link-color", data-action="pickColor", data-trigger="click") + + button.tip(aria-label="Reset", disabled) + RawIcon("power-off") + + .widget-section + label(for="BackgroundColor")= "Background color:" + + .color-picker-container + .widget-ui-element.color-picker.color-box.action(data-color="var(--bg-color)", data-variable="bg-color", data-action="pickColor", data-trigger="click") + + button.tip(aria-label="Reset", disabled) + RawIcon("power-off") \ No newline at end of file diff --git a/scripts/Actions/Serialization.ts b/scripts/Actions/Serialization.ts index 6e010685..cb2a2f64 100644 --- a/scripts/Actions/Serialization.ts +++ b/scripts/Actions/Serialization.ts @@ -41,6 +41,9 @@ export async function save(arn: AnimeNotifier, input: HTMLElement) { } else if(apiEndpoint.startsWith("/api/settings/") && input.dataset.field === "Theme") { // Apply theme instantly applyTheme((input as HTMLInputElement).value) + + // Reload to update theme settings + return arn.reloadContent() } else { return arn.reloadContent() } diff --git a/scripts/Actions/Theme.ts b/scripts/Actions/Theme.ts index 2c1c7741..e4312a23 100644 --- a/scripts/Actions/Theme.ts +++ b/scripts/Actions/Theme.ts @@ -39,6 +39,7 @@ const themes = { "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%)", + "ui-disabled-color": "hsla(0, 0%, 100%, 0.1)" // "tip-bg-color": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)", "like-color": "var(--link-color)", @@ -137,7 +138,7 @@ export function applyThemeAndPreview(arn: AnimeNotifier, themeName: string) { // Apply theme export function applyTheme(themeName: string) { - let root = document.documentElement + let rootStyle = document.documentElement.style let theme = themes[themeName] // Apply base theme @@ -155,11 +156,24 @@ export function applyTheme(themeName: string) { } if(themes.light[property] === undefined) { - themes.light[property] = root.style.getPropertyValue(`--${property}`) + themes.light[property] = rootStyle.getPropertyValue(`--${property}`) } - root.style.setProperty(`--${property}`, theme[property]) + rootStyle.setProperty(`--${property}`, theme[property]) } currentThemeName = themeName -} \ No newline at end of file +} + +// Color picker +export function pickColor(arn: AnimeNotifier, element: HTMLElement) { + let rootStyle = document.documentElement.style + let variableName = `--${element.dataset.variable}` + + let input = document.createElement("input") + input.type = "color" + input.click() + input.oninput = () => { + rootStyle.setProperty(variableName, input.value) + } +} diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index b513cf72..56f83c95 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -164,7 +164,7 @@ export default class AnimeNotifier { Promise.resolve().then(() => this.assignActions()), Promise.resolve().then(() => this.updatePushUI()), Promise.resolve().then(() => this.dragAndDrop()), - Promise.resolve().then(() => this.colorStripes()), + Promise.resolve().then(() => this.colorBoxes()), Promise.resolve().then(() => this.loadCharacterRanking()), Promise.resolve().then(() => this.assignTooltipOffsets()), Promise.resolve().then(() => this.countUp()) @@ -597,12 +597,12 @@ export default class AnimeNotifier { } } - colorStripes() { - if(!this.app.currentPath.includes("/explore/color/")) { + colorBoxes() { + if(!this.app.currentPath.includes("/explore/color/") && !this.app.currentPath.includes("/settings")) { return } - for(let element of findAll("color-stripe")) { + for(let element of findAll("color-box")) { Diff.mutations.queue(() => { element.style.backgroundColor = element.dataset.color }) diff --git a/styles/input.scarlet b/styles/input.scarlet index 4214a694..91bc968e 100644 --- a/styles/input.scarlet +++ b/styles/input.scarlet @@ -45,6 +45,21 @@ input :active transform translateY(3px) +.color-picker-container + horizontal + +.color-picker + ui-element + flex 1 + height input-height + margin-right content-padding-half + + :hover + cursor pointer + + :active + transform translateY(3px) + button, .button horizontal padding 0rem 1rem @@ -55,6 +70,9 @@ button, .button button-hover + :disabled + ui-disabled + select appearance none -webkit-appearance none diff --git a/styles/mixins/ui.scarlet b/styles/mixins/ui.scarlet index 0593295f..58aa3546 100644 --- a/styles/mixins/ui.scarlet +++ b/styles/mixins/ui.scarlet @@ -9,5 +9,6 @@ mixin ui-element // box-shadow outline-shadow-medium mixin ui-disabled - background-color ui-disabled-color - cursor not-allowed \ No newline at end of file + color button-color !important + background-color ui-disabled-color !important + cursor not-allowed !important \ No newline at end of file