Skip to content

Commit 825b4dc

Browse files
WarinyourselfWarinyourself
committed
Add new agida theme
1 parent 41d657b commit 825b4dc

File tree

16 files changed

+271
-195
lines changed

16 files changed

+271
-195
lines changed

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"css-doodle": "^0.12.0",
1414
"lodash": "^4.17.21",
1515
"mousetrap": "^1.6.5",
16+
"nody-greeter-types": "^1.0.7",
1617
"nouislider": "^14.6.3",
1718
"parallax-js": "^3.1.0",
1819
"vue": "^2.6.12",
@@ -27,8 +28,8 @@
2728
"@types/lodash": "^4.14.178",
2829
"@types/mousetrap": "^1.6.9",
2930
"@types/node": "14.10.0",
30-
"@typescript-eslint/eslint-plugin": "^2.33.0",
31-
"@typescript-eslint/parser": "^2.33.0",
31+
"@typescript-eslint/eslint-plugin": "3.3.0",
32+
"@typescript-eslint/parser": "3.10.1",
3233
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
3334
"@vue/cli-plugin-babel": "~4.5.0",
3435
"@vue/cli-plugin-eslint": "~4.5.0",

‎src/assets/images/themes/agida/index.png

9.84 KB
Loading

‎src/components/base/BackgroundImage.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { CreateElement } from 'vue/types/umd'
33

44
import { AppModule } from '@/store/app'
55
import { PageModule } from '@/store/page'
6+
import { AppTheme } from '@/models/app'
67

7-
const components: { [k: string]: any } = {}
8+
const components: { [k: string]: Vue } = {}
89

