aiden
/
lightdm-webkit-theme-osmos
mirror of https://github.com/Warinyourself/lightdm-webkit-theme-osmos
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Create constant file

Browse Source
masks
Warinyourself 4 years ago
parent c06c9ef5a0
commit 975ad8e800
6 changed files with 317 additions and 360 deletions
Show Stats Download Patch File Download Diff File

1
src/App.tsx
Unescape Escape View File

@ -18,7 +18,6 @@ export default class MainApp extends Vue {
@Debounce(100)
@Watch('getMainSettings', { deep: true })
handleSettingsThemes() {
console.log('Update Settings')
AppModule.syncSettingsWithCache()
}

24
src/components/themes/flow/index.tsx
Unescape Escape View File

@ -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 <div>
<canvas ref='canvas' />
<canvas ref='canvas' style={ this.styleCanvas }/>
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
</div>

348
src/models/app.ts
Unescape Escape View File

@ -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'
}
]

16
src/store/app.ts
Unescape Escape View File

@ -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

242
src/utils/constant.ts
Unescape Escape View File

@ -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'
}
]

46
src/utils/helper.ts
Unescape Escape View File

@ -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
})

Write Preview
Loading…
Cancel
Save