diff --git a/themes/dracula/.prettierignore b/themes/dracula/.prettierignore new file mode 100644 index 0000000..f32d789 --- /dev/null +++ b/themes/dracula/.prettierignore @@ -0,0 +1 @@ +css/DRACULA diff --git a/themes/dracula/README.md b/themes/dracula/README.md index c7304d6..1101b6c 100644 --- a/themes/dracula/README.md +++ b/themes/dracula/README.md @@ -1,6 +1,7 @@ # Web Greeter dracula theme ## Overview + This is a web-greeter theme based on [dracula color scheme][dracula], included with [web-greeter][web-greeter]. Based also on [glorious-theme][glorious] by manilarome. @@ -21,6 +22,7 @@ Based also on [glorious-theme][glorious] by manilarome. ## Installation + This theme is shipped with `web-greeter`. To use it, set the `theme` as `dracula` inside `/etc/lightdm/web-greeter.yml` ## Credits @@ -30,6 +32,7 @@ Dracula theme wallpaper found [here](https://draculatheme.com/wallpaper) Window blurred background image by [Riley Briggs](https://unsplash.com/photos/cSe3oKQ03OQ) on [Unsplash](https://unsplash.com/) ## TODO + - Battery and brightness support - Lock indicator - Translations support diff --git a/themes/dracula/css/style.css b/themes/dracula/css/style.css index ef3bca5..43551a4 100644 --- a/themes/dracula/css/style.css +++ b/themes/dracula/css/style.css @@ -1,24 +1,23 @@ :root { - - --bg0: #282A36; - --bg1: #44475A; - --bg2: #585C74; + --bg0: #282a36; + --bg1: #44475a; + --bg2: #585c74; --bg3: #666e99; - --alt0: #6272A4; - --alt1: #7A88B3; + --alt0: #6272a4; + --alt1: #7a88b3; - --fg0: #F8F8F2; - --fg1: #EAEAE0; - --fg2: #DEDED2; + --fg0: #f8f8f2; + --fg1: #eaeae0; + --fg2: #deded2; - --cyan: #8BE9fD; - --green: #50FA7B; - --orange: #FFb86C; - --pink: #FF79C6; - --purple: #BD93F9; - --red: #FF5555; - --yellow: #F1FA8C; + --cyan: #8be9fd; + --green: #50fa7b; + --orange: #ffb86c; + --pink: #ff79c6; + --purple: #bd93f9; + --red: #ff5555; + --yellow: #f1fa8c; --animation-duration: 300ms; @@ -29,7 +28,7 @@ @media screen and (min-width: 3000px) and (min-height: 1200px) { #screen { - zoom: 2.0; + zoom: 2; } } @@ -37,7 +36,7 @@ html { color: var(--fg0); - background-color: black; + background-color: black; font-family: system-ui; min-height: 100%; @@ -76,7 +75,7 @@ body { background-color: var(--fg2); } ::-webkit-scrollbar-thumb:hover { - background-color: var(--fg0); + background-color: var(--fg0); } /* Background */ @@ -122,7 +121,7 @@ body { align-items: center; justify-content: center; - background-color: #282A36aa; + background-color: #282a36aa; backdrop-filter: blur(5px); } #cover > #message { @@ -146,7 +145,7 @@ body { transition: var(--animation-duration); } /*#login-wrapper:hover, #login-wrapper:focus, #login-wrapper:focus-within {*/ - /*filter: drop-shadow(2px 4px 6px black);*/ +/*filter: drop-shadow(2px 4px 6px black);*/ /*}*/ body.success #login-wrapper { background-color: #79d28f; @@ -182,10 +181,15 @@ input { font-size: inherit; font-family: inherit; } -input:focus, input:focus-visible { +input:focus, +input:focus-visible { border: 0; outline: auto var(--fg0); } +input::-ms-reveal, +input::-ms-clear { + display: none; +} :focus { outline: auto var(--fg0) !important; } @@ -202,6 +206,23 @@ input:focus, input:focus-visible { box-sizing: border-box; margin: 0; } +#input { + position: relative; +} +#input #pass-eye { + position: absolute; + right: 15px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + height: fit-content; + background-color: var(--bg2); +} +#input #pass-eye:hover, +#input #pass-eye:focus { + background-color: var(--bg3); +} #input-username { box-sizing: border-box; @@ -230,7 +251,8 @@ input:focus, input:focus-visible { #submit-button { background-color: #72bece; } -#submit-button:hover, #submit-button:focus { +#submit-button:hover, +#submit-button:focus { background-color: var(--purple); } @@ -243,7 +265,8 @@ input:focus, input:focus-visible { background-color: var(--orange); height: 100%; } -#users-button:hover, #users-button:focus { +#users-button:hover, +#users-button:focus { background-color: var(--red); } @@ -256,7 +279,8 @@ input:focus, input:focus-visible { right: 0; z-index: 2; } -#users-dropdown .dropdown button:hover, #users-dropdown .dropdown button:focus { +#users-dropdown .dropdown button:hover, +#users-dropdown .dropdown button:focus { background-color: var(--orange); } @@ -273,7 +297,8 @@ input:focus, input:focus-visible { cursor: pointer; } -#time-date:hover, #time-date:focus { +#time-date:hover, +#time-date:focus { filter: drop-shadow(2px 2px 6px black); /*animation-name: shake;*/ animation-duration: 1s; @@ -281,7 +306,8 @@ input:focus, input:focus-visible { animation-iteration-count: 1; animation-timing-function: ease-in-out; } -#time-date:hover *, #time-date:focus * { +#time-date:hover *, +#time-date:focus * { /*color: var(--cyan);*/ } #time-date.hide { @@ -328,7 +354,8 @@ button { padding: 0.5em 0.8em; transition: inherit; } -.button-group > *:hover, .button-group > *:focus { +.button-group > *:hover, +.button-group > *:focus { background-color: var(--orange); } @@ -377,7 +404,8 @@ button { margin-left: 0.3em; } -#sessions-button:hover, #sessions-button:focus { +#sessions-button:hover, +#sessions-button:focus { background-color: var(--purple); } @@ -406,7 +434,8 @@ button { align-items: center; justify-content: center; } -#bottom-bar.hide, #top-bar.hide { +#bottom-bar.hide, +#top-bar.hide { min-height: 0; max-height: 0; max-width: initial; @@ -427,7 +456,8 @@ button { background-color: var(--bg1); } -#panel-button:hover, #panel-button:focus { +#panel-button:hover, +#panel-button:focus { background-color: var(--green); } @@ -489,10 +519,12 @@ button { object-fit: cover; filter: brightness(0.8); } -#background-selector .image:hover, #background-selector .image:focus { +#background-selector .image:hover, +#background-selector .image:focus { filter: drop-shadow(2px 2px 6px black); } -#background-selector .image:hover > img, #background-selector .image:focus > img { +#background-selector .image:hover > img, +#background-selector .image:focus > img { filter: brightness(1); } @@ -509,7 +541,8 @@ button { height: fit-content; align-self: center; } -#close-panel-button:hover, #close-panel-button:focus { +#close-panel-button:hover, +#close-panel-button:focus { background-color: var(--red); } @@ -531,7 +564,8 @@ button { width: -webkit-fill-available; cursor: pointer; } -.dropdown button:hover, .dropdown button:focus { +.dropdown button:hover, +.dropdown button:focus { background-color: var(--purple); } @@ -570,7 +604,8 @@ button { backdrop-filter: blur(20px); border-radius: 2px; } -#system-bar > *:hover, #system-bar > *:focus { +#system-bar > *:hover, +#system-bar > *:focus { background-color: #2828280e; backdrop-filter: blur(50px); } diff --git a/themes/dracula/index.html b/themes/dracula/index.html index 8188d33..3deb9ae 100644 --- a/themes/dracula/index.html +++ b/themes/dracula/index.html @@ -1,156 +1,171 @@ - - - - Dracula theme - - - - - - - - - -
-
-
- - - -
- -
- -
- Welcome! -
+ + + + Dracula theme + + + + + + + +
+
+
-
- + -
+
+
+
Welcome!
-
-
-
- +
+ -
- -
- +
+ +
+ +
+ + +
+ +
+ +
-
- -
- - -
- - +
+
+ + +
+ +
+ +
+
+
+ + +
+ +
+ + + + + + + +
+
-
-
- -
- -
-
- -
- -
-
- - - -
- - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/themes/dracula/js/accounts.js b/themes/dracula/js/accounts.js index 4d84b69..40e5cd8 100644 --- a/themes/dracula/js/accounts.js +++ b/themes/dracula/js/accounts.js @@ -1,89 +1,98 @@ class Accounts { - constructor() { - this._localStorage = window.localStorage - this._userWrapper = document.querySelector("#user-wrapper") - this._accountsList = document.querySelector("#users-dropdown") - this._accountsButton = document.querySelector("#users-button") - this._defaultUser = null - this._usersObject = null - this._init() - } + constructor() { + this._localStorage = window.localStorage; + this._userWrapper = document.querySelector("#user-wrapper"); + this._accountsList = document.querySelector("#users-dropdown"); + this._accountsButton = document.querySelector("#users-button"); + this._defaultUser = null; + this._usersObject = null; + this._init(); + } - getDefaultUserName() { - return this._defaultUser.username - } + getDefaultUserName() { + return this._defaultUser.username; + } - _setAccountDefault() { - let input = this._userWrapper.querySelector("input") - if (this._defaultUser.username != "") { - //input.classList.add("hide") - input.value = this._defaultUser.username - } else { - input.value = "" - } - if (this._usersObject.length > 0) { - this._accountsButton.classList.remove("hide") - } - } + _setAccountDefault() { + let input = this._userWrapper.querySelector("input"); + if (this._defaultUser.username != "") { + //input.classList.add("hide") + input.value = this._defaultUser.username; + } else { + input.value = ""; + } + if (this._usersObject.length > 0) { + this._accountsButton.classList.remove("hide"); + } + } - _updateOnStartup() { - var username = "" - if (this._usersObject.length > 0) { - username = this._localStorage.getItem("defaultUser") || this._usersObject[0].username - } - var user = this._usersObject.find((val) => {return val.username === username}) - if (user === undefined) { - this._defaultUser = {username: "", display_name: ""} - } else { - this._defaultUser = user - } - this._setAccountDefault() - } + _updateOnStartup() { + var username = ""; + if (this._usersObject.length > 0) { + username = + this._localStorage.getItem("defaultUser") || + this._usersObject[0].username; + } + var user = this._usersObject.find((val) => { + return val.username === username; + }); + if (user === undefined) { + this._defaultUser = { username: "", display_name: "" }; + } else { + this._defaultUser = user; + } + this._setAccountDefault(); + } - _setAccountList() { - var dropdown = this._accountsList.querySelector(".dropdown") - dropdown.innerHTML = "" + _setAccountList() { + var dropdown = this._accountsList.querySelector(".dropdown"); + dropdown.innerHTML = ""; - for (let i = 0; i < this._usersObject.length; i++) { - var name = this._usersObject[i].display_name - var li = document.createElement("li") - var button = document.createElement("button") - button.type = "button" - button.innerText = name - button.addEventListener("click", () => { - this._updateDefaults(this._usersObject[i]) - this._setAccountDefault() - //authenticate.startAuthentication() - }) + for (let i = 0; i < this._usersObject.length; i++) { + var name = this._usersObject[i].display_name; + var li = document.createElement("li"); + var button = document.createElement("button"); + button.type = "button"; + button.innerText = name; + button.addEventListener("click", () => { + this._updateDefaults(this._usersObject[i]); + this._setAccountDefault(); + //authenticate.startAuthentication() + }); - li.appendChild(button) - dropdown.appendChild(li) - } - } + li.appendChild(button); + dropdown.appendChild(li); + } + } - _setButton() { - var dropdown = this._accountsList.querySelector(".dropdown") - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) { - dropdown.classList.toggle("hide") - } else - if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - } + _setButton() { + var dropdown = this._accountsList.querySelector(".dropdown"); + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._accountsButton || + ev.target.parentElement == this._accountsButton + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != this._accountsList && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + } - _updateDefaults(userObject) { - if (!userObject) return - this._defaultUser = userObject + _updateDefaults(userObject) { + if (!userObject) return; + this._defaultUser = userObject; - this._localStorage.setItem("defaultUser", this._defaultUser.username) - } + this._localStorage.setItem("defaultUser", this._defaultUser.username); + } - _init() { - this._usersObject = lightdm.users - this._updateOnStartup() - this._setAccountList() - this._setButton() - } + _init() { + this._usersObject = lightdm.users; + this._updateOnStartup(); + this._setAccountList(); + this._setButton(); + } } diff --git a/themes/dracula/js/authenticate.js b/themes/dracula/js/authenticate.js index 4765af5..9758574 100644 --- a/themes/dracula/js/authenticate.js +++ b/themes/dracula/js/authenticate.js @@ -1,113 +1,126 @@ class Authenticate { - constructor() { - this._form = document.querySelector("#login-form") - this._username = "" - this._password = "" - this._init() - } - - _setForm() { - this._form.addEventListener("submit", (ev) => { - ev.preventDefault() - var inputs = this._form.querySelectorAll("input") - var data = getArrayForm(inputs) - if (!data) return false - this._username = data.username - this._password = data.password - this._respond() - }) - } - - async _respond() { - let inputUser = document.querySelector("#input-username") - let inputPass = document.querySelector("#input-password") - inputUser.blur(); inputUser.disabled = true; - inputPass.blur(); inputPass.disabled = true; - - lightdm.cancel_authentication() - lightdm.authenticate(String(this._username)) - await wait(1000) - lightdm.respond(this._password) - } - - _showMessage(msg) { - let message = document.querySelector("#auth-message") - message.innerText = msg - message.classList.remove("hide") - } - - _hideMessage() { - let message = document.querySelector("#auth-message") - message.classList.add("hide") - } - - async _authentication_done() { - let body = document.querySelector("body") - body.classList.add("success") - - this._showMessage("Welcome!") - - let form = document.querySelector("#pass-form") - let topbar = document.querySelector("#top-bar") - let bottombar = document.querySelector("#bottom-bar") - form.style.transition = "0ms" - form.classList.add("hide") - topbar.classList.add("hide") - bottombar.classList.add("hide") - - await wait(1000) - let defSession = String(sessions.getDefaultSession()) - document.querySelector("body").style.opacity = 0 - - await wait(1000) - console.log("Session started with", defSession) - lightdm.start_session(defSession) - } - - async _authentication_failed() { - lightdm.cancel_authentication() - let body = document.querySelector("body") - body.classList.add("failed") - - this._showMessage("Try again") - - let form = document.querySelector("#pass-form") - let topbar = document.querySelector("#top-bar") - let bottombar = document.querySelector("#bottom-bar") - form.style.transition = "0ms" - form.classList.add("hide") - topbar.classList.add("hide") - bottombar.classList.add("hide") - - await wait(1500) - - this._hideMessage() - form.style.transition = "" - form.classList.remove("hide") - topbar.classList.remove("hide") - bottombar.classList.remove("hide") - - let inputUser = document.querySelector("#input-username") - let inputPass = document.querySelector("#input-password") - inputUser.blur(); inputUser.disabled = false; - inputPass.blur(); inputPass.disabled = false; - inputPass.value = "" - - body.classList.remove("failed") - } - - _setAuthentication_done() { - window.authentication_done = () => { - if (lightdm.is_authenticated) { - this._authentication_done() - } else { - this._authentication_failed() - } - } - } - - _init() { - this._setForm() - this._setAuthentication_done() - } + constructor() { + this._form = document.querySelector("#login-form"); + this._inputUser = document.querySelector("#input-username"); + this._inputPass = document.querySelector("#input-password"); + this._input_eye = document.querySelector("#pass-eye"); + this._username = ""; + this._password = ""; + this._init(); + } + + _setForm() { + this._form.addEventListener("submit", (ev) => { + ev.preventDefault(); + var inputs = this._form.querySelectorAll("input"); + var data = getArrayForm(inputs); + if (!data) return false; + this._username = data.username; + this._password = data.password; + this._respond(); + }); + } + _setPasswordEye() { + this._input_eye.addEventListener("click", () => { + if (this._inputPass.type === "password") { + this._inputPass.type = "text"; + } else { + this._inputPass.type = "password"; + } + }); + } + + async _respond() { + this._inputUser.blur(); + this._inputUser.disabled = true; + this._inputPass.blur(); + this._inputPass.disabled = true; + + lightdm.cancel_authentication(); + lightdm.authenticate(String(this._username)); + await wait(1000); + lightdm.respond(this._password); + } + + _showMessage(msg) { + let message = document.querySelector("#auth-message"); + message.innerText = msg; + message.classList.remove("hide"); + } + + _hideMessage() { + let message = document.querySelector("#auth-message"); + message.classList.add("hide"); + } + + async _authentication_done() { + let body = document.querySelector("body"); + body.classList.add("success"); + + this._showMessage("Welcome!"); + + let form = document.querySelector("#pass-form"); + let topbar = document.querySelector("#top-bar"); + let bottombar = document.querySelector("#bottom-bar"); + form.style.transition = "0ms"; + form.classList.add("hide"); + topbar.classList.add("hide"); + bottombar.classList.add("hide"); + + await wait(1000); + let defSession = String(sessions.getDefaultSession()); + document.querySelector("body").style.opacity = 0; + + await wait(1000); + console.log("Session started with", defSession); + lightdm.start_session(defSession); + } + + async _authentication_failed() { + lightdm.cancel_authentication(); + let body = document.querySelector("body"); + body.classList.add("failed"); + + this._showMessage("Try again"); + + let form = document.querySelector("#pass-form"); + let topbar = document.querySelector("#top-bar"); + let bottombar = document.querySelector("#bottom-bar"); + form.style.transition = "0ms"; + form.classList.add("hide"); + topbar.classList.add("hide"); + bottombar.classList.add("hide"); + + await wait(1500); + + this._hideMessage(); + form.style.transition = ""; + form.classList.remove("hide"); + topbar.classList.remove("hide"); + bottombar.classList.remove("hide"); + + this._inputUser.blur(); + this._inputUser.disabled = false; + this._inputPass.blur(); + this._inputPass.disabled = false; + this._inputPass.value = ""; + + body.classList.remove("failed"); + } + + _setAuthentication_done() { + window.authentication_done = () => { + if (lightdm.is_authenticated) { + this._authentication_done(); + } else { + this._authentication_failed(); + } + }; + } + + _init() { + this._setForm(); + this._setAuthentication_done(); + this._setPasswordEye(); + } } diff --git a/themes/dracula/js/backgrounds.js b/themes/dracula/js/backgrounds.js index c89c9d1..515d883 100644 --- a/themes/dracula/js/backgrounds.js +++ b/themes/dracula/js/backgrounds.js @@ -1,74 +1,87 @@ class Backgrounds { - constructor() { - this._localStorage = window.localStorage - this._defaultBackgroundArr = ["assets/dracula.png", "assets/window-blurred.png"] - this._sidebar = document.querySelector("#sidebar") - this._backgroundsList = document.querySelector("#background-selector") - this._background = document.querySelector("#background") - this._backgroundImages = null - this._backgroundImagesDir = null - this._backgroundPath = "" - } + constructor() { + this._localStorage = window.localStorage; + this._defaultBackgroundArr = [ + "assets/dracula.png", + "assets/window-blurred.png", + ]; + this._sidebar = document.querySelector("#sidebar"); + this._backgroundsList = document.querySelector("#background-selector"); + this._background = document.querySelector("#background"); + this._backgroundImages = null; + this._backgroundImagesDir = null; + this._backgroundPath = ""; + } - _createImage(path) { - let image = document.createElement("img") - let button = document.createElement("button") - let imageName = path.replace(/^.*[\\\/]/, '') - button.classList.add("image") - image.src = path - image.alt = imageName - button.appendChild(image) - return button - } + _createImage(path) { + let image = document.createElement("img"); + let button = document.createElement("button"); + let imageName = path.replace(/^.*[\\\/]/, ""); + button.classList.add("image"); + image.src = path; + image.alt = imageName; + button.appendChild(image); + return button; + } - async _createBackgroundArray() { - let images = await this._getImages() - this._backgroundImages = this._defaultBackgroundArr.concat(images) - this._setBackgroundImages() - return new Promise((resolve) => resolve()) - } + async _createBackgroundArray() { + let images = await this._getImages(); + this._backgroundImages = this._defaultBackgroundArr.concat(images); + this._setBackgroundImages(); + return new Promise((resolve) => resolve()); + } - _updateOnStartup() { - this._backgroundPath = this._localStorage.getItem("defaultBackgroundImage") || this._backgroundImages[0] - this._updateBackgroundImages() - } + _updateOnStartup() { + this._backgroundPath = + this._localStorage.getItem("defaultBackgroundImage") || + this._backgroundImages[0]; + this._updateBackgroundImages(); + } - _updateBackgroundImages() { - let img = this._background.querySelector("img") - if (!img) { - img = document.createElement("img") - this._background.appendChild(img) - } - img.src = this._backgroundPath - this._localStorage.setItem("defaultBackgroundImage", String(this._backgroundPath)) - } + _updateBackgroundImages() { + let img = this._background.querySelector("img"); + if (!img) { + img = document.createElement("img"); + this._background.appendChild(img); + } + img.src = this._backgroundPath; + this._localStorage.setItem( + "defaultBackgroundImage", + String(this._backgroundPath) + ); + } - _setBackgroundImages() { - this._backgroundsList.innerHTML = "" - for (let i = 0; i < this._backgroundImages.length; i++) { - const path = this._backgroundImages[i] - let button = this._createImage(path) - button.addEventListener("click", () => { - this._backgroundPath = path - this._updateBackgroundImages() - }) - this._backgroundsList.appendChild(button) - } - } + _setBackgroundImages() { + this._backgroundsList.innerHTML = ""; + for (let i = 0; i < this._backgroundImages.length; i++) { + const path = this._backgroundImages[i]; + let button = this._createImage(path); + button.addEventListener("click", () => { + this._backgroundPath = path; + this._updateBackgroundImages(); + }); + this._backgroundsList.appendChild(button); + } + } - _getImages(path) { - this._backgroundImagesDir = greeter_config.branding.background_images_dir || '/usr/share/backgrounds' - return new Promise( (resolve) => { - theme_utils.dirlist(path ? path : this._backgroundImagesDir, true, result => { - resolve(result) - }) - }) - } + _getImages(path) { + this._backgroundImagesDir = + greeter_config.branding.background_images_dir || "/usr/share/backgrounds"; + return new Promise((resolve) => { + theme_utils.dirlist( + path ? path : this._backgroundImagesDir, + true, + (result) => { + resolve(result); + } + ); + }); + } - async _init() { - await this._createBackgroundArray() - this._updateOnStartup() + async _init() { + await this._createBackgroundArray(); + this._updateOnStartup(); - return new Promise( resolve => resolve() ) - } + return new Promise((resolve) => resolve()); + } } diff --git a/themes/dracula/js/battery.js b/themes/dracula/js/battery.js index 792c64f..f810d20 100644 --- a/themes/dracula/js/battery.js +++ b/themes/dracula/js/battery.js @@ -1,38 +1,40 @@ class Battery { constructor() { - this._battery = document.querySelector("#battery-label") - this._info = {} - this._init() + this._battery = document.querySelector("#battery-label"); + this._info = {}; + this._init(); } _updateData() { - this._info = lightdm.batteryData - var level = this._info.level - var state = this._info.state - var ac = this._info.ac_status - var icon = 0 - var charging = "" - var blevel = Math.floor(level / 10) * 10 - icon = `-${blevel}` - charging = ac == 1 ? "-charging" : "" + this._info = lightdm.batteryData; + var level = this._info.level; + var state = this._info.state; + var ac = this._info.ac_status; + var icon = 0; + var charging = ""; + var blevel = Math.floor(level / 10) * 10; + icon = `-${blevel}`; + charging = ac == 1 ? "-charging" : ""; - if (blevel < 10) icon = "-outline" - if (level == 100 && ac == 0) {icon = ""} + if (blevel < 10) icon = "-outline"; + if (level == 100 && ac == 0) { + icon = ""; + } if (level >= 0) { - this._battery.style.visibility = "visible" - this._battery.innerHTML = ` ${level}%` + this._battery.style.visibility = "visible"; + this._battery.innerHTML = ` ${level}%`; } else { - this._battery.innerHTML = "" - this._battery.style.visibility = "hidden" + this._battery.innerHTML = ""; + this._battery.style.visibility = "hidden"; } } _setTimer() { - if (!lightdm.can_access_battery) return - this._updateData() + if (!lightdm.can_access_battery) return; + this._updateData(); } _init() { - this._setTimer() + this._setTimer(); } } diff --git a/themes/dracula/js/brightness.js b/themes/dracula/js/brightness.js index c88aedd..a2541b6 100644 --- a/themes/dracula/js/brightness.js +++ b/themes/dracula/js/brightness.js @@ -1,28 +1,28 @@ class Brightness { constructor() { - this._brightness = document.querySelector("#brightness-label") - this._level = 0 - this._init() + this._brightness = document.querySelector("#brightness-label"); + this._level = 0; + this._init(); } _updateData() { - this._level = lightdm.brightness + this._level = lightdm.brightness; if (this._level >= 0) { - this._brightness.style.visibility = "visible" - var icon = this._level > 50 ? 7: this._level > 10 ? 6 : 5 - this._brightness.innerHTML = ` ${this._level}%` + this._brightness.style.visibility = "visible"; + var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5; + this._brightness.innerHTML = ` ${this._level}%`; } else { - this._brightness.innerHTML = "" - this._brightness.style.visibility = "hidden" + this._brightness.innerHTML = ""; + this._brightness.style.visibility = "hidden"; } } _setTimer() { - if (!lightdm.can_access_brightness) return - this._updateData() + if (!lightdm.can_access_brightness) return; + this._updateData(); } _init() { - this._setTimer() + this._setTimer(); } } diff --git a/themes/dracula/js/debug.js b/themes/dracula/js/debug.js index 49e047c..cebb445 100644 --- a/themes/dracula/js/debug.js +++ b/themes/dracula/js/debug.js @@ -1,34 +1,36 @@ class Debug { constructor() { - this._debugPass = "tepes" - this._init() + this._debugPass = "tepes"; + this._init(); } _init() { - console.log("DEBUG") + console.log("DEBUG"); - if (!window.greeter_config) { - window.greeter_config = { - greeter: { - debug_mode: true, - }, - branding: { - background_images_dir: "", - } - } - } + if (!window.greeter_config) { + window.greeter_config = { + greeter: { + debug_mode: true, + }, + branding: { + background_images_dir: "", + }, + }; + } - if (!window.theme_utils) { - window.theme_utils = {} - window.theme_utils.dirlist = function(path, mode, callback) { - var result = [] - callback(result) - }; - window.theme_utils.bind_this = function(context) {return context} - } + if (!window.theme_utils) { + window.theme_utils = {}; + window.theme_utils.dirlist = function (path, mode, callback) { + var result = []; + callback(result); + }; + window.theme_utils.bind_this = function (context) { + return context; + }; + } if (!window.lightdm) { - window.lightdm = {} + window.lightdm = {}; } var local_lightdm = { @@ -45,111 +47,110 @@ class Debug { sessions: [ { name: "awesome wm", - key: "awesome" + key: "awesome", }, { name: "Ubuntu", - key: "ubuntu" + key: "ubuntu", }, { name: "i3wm", - key: "i3" + key: "i3", }, { name: "bspwm", - key: "bspwm" - } + key: "bspwm", + }, ], users: [ { display_name: "Vlad Tepes", username: "dracula", - image: "" + image: "", }, { display_name: "Trevor Belmont", username: "treffy", - image: "" + image: "", }, { display_name: "Sypha Belnades", username: "speaker", - image: "" - } + image: "", + }, ], languages: [ { - name: 'American English', - code: 'en_US.utf8' - } + name: "American English", + code: "en_US.utf8", + }, ], - language: 'American English', - authenticate: username => { - console.log(`Starting authentication with user: "${username}"`) + language: "American English", + authenticate: (username) => { + console.log(`Starting authentication with user: "${username}"`); }, cancel_authentication: () => { - console.log(`Authentication cancelled`) + console.log(`Authentication cancelled`); }, respond: async (password) => { - console.log(`Password provided: "${password}"`) + console.log(`Password provided: "${password}"`); if (password == this._debugPass) { - lightdm.is_authenticated = true + lightdm.is_authenticated = true; } else { - await wait(2000) + await wait(2000); } - authentication_done() + authentication_done(); }, - start_session: session => { - alert(`Logged with session: "${session}"`) - location.reload() + start_session: (session) => { + alert(`Logged with session: "${session}"`); + location.reload(); }, shutdown: () => { - console.log("System is shutting down...") - setTimeout(() => location.reload(), 2000) + console.log("System is shutting down..."); + setTimeout(() => location.reload(), 2000); }, restart: () => { - console.log("System is rebooting...") - setTimeout(() => location.reload(), 2000) + console.log("System is rebooting..."); + setTimeout(() => location.reload(), 2000); }, hibernate: () => { - console.log("System is hibernating") - setTimeout(() => location.reload(), 2000) + console.log("System is hibernating"); + setTimeout(() => location.reload(), 2000); }, suspend: () => { - console.log("System is suspending") - setTimeout(() => location.reload(), 2000) + console.log("System is suspending"); + setTimeout(() => location.reload(), 2000); }, batteryData: { name: "Battery 0", level: 85, - state: "Discharging" + state: "Discharging", }, batteryUpdate: () => { - console.log("Battery updated") + console.log("Battery updated"); }, brightness: 50, brightnessSet: (quantity) => { - lightdm.brightness = quantity + lightdm.brightness = quantity; }, brightnessIncrease: (quantity) => { - lightdm.brightness += quantity - if (lightdm.brightness > 100) lightdm.brightness = 100 + lightdm.brightness += quantity; + if (lightdm.brightness > 100) lightdm.brightness = 100; }, brightnessDecrease: (quantity) => { - lightdm.brightness -= quantity - if (lightdm.brightness < 0) lightdm.brightness = 0 - } - } + lightdm.brightness -= quantity; + if (lightdm.brightness < 0) lightdm.brightness = 0; + }, + }; if (lightdm.mock == undefined) { - window.lightdm = {} - Object.assign(window.lightdm, local_lightdm) + window.lightdm = {}; + Object.assign(window.lightdm, local_lightdm); } else { Object.keys(local_lightdm).forEach((key) => { - var realKey = `_${key}` - lightdm[realKey] = local_lightdm[key] - }) + var realKey = `_${key}`; + lightdm[realKey] = local_lightdm[key]; + }); } - } } diff --git a/themes/dracula/js/index.js b/themes/dracula/js/index.js index 7139ee7..7544e32 100644 --- a/themes/dracula/js/index.js +++ b/themes/dracula/js/index.js @@ -1,60 +1,56 @@ - function getArrayForm(inputs) { - if (!inputs) return false - var data = {} - inputs.forEach((x) => { - data[x.name] = x.value - }) - return data + if (!inputs) return false; + var data = {}; + inputs.forEach((x) => { + data[x.name] = x.value; + }); + return data; } async function wait(ms) { - return new Promise( resolve => { + return new Promise((resolve) => { setTimeout(() => { - resolve() - }, ms) - }) + resolve(); + }, ms); + }); } - async function initGreeter() { - if (greeter_config.greeter.debug_mode) { //debug = new Debug() } - lightdm.authentication_complete?.connect(() => authentication_done()) - - lightdm.brightness_update?.connect(() => brightness._updateData()) + lightdm.authentication_complete?.connect(() => authentication_done()); - lightdm.battery_update?.connect(() => battery._updateData()) + lightdm.brightness_update?.connect(() => brightness._updateData()); - accounts = new Accounts() + lightdm.battery_update?.connect(() => battery._updateData()); - sessions = new Sessions() + accounts = new Accounts(); - authenticate = new Authenticate() + sessions = new Sessions(); - sidebar = new Sidebar() + authenticate = new Authenticate(); - time_date = new TimeDate() + sidebar = new Sidebar(); - layouts = new Layouts() + time_date = new TimeDate(); - backgrounds = new Backgrounds() - backgrounds._init() + layouts = new Layouts(); - power = new Power() + backgrounds = new Backgrounds(); + backgrounds._init(); - battery = new Battery() + power = new Power(); - brightness = new Brightness() + battery = new Battery(); + brightness = new Brightness(); } if (window._ready_event === undefined) { - _ready_event = new Event("GreeterReady") - window.dispatchEvent(_ready_event) + _ready_event = new Event("GreeterReady"); + window.dispatchEvent(_ready_event); } -window.addEventListener("GreeterReady", initGreeter) +window.addEventListener("GreeterReady", initGreeter); diff --git a/themes/dracula/js/layouts.js b/themes/dracula/js/layouts.js index cbd1133..9836ed8 100644 --- a/themes/dracula/js/layouts.js +++ b/themes/dracula/js/layouts.js @@ -1,77 +1,85 @@ class Layouts { - constructor() { - this._layoutList = document.querySelector("#layouts-list") - this._dropdown = document.querySelector("#layouts-dropdown") - this._button = document.querySelector("#layouts-button") - this._layouts = [] + constructor() { + this._layoutList = document.querySelector("#layouts-list"); + this._dropdown = document.querySelector("#layouts-dropdown"); + this._button = document.querySelector("#layouts-button"); + this._layouts = []; - this.layout = {} + this.layout = {}; - this._init() - } + this._init(); + } - _setDefault() { - let name = this.layout.name - let description = this.layout.description - let short = this.layout.short_description - this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "") - //this._button.name = description - } + _setDefault() { + let name = this.layout.name; + let description = this.layout.description; + let short = this.layout.short_description; + this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : ""); + //this._button.name = description + } - _setLayoutList() { - let dropdown = this._dropdown - dropdown.innerHTML = "" - for (let i = 0; i < this._layouts.length; i++) { - let name = this._layouts[i].name - let description = this._layouts[i].description - let short = this._layouts[i].short_description - let li = document.createElement("li") - let button = document.createElement("button") - button.innerHTML = name + (short ? ` (${short})` : "") - button.name = description - button.addEventListener("click", () => { - this.layout = this._layouts[i] - this._setDefault() - lightdm.layout = this.layout - }) - li.appendChild(button) - dropdown.appendChild(li) - } - } + _setLayoutList() { + let dropdown = this._dropdown; + dropdown.innerHTML = ""; + for (let i = 0; i < this._layouts.length; i++) { + let name = this._layouts[i].name; + let description = this._layouts[i].description; + let short = this._layouts[i].short_description; + let li = document.createElement("li"); + let button = document.createElement("button"); + button.innerHTML = name + (short ? ` (${short})` : ""); + button.name = description; + button.addEventListener("click", () => { + this.layout = this._layouts[i]; + this._setDefault(); + lightdm.layout = this.layout; + }); + li.appendChild(button); + dropdown.appendChild(li); + } + } - _setKeydown() { - let dropdown = this._dropdown - dropdown.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - dropdown.classList.add("hide") - this._button.focus() - } - }) - } + _setKeydown() { + let dropdown = this._dropdown; + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide"); + this._button.focus(); + } + }); + } - _setButton() { - let dropdown = this._dropdown - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._button || ev.target.parentElement == this._button) { - dropdown.classList.toggle("hide") - } else - if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) { - dropdown.classList.add("hide") - } - }) - } + _setButton() { + let dropdown = this._dropdown; + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._button || + ev.target.parentElement == this._button + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != dropdown && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if ( + !dropdown.contains(document.activeElement) && + document.activeElement != this._button + ) { + dropdown.classList.add("hide"); + } + }); + } - _init() { - this.layout = lightdm.layout - this._layouts = greeter_config.layouts - this._setDefault() - this._setLayoutList() - this._setButton() - this._setKeydown() - } + _init() { + this.layout = lightdm.layout; + this._layouts = greeter_config.layouts; + this._setDefault(); + this._setLayoutList(); + this._setButton(); + this._setKeydown(); + } } diff --git a/themes/dracula/js/power.js b/themes/dracula/js/power.js index 9cc5413..e1b9309 100644 --- a/themes/dracula/js/power.js +++ b/themes/dracula/js/power.js @@ -1,89 +1,89 @@ class Power { constructor() { - this._shutdown = document.querySelector("#shutdown-button") - this._restart = document.querySelector("#restart-button") - this._hibernate = document.querySelector("#hibernate-button") - this._suspend = document.querySelector("#suspend-button") - this._cover = document.querySelector("#cover") - this._covermsg = document.querySelector("#cover > #message") - this._init() + this._shutdown = document.querySelector("#shutdown-button"); + this._restart = document.querySelector("#restart-button"); + this._hibernate = document.querySelector("#hibernate-button"); + this._suspend = document.querySelector("#suspend-button"); + this._cover = document.querySelector("#cover"); + this._covermsg = document.querySelector("#cover > #message"); + this._init(); } _show_message(text) { - this._covermsg.innerHTML = text - this._cover.classList.remove("hide") + this._covermsg.innerHTML = text; + this._cover.classList.remove("hide"); wait(500).then(() => { - this._cover.focus() - }) + this._cover.focus(); + }); } async _do_shutdown() { - this._show_message("Shutting down") - await wait(1000) - lightdm.shutdown() + this._show_message("Shutting down"); + await wait(1000); + lightdm.shutdown(); } async _do_restart() { - this._show_message("Restarting") - await wait(1000) - lightdm.restart() + this._show_message("Restarting"); + await wait(1000); + lightdm.restart(); } async _do_hibernate() { - this._show_message("Hibernating") - await wait(1000) - lightdm.hibernate() + this._show_message("Hibernating"); + await wait(1000); + lightdm.hibernate(); } async _do_suspend() { - this._show_message("Suspending") - await wait(1000) - lightdm.suspend() + this._show_message("Suspending"); + await wait(1000); + lightdm.suspend(); } _setShutdown() { - if (!lightdm.can_shutdown) return + if (!lightdm.can_shutdown) return; this._shutdown.addEventListener("click", () => { - this._do_shutdown() - }) - this._shutdown.classList.remove("hide") + this._do_shutdown(); + }); + this._shutdown.classList.remove("hide"); } _setRestart() { - if (!lightdm.can_restart) return + if (!lightdm.can_restart) return; this._restart.addEventListener("click", () => { - this._do_restart() - }) - this._restart.classList.remove("hide") + this._do_restart(); + }); + this._restart.classList.remove("hide"); } _setHibernate() { - if (!lightdm.can_hibernate) return + if (!lightdm.can_hibernate) return; this._hibernate.addEventListener("click", () => { - this._do_hibernate() - }) - this._hibernate.classList.remove("hide") + this._do_hibernate(); + }); + this._hibernate.classList.remove("hide"); } _setSuspend() { - if (!lightdm.can_suspend) return + if (!lightdm.can_suspend) return; this._suspend.addEventListener("click", () => { - this._do_suspend() - }) - this._suspend.classList.remove("hide") + this._do_suspend(); + }); + this._suspend.classList.remove("hide"); } _setCover() { this._cover.addEventListener("click", () => { - this._cover.classList.add("hide") - }) + this._cover.classList.add("hide"); + }); this._cover.addEventListener("keydown", () => { - this._cover.classList.add("hide") - }) + this._cover.classList.add("hide"); + }); } _setButtons() { - this._setShutdown() - this._setRestart() - this._setHibernate() - this._setSuspend() - this._setCover() + this._setShutdown(); + this._setRestart(); + this._setHibernate(); + this._setSuspend(); + this._setCover(); } _init() { - this._setButtons() + this._setButtons(); } } diff --git a/themes/dracula/js/sessions.js b/themes/dracula/js/sessions.js index 9ae0d8a..b04e6b3 100644 --- a/themes/dracula/js/sessions.js +++ b/themes/dracula/js/sessions.js @@ -1,91 +1,104 @@ class Sessions { - constructor() { - this._localStorage = window.localStorage - this._sessionsButton = document.querySelector("#sessions-button") - this._sessionList = document.querySelector("#sessions-dropdown") - this._sessionLabel = document.querySelector("#sessions-button > .text") - this._defaultSession = null - this._sessionsObject = null - this._init() - } + constructor() { + this._localStorage = window.localStorage; + this._sessionsButton = document.querySelector("#sessions-button"); + this._sessionList = document.querySelector("#sessions-dropdown"); + this._sessionLabel = document.querySelector("#sessions-button > .text"); + this._defaultSession = null; + this._sessionsObject = null; + this._init(); + } getDefaultSession() { - return this._defaultSession.key + return this._defaultSession.key; } - _setSessionDefault() { - this._sessionLabel.innerText = this._defaultSession.name - } + _setSessionDefault() { + this._sessionLabel.innerText = this._defaultSession.name; + } - _updateOnStartup() { - var key = this._localStorage.getItem("defaultSession") || this._sessionsObject[0].key || lightdm.default_session + _updateOnStartup() { + var key = + this._localStorage.getItem("defaultSession") || + this._sessionsObject[0].key || + lightdm.default_session; - var session = this._sessionsObject.find((val) => {return val.key === key}) - if (session === undefined) { - // This should never happen - this._defaultSession = {key: "awesome", name: "Awesome WM"} - } else { - this._defaultSession = session - } - this._setSessionDefault() - } + var session = this._sessionsObject.find((val) => { + return val.key === key; + }); + if (session === undefined) { + // This should never happen + this._defaultSession = { key: "awesome", name: "Awesome WM" }; + } else { + this._defaultSession = session; + } + this._setSessionDefault(); + } - _updateDefaults(sessionObj) { - if (!sessionObj) return - this._defaultSession = sessionObj - this._localStorage.setItem("defaultSession", this._defaultSession.key) - } + _updateDefaults(sessionObj) { + if (!sessionObj) return; + this._defaultSession = sessionObj; + this._localStorage.setItem("defaultSession", this._defaultSession.key); + } - _setSessionList() { - var dropdown = this._sessionList - dropdown.innerHTML = "" - for (let i = 0; i < this._sessionsObject.length; i++) { - var name = this._sessionsObject[i].name - var li = document.createElement("li") - var button = document.createElement("button") - button.innerText = name - button.addEventListener("click", () => { - this._updateDefaults(this._sessionsObject[i]) - this._setSessionDefault() - }) + _setSessionList() { + var dropdown = this._sessionList; + dropdown.innerHTML = ""; + for (let i = 0; i < this._sessionsObject.length; i++) { + var name = this._sessionsObject[i].name; + var li = document.createElement("li"); + var button = document.createElement("button"); + button.innerText = name; + button.addEventListener("click", () => { + this._updateDefaults(this._sessionsObject[i]); + this._setSessionDefault(); + }); - li.appendChild(button) - dropdown.appendChild(li) - } - } + li.appendChild(button); + dropdown.appendChild(li); + } + } - _setKeydown() { - var dropdown = this._sessionList - dropdown.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - sessions_dropdown.classList.add("hide") - this._sessionsButton.focus() - } - }) - } + _setKeydown() { + var dropdown = this._sessionList; + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + sessions_dropdown.classList.add("hide"); + this._sessionsButton.focus(); + } + }); + } - _setButton() { - var dropdown = this._sessionList - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) { - dropdown.classList.toggle("hide") - } else - if (ev.target != this._sessionList && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) { - dropdown.classList.add("hide") - } - }) - } + _setButton() { + var dropdown = this._sessionList; + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._sessionsButton || + ev.target.parentElement == this._sessionsButton + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != this._sessionList && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if ( + !dropdown.contains(document.activeElement) && + document.activeElement != this._sessionsButton + ) { + dropdown.classList.add("hide"); + } + }); + } - _init() { - this._sessionsObject = lightdm.sessions - this._updateOnStartup() - this._setSessionList() - this._setButton() - this._setKeydown() - } + _init() { + this._sessionsObject = lightdm.sessions; + this._updateOnStartup(); + this._setSessionList(); + this._setButton(); + this._setKeydown(); + } } diff --git a/themes/dracula/js/sidebar.js b/themes/dracula/js/sidebar.js index 5bc95a3..593445d 100644 --- a/themes/dracula/js/sidebar.js +++ b/themes/dracula/js/sidebar.js @@ -1,65 +1,75 @@ class Sidebar { - constructor() { - this._sidebar = document.querySelector("#sidebar") - this._sidebarButton = document.querySelector("#panel-button") - this._closeButton = document.querySelector("#close-panel-button") - this._visible = false - this._init() - } + constructor() { + this._sidebar = document.querySelector("#sidebar"); + this._sidebarButton = document.querySelector("#panel-button"); + this._closeButton = document.querySelector("#close-panel-button"); + this._visible = false; + this._init(); + } - showSidebar() { - this._sidebar.classList.remove("hide") - wait(100).then(() => {this._closeButton.focus()}) - this._visible = true - } + showSidebar() { + this._sidebar.classList.remove("hide"); + wait(100).then(() => { + this._closeButton.focus(); + }); + this._visible = true; + } - hideSidebar() { - this._sidebar.classList.add("hide") - this._sidebarButton.focus() - this._visible = false - } + hideSidebar() { + this._sidebar.classList.add("hide"); + this._sidebarButton.focus(); + this._visible = false; + } - toggleSidebar() { - if (this._visible) { - this.hideSidebar() - } else { - this.showSidebar() - } - } + toggleSidebar() { + if (this._visible) { + this.hideSidebar(); + } else { + this.showSidebar(); + } + } - _setKeydown() { - this._sidebar.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - this.hideSidebar() - } - }) - } + _setKeydown() { + this._sidebar.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + this.hideSidebar(); + } + }); + } - _setSidebar() { - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._sidebarButton || ev.target.parentElement == this._sidebarButton) { - this.toggleSidebar() - } else - if (ev.target != this._sidebar && ev.target.closest(".panel") == null) { - this._sidebar.classList.add("hide") - this._visible = false - } + _setSidebar() { + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._sidebarButton || + ev.target.parentElement == this._sidebarButton + ) { + this.toggleSidebar(); + } else if ( + ev.target != this._sidebar && + ev.target.closest(".panel") == null + ) { + this._sidebar.classList.add("hide"); + this._visible = false; + } - if (ev.target == this._closeButton || ev.target.parentElement == this._closeButton) { - this.hideSidebar() - } - }) + if ( + ev.target == this._closeButton || + ev.target.parentElement == this._closeButton + ) { + this.hideSidebar(); + } + }); - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!this._sidebar.contains(document.activeElement)) { - this._sidebar.classList.add("hide") - this._visible = false - } - }) - } + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if (!this._sidebar.contains(document.activeElement)) { + this._sidebar.classList.add("hide"); + this._visible = false; + } + }); + } - _init() { - this._setSidebar() - this._setKeydown() - } + _init() { + this._setSidebar(); + this._setKeydown(); + } } diff --git a/themes/dracula/js/time-date.js b/themes/dracula/js/time-date.js index 415a2f4..73937b9 100644 --- a/themes/dracula/js/time-date.js +++ b/themes/dracula/js/time-date.js @@ -1,56 +1,56 @@ class TimeDate { - constructor() { - this._timeDateButton = document.querySelector("#time-date") - this._timeLabel = document.querySelector("#time-date #time-label") - this._dateLabel = document.querySelector("#time-date #date-label") - this._passForm = document.querySelector("#pass-form") - this._init() - } + constructor() { + this._timeDateButton = document.querySelector("#time-date"); + this._timeLabel = document.querySelector("#time-date #time-label"); + this._dateLabel = document.querySelector("#time-date #date-label"); + this._passForm = document.querySelector("#pass-form"); + this._init(); + } - _updateTimeDate() { - let date = theme_utils.get_current_localized_date() - let time = theme_utils.get_current_localized_time() + _updateTimeDate() { + let date = theme_utils.get_current_localized_date(); + let time = theme_utils.get_current_localized_time(); - this._dateLabel.innerText = date - this._timeLabel.innerText = time - } + this._dateLabel.innerText = date; + this._timeLabel.innerText = time; + } - _setTimer() { - this._updateTimeDate() - setInterval(() => { - this._updateTimeDate() - }, 1000) - } + _setTimer() { + this._updateTimeDate(); + setInterval(() => { + this._updateTimeDate(); + }, 1000); + } - _setButtons() { - this._timeDateButton.addEventListener("click", (ev) => { - this.toggleTimeDate() - }) - this._passForm.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - this.toggleTimeDate() - } - }) - } + _setButtons() { + this._timeDateButton.addEventListener("click", (ev) => { + this.toggleTimeDate(); + }); + this._passForm.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + this.toggleTimeDate(); + } + }); + } - async toggleTimeDate() { - this._timeDateButton.blur() - this._passForm.blur() - if (this._timeDateButton.classList.contains("hide")) { - this._passForm.classList.add("hide") - await wait(300) - this._timeDateButton.classList.remove("hide") - await wait(100) - this._timeDateButton.focus() - } else { - this._timeDateButton.classList.add("hide") - await wait(300) - this._passForm.classList.remove("hide") - } - } - - _init() { - this._setTimer() - this._setButtons() - } + async toggleTimeDate() { + this._timeDateButton.blur(); + this._passForm.blur(); + if (this._timeDateButton.classList.contains("hide")) { + this._passForm.classList.add("hide"); + await wait(300); + this._timeDateButton.classList.remove("hide"); + await wait(100); + this._timeDateButton.focus(); + } else { + this._timeDateButton.classList.add("hide"); + await wait(300); + this._passForm.classList.remove("hide"); + } + } + + _init() { + this._setTimer(); + this._setButtons(); + } } diff --git a/themes/gruvbox/README.md b/themes/gruvbox/README.md index 8e0c2c2..16f2f26 100644 --- a/themes/gruvbox/README.md +++ b/themes/gruvbox/README.md @@ -1,6 +1,7 @@ # Web Greeter gruvbox theme ## Overview + This is a web-greeter theme with gruvbox color scheme, included with [web-greeter][web-greeter]. Based on [glorious-theme][glorious] by manilarome. @@ -20,9 +21,11 @@ Based on [glorious-theme][glorious] by manilarome. ## Installation + This theme is shipped with `web-greeter`. To use it, set the `theme` as `gruvbox` inside `/etc/lightdm/web-greeter.yml` ## TODO + - Background selector - Translations support diff --git a/themes/gruvbox/css/style.css b/themes/gruvbox/css/style.css index 37a9411..3bb1a70 100644 --- a/themes/gruvbox/css/style.css +++ b/themes/gruvbox/css/style.css @@ -49,7 +49,7 @@ @media screen and (min-width: 3000px) and (min-height: 1200px) { #screen { - zoom: 2.0; + zoom: 2; } } @@ -72,7 +72,7 @@ html > * { body { display: flex; - min-height: 100vh; + min-height: 100vh; margin: 0; transition: var(--animation-duration); } @@ -115,7 +115,7 @@ button { position: absolute; background-color: var(--bg); - background-image: url("../assets/bubbles.svg") + background-image: url("../assets/bubbles.svg"); } #cover { @@ -162,8 +162,9 @@ button { transition: var(--animation-duration); } -#login-form:focus-within, #login-form:hover { - filter: drop-shadow(2px 6px 10px rgba(0,0,0,0.8)); +#login-form:focus-within, +#login-form:hover { + filter: drop-shadow(2px 6px 10px rgba(0, 0, 0, 0.8)); } #login-form-box { @@ -189,10 +190,32 @@ input { font-family: inherit; font-size: inherit; } -input:focus, input:focus-visible { +input:focus, +input:focus-visible { border: 0; outline: auto var(--fg); } +#input { + position: relative; +} +#input #pass-eye { + position: absolute; + right: 15px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + height: fit-content; + background-color: var(--bg1); +} +#input #pass-eye:hover, +#input #pass-eye:focus { + background-color: var(--bg2); +} +input::-ms-reveal, +input::-ms-clear { + display: none; +} :focus { outline: auto var(--fg) !important; @@ -254,7 +277,8 @@ input:focus, input:focus-visible { #submit-button { background: var(--aqua); } -#submit-button:hover, #submit-button:focus { +#submit-button:hover, +#submit-button:focus { background: var(--light_aqua); } @@ -302,7 +326,8 @@ input:focus, input:focus-visible { display: none; } -.label-bar > *:hover, .label-bar > *:focus-within { +.label-bar > *:hover, +.label-bar > *:focus-within { background: #3c3836aa; backdrop-filter: blur(10px); } @@ -320,7 +345,6 @@ input:focus, input:focus-visible { margin: 2px; } - #system-status { top: 0; right: 0; @@ -335,12 +359,12 @@ input:focus, input:focus-visible { font-size: 2em; cursor: pointer; } -#system-power > *:hover, #system-power > *:focus { +#system-power > *:hover, +#system-power > *:focus { background: #3c3836aa; backdrop-filter: blur(10px); } - #sessions-list { position: absolute; left: 0; @@ -389,7 +413,8 @@ input:focus, input:focus-visible { padding: 0.8em; width: -webkit-fill-available; } -.dropdown button:hover, .dropdown button:focus { +.dropdown button:hover, +.dropdown button:focus { background: var(--bg4); } .dropdown.hide { @@ -406,13 +431,16 @@ li { display: block; } -#users-button:hover, #users-button:focus { +#users-button:hover, +#users-button:focus { background: var(--light_purple); } -#sessions-button:hover, #sessions-button:focus { +#sessions-button:hover, +#sessions-button:focus { background: var(--light_blue); } -.button:hover span::before, .button:focus span::before { +.button:hover span::before, +.button:focus span::before { transform: rotate(180deg); } .button span::before { @@ -431,5 +459,5 @@ li { background: var(--blue); } ::-webkit-scrollbar-thumb:hover { - background: var(--light_blue) + background: var(--light_blue); } diff --git a/themes/gruvbox/index.html b/themes/gruvbox/index.html index 9b47c83..74ff739 100644 --- a/themes/gruvbox/index.html +++ b/themes/gruvbox/index.html @@ -1,116 +1,128 @@ - - - + + + - - + + - + - Gruvbox theme - - -
- -
-
-
-
-
- + Gruvbox theme + + +
+ +
+
+
+
+
+ +
+ +
+
+ User
- -
-
- User -
-
-
-
- -
-
- -
-
-
+
+
+
+ + +
+
+ +
+
+
-
- - +
+ + +
+
+ + +
-
- -
+
+
Lock
+
+ 20:00 + 12-07-21 +
+ +
+
+ +
+
+
-
-
-
-
- Lock -
-
- 20:00 - 12-07-21 -
- -
-
- + + + -
- -
-
-
-
- - - -
-
- - - - - - - - - - - + + + + + + + + + + + diff --git a/themes/gruvbox/js/accounts.js b/themes/gruvbox/js/accounts.js index 15698fc..02b8960 100644 --- a/themes/gruvbox/js/accounts.js +++ b/themes/gruvbox/js/accounts.js @@ -1,112 +1,131 @@ class Accounts { constructor() { - this._localStorage = window.localStorage - this._userImage = document.querySelector("#user-image") - this._userLabel = document.querySelector("#user-label") - this._accountsList = document.querySelector("#users-list") - this._accountsButton = document.querySelector("#users-button") - this._defaultUser = null - this._usersObject = null - this._init() + this._localStorage = window.localStorage; + this._userImage = document.querySelector("#user-image"); + this._userLabel = document.querySelector("#user-label"); + this._accountsList = document.querySelector("#users-list"); + this._accountsButton = document.querySelector("#users-button"); + this._defaultUser = null; + this._usersObject = null; + this._init(); } getDefaultUserName() { - return this._defaultUser.username + return this._defaultUser.username; } _setAccountDefault() { - var img = this._userImage.querySelector("img") - img.src = this._defaultUser.image - img.onerror = function() { - img.src = "" - } - this._userLabel.innerHTML = `${this._defaultUser.display_name}` + var img = this._userImage.querySelector("img"); + img.src = this._defaultUser.image; + img.onerror = function () { + img.src = ""; + }; + this._userLabel.innerHTML = `${this._defaultUser.display_name}`; } _updateOnStartup() { - var username = this._localStorage.getItem('defaultUser') || this._usersObject[0].username - var display_name = this._localStorage.getItem('defaultUserDisplayName') || this._usersObject[0].display_name - var image = this._localStorage.getItem("defaultUserProfileImage") || this._usersObject[0].image + var username = + this._localStorage.getItem("defaultUser") || + this._usersObject[0].username; + var display_name = + this._localStorage.getItem("defaultUserDisplayName") || + this._usersObject[0].display_name; + var image = + this._localStorage.getItem("defaultUserProfileImage") || + this._usersObject[0].image; this._defaultUser = { username, display_name, image, - } - this._setAccountDefault() + }; + this._setAccountDefault(); } _setGuestAccount() { if (lightdm.has_guest_account) { - this._guestAccount = `guest-account-${Math.floor(Math.random() * 1000)}` + this._guestAccount = `guest-account-${Math.floor(Math.random() * 1000)}`; this._usersObject.push({ username: this._guestAccount, display_name: "Guest", - image: "" - }) + image: "", + }); } } _setAccountList() { - var dropdown = this._accountsList.querySelector(".dropdown") - dropdown.innerHTML = "" + var dropdown = this._accountsList.querySelector(".dropdown"); + dropdown.innerHTML = ""; for (let i = 0; i < this._usersObject.length; i++) { - var name = this._usersObject[i].display_name - var li = document.createElement("li") - var button = document.createElement("button") - button.innerHTML = name + var name = this._usersObject[i].display_name; + var li = document.createElement("li"); + var button = document.createElement("button"); + button.innerHTML = name; button.addEventListener("click", () => { - this._updateDefaults(this._usersObject[i]) - this._setAccountDefault() - authenticate.startAuthentication() - }) + this._updateDefaults(this._usersObject[i]); + this._setAccountDefault(); + authenticate.startAuthentication(); + }); - li.appendChild(button) - dropdown.appendChild(li) + li.appendChild(button); + dropdown.appendChild(li); } } - _setKeydown() { - var dropdown = this._accountsList.querySelector(".dropdown") - dropdown.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - dropdown.classList.add("hide") - this._accountsButton.focus() - } - }) - } + _setKeydown() { + var dropdown = this._accountsList.querySelector(".dropdown"); + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide"); + this._accountsButton.focus(); + } + }); + } _setButton() { - var dropdown = this._accountsList.querySelector(".dropdown") - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) { - dropdown.classList.toggle("hide") - } else - if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!dropdown.contains(document.activeElement) && document.activeElement != this._accountsButton) { - dropdown.classList.add("hide") - } - }) + var dropdown = this._accountsList.querySelector(".dropdown"); + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._accountsButton || + ev.target.parentElement == this._accountsButton + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != this._accountsList && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if ( + !dropdown.contains(document.activeElement) && + document.activeElement != this._accountsButton + ) { + dropdown.classList.add("hide"); + } + }); } _updateDefaults(userObject) { - if (!userObject) return - this._defaultUser = userObject + if (!userObject) return; + this._defaultUser = userObject; - this._localStorage.setItem("defaultUser", this._defaultUser.username) - this._localStorage.setItem("defaultUserDisplayName", this._defaultUser.display_name) - this._localStorage.setItem("defaultUserProfileImage", this._defaultUser.image) + this._localStorage.setItem("defaultUser", this._defaultUser.username); + this._localStorage.setItem( + "defaultUserDisplayName", + this._defaultUser.display_name + ); + this._localStorage.setItem( + "defaultUserProfileImage", + this._defaultUser.image + ); } _init() { - this._usersObject = lightdm.users - this._updateOnStartup() - this._setAccountList() - this._setButton() - this._setKeydown() + this._usersObject = lightdm.users; + this._updateOnStartup(); + this._setAccountList(); + this._setButton(); + this._setKeydown(); } - } diff --git a/themes/gruvbox/js/authenticate.js b/themes/gruvbox/js/authenticate.js index e8445c7..6d22398 100644 --- a/themes/gruvbox/js/authenticate.js +++ b/themes/gruvbox/js/authenticate.js @@ -1,80 +1,91 @@ class Authenticate { constructor() { - this._input = document.querySelector("#input-password") - this._form = document.querySelector("#pass-form > form") - this._password = "" - this._init() + this._input = document.querySelector("#input-password"); + this._form = document.querySelector("#pass-form > form"); + this._input_eye = document.querySelector("#pass-eye"); + this._password = ""; + this._init(); } _setForm() { this._form.addEventListener("submit", (e) => { - e.preventDefault() - var inputs = this._form.querySelectorAll('input') - var data = getArrayForm(inputs) - if (!data) return false - this._password = data.password - this._respond() - }) + e.preventDefault(); + var inputs = this._form.querySelectorAll("input"); + var data = getArrayForm(inputs); + if (!data) return false; + this._password = data.password; + this._respond(); + }); } _setAuthentication_done() { window.authentication_done = () => { if (lightdm.is_authenticated) { - this._authentication_done() + this._authentication_done(); } else { - this._authentication_failed() + this._authentication_failed(); } - } + }; + } + _setPasswordEye() { + this._input_eye.addEventListener("click", () => { + if (this._input.type === "password") { + this._input.type = "text"; + } else { + this._input.type = "password"; + } + }); } _respond() { - var input = document.querySelector("#input-password") - let username = accounts.getDefaultUserName() - input.blur() - input.disabled = true + var input = document.querySelector("#input-password"); + let username = accounts.getDefaultUserName(); + input.blur(); + input.disabled = true; if (username == accounts._guestAccount && lightdm.has_guest_account) { - lightdm.authenticate_as_guest() + lightdm.authenticate_as_guest(); } else { - lightdm.respond(this._password) + lightdm.respond(this._password); } } startAuthentication() { - lightdm.cancel_authentication() - let username = accounts.getDefaultUserName() - if (username == accounts._guestAccount && lightdm.has_guest_account) return - lightdm.authenticate(String(accounts.getDefaultUserName())) + lightdm.cancel_authentication(); + let username = accounts.getDefaultUserName(); + if (username == accounts._guestAccount && lightdm.has_guest_account) return; + lightdm.authenticate(String(accounts.getDefaultUserName())); } async _authentication_done() { - var form = document.querySelector("#login-form") - form.classList.add("success") + var form = document.querySelector("#login-form"); + form.classList.add("success"); - await wait(500) - var defSession = String(sessions.getDefaultSession()) - var body = document.querySelector("body") - body.style.opacity = 0 + await wait(500); + var defSession = String(sessions.getDefaultSession()); + var body = document.querySelector("body"); + body.style.opacity = 0; - await wait(1000) - console.log("Session started with", defSession) - lightdm.start_session(defSession) + await wait(1000); + console.log("Session started with", defSession); + lightdm.start_session(defSession); } async _authentication_failed() { - this.startAuthentication() - var input = document.querySelector("#input-password") - document.querySelector("#login-form").classList.add("failed") - input.blur() - input.value = "" - input.disabled = false + this.startAuthentication(); + var input = document.querySelector("#input-password"); + document.querySelector("#login-form").classList.add("failed"); + input.blur(); + input.value = ""; + input.disabled = false; - await wait(2000) - document.querySelector("#login-form").classList.remove("failed") + await wait(2000); + document.querySelector("#login-form").classList.remove("failed"); } _init() { - this._setForm() - this._setAuthentication_done() - console.log("Start authentication") - this.startAuthentication() + this._setForm(); + this._setAuthentication_done(); + this._setPasswordEye(); + console.log("Start authentication"); + this.startAuthentication(); } } diff --git a/themes/gruvbox/js/battery.js b/themes/gruvbox/js/battery.js index 792c64f..f810d20 100644 --- a/themes/gruvbox/js/battery.js +++ b/themes/gruvbox/js/battery.js @@ -1,38 +1,40 @@ class Battery { constructor() { - this._battery = document.querySelector("#battery-label") - this._info = {} - this._init() + this._battery = document.querySelector("#battery-label"); + this._info = {}; + this._init(); } _updateData() { - this._info = lightdm.batteryData - var level = this._info.level - var state = this._info.state - var ac = this._info.ac_status - var icon = 0 - var charging = "" - var blevel = Math.floor(level / 10) * 10 - icon = `-${blevel}` - charging = ac == 1 ? "-charging" : "" + this._info = lightdm.batteryData; + var level = this._info.level; + var state = this._info.state; + var ac = this._info.ac_status; + var icon = 0; + var charging = ""; + var blevel = Math.floor(level / 10) * 10; + icon = `-${blevel}`; + charging = ac == 1 ? "-charging" : ""; - if (blevel < 10) icon = "-outline" - if (level == 100 && ac == 0) {icon = ""} + if (blevel < 10) icon = "-outline"; + if (level == 100 && ac == 0) { + icon = ""; + } if (level >= 0) { - this._battery.style.visibility = "visible" - this._battery.innerHTML = ` ${level}%` + this._battery.style.visibility = "visible"; + this._battery.innerHTML = ` ${level}%`; } else { - this._battery.innerHTML = "" - this._battery.style.visibility = "hidden" + this._battery.innerHTML = ""; + this._battery.style.visibility = "hidden"; } } _setTimer() { - if (!lightdm.can_access_battery) return - this._updateData() + if (!lightdm.can_access_battery) return; + this._updateData(); } _init() { - this._setTimer() + this._setTimer(); } } diff --git a/themes/gruvbox/js/brightness.js b/themes/gruvbox/js/brightness.js index b09b546..a2541b6 100644 --- a/themes/gruvbox/js/brightness.js +++ b/themes/gruvbox/js/brightness.js @@ -1,29 +1,28 @@ class Brightness { constructor() { - this._brightness = document.querySelector("#brightness-label") - this._level = 0 - this._init() + this._brightness = document.querySelector("#brightness-label"); + this._level = 0; + this._init(); } _updateData() { - this._level = lightdm.brightness + this._level = lightdm.brightness; if (this._level >= 0) { - this._brightness.style.visibility = "visible" - var icon = this._level > 50 ? 7: this._level > 10 ? 6 : 5 - this._brightness.innerHTML = ` ${this._level}%` + this._brightness.style.visibility = "visible"; + var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5; + this._brightness.innerHTML = ` ${this._level}%`; } else { - this._brightness.innerHTML = "" - this._brightness.style.visibility = "hidden" + this._brightness.innerHTML = ""; + this._brightness.style.visibility = "hidden"; } } _setTimer() { - if (!lightdm.can_access_brightness) return - this._updateData() - + if (!lightdm.can_access_brightness) return; + this._updateData(); } _init() { - this._setTimer() + this._setTimer(); } } diff --git a/themes/gruvbox/js/debug.js b/themes/gruvbox/js/debug.js index dad6616..fe4e48f 100644 --- a/themes/gruvbox/js/debug.js +++ b/themes/gruvbox/js/debug.js @@ -1,33 +1,39 @@ class Debug { constructor() { - this._debugPass = "pes" - this._init() + this._debugPass = "pes"; + this._init(); } _init() { - console.log("DEBUG") + console.log("DEBUG"); - if (!window.theme_utils) { - window.theme_utils = {} - window.theme_utils.dirlist = function(path, mode, callback) { - callback([]) - } - window.theme_utils.bind_this = function(context) {return context} + if (!window.theme_utils) { + window.theme_utils = {}; + window.theme_utils.dirlist = function (path, mode, callback) { + callback([]); + }; + window.theme_utils.bind_this = function (context) { + return context; + }; } - if (!window.greeter_config) { - window.greeter_config = { - greeter: { - debug_mode: true, - }, - branding: { - background_images_dir: "", - } - } + if (!window.greeter_config) { + window.greeter_config = { + greeter: { + debug_mode: true, + }, + branding: { + background_images_dir: "", + }, + layouts: [ + { name: "latam", description: "", short_description: "es" }, + { name: "us", description: "", short_description: "en" }, + ], + }; } if (!window.lightdm) { - window.lightdm = {} + window.lightdm = {}; } var local_lightdm = { @@ -44,111 +50,108 @@ class Debug { sessions: [ { name: "awesome wm", - key: "awesome" + key: "awesome", }, { name: "Ubuntu", - key: "ubuntu" + key: "ubuntu", }, { name: "i3wm", - key: "i3" + key: "i3", }, { name: "bspwm", - key: "bspwm" - } + key: "bspwm", + }, ], users: [ { display_name: "Miyuki Shirogane", username: "Arsène", - image: "./assets/users/Arsene.jpg" + image: "./assets/users/Arsene.jpg", }, { display_name: "Kaguya Shinomiya", username: "Ice princess", - image: "./assets/users/Ice princess.jpg" + image: "./assets/users/Ice princess.jpg", }, { display_name: "Easper", username: "espaiar", - image: "" - } + image: "", + }, ], languages: [ { - name: 'American English', - code: 'en_US.utf8' - } + name: "American English", + code: "en_US.utf8", + }, ], - language: 'American English', - authenticate: username => { - console.log(`Starting authentication with user: "${username}"`) + language: "American English", + layout: { name: "latam", description: "", short_description: "es" }, + authenticate: (username) => { + console.log(`Starting authentication with user: "${username}"`); }, cancel_authentication: () => { - console.log(`Authentication cancelled`) + console.log(`Authentication cancelled`); }, respond: async (password) => { - console.log(`Password provided: "${password}"`) + console.log(`Password provided: "${password}"`); if (password == this._debugPass) { - lightdm.is_authenticated = true + lightdm.is_authenticated = true; } else { - await wait(2000) + await wait(2000); } - authentication_done() + authentication_done(); }, - start_session: session => { - alert(`Logged with session: "${session}"`) - location.reload() + start_session: (session) => { + alert(`Logged with session: "${session}"`); + location.reload(); }, shutdown: () => { - console.log("System is shutting down...") - setTimeout(() => location.reload(), 2000) + console.log("System is shutting down..."); + setTimeout(() => location.reload(), 2000); }, restart: () => { - console.log("System is rebooting...") - setTimeout(() => location.reload(), 2000) + console.log("System is rebooting..."); + setTimeout(() => location.reload(), 2000); }, hibernate: () => { - console.log("System is hibernating") - setTimeout(() => location.reload(), 2000) + console.log("System is hibernating"); + setTimeout(() => location.reload(), 2000); }, suspend: () => { - console.log("System is suspending") - setTimeout(() => location.reload(), 2000) + console.log("System is suspending"); + setTimeout(() => location.reload(), 2000); }, batteryData: { name: "Battery 0", level: 85, - state: "Discharging" - }, - batteryUpdate: () => { - console.log("Battery updated") + state: "Discharging", }, brightness: 50, brightnessSet: (quantity) => { - lightdm.brightness = quantity + lightdm.brightness = quantity; }, brightnessIncrease: (quantity) => { - lightdm.brightness += quantity - if (lightdm.brightness > 100) lightdm.brightness = 100 + lightdm.brightness += quantity; + if (lightdm.brightness > 100) lightdm.brightness = 100; }, brightnessDecrease: (quantity) => { - lightdm.brightness -= quantity - if (lightdm.brightness < 0) lightdm.brightness = 0 - } - } + lightdm.brightness -= quantity; + if (lightdm.brightness < 0) lightdm.brightness = 0; + }, + }; if (lightdm.mock == undefined) { - window.lightdm = {} - Object.assign(window.lightdm, local_lightdm) + window.lightdm = {}; + Object.assign(window.lightdm, local_lightdm); } else { Object.keys(local_lightdm).forEach((key) => { - var realKey = `_${key}` - lightdm[realKey] = local_lightdm[key] - }) + var realKey = `_${key}`; + lightdm[realKey] = local_lightdm[key]; + }); } - } } diff --git a/themes/gruvbox/js/index.js b/themes/gruvbox/js/index.js index b5449c3..6d1b56a 100644 --- a/themes/gruvbox/js/index.js +++ b/themes/gruvbox/js/index.js @@ -1,62 +1,60 @@ - -form = document.querySelector("#form > form") +form = document.querySelector("#form > form"); function getArrayForm(inputs) { - if (!inputs) return false - var data = {} - inputs.forEach((x) => { - data[x.name] = x.value - }) - return data + if (!inputs) return false; + var data = {}; + inputs.forEach((x) => { + data[x.name] = x.value; + }); + return data; } async function wait(ms) { - return new Promise( resolve => { + return new Promise((resolve) => { setTimeout(() => { - resolve() - }, ms) - }) + resolve(); + }, ms); + }); } async function initGreeter() { - if (greeter_config.greeter.debug_mode) { //debug = new Debug() } - lightdm.authentication_complete?.connect(() => authentication_done()) + lightdm.authentication_complete?.connect(() => authentication_done()); + + lightdm.brightness_update?.connect(() => brightness._updateData()); - lightdm.brightness_update?.connect(() => brightness._updateData()) + lightdm.battery_update?.connect(() => battery._updateData()); - lightdm.battery_update?.connect(() => battery._updateData()) + accounts = new Accounts(); - accounts = new Accounts() + sessions = new Sessions(); - sessions = new Sessions() + authenticate = new Authenticate(); - authenticate = new Authenticate() + time_date = new TimeDate(); - time_date = new TimeDate() + layouts = new Layouts(); - layouts = new Layouts() + power = new Power(); - power = new Power() + battery = new Battery(); - battery = new Battery() - - brightness = new Brightness() + brightness = new Brightness(); - var lock = lightdm.lock_hint + var lock = lightdm.lock_hint; if (lock) { - document.querySelector("#lock-label").classList.remove("hide") + document.querySelector("#lock-label").classList.remove("hide"); } } -const notGreeter = false +const notGreeter = false; if (window._ready_event === undefined) { - _ready_event = new Event("GreeterReady") - window.dispatchEvent(_ready_event) + _ready_event = new Event("GreeterReady"); + window.dispatchEvent(_ready_event); } -window.addEventListener("GreeterReady", initGreeter) +window.addEventListener("GreeterReady", initGreeter); diff --git a/themes/gruvbox/js/layouts.js b/themes/gruvbox/js/layouts.js index cbd1133..9836ed8 100644 --- a/themes/gruvbox/js/layouts.js +++ b/themes/gruvbox/js/layouts.js @@ -1,77 +1,85 @@ class Layouts { - constructor() { - this._layoutList = document.querySelector("#layouts-list") - this._dropdown = document.querySelector("#layouts-dropdown") - this._button = document.querySelector("#layouts-button") - this._layouts = [] + constructor() { + this._layoutList = document.querySelector("#layouts-list"); + this._dropdown = document.querySelector("#layouts-dropdown"); + this._button = document.querySelector("#layouts-button"); + this._layouts = []; - this.layout = {} + this.layout = {}; - this._init() - } + this._init(); + } - _setDefault() { - let name = this.layout.name - let description = this.layout.description - let short = this.layout.short_description - this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "") - //this._button.name = description - } + _setDefault() { + let name = this.layout.name; + let description = this.layout.description; + let short = this.layout.short_description; + this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : ""); + //this._button.name = description + } - _setLayoutList() { - let dropdown = this._dropdown - dropdown.innerHTML = "" - for (let i = 0; i < this._layouts.length; i++) { - let name = this._layouts[i].name - let description = this._layouts[i].description - let short = this._layouts[i].short_description - let li = document.createElement("li") - let button = document.createElement("button") - button.innerHTML = name + (short ? ` (${short})` : "") - button.name = description - button.addEventListener("click", () => { - this.layout = this._layouts[i] - this._setDefault() - lightdm.layout = this.layout - }) - li.appendChild(button) - dropdown.appendChild(li) - } - } + _setLayoutList() { + let dropdown = this._dropdown; + dropdown.innerHTML = ""; + for (let i = 0; i < this._layouts.length; i++) { + let name = this._layouts[i].name; + let description = this._layouts[i].description; + let short = this._layouts[i].short_description; + let li = document.createElement("li"); + let button = document.createElement("button"); + button.innerHTML = name + (short ? ` (${short})` : ""); + button.name = description; + button.addEventListener("click", () => { + this.layout = this._layouts[i]; + this._setDefault(); + lightdm.layout = this.layout; + }); + li.appendChild(button); + dropdown.appendChild(li); + } + } - _setKeydown() { - let dropdown = this._dropdown - dropdown.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - dropdown.classList.add("hide") - this._button.focus() - } - }) - } + _setKeydown() { + let dropdown = this._dropdown; + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide"); + this._button.focus(); + } + }); + } - _setButton() { - let dropdown = this._dropdown - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._button || ev.target.parentElement == this._button) { - dropdown.classList.toggle("hide") - } else - if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) { - dropdown.classList.add("hide") - } - }) - } + _setButton() { + let dropdown = this._dropdown; + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._button || + ev.target.parentElement == this._button + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != dropdown && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if ( + !dropdown.contains(document.activeElement) && + document.activeElement != this._button + ) { + dropdown.classList.add("hide"); + } + }); + } - _init() { - this.layout = lightdm.layout - this._layouts = greeter_config.layouts - this._setDefault() - this._setLayoutList() - this._setButton() - this._setKeydown() - } + _init() { + this.layout = lightdm.layout; + this._layouts = greeter_config.layouts; + this._setDefault(); + this._setLayoutList(); + this._setButton(); + this._setKeydown(); + } } diff --git a/themes/gruvbox/js/power.js b/themes/gruvbox/js/power.js index 72e77ad..f18355f 100644 --- a/themes/gruvbox/js/power.js +++ b/themes/gruvbox/js/power.js @@ -1,89 +1,89 @@ class Power { constructor() { - this._shutdown = document.querySelector("#shutdown-btn") - this._restart = document.querySelector("#restart-btn") - this._hibernate = document.querySelector("#hibernate-btn") - this._suspend = document.querySelector("#suspend-btn") - this._cover = document.querySelector("#cover") - this._covermsg = document.querySelector("#cover > #message") - this._init() + this._shutdown = document.querySelector("#shutdown-btn"); + this._restart = document.querySelector("#restart-btn"); + this._hibernate = document.querySelector("#hibernate-btn"); + this._suspend = document.querySelector("#suspend-btn"); + this._cover = document.querySelector("#cover"); + this._covermsg = document.querySelector("#cover > #message"); + this._init(); } _show_message(text) { - this._covermsg.innerHTML = text - this._cover.classList.remove("hide") + this._covermsg.innerHTML = text; + this._cover.classList.remove("hide"); wait(500).then(() => { - this._cover.focus() - }) + this._cover.focus(); + }); } async _do_shutdown() { - this._show_message("Shutting down") - await wait(1000) - lightdm.shutdown() + this._show_message("Shutting down"); + await wait(1000); + lightdm.shutdown(); } async _do_restart() { - this._show_message("Restarting") - await wait(1000) - lightdm.restart() + this._show_message("Restarting"); + await wait(1000); + lightdm.restart(); } async _do_hibernate() { - this._show_message("Hibernating") - await wait(1000) - lightdm.hibernate() + this._show_message("Hibernating"); + await wait(1000); + lightdm.hibernate(); } async _do_suspend() { - this._show_message("Suspending") - await wait(1000) - lightdm.suspend() + this._show_message("Suspending"); + await wait(1000); + lightdm.suspend(); } _setShutdown() { - if (!lightdm.can_shutdown) return + if (!lightdm.can_shutdown) return; this._shutdown.addEventListener("click", () => { - this._do_shutdown() - }) - this._shutdown.classList.remove("hide") + this._do_shutdown(); + }); + this._shutdown.classList.remove("hide"); } _setRestart() { - if (!lightdm.can_restart) return + if (!lightdm.can_restart) return; this._restart.addEventListener("click", () => { - this._do_restart() - }) - this._restart.classList.remove("hide") + this._do_restart(); + }); + this._restart.classList.remove("hide"); } _setHibernate() { - if (!lightdm.can_hibernate) return + if (!lightdm.can_hibernate) return; this._hibernate.addEventListener("click", () => { - this._do_hibernate() - }) - this._hibernate.classList.remove("hide") + this._do_hibernate(); + }); + this._hibernate.classList.remove("hide"); } _setSuspend() { - if (!lightdm.can_suspend) return + if (!lightdm.can_suspend) return; this._suspend.addEventListener("click", () => { - this._do_suspend() - }) - this._suspend.classList.remove("hide") + this._do_suspend(); + }); + this._suspend.classList.remove("hide"); } _setCover() { this._cover.addEventListener("click", () => { - this._cover.classList.add("hide") - }) + this._cover.classList.add("hide"); + }); this._cover.addEventListener("keydown", () => { - this._cover.classList.add("hide") - }) + this._cover.classList.add("hide"); + }); } _setButtons() { - this._setShutdown() - this._setRestart() - this._setHibernate() - this._setSuspend() - this._setCover() + this._setShutdown(); + this._setRestart(); + this._setHibernate(); + this._setSuspend(); + this._setCover(); } _init() { - this._setButtons() + this._setButtons(); } } diff --git a/themes/gruvbox/js/sessions.js b/themes/gruvbox/js/sessions.js index 86adcf3..c76dad9 100644 --- a/themes/gruvbox/js/sessions.js +++ b/themes/gruvbox/js/sessions.js @@ -1,94 +1,106 @@ class Sessions { constructor() { - this._localStorage = window.localStorage - this._sessionLabel = document.querySelector("#session-label") - this._sessionList = document.querySelector("#sessions-list") - this._sessionsButton = document.querySelector("#sessions-button") - this._defaultSession = null - this._sessionsObject = null - this._init() + this._localStorage = window.localStorage; + this._sessionLabel = document.querySelector("#session-label"); + this._sessionList = document.querySelector("#sessions-list"); + this._sessionsButton = document.querySelector("#sessions-button"); + this._defaultSession = null; + this._sessionsObject = null; + this._init(); } getDefaultSession() { - return this._defaultSession.key + return this._defaultSession.key; } _setSessionDefault() { - this._sessionLabel.innerHTML = `${this._defaultSession.name}` + this._sessionLabel.innerHTML = `${this._defaultSession.name}`; } _updateOnStartup() { - var session_key = this._localStorage.getItem("defaultSession") || this._sessionsObject[0].key || lightdm.default_session + var session_key = + this._localStorage.getItem("defaultSession") || + this._sessionsObject[0].key || + lightdm.default_session; - var defaultSession = this._sessionsObject.find(el => el.key == session_key) + var defaultSession = this._sessionsObject.find( + (el) => el.key == session_key + ); - var session_name = defaultSession ? defaultSession.name : "awesome wm" - session_key = defaultSession ? defaultSession.key : "awesome" + var session_name = defaultSession ? defaultSession.name : "awesome wm"; + session_key = defaultSession ? defaultSession.key : "awesome"; this._defaultSession = { key: session_key, - name: session_name - } - this._setSessionDefault() + name: session_name, + }; + this._setSessionDefault(); } _setSessionList() { - var dropdown = this._sessionList.querySelector(".dropdown") - dropdown.innerHTML = "" + var dropdown = this._sessionList.querySelector(".dropdown"); + dropdown.innerHTML = ""; for (let i = 0; i < this._sessionsObject.length; i++) { - var name = this._sessionsObject[i].name - var li = document.createElement("li") - var button = document.createElement("button") - button.innerHTML = name + var name = this._sessionsObject[i].name; + var li = document.createElement("li"); + var button = document.createElement("button"); + button.innerHTML = name; button.addEventListener("click", () => { - this._updateDefaults(this._sessionsObject[i]) - this._setSessionDefault() - }) + this._updateDefaults(this._sessionsObject[i]); + this._setSessionDefault(); + }); - li.appendChild(button) - dropdown.appendChild(li) + li.appendChild(button); + dropdown.appendChild(li); } } - _setKeydown() { - var dropdown = this._sessionList.querySelector(".dropdown") - dropdown.addEventListener("keydown", (ev) => { - if (ev.keyCode == 27) { - dropdown.classList.add("hide") - this._sessionsButton.focus() - } - }) - } + _setKeydown() { + var dropdown = this._sessionList.querySelector(".dropdown"); + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide"); + this._sessionsButton.focus(); + } + }); + } _setButton() { - var dropdown = this._sessionList.querySelector(".dropdown") - document.querySelector("#screen").addEventListener("click", (ev) => { - if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) { - dropdown.classList.toggle("hide") - } else - if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { - dropdown.classList.add("hide") - } - }) - document.querySelector("#screen").addEventListener("focusin", (ev) => { - if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) { - dropdown.classList.add("hide") - } - }) - + var dropdown = this._sessionList.querySelector(".dropdown"); + document.querySelector("#screen").addEventListener("click", (ev) => { + if ( + ev.target == this._sessionsButton || + ev.target.parentElement == this._sessionsButton + ) { + dropdown.classList.toggle("hide"); + } else if ( + ev.target != dropdown && + ev.target.closest(".dropdown") == null + ) { + dropdown.classList.add("hide"); + } + }); + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if ( + !dropdown.contains(document.activeElement) && + document.activeElement != this._sessionsButton + ) { + dropdown.classList.add("hide"); + } + }); } _updateDefaults(sessionObj) { - if (!sessionObj) return - this._defaultSession = sessionObj - this._localStorage.setItem("defaultSession", this._defaultSession.key) + if (!sessionObj) return; + this._defaultSession = sessionObj; + this._localStorage.setItem("defaultSession", this._defaultSession.key); } _init() { - this._sessionsObject = lightdm.sessions - this._updateOnStartup() - this._setSessionList() - this._setButton() - this._setKeydown() + this._sessionsObject = lightdm.sessions; + this._updateOnStartup(); + this._setSessionList(); + this._setButton(); + this._setKeydown(); } } diff --git a/themes/gruvbox/js/time-date.js b/themes/gruvbox/js/time-date.js index 8e92208..232ec4e 100644 --- a/themes/gruvbox/js/time-date.js +++ b/themes/gruvbox/js/time-date.js @@ -1,26 +1,26 @@ class TimeDate { - constructor() { - this._timeLabel = document.querySelector("#time-date #time-label") - this._dateLabel = document.querySelector("#time-date #date-label") - this._init() - } + constructor() { + this._timeLabel = document.querySelector("#time-date #time-label"); + this._dateLabel = document.querySelector("#time-date #date-label"); + this._init(); + } - _updateTimeDate() { - let date = theme_utils.get_current_localized_date() - let time = theme_utils.get_current_localized_time() + _updateTimeDate() { + let date = theme_utils.get_current_localized_date(); + let time = theme_utils.get_current_localized_time(); - this._dateLabel.innerText = date - this._timeLabel.innerText = time - } + this._dateLabel.innerText = date; + this._timeLabel.innerText = time; + } - _setTimer() { - this._updateTimeDate() - setInterval(() => { - this._updateTimeDate() - }, 1000) - } - - _init() { - this._setTimer() - } + _setTimer() { + this._updateTimeDate(); + setInterval(() => { + this._updateTimeDate(); + }, 1000); + } + + _init() { + this._setTimer(); + } }