diff --git a/src/App.tsx b/src/App.tsx index 853a6d0..e9acf5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,6 @@ export default class MainApp extends Vue { @Debounce(100) @Watch('getMainSettings', { deep: true }) handleSettingsThemes() { - console.log('Update Settings') AppModule.syncSettingsWithCache() } diff --git a/src/components/themes/flow/index.tsx b/src/components/themes/flow/index.tsx index 8c66475..00c4e08 100644 --- a/src/components/themes/flow/index.tsx +++ b/src/components/themes/flow/index.tsx @@ -5,6 +5,28 @@ let render: GL @Component export default class FlowTheme extends Vue { + get hue() { + return AppModule.getThemeInput('hue')?.value as number || 0 + } + + get brightness() { + return AppModule.getThemeInput('brightness')?.value as number || 0 + } + + get invert() { + return AppModule.getThemeInput('invert')?.value as boolean || false + } + + get filter() { + return `hue-rotate(${this.hue}deg) invert(${Number(this.invert)}) brightness(${this.brightness})` + } + + get styleCanvas() { + return { + filter: this.filter + } + } + get animationSpeed() { return AppModule.getThemeInput('animation-speed')?.value as number || 45 } @@ -54,7 +76,7 @@ export default class FlowTheme extends Vue { render() { return
- +
diff --git a/src/models/app.ts b/src/models/app.ts index 9cadc0a..f93bd28 100644 --- a/src/models/app.ts +++ b/src/models/app.ts @@ -1,5 +1,3 @@ -import { AppModule } from '@/store/app' - export interface AppSettings { currentTheme: string; currentOs: string; @@ -78,349 +76,3 @@ export interface AppInputColor { rgba: string; source: string; } - -function setActiveColor(color: AppInputThemeValue) { - document.documentElement.style.setProperty('--color-active', color + '') -} - -const randomButton: AppInputButton = { - name: 'button', - value: 'button', - label: 'input.random', - type: 'button', - icon: 'random', - callback() { - AppModule.randomizeSettingsTheme() - } -} - -function buildInputSlider({ - name = 'animation-speed', - value = 5, - min = 1, - max = 10, - step = 0.01, - icon = 'time' -} = {}): AppInputThemeSlider { - return { - name, - label: `input.${name}`, - value, - icon, - type: 'slider', - options: { changeOnUpdate: true, max, step, min } - } -} - -const pxratio = () => buildInputSlider({ name: 'pxratio', icon: 'pxratio', min: 0.01, max: 1, value: 0.8 }) -const hueInput = () => buildInputSlider({ name: 'hue', min: 1, max: 360, step: 1, value: 0 }) -const brightnessInput = () => buildInputSlider({ name: 'brightness', min: 0, max: 1, step: 0.01, value: 1 }) - -export const defaultTheme: AppTheme = { - name: 'Random', - component: 'random', - color: { - active: '#04ded4', - background: '#19102e' - }, - settings: [ - pxratio(), - buildInputSlider({ min: 0.2 }), - buildInputSlider({ name: 'symmetry', min: 0.01, max: 2, value: 0.1 }), - buildInputSlider({ name: 'thickness', min: 0.01, max: 0.7, value: 0.1 }), - hueInput(), - brightnessInput(), - { - name: 'invert', - label: 'input.invert', - type: 'checkbox', - value: false - }, - randomButton - ] -} - -export const AppThemes: AppTheme[] = [ - defaultTheme, - { - name: 'Sphere', - component: 'sphere', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - { - name: 'invert', - label: 'input.invert', - type: 'checkbox', - value: false - }, - hueInput(), - brightnessInput(), - buildInputSlider({ max: 10 }), - buildInputSlider({ value: 2, max: 3, min: 1.4, name: 'size' }), - randomButton - ] - }, - { - name: 'Planet', - component: 'planet', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - buildInputSlider(), - { - name: 'position', - type: 'slider', - label: 'input.position', - value: 3.9, - icon: 'position', - options: { - step: 0.01, - max: 20, - min: 2.8, - changeOnUpdate: true - } - }, - randomButton - ] - }, - { - name: 'Destruction', - component: 'destruction', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - { - name: 'position', - type: 'slider', - label: 'input.position', - value: 0.1, - icon: 'position', - options: { - step: 0.01, - max: 1, - min: 0.01, - changeOnUpdate: true - } - }, - { - name: 'perspective', - type: 'slider', - label: 'input.perspective', - value: 0.1, - icon: 'perspective', - options: { - step: 0.01, - max: 1, - min: 0.01, - changeOnUpdate: true - } - }, - buildInputSlider({ value: 10, max: 15 }), - randomButton - ] - }, - { - name: 'Rings', - component: 'rings', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - buildInputSlider(), - // TODO: rewrite on css hue property - { - name: 'hue', - type: 'slider', - label: 'input.hue', - value: 0, - icon: 'hue', - options: { - changeOnUpdate: true, - max: 0.5, - step: 0.01, - min: -0.5 - } - }, - { - name: 'zoom', - type: 'slider', - label: 'input.zoom', - value: 32, - icon: 'zoom', - options: { - changeOnUpdate: true, - max: 100, - step: 0.1, - min: 2 - } - }, - randomButton - ] - }, - { - name: 'Tenderness', - component: 'tenderness', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - buildInputSlider({ value: 10, max: 15 }), - randomButton - ] - }, - { - name: 'Plasma', - component: 'plasma', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - hueInput(), - buildInputSlider({ value: 10, max: 25 }), - randomButton - ] - }, - { - name: 'Flow', - component: 'flow', - color: { - active: '#04ded4', - background: 'black' - }, - settings: [ - pxratio(), - hueInput(), - buildInputSlider({ value: 10, max: 15 }), - buildInputSlider({ value: 1, max: 2.8, min: 0.2, name: 'size' }), - randomButton - ] - }, - { - name: 'Infinity', - component: 'infinity', - settings: [ - { - name: 'palette', - type: 'palette', - label: 'input.slider-amount', - value: 0, - values: [ - ['#fcb2bf', '#cf56a1', '#8b2f97', '#511e78'], - ['#e8f79a', '#49d292', '#3b445b', '#383746'], - ['#f5f5f5', '#fc5185', '#3fc1c9', '#364f6b'], - ['#00A8CC', '#0C7B93', '#27496D', '#142850'], - ['#F9F7F7', '#DBE2EF', '#3F72AF', '#112D4E'], - ['#ABEDD8', '#46CDCF', '#3D84A8', '#48466D'] - ] - }, - { - name: 'size', - type: 'slider', - label: 'input.size', - value: 20, - options: { - class: '', - min: 2, - max: 50 - } - }, - { - name: 'amount', - type: 'slider', - label: 'input.amount', - value: 30, - options: { - class: '', - min: 10, - max: 100 - } - }, - buildInputSlider({ value: 20, min: 5, max: 100 }), - randomButton - ], - color: { - active: '#04ded4', - background: '#19102e' - } - }, - { - name: 'Suprematism', - component: 'suprematism', - settings: [ - { - name: 'activeColor', - type: 'color', - label: 'input.color-active', - value: '#F690FF', - options: { - class: 'w-50' - }, - callback: setActiveColor - } - ], - color: { - active: '#F690FF', - background: '#fff' - } - }, - { - name: 'Osmos', - component: 'osmos', - color: { - active: '#e13571', - background: '#1a0532' - } - }, - { - name: 'Space', - component: 'space', - color: { - active: '#04ded4', - background: '#19102e' - } - } -] - -export const osList = [ - { - text: 'Arch Linux', - value: 'arch-linux', - icon: 'arch-linux' - }, - { - text: 'Ubuntu', - value: 'ubuntu', - icon: 'ubuntu' - }, - { - text: 'Fedora', - value: 'fedora', - icon: 'fedora' - }, - { - text: 'Linux Mint', - value: 'linux-mint', - icon: 'linux-mint' - }, - { - text: 'Gentoo', - value: 'gentoo', - icon: 'gentoo' - } -] diff --git a/src/store/app.ts b/src/store/app.ts index 580d30f..a52d799 100644 --- a/src/store/app.ts +++ b/src/store/app.ts @@ -10,17 +10,16 @@ import router from '../router' import store from '@/store/index' import { + AppTheme, + AppSettings, AppInputTheme, - AppInputThemeGeneral, - AppInputThemeSlider, AppInputThemeValue, - AppSettings, - AppTheme, - AppThemes, - defaultTheme + AppInputThemeGeneral } from '@/models/app' + import { appWindow, LightdmSession, LightdmUsers } from '@/models/lightdm' -import { generateRandomColor, generateRandomSliderValue, isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme } from '@/utils/helper' +import { isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme } from '@/utils/helper' +import { AppThemes, defaultTheme } from '@/utils/constant' export interface AppState extends AppSettings { themes: AppTheme[]; @@ -33,7 +32,7 @@ export interface AppState extends AppSettings { @Module({ dynamic: true, store, name: 'app' }) class App extends VuexModule implements AppState { - version = '2.0.0' + version = '2.0.1' currentTheme = '' currentOs = 'arch-linux' desktop = appWindow?.lightdm?.sessions[0].key || 'i3' @@ -260,7 +259,6 @@ class App extends VuexModule implements AppState { if (hasCachedTheme) { const randomSettings = isActiveTheme && generateRandomThemes - console.log({ indexTheme, index, randomSettings }) if (randomSettings) { themeName = theme.name diff --git a/src/utils/constant.ts b/src/utils/constant.ts new file mode 100644 index 0000000..e0b707b --- /dev/null +++ b/src/utils/constant.ts @@ -0,0 +1,242 @@ +import { AppTheme } from '@/models/app' +import { + pxratio, + hueSlider, + randomButton, + setActiveColor, + brightnessSlider, + buildInputSlider, + buildInvertCheckbox +} from './helper' + +export const defaultTheme: AppTheme = { + name: 'Random', + component: 'random', + color: { + active: '#04ded4', + background: '#19102e' + }, + settings: [ + pxratio(), + buildInputSlider({ min: 0.2 }), + buildInputSlider({ name: 'symmetry', min: 0.01, max: 2, value: 0.1 }), + buildInputSlider({ name: 'thickness', min: 0.01, max: 0.7, value: 0.1 }), + hueSlider(), + brightnessSlider(), + buildInvertCheckbox(), + randomButton + ] +} + +export const AppThemes: AppTheme[] = [ + defaultTheme, + { + name: 'Sphere', + component: 'sphere', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + buildInvertCheckbox(), + hueSlider(), + brightnessSlider(), + buildInputSlider({ max: 10 }), + buildInputSlider({ value: 2, max: 3, min: 1.4, name: 'size' }), + randomButton + ] + }, + { + name: 'Planet', + component: 'planet', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + buildInputSlider(), + { + name: 'position', + type: 'slider', + label: 'input.position', + value: 3.9, + icon: 'position', + options: { + step: 0.01, + max: 20, + min: 2.8, + changeOnUpdate: true + } + }, + randomButton + ] + }, + { + name: 'Destruction', + component: 'destruction', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + buildInputSlider({ name: 'position', value: 0.1, icon: 'position', max: 1, min: 0.01 }), + buildInputSlider({ name: 'perspective', value: 0.1, icon: 'perspective', max: 1, min: 0.01 }), + buildInputSlider({ value: 10, max: 15 }), + randomButton + ] + }, + { + name: 'Rings', + component: 'rings', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + buildInputSlider(), + buildInputSlider({ name: 'hue', value: 0, icon: 'hue', max: 0.5, min: -0.5 }), + buildInputSlider({ name: 'zoom', value: 32, icon: 'zoom', max: 100, min: 2 }), + randomButton + ] + }, + { + name: 'Tenderness', + component: 'tenderness', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + buildInputSlider({ value: 10, max: 15 }), + randomButton + ] + }, + { + name: 'Plasma', + component: 'plasma', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + hueSlider(), + buildInputSlider({ value: 10, max: 25 }), + randomButton + ] + }, + { + name: 'Flow', + component: 'flow', + color: { + active: '#04ded4', + background: 'black' + }, + settings: [ + pxratio(), + hueSlider(), + brightnessSlider(), + buildInvertCheckbox(), + buildInputSlider({ value: 10, max: 15 }), + buildInputSlider({ value: 1, max: 2.8, min: 0.2, name: 'size' }), + randomButton + ] + }, + { + name: 'Infinity', + component: 'infinity', + settings: [ + { + name: 'palette', + type: 'palette', + label: 'input.slider-amount', + value: 0, + values: [ + ['#fcb2bf', '#cf56a1', '#8b2f97', '#511e78'], + ['#e8f79a', '#49d292', '#3b445b', '#383746'], + ['#f5f5f5', '#fc5185', '#3fc1c9', '#364f6b'], + ['#00A8CC', '#0C7B93', '#27496D', '#142850'], + ['#F9F7F7', '#DBE2EF', '#3F72AF', '#112D4E'], + ['#ABEDD8', '#46CDCF', '#3D84A8', '#48466D'] + ] + }, + buildInputSlider({ name: 'size', value: 20, max: 50, min: 2, step: 1, changeOnUpdate: false }), + buildInputSlider({ name: 'amount', value: 30, max: 100, min: 10, step: 1, changeOnUpdate: false }), + buildInputSlider({ value: 20, min: 5, max: 100 }), + randomButton + ], + color: { + active: '#04ded4', + background: '#19102e' + } + }, + { + name: 'Suprematism', + component: 'suprematism', + settings: [ + { + name: 'activeColor', + type: 'color', + label: 'input.color-active', + value: '#F690FF', + options: { + class: 'w-50' + }, + callback: setActiveColor + } + ], + color: { + active: '#F690FF', + background: '#fff' + } + }, + { + name: 'Osmos', + component: 'osmos', + color: { + active: '#e13571', + background: '#1a0532' + } + }, + { + name: 'Space', + component: 'space', + color: { + active: '#04ded4', + background: '#19102e' + } + } +] + +export const osList = [ + { + text: 'Arch Linux', + value: 'arch-linux', + icon: 'arch-linux' + }, + { + text: 'Ubuntu', + value: 'ubuntu', + icon: 'ubuntu' + }, + { + text: 'Fedora', + value: 'fedora', + icon: 'fedora' + }, + { + text: 'Linux Mint', + value: 'linux-mint', + icon: 'linux-mint' + }, + { + text: 'Gentoo', + value: 'gentoo', + icon: 'gentoo' + } +] diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 471bf0f..a69543e 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -1,4 +1,4 @@ -import { AppInputThemeGeneral, AppInputThemeSlider, AppInputThemeValue, AppTheme } from '@/models/app' +import { AppInputButton, AppInputThemeGeneral, AppInputThemeSlider, AppInputThemeValue, AppTheme } from '@/models/app' import { appWindow } from '@/models/lightdm' import { AppModule } from '@/store/app' import { PageModule } from '@/store/page' @@ -179,3 +179,47 @@ export function randomizeSettingsTheme(theme: AppTheme) { return input }) } + +export function setActiveColor(color: AppInputThemeValue) { + document.documentElement.style.setProperty('--color-active', color + '') +} + +export const randomButton: AppInputButton = { + name: 'button', + value: 'button', + label: 'input.random', + type: 'button', + icon: 'random', + callback() { + AppModule.randomizeSettingsTheme() + } +} + +export function buildInputSlider({ + name = 'animation-speed', + value = 5, + min = 1, + max = 10, + step = 0.01, + icon = 'time', + changeOnUpdate = true +} = {}): AppInputThemeSlider { + return { + name, + label: `input.${name}`, + value, + icon, + type: 'slider', + options: { changeOnUpdate, max, step, min } + } +} + +export const pxratio = () => buildInputSlider({ name: 'pxratio', icon: 'pxratio', min: 0.01, max: 1, value: 0.8 }) +export const hueSlider = () => buildInputSlider({ name: 'hue', min: 1, max: 360, step: 1, value: 0 }) +export const brightnessSlider = () => buildInputSlider({ name: 'brightness', min: 0, max: 1, step: 0.01, value: 1 }) +export const buildInvertCheckbox = (): AppInputThemeGeneral => ({ + name: 'invert', + label: 'input.invert', + type: 'checkbox', + value: false +})