910
const requireComponent = require.context(
1011
'@/components/themes', true, /\.(vue|tsx)$/
@@ -24,18 +25,18 @@ requireComponent.keys().forEach(fileName => {
2425

2526
@Component({ components })
2627
export default class BackgroundImage extends Vue {
27-
get theme() {
28+
get theme(): AppTheme {
2829
return AppModule.activeTheme
2930
}
3031

31-
get isOpenLogin() {
32+
get isOpenLogin(): boolean {
3233
return PageModule.isOpenBlock('login')
3334
}
3435

35-
render(h: CreateElement) {
36+
render(h: CreateElement): JSX.Element {
3637
const body = h(components[this.theme.component ?? 'random'])
3738

38-
return <div class='background-image' key={ this.theme.name }>
39+
return <div class='background-image'>
3940
<div class="mask-background"></div>
4041
{ body }
4142
</div>

‎src/components/themes/agida/index.tsx

Lines changed: 131 additions & 103 deletions
Large diffs are not rendered by default.

‎src/components/themes/agida/lib/wave.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,6 @@ export class Wavery {
170170
return this.generateKeyframe(percent, isBound ? path.d : path.animatedPath[index - 1])
171171
})
172172

173-
console.log({ animationList })
174-
175173
return `.path-${index}{
176174
animation:pathAnim-${index} ${this.animation.time}ms;
177175
animation-timing-function: ${this.animation.timingFunction};

‎src/locales/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"input": {
33
"time": "Time",
44
"color": "Select color",
5+
"bottom-color": "Bottom color",
56
"color-active": "Select active color",
67
"color-second": "Select second color",
78
"slider-amount": "Choice slider amount",

‎src/locales/ru.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"input": {
33
"time": "Время",
44
"color": "Выбрать цвет",
5+
"bottom-color": "Выбрать нижний цвет",
56
"color-active": "Выбрать активный цвет",
67
"color-second": "Выбрать второстепенный цвет",
78
"slider-amount": "Choice slider amount",

‎src/models/app.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export interface AppThemeSnapshot {
2525
values: Record<string, AppInputThemeValue>;
2626
}
2727

28-
export type AppInputTheme = AppInputThemeGeneral | AppInputThemeSlider | AppInputThemeSlider | AppInputButton
28+
export type AppInputTheme = AppInputThemeGeneral | AppInputThemeSlider | AppInputButton
2929
export type AppInputThemeType = 'color' | 'slider' | 'checkbox' | 'palette' | 'button'
3030
export type AppInputThemeValue = string | boolean | string[] | number
3131

‎src/models/lightdm.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* eslint-disable @typescript-eslint/camelcase */
1+
/* eslint-disable camelcase */
22
export interface ExpandedWindow {
33
lightdm: Lightdm;
44
authentication_complete(): void;

‎src/plugins/components.ts

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,3 @@ import Vue from 'vue'
33
import AppIcon from '@/components/app/AppIcon.vue'
44

55
Vue.component('AppIcon', AppIcon)
6-
7-
// import upperFirst from 'lodash/upperFirst'
8-
// import camelCase from 'lodash/camelCase'
9-
10-
// const requireComponent = require.context(
11-
// '@/components/app', true, /\.vue$/
12-
// )
13-
14-
// requireComponent.keys().forEach(fileName => {
15-
// const componentConfig = requireComponent(fileName)
16-
17-
// const componentName = upperFirst(
18-
// camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
19-
// )
20-
21-
// Vue.component(`${componentName}`, componentConfig.default || componentConfig)
22-
// })

‎src/utils/color.ts

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export type ColorArray = [number, number, number]
2-
3-
export interface IConvertOptions {
4-
view?: 'array' | 'string'
1+
export interface ConvertOptions {
2+
view?: 'array' | 'string';
53
}
64

5+
export type ColorArray = [number, number, number];
6+
77
export const hexToRgb = (color: string): ColorArray => {
88
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color)
99
return result ? [
@@ -15,28 +15,27 @@ export const hexToRgb = (color: string): ColorArray => {
1515

1616
export const fromBracketsToNumber = (color: string): ColorArray => {
1717
const colors = color.slice(color.indexOf('(') + 1).replace(')', '').split(',')
18-
19-
return colors.slice(0, 3).map(parseInt) as ColorArray
18+
return colors.slice(0, 3).map((color) => parseInt(color)) as ColorArray
2019
}
2120

2221
export const changeHsl = (hsl: string, hAdd: number, sAdd: number, lAdd: number): string => {
23-
let hslMass = fromBracketsToNumber(hsl)
22+
const hslMass = fromBracketsToNumber(hsl)
2423
return `hsl(${hslMass[0] + hAdd}, ${hslMass[1] + sAdd}%, ${hslMass[2] + lAdd}%)`
2524
}
2625

27-
export function rgbToHsl (colorRGB: ColorArray): string
28-
export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions): string | ColorArray {
26+
export function rgbToHsl(colorRGB: ColorArray): string
27+
export function rgbToHsl(colorRGB: ColorArray, convertOptions?: ConvertOptions): string | ColorArray {
2928
let [r, g, b] = colorRGB
3029
const { view } = convertOptions || {}
3130
const isArray = view === 'array'
3231
r /= 255
3332
g /= 255
3433
b /= 255
35-
let [max, min] = [Math.max(r, g, b), Math.min(r, g, b)]
34+
const [max, min] = [Math.max(r, g, b), Math.min(r, g, b)]
3635

3736
let h = 0
3837
let s = 0
39-
let l = (max + min) / 2
38+
const l = (max + min) / 2
4039

4140
const finalArray = (): ColorArray => [Math.round(h), Math.round(s * 100), Math.round(l * 100)]
4241
const formatString = (hsl: ColorArray) => `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`
@@ -45,7 +44,7 @@ export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions
4544
return isArray ? finalArray() : formatString(finalArray())
4645
}
4746

48-
let d = (max - min)
47+
const d = (max - min)
4948
s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min)
5049
switch (max) {
5150
case r: h = ((g - b) / d + 0) * 60; break
@@ -55,26 +54,3 @@ export function rgbToHsl (colorRGB: ColorArray, convertOptions?: IConvertOptions
5554

5655
return isArray ? finalArray() : formatString(finalArray())
5756
}
58-
59-
function getPrettyDate(timestamp: number): string;
60-
function getPrettyDate(day: string, month: string, year: string): string;
61-
function getPrettyDate(date: Date): string;
62-
63-
// Может принимать от 1 до 3 параметров разных типов, в зависимости от перегрузок
64-
function getPrettyDate(arg1: unknown, arg2?: unknown, arg3?: unknown) {
65-
let prettyDate: string = '';
66-
67-
if(typeof arg1 === 'number') {
68-
const date = new Date(arg1);
69-
const day = date.getDate();
70-
const month = date.getMonth() + 1;
71-
const year = date.getFullYear();
72-
73-
prettyDate = `${day}/${month}/${year}`
74-
}
75-
76-
return prettyDate;
77-
}
78-
79-
const timeStamp = new Date().getTime();
80-
getPrettyDate(timeStamp);

‎src/utils/constant.ts

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { AppTheme } from '@/models/app'
1+
import { AppTheme, AppInputThemeGeneral } from '@/models/app'
22
import {
33
pxratio,
44
hueSlider,
55
randomButton,
66
setActiveColor,
77
brightnessSlider,
88
buildInputSlider,
9-
buildInvertCheckbox
9+
buildInvertCheckbox,
10+
buildInputColor
1011
} from './helper'
1112

1213
const background = '#22233D'
@@ -30,14 +31,37 @@ export const defaultTheme: AppTheme = {
3031
]
3132
}
3233

34+
const colorInput: AppInputThemeGeneral = {
35+
name: 'top-color',
36+
type: 'color',
37+
label: 'input.color-active',
38+
value: '#00CC99',
39+
options: { class: 'w-50' }
40+
}
41+
3342
export const AppThemes: AppTheme[] = [
3443
{
3544
name: 'Agida',
3645
component: 'agida',
3746
color: {
3847
active: '#04ded4',
3948
background: '#19102e'
40-
}
49+
},
50+
settings: [
51+
colorInput,
52+
{
53+
name: 'bottom-color',
54+
type: 'color',
55+
label: 'input.color-active',
56+
value: '#6600FF',
57+
options: { class: 'w-50' }
58+
}
59+
// buildInputColor({
60+
// name: 'bottom-color',
61+
// value: '#6600FF',
62+
// options: { class: 'w-50' }
63+
// })
64+
]
4165
},
4266
defaultTheme,
4367
{

‎src/utils/gl.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default class GL {
5151
time = 0
5252
startTime = Date.now()
5353

54-
renderHook: null | Function = null
54+
renderHook: null | (() => void) = null
5555
renderOptions: GLRenderOptions = {}
5656

5757
constructor(

‎src/utils/helper.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export const systemActionsObject = systemActions.reduce((acc, action) => {
139139
}
140140
}, {} as Record<systemActionsType, () => void>)
141141

142-
export function preventDefault(event: Event, callback?: Function) {
142+
export function preventDefault(event: Event, callback?: () => void): void {
143143
event.preventDefault()
144144
callback && callback()
145145
}
@@ -152,7 +152,7 @@ export function focusInputPassword() {
152152
}
153153
}
154154

155-
export function stopPropagation(event: Event, callback?: Function) {
155+
export function stopPropagation(event: Event, callback?: () => void): void {
156156
event.stopPropagation()
157157
callback && callback()
158158
}
@@ -214,6 +214,20 @@ export function buildInputSlider({
214214
}
215215
}
216216

217+
export function buildInputColor({
218+
name = 'active-color',
219+
value = '#00CC99',
220+
...options
221+
} = {}): AppInputThemeGeneral {
222+
return {
223+
name,
224+
value,
225+
label: `input.${name}`,
226+
type: 'color',
227+
...options
228+
}
229+
}
230+
217231
export const pxratio = () => buildInputSlider({ name: 'pxratio', icon: 'pxratio', min: 0.01, max: 1, value: 0.8 })
218232
export const hueSlider = () => buildInputSlider({ name: 'hue', min: 1, max: 360, step: 1, value: 0 })
219233
export const brightnessSlider = () => buildInputSlider({ name: 'brightness', min: 0, max: 1, step: 0.01, value: 1 })

‎src/utils/lightdm.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
/* eslint-disable @typescript-eslint/camelcase */
1+
/* eslint-disable camelcase */
22
import { appWindow } from '@/models/lightdm'
33

44
const DEBUG_PASSWORD = 'password'
55

66
const lightdmDebug = appWindow.lightdm === undefined
77
let password: string
8-
let completeCallback: undefined | Function
8+
let completeCallback: undefined | (() => void)
99

1010
if (lightdmDebug) {
1111
appWindow.lightdm = {

0 commit comments

Comments
 (0)