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

Update dependencies

Browse Source
pull/8/head
Warinyourself 2 years ago
parent 23472d0279
commit 799b3541e5
11 changed files with 3307 additions and 6931 deletions
Show Stats Download Patch File Download Diff File

23
package.json
Unescape Escape View File

@ -16,7 +16,6 @@
"email": "warinyourself@gmail.com" "email": "warinyourself@gmail.com"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5",
"css-doodle": "^0.12.0", "css-doodle": "^0.12.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mousetrap": "^1.6.5", "mousetrap": "^1.6.5",
@ -27,7 +26,8 @@
"vue-color": "^2.8.1", "vue-color": "^2.8.1",
"vue-i18n": "^8.22.2", "vue-i18n": "^8.22.2",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0",
"webpack-glsl-loader": "^1.0.1"
}, },
"license": "GPL-3.0", "license": "GPL-3.0",
"devDependencies": { "devDependencies": {
@ -37,23 +37,21 @@
"@types/node": "14.10.0", "@types/node": "14.10.0",
"@types/vue-color": "^2.4.4", "@types/vue-color": "^2.4.4",
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "^5.0.8",
"@vue/compiler-sfc": "^3.2.45", "@vue/compiler-sfc": "^3.2.45",
"@vue/eslint-config-airbnb": "7.0.0",
"@vue/eslint-config-prettier": "7.0.0", "@vue/eslint-config-prettier": "7.0.0",
"@vue/eslint-config-standard": "8.0.1",
"@vue/eslint-config-typescript": "11.0.2", "@vue/eslint-config-typescript": "11.0.2",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "3.3.0", "babel-plugin-transform-vue-jsx": "3.3.0",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
"eslint": "^7.1.0", "eslint": "^7.32.0",
"eslint-plugin-import": "2.26.0", "eslint-plugin-import": "2.26.0",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
@ -69,8 +67,7 @@
"vue-class-component": "7.2.6", "vue-class-component": "7.2.6",
"vue-property-decorator": "9.1.2", "vue-property-decorator": "9.1.2",
"vue-template-compiler": "2.7.14", "vue-template-compiler": "2.7.14",
"vuex-module-decorators": "2.0.0", "vuex-module-decorators": "1.2.0"
"webpack-glsl-loader": "1.0.1"
}, },
"gitHooks": { "gitHooks": {
"pre-commit": "lint-staged" "pre-commit": "lint-staged"

2
src/components/app/AppMenu.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { Component, Prop, Vue, Watch } from 'vue-property-decorator' import { Component, Vue, Watch } from 'vue-property-decorator'
import { PageModule } from '@/store/page' import { PageModule } from '@/store/page'
import AppIcon from '@/components/app/AppIcon.vue' import AppIcon from '@/components/app/AppIcon.vue'
import { AppMenuItem, AppMenuPosition } from '@/models/page' import { AppMenuItem, AppMenuPosition } from '@/models/page'

291
src/components/themes/agida/index.tsx
Unescape Escape View File

@ -1,291 +0,0 @@
import { Component, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/app'
import { Wavery } from './lib/wave'
import { Debounce } from '@/utils/helper'
import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color'
import { AppInputThemePalette } from '@/models/app'
import { AgidaTypes } from '@/utils/constant'
export const OPACITY_ARR = [0.265, 0.4, 0.53, 1]
export const topColors = ['#03C79C', '#00A5B2', '#0080A5', '#005A8D']
export const bottomColors = ['#9C1EFF', '#8518E9', '#6F12D3', '#590ABD']
export const MAX_WAVES = 4
@Component
export default class AgidaTheme extends Vue {
iconWidth = 667
iconHeight = 684
wave = {
height: 300,
width: 1200,
segmentCount: 5,
layerCount: 4,
variance: 1
}
screen = {
width: window.innerWidth,
height: window.innerHeight
}
get palette(): string[] {
const input = AppModule.getThemeInput('palette') as AppInputThemePalette
const index = input?.value as number || 0
const values = input?.values || ['#00CC99', '#6600FF']
return values[index] as string[]
}
get topColor(): string {
return this.palette[0]
}
get bottomColor(): string {
return this.palette[1]
}
get animationSpeed(): number {
return AppModule.getThemeInput('animation-speed')?.value as number || 40
}
get type(): AgidaTypes {
return AppModule.getThemeInput('type')?.value as AgidaTypes || 'agida'
}
get topColors(): string[] {
const initHSL = rgbToHsl(hexToRgb(this.topColor))
const second = changeHsl(initHSL, 10, -3, -5)
const third = changeHsl(initHSL, 25, -3, -10)
const fourth = changeHsl(initHSL, 33, -3, -20)
return [initHSL, second, third, fourth]
}
get bottomColors(): string[] {
const initHSL = rgbToHsl(hexToRgb(this.bottomColor))
const second = changeHsl(initHSL, 5, -3, -5)
const third = changeHsl(initHSL, 10, -3, -10)
const fourth = changeHsl(initHSL, 15, -3, -20)
return [initHSL, second, third, fourth]
}
get bottomActiveColor(): string {
return this.bottomColor
}
get knifeSVG(): JSX.Element {
return <g style="transform: scale(0.7) translate(-27%, -7%);transform-origin: center">
<path d="M1233.68 556.289L490.85 201.979L400.013 392.424C1142.84 746.735 1233.68 556.289 1233.68 556.289Z" fill="white"/>
<path d="M432.556 293.998L479.117 196.382L74.764 3.5156C59.8095 -3.61734 41.904 2.72332 34.7711 17.6778L3.55143 83.1312C-3.58151 98.0857 2.75915 115.991 17.7137 123.124L52.0107 139.483C65.6195 145.974 81.9138 140.204 88.4048 126.595C88.4048 126.595 102.294 97.911 145.302 118.425C188.31 138.938 173.495 170.432 173.495 170.432C173.495 170.432 188.648 139.1 231.655 159.613C274.663 180.127 259.849 211.621 259.849 211.621C259.849 211.621 274.692 180.141 318.009 200.802C361.326 221.463 346.203 252.809 346.203 252.809C346.203 252.809 361.355 221.477 404.363 241.991C447.371 262.504 432.556 293.998 432.556 293.998Z" fill="white"/>
</g>
}
get agidaSVG(): JSX.Element {
return <g>
<path d="M236.522 618.424C214.225 622.652 204.614 620.602 184.495 607.788C175.291 601.813 166 593.101 166 593.101C223.5 607.788 267.5 566.618 293.675 571.01C312.903 574.236 339.52 591.001 339.52 591.001L340 607.531C329.492 607.531 303.286 631.11 289.19 653.664C284.577 660.968 278.81 669.041 276.247 671.604C268.687 679.165 253.309 685.059 244.98 683.522C243.8 683.241 243.063 682.984 242.673 682.537C242.173 681.963 242.241 681.076 242.673 679.421C245.364 667.76 258.947 648.282 274.197 633.545C285.217 623.037 288.293 620.987 305.464 612.273C329.171 600.099 330.068 599.586 327.633 596.639C325.968 594.717 324.174 594.46 314.819 595.101C306.105 595.742 301.364 596.895 291.496 600.996C274.709 607.916 249.208 615.989 236.522 618.424Z" fill="white"/>
<path d="M442.401 618.362C464.698 622.591 474.309 620.54 494.428 607.726C503.632 601.752 512.923 593.039 512.923 593.039C455.423 607.726 411.423 566.557 385.248 570.948C366.02 574.174 339.403 590.939 339.403 590.939L338.923 607.47C349.431 607.47 375.637 631.048 389.733 653.602C394.346 660.906 400.113 668.98 402.676 671.542C410.236 679.103 425.614 684.998 433.943 683.46C435.123 683.179 435.86 682.923 436.25 682.475C436.75 681.902 436.682 681.014 436.25 679.359C433.559 667.698 419.975 648.22 404.726 633.483C393.706 622.975 390.63 620.925 373.459 612.211C349.752 600.037 348.855 599.525 351.289 596.577C352.955 594.655 354.749 594.399 364.104 595.039C372.818 595.68 377.559 596.833 387.426 600.934C404.213 607.854 429.714 615.927 442.401 618.362Z" fill="white"/>
<path d="M327 90H302.361L289.29 68.1809L276.86 90H252.128L276.476 43.7891L252 0H276.348L289.29 21.1218L302.746 0H327L303.182 43.7891L327 90Z" fill="white"/>
<path d="M402 90H377.361L364.29 68.1809L351.86 90H327.128L351.476 43.7891L327 0H351.348L364.29 21.1218L377.746 0H402L378.182 43.7891L402 90Z" fill="white"/>
<path d="M426 90H402V0H426V90Z" fill="white"/>
<path d="M336.52 422.712L316.424 445.056L265.131 387.972H305.054L336.52 422.712Z" fill="white"/>
<path d="M371.661 388.636L318.894 447.306L372.412 506.811H412.458L358.939 447.306L411.707 388.636H371.661Z" fill="white"/>
<path d="M336.52 472.217L316.424 449.873L265.131 506.957H305.054L336.52 472.217Z" fill="white"/>
<path d="M428.98 234.452C428.98 210.159 442.862 190.464 473.076 190.464C526.972 190.464 524.818 169.224 524.818 169.224L521.588 210.444C521.588 234.738 501.845 254.432 477.491 254.432C423.596 254.432 426.827 271.175 426.827 271.175L428.98 234.452Z" fill="white"/>
<path d="M249.02 234.452C249.02 210.159 235.138 190.464 204.924 190.464C151.028 190.464 153.182 169.224 153.182 169.224L156.412 210.444C156.412 234.738 176.155 254.432 200.509 254.432C254.404 254.432 251.173 271.175 251.173 271.175L249.02 234.452Z" fill="white"/>
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
</g>
}
get yinYangSVG(): JSX.Element {
return <g style="transform: translate(30px, 30px);">
<path fill-rule="evenodd" clip-rule="evenodd" d="M289.088 578.175C448.746 578.175 578.175 448.746 578.175 289.088C578.175 129.429 448.746 0 289.088 0C129.429 0 0 129.429 0 289.088C0 448.746 129.429 578.175 289.088 578.175ZM289.087 570.763C214.383 570.763 142.737 541.086 89.9132 488.262C37.0889 435.437 7.41248 363.792 7.41248 289.087C7.41248 214.383 37.0889 142.737 89.9132 89.9132C142.737 37.0889 214.383 7.41248 289.087 7.41248C326.44 7.41248 362.262 22.2507 388.675 48.6628C415.087 75.075 429.925 110.898 429.925 148.25C429.925 185.602 415.087 221.425 388.675 247.837C362.262 274.249 326.44 289.087 289.087 289.087C251.735 289.087 215.912 303.926 189.5 330.338C163.088 356.75 148.25 392.573 148.25 429.925C148.25 467.277 163.088 503.1 189.5 529.512C215.912 555.924 251.735 570.763 289.087 570.763ZM326.15 429.925C326.15 450.394 309.557 466.988 289.088 466.988C268.618 466.988 252.025 450.394 252.025 429.925C252.025 409.456 268.618 392.863 289.088 392.863C309.557 392.863 326.15 409.456 326.15 429.925Z" fill="white"/>
<path d="M289.088 185.312C309.557 185.312 326.15 168.719 326.15 148.25C326.15 127.781 309.557 111.188 289.088 111.188C268.618 111.188 252.025 127.781 252.025 148.25C252.025 168.719 268.618 185.312 289.088 185.312Z" fill="white"/>
</g>
}
get activeFragment() {
const objectMap: Record<AgidaTypes, JSX.Element> = {
agida: this.agidaSVG,
knife: this.knifeSVG,
'yin yang': this.yinYangSVG
}
return objectMap[this.type] || this.agidaSVG
}
get width(): number {
return this.screen.width
}
get height(): number {
return this.screen.height
}
get viewBox(): string {
return `0 0 ${this.width} ${this.height}`
}
get topWaves() {
return this.generateWave('top')
}
get bottomWaves() {
return this.generateWave('bottom')
}
mounted() {
this.updateScreen()
window.addEventListener('resize', this.updateScreen)
}
beforeDestroy() {
window.removeEventListener('resize', this.updateScreen)
}
@Debounce(50)
updateScreen() {
this.screen = {
width: window.innerWidth,
height: window.innerHeight
}
}
generateWave(type: 'bottom' | 'top') {
const wavery = new Wavery(this.wave)
const waveSvg = wavery.generateSvg()
const { height, width, xmlns, paths } = waveSvg.svg
const isTop = type === 'top'
const colorsArray = isTop ? this.topColors : this.bottomColors
const angle = Math.atan(window.innerHeight / window.innerWidth) * (180 / Math.PI) * 1.1
return <svg
class={`waves--${type}`}
style={`width: ${width}px; height: ${height}px; --angle: ${angle}deg`}
viewBox={`0 0 ${width} ${height}`}
xmlns={xmlns}
>
{paths.map((path, index) => {
const pathProps = []
if (path.animatedPath) {
pathProps.push(<style>{wavery.generateAnimationStyle(index)}</style>)
}
pathProps.push(
<path
key={index}
d={path.d}
stroke={path.strokeColor}
stroke-width={path.strokeWidth}
fill={colorsArray[index]}
class={`path-${index}`}
transform={path.transform}
></path>
)
return pathProps
})}
</svg>
}
render() {
return <div>
{ this.topWaves }
{ this.bottomWaves }
<svg
width={this.width}
height={this.height}
viewBox={this.viewBox}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width={this.width} height={this.height} fill="#22233D"/>
<mask id="mask-agida" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width={this.width} height={this.height}>
<g id="main" style={`transform: translate(calc(${this.width / 2}px - ${this.iconWidth / 2}px), calc(${this.height / 2}px - ${this.iconHeight / 2 - 30}px))`}>
{this.activeFragment}
</g>
</mask>
<g mask="url(#mask-agida)">
<path d="M1862.93 140.4H-57.0667V1220.4H1862.93V140.4Z" fill={this.bottomActiveColor}/>
<g filter="url(#filter0_f_506_268)">
<path d="M1512.07 1310.6C1932.69 1310.6 2273.67 1022.9 2273.67 668C2273.67 313.102 1932.69 25.4 1512.07 25.4C1091.45 25.4 750.467 313.102 750.467 668C750.467 1022.9 1091.45 1310.6 1512.07 1310.6Z" fill={this.topColor}/>
<path d="M1646.47 889.4C2067.09 889.4 2408.07 601.698 2408.07 246.8C2408.07 -108.098 2067.09 -395.8 1646.47 -395.8C1225.85 -395.8 884.867 -108.098 884.867 246.8C884.867 601.698 1225.85 889.4 1646.47 889.4Z" fill={this.bottomActiveColor}/>
<path d="M272.6 1112.6C693.22 1112.6 1034.2 824.898 1034.2 470C1034.2 115.102 693.22 -172.6 272.6 -172.6C-148.02 -172.6 -489 115.102 -489 470C-489 824.898 -148.02 1112.6 272.6 1112.6Z" fill={this.topColor}/>
<path d="M1145.13 1514C1565.75 1514 1906.73 1226.3 1906.73 871.4C1906.73 516.502 1565.75 228.8 1145.13 228.8C724.513 228.8 383.533 516.502 383.533 871.4C383.533 1226.3 724.513 1514 1145.13 1514Z" fill={this.topColor}/>
<path d="M690.733 855.2C1111.35 855.2 1452.33 567.498 1452.33 212.6C1452.33 -142.298 1111.35 -430 690.733 -430C270.113 -430 -70.8667 -142.298 -70.8667 212.6C-70.8667 567.498 270.113 855.2 690.733 855.2Z" fill={this.bottomActiveColor}/>
<path d="M281.133 1447.4C701.753 1447.4 1042.73 1159.7 1042.73 804.8C1042.73 449.902 701.753 162.2 281.133 162.2C-139.487 162.2 -480.467 449.902 -480.467 804.8C-480.467 1159.7 -139.487 1447.4 281.133 1447.4Z" fill={this.topColor}/>
</g>
</g>
<defs>
<filter id="filter0_f_506_268" x="-811" y="-752" width="3541.07" height="2588" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="161" result="effect1_foregroundBlur_506_268"/>
</filter>
</defs>
</svg>
</div>
}
}

62
src/components/themes/agida/lib/bezier-spline.ts
Unescape Escape View File

@ -1,62 +0,0 @@
/* bezier-spline.js
*
* computes cubic bezier coefficients to generate a smooth
* line through specified points. couples with SVG graphics
* for interactive processing.
*
* For more info see:
* http://www.particleincell.com/2012/bezier-splines/
*
* Lubos Brieda, Particle In Cell Consulting LLC, 2012
* you may freely use this algorithm in your codes however where feasible
* please include a link/reference to the source article
*/
/* computes control points given knots K, this is the brain of the operation */
export function computeControlPoints(K: number[]) {
const p1 = []
const p2 = []
const n = K.length - 1
/* rhs vector */
const a = []
const b = []
const c = []
const r = []
/* left most segment */
a[0] = 0
b[0] = 2
c[0] = 1
r[0] = K[0] + 2 * K[1]
/* internal segments */
for (let i = 1; i < n - 1; i++) {
a[i] = 1
b[i] = 4
c[i] = 1
r[i] = 4 * K[i] + 2 * K[i + 1]
}
/* right segment */
a[n - 1] = 2
b[n - 1] = 7
c[n - 1] = 0
r[n - 1] = 8 * K[n - 1] + K[n]
/* solves Ax=b with the Thomas algorithm (from Wikipedia) */
for (let i = 1; i < n; i++) {
const m: number = a[i] / b[i - 1]
b[i] = b[i] - m * c[i - 1]
r[i] = r[i] - m * r[i - 1]
}
p1[n - 1] = r[n - 1] / b[n - 1]
for (let i = n - 2; i >= 0; --i) p1[i] = (r[i] - c[i] * p1[i + 1]) / b[i]
/* we have p1, now compute p2 */
for (let i = 0; i < n - 1; i++) p2[i] = 2 * K[i + 1] - p1[i + 1]
p2[n - 1] = 0.5 * (K[n] + p1[n - 1])
return { p1, p2 }
}

7
src/components/themes/agida/lib/index.ts
Unescape Escape View File

@ -1,7 +0,0 @@
import { Wavery, WaveConfigInterface } from './wave'
export function waveInit(data: WaveConfigInterface) {
const wavery = new Wavery(data)
return wavery.generateSvg()
}

194
src/components/themes/agida/lib/wave.ts
Unescape Escape View File

@ -1,194 +0,0 @@
import { computeControlPoints } from './bezier-spline'
const svgns = 'http://www.w3.org/2000/svg'
export interface WaveConfigAnimationInterface {
time?: number;
steps?: number;
}
export interface WaveConfigInterface {
height: number;
width: number;
segmentCount: number;
layerCount: number;
variance: number;
strokeWidth?: number;
fillColor?: string;
strokeColor?: string;
transform?: string;
animation?: boolean | WaveConfigAnimationInterface;
}
interface Point {
x: number;
y: number;
}
const defaultAnimationValues = {
steps: 3,
time: 40000,
timingFunction: 'ease',
iteration: 'infinite'
}
export class Wavery {
properties!: WaveConfigInterface
points: Point[][] = []
animationPoints: Point[][][] = [];
constructor(properties: WaveConfigInterface) {
this.properties = properties
this.points = this.generatePoints()
if (this.needAnimation) {
const { steps } = this.animation
Array.from(Array(steps)).forEach(() => {
this.animationPoints.push(this.generatePoints())
})
}
}
get animation() {
const animation = this.properties.animation
const isBoolean = typeof animation === 'boolean'
return isBoolean ? defaultAnimationValues : { ...defaultAnimationValues, ...animation }
}
get cellWidth() {
return this.properties.width / this.properties.segmentCount
}
get cellHeight() {
return this.properties.height / this.properties.layerCount
}
get needAnimation() {
return this.properties.animation
}
get pathList() {
const pathList = []
for (let i = 0; i < this.points.length; i++) {
pathList.push(this.generateClosedPath(i))
}
return pathList
}
generatePoints(): Point[][] {
const { cellWidth, cellHeight } = this
const { width, height, variance } = this.properties
const moveLimitX = cellWidth * variance * 0.2
const moveLimitY = cellHeight * variance
const points = []
for (let y = cellHeight; y <= height; y += cellHeight) {
const pointsPerLayer = []
pointsPerLayer.push({ x: 0, y: Math.floor(y) })
for (let x = cellWidth; x < width; x += cellWidth) {
const varietalY = y - moveLimitY / 2 + Math.random() * moveLimitY
const varietalX = x - moveLimitX / 2 + Math.random() * moveLimitX
pointsPerLayer.push({
x: Math.floor(varietalX),
y: Math.floor(varietalY)
})
}
pointsPerLayer.push({ x: width, y: Math.floor(y) })
points.push(pointsPerLayer)
}
return points
}
generateClosedPath(index: number) {
const animatedPathList: string[] = []
const { fillColor, strokeColor, strokeWidth, transform } = this.properties
const style = { fillColor, strokeColor, strokeWidth, transform }
const path = this.generatePath(this.points[index])
if (this.needAnimation) {
this.animationPoints.forEach((waves) => {
animatedPathList.push(this.generatePath(waves[index]))
})
}
return {
...style,
d: path,
animatedPath: animatedPathList
}
}
generatePath(points: Point[]) {
const xPoints = points.map((p) => p.x)
const yPoints = points.map((p) => p.y)
const leftCornerPoint = { x: 0, y: this.properties.height + this.cellHeight }
const rightCornerPoint = { x: this.properties.width, y: this.properties.height + this.cellHeight }
const xControlPoints = computeControlPoints(xPoints)
const yControlPoints = computeControlPoints(yPoints)
let path =
`M ${leftCornerPoint.x},${leftCornerPoint.y} ` +
`C ${leftCornerPoint.x},${leftCornerPoint.y} ` +
`${xPoints[0]},${yPoints[0]} ` +
`${xPoints[0]},${yPoints[0]} `
for (let i = 0; i < xPoints.length - 1; i++) {
path +=
`C ${xControlPoints.p1[i]},${yControlPoints.p1[i]} ` +
`${xControlPoints.p2[i]},${yControlPoints.p2[i]} ` +
`${xPoints[i + 1]},${yPoints[i + 1]} `
}
path +=
`C ${xPoints[xPoints.length - 1]},${yPoints[xPoints.length - 1]} ` +
`${rightCornerPoint.x},${rightCornerPoint.y} ` +
`${rightCornerPoint.x},${rightCornerPoint.y} Z`
return path
}
private generateKeyframe(percent: number, d: string) {
return `${percent}% {d: path("${d}")}`
}
generateAnimationStyle(index: number) {
const path = this.pathList[index]
const { steps } = this.animation
if (!path) { return }
const animationList = Array.from(Array(steps + 2)).map((_, index, { length }) => {
const isBound = index === 0 || index + 1 === length
const percent = index * (100 / (steps + 1))
return this.generateKeyframe(percent, isBound ? path.d : path.animatedPath[index - 1])
})
return `.path-${index}{
animation:pathAnim-${index} ${this.animation.time}ms;
animation-timing-function: ${this.animation.timingFunction};
animation-iteration-count: ${this.animation.iteration};
}
@keyframes pathAnim-${index}{
${animationList.join('')}
}`
}
generateSvg() {
return {
svg: {
width: this.properties.width,
height: this.properties.height + this.cellHeight,
xmlns: svgns,
paths: this.pathList
}
}
}
}

1
src/style/themes/index.styl
Unescape Escape View File

@ -1,4 +1,3 @@
@import './agida.styl'
@import './osmos.styl' @import './osmos.styl'
@import './space.styl' @import './space.styl'
@import './suprematism.styl' @import './suprematism.styl'

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

@ -30,43 +30,7 @@ export const defaultTheme: AppTheme = {
] ]
} }
const AGIDA_TYPES = ['agida', 'knife', 'yin yang'] as const
export type AgidaTypes = typeof AGIDA_TYPES[number]
export const AppThemes: AppTheme[] = [ export const AppThemes: AppTheme[] = [
{
name: 'Agida',
component: 'agida',
color: {
active: '#04ded4',
background: '#19102e'
},
settings: [
{
name: 'palette',
type: 'palette',
label: 'input.slider-amount',
value: 0,
values: [
['#00CC99', '#6600FF'],
['#B9E0FF', '#9F73AB'],
['#CBCB68', '#3E9C8F'],
['#51eaea', '#D62E93'],
['#AC3ABB', '#511e78'],
['#B5D115', '#FB044F'],
['#fc5185', '#3fc1c9'],
['#f5f5f5', '#364f6b']
]
},
{
name: 'type',
label: 'type',
type: 'selector',
value: 'agida',
values: AGIDA_TYPES
}
]
},
defaultTheme, defaultTheme,
{ {
name: 'Sphere', name: 'Sphere',

20
src/utils/lightdm.ts
Unescape Escape View File

@ -35,31 +35,18 @@ if (lightdmDebug) {
brightness: Math.ceil(Math.random() * 99 + 1), brightness: Math.ceil(Math.random() * 99 + 1),
battery_update: { battery_update: {
_callbacks: [],
_emit: () => {
window.lightdm?.battery_update._callbacks.forEach((cb) => cb())
},
connect: (callback: () => void) => { connect: (callback: () => void) => {
window.lightdm?.battery_update._callbacks.push(callback) console.log('battery update')
} }
}, },
authentication_complete: { authentication_complete: {
_callbacks: [],
_emit: () => {
console.log(window.lightdm?.authentication_complete._callbacks)
window.lightdm?.authentication_complete._callbacks.forEach((cb) => cb())
},
connect: (callback: () => void) => { connect: (callback: () => void) => {
window.lightdm?.authentication_complete._callbacks.push(callback) console.log('authentication complete')
} }
}, },
brightness_update: { brightness_update: {
_callbacks: [],
_emit: () => {
window.lightdm?.brightness_update._callbacks.forEach((cb) => cb())
},
connect: (callback: () => void) => { connect: (callback: () => void) => {
window.lightdm?.brightness_update._callbacks.push(callback) console.log('brightness update')
} }
}, },
@ -150,7 +137,6 @@ if (lightdmDebug) {
} else { } else {
setIsAuthenticated(false) setIsAuthenticated(false)
} }
window.lightdm?.authentication_complete._emit()
}, },
shutdown() { shutdown() {
alert('(DEBUG: System is shutting down)') alert('(DEBUG: System is shutting down)')

5
vue.config.js
Unescape Escape View File

@ -1,13 +1,10 @@
const isGithubView = process.env.VUE_APP_VIEW === 'github' const isGithubView = process.env.VUE_APP_VIEW === 'github'
module.exports = { module.exports = {
publicPath: isGithubView ? '/lightdm-webkit-theme-osmos/' : '', publicPath: isGithubView ? '/lightdm-webkit-theme-osmos/' : '',
runtimeCompiler: true, runtimeCompiler: true,
transpileDependencies: ['vuex-module-decorators'], transpileDependencies: ['vuex-module-decorators'],
devServer: {
disableHostCheck: true
},
chainWebpack: config => { chainWebpack: config => {
const glslRule = config.module.rule('glsl').test(/\.glsl$/) const glslRule = config.module.rule('glsl').test(/\.glsl$/)

9597
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save