Browse Source

Themes got prettier. Added eye password reveal

sisyphus
JezerM 4 years ago
parent
commit
f706acc369
No known key found for this signature in database
GPG Key ID: 66BBC5D01388C6B5
  1. 1
      themes/dracula/.prettierignore
  2. 3
      themes/dracula/README.md
  3. 101
      themes/dracula/css/style.css
  4. 67
      themes/dracula/index.html
  5. 97
      themes/dracula/js/accounts.js
  6. 173
      themes/dracula/js/authenticate.js
  7. 97
      themes/dracula/js/backgrounds.js
  8. 44
      themes/dracula/js/battery.js
  9. 24
      themes/dracula/js/brightness.js
  10. 113
      themes/dracula/js/debug.js
  11. 56
      themes/dracula/js/index.js
  12. 98
      themes/dracula/js/layouts.js
  13. 98
      themes/dracula/js/power.js
  14. 107
      themes/dracula/js/sessions.js
  15. 68
      themes/dracula/js/sidebar.js
  16. 56
      themes/dracula/js/time-date.js
  17. 3
      themes/gruvbox/README.md
  18. 56
      themes/gruvbox/css/style.css
  19. 42
      themes/gruvbox/index.html
  20. 139
      themes/gruvbox/js/accounts.js
  21. 99
      themes/gruvbox/js/authenticate.js
  22. 44
      themes/gruvbox/js/battery.js
  23. 25
      themes/gruvbox/js/brightness.js
  24. 119
      themes/gruvbox/js/debug.js
  25. 56
      themes/gruvbox/js/index.js
  26. 98
      themes/gruvbox/js/layouts.js
  27. 98
      themes/gruvbox/js/power.js
  28. 112
      themes/gruvbox/js/sessions.js
  29. 22
      themes/gruvbox/js/time-date.js

1
themes/dracula/.prettierignore vendored

@ -0,0 +1 @@
css/DRACULA

3
themes/dracula/README.md vendored

@ -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.
</center>
## 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

101
themes/dracula/css/style.css vendored

@ -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;
}
}
@ -122,7 +121,7 @@ body {
align-items: center;
justify-content: center;
background-color: #282A36aa;
background-color: #282a36aa;
backdrop-filter: blur(5px);
}
#cover > #message {
@ -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);
}

67
themes/dracula/index.html vendored

@ -1,18 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Dracula theme</title>
<link rel="stylesheet" href="css/style.css" class="style">
<link rel="stylesheet" href="../../_vendor/material-icons/css/materialdesignicons.min.css" onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" class="style">
<link rel="stylesheet" href="css/style.css" class="style" />
<link
rel="stylesheet"
href="../../_vendor/material-icons/css/materialdesignicons.min.css"
onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'"
class="style"
/>
<!--<script src="..//js/mock.js"></script>-->
</head>
<body>
<div id="background">
<div id="bg-cover"></div>
</div>
@ -22,17 +28,13 @@
</button>
<div id="screen">
<div id="login-wrapper">
<div id="top-bar">
Welcome!
</div>
<div id="top-bar">Welcome!</div>
<div id="login-wrapper-box">
<button id="time-date">
<h2 id="time-label">20:00</h2>
<h4 id="date-label">20-05-2021</h2>
<h2 id="date-label">20-05-2021</h2>
</button>
<div id="auth-message" class="hide"></div>
@ -40,7 +42,14 @@
<div id="pass-form" class="hide">
<form action="POST" id="login-form">
<div id="user-wrapper">
<input id="input-username" name="username" type="text" autocomplete="off" autofocus="true" placeholder="Enter your username">
<input
id="input-username"
name="username"
type="text"
autocomplete="off"
autofocus="true"
placeholder="Enter your username"
/>
<div id="users-button-wrapper">
<button id="users-button" class="button hide" type="button">
@ -53,25 +62,35 @@
</ul>
</div>
</div>
</div>
<div id="pass-wrapper">
<input id="input-password" name="password" type="password" autocomplete="off" autofocus="true" placeholder="Enter your password">
<div id="input">
<input
id="input-password"
name="password"
type="password"
autocomplete="off"
autofocus="true"
placeholder="Enter your password"
/>
<button id="pass-eye" type="button" class="button">
<i class="mdi mdi-eye"></i>
</button>
</div>
<button id="submit-button" class="button" type="submit">
<span class="mdi mdi-chevron-right mdi-24px"></span>
</button>
</div>
</form>
</div>
</div>
<div id="bottom-bar">
<div id="sessions-button-wrapper">
<button id="sessions-button" class="button">
<span class="text">Awesome</span> <span class="mdi mdi-chevron-down mdi-24px"></span>
<span class="text">Awesome</span>
<span class="mdi mdi-chevron-down mdi-24px"></span>
</button>
<ul id="sessions-dropdown" class="dropdown hide">
<li><button>Awesome</button></li>
@ -96,16 +115,12 @@
<span class="mdi mdi-power-cycle"></span>
</button>
</div>
</div>
</div>
<div id="system-bar">
<div id="layouts-list">
<button id="layouts-button" class="">
LATAM
</button>
<button id="layouts-button" class="">LATAM</button>
<ul id="layouts-dropdown" class="dropdown hide">
<li><button>Latam</button></li>
<li><button>English</button></li>
@ -128,13 +143,13 @@
<div id="background-selector">
<button class="image" tabindex="0">
<img src="./assets/dracula.png" alt="">
<img src="./assets/dracula.png" alt="" />
</button>
<button class="image" tabindex="0">
<img src="./assets/dracula.png" alt="">
<img src="./assets/dracula.png" alt="" />
</button>
<button class="image" tabindex="0">
<img src="./assets/dracula.png" alt="">
<img src="./assets/dracula.png" alt="" />
</button>
</div>
</div>

97
themes/dracula/js/accounts.js vendored

@ -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()
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
return this._defaultUser.username;
}
_setAccountDefault() {
let input = this._userWrapper.querySelector("input")
let input = this._userWrapper.querySelector("input");
if (this._defaultUser.username != "") {
//input.classList.add("hide")
input.value = this._defaultUser.username
input.value = this._defaultUser.username;
} else {
input.value = ""
input.value = "";
}
if (this._usersObject.length > 0) {
this._accountsButton.classList.remove("hide")
this._accountsButton.classList.remove("hide");
}
}
_updateOnStartup() {
var username = ""
var username = "";
if (this._usersObject.length > 0) {
username = this._localStorage.getItem("defaultUser") || this._usersObject[0].username
username =
this._localStorage.getItem("defaultUser") ||
this._usersObject[0].username;
}
var user = this._usersObject.find((val) => {return val.username === username})
var user = this._usersObject.find((val) => {
return val.username === username;
});
if (user === undefined) {
this._defaultUser = {username: "", display_name: ""}
this._defaultUser = { username: "", display_name: "" };
} else {
this._defaultUser = user
this._defaultUser = user;
}
this._setAccountDefault()
this._setAccountDefault();
}
_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.type = "button"
button.innerText = name
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()
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")
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")
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
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()
this._usersObject = lightdm.users;
this._updateOnStartup();
this._setAccountList();
this._setButton();
}
}

173
themes/dracula/js/authenticate.js vendored

@ -1,113 +1,126 @@
class Authenticate {
constructor() {
this._form = document.querySelector("#login-form")
this._username = ""
this._password = ""
this._init()
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()
})
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() {
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)
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")
let message = document.querySelector("#auth-message");
message.innerText = msg;
message.classList.remove("hide");
}
_hideMessage() {
let message = document.querySelector("#auth-message")
message.classList.add("hide")
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)
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")
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()
this._authentication_done();
} else {
this._authentication_failed()
}
this._authentication_failed();
}
};
}
_init() {
this._setForm()
this._setAuthentication_done()
this._setForm();
this._setAuthentication_done();
this._setPasswordEye();
}
}

97
themes/dracula/js/backgrounds.js vendored

@ -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 = ""
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
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())
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()
this._backgroundPath =
this._localStorage.getItem("defaultBackgroundImage") ||
this._backgroundImages[0];
this._updateBackgroundImages();
}
_updateBackgroundImages() {
let img = this._background.querySelector("img")
let img = this._background.querySelector("img");
if (!img) {
img = document.createElement("img")
this._background.appendChild(img)
img = document.createElement("img");
this._background.appendChild(img);
}
img.src = this._backgroundPath
this._localStorage.setItem("defaultBackgroundImage", String(this._backgroundPath))
img.src = this._backgroundPath;
this._localStorage.setItem(
"defaultBackgroundImage",
String(this._backgroundPath)
);
}
_setBackgroundImages() {
this._backgroundsList.innerHTML = ""
this._backgroundsList.innerHTML = "";
for (let i = 0; i < this._backgroundImages.length; i++) {
const path = this._backgroundImages[i]
let button = this._createImage(path)
const path = this._backgroundImages[i];
let button = this._createImage(path);
button.addEventListener("click", () => {
this._backgroundPath = path
this._updateBackgroundImages()
})
this._backgroundsList.appendChild(button)
this._backgroundPath = path;
this._updateBackgroundImages();
});
this._backgroundsList.appendChild(button);
}
}
_getImages(path) {
this._backgroundImagesDir = greeter_config.branding.background_images_dir || '/usr/share/backgrounds'
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)
})
})
theme_utils.dirlist(
path ? path : this._backgroundImagesDir,
true,
(result) => {
resolve(result);
}
);
});
}
async _init() {
await this._createBackgroundArray()
this._updateOnStartup()
await this._createBackgroundArray();
this._updateOnStartup();
return new Promise( resolve => resolve() )
return new Promise((resolve) => resolve());
}
}

44
themes/dracula/js/battery.js vendored

@ -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 = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`
this._battery.style.visibility = "visible";
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${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();
}
}

24
themes/dracula/js/brightness.js vendored

@ -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 = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%`
this._brightness.style.visibility = "visible";
var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5;
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${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();
}
}

113
themes/dracula/js/debug.js vendored

@ -1,11 +1,11 @@
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 = {
@ -14,21 +14,23 @@ class Debug {
},
branding: {
background_images_dir: "",
}
}
},
};
}
if (!window.theme_utils) {
window.theme_utils = {}
window.theme_utils = {};
window.theme_utils.dirlist = function (path, mode, callback) {
var result = []
callback(result)
var result = [];
callback(result);
};
window.theme_utils.bind_this = function (context) {
return context;
};
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];
});
}
}
}

56
themes/dracula/js/index.js vendored

@ -1,60 +1,56 @@
function getArrayForm(inputs) {
if (!inputs) return false
var data = {}
if (!inputs) return false;
var data = {};
inputs.forEach((x) => {
data[x.name] = x.value
})
return data
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);

98
themes/dracula/js/layouts.js vendored

@ -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 = []
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})` : "")
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 = ""
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
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)
this.layout = this._layouts[i];
this._setDefault();
lightdm.layout = this.layout;
});
li.appendChild(button);
dropdown.appendChild(li);
}
}
_setKeydown() {
let dropdown = this._dropdown
let dropdown = this._dropdown;
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
dropdown.classList.add("hide")
this._button.focus()
dropdown.classList.add("hide");
this._button.focus();
}
})
});
}
_setButton() {
let dropdown = this._dropdown
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")
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")
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()
this.layout = lightdm.layout;
this._layouts = greeter_config.layouts;
this._setDefault();
this._setLayoutList();
this._setButton();
this._setKeydown();
}
}

98
themes/dracula/js/power.js vendored

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

107
themes/dracula/js/sessions.js vendored

@ -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()
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
this._sessionLabel.innerText = this._defaultSession.name;
}
_updateOnStartup() {
var key = this._localStorage.getItem("defaultSession") || this._sessionsObject[0].key || lightdm.default_session
var key =
this._localStorage.getItem("defaultSession") ||
this._sessionsObject[0].key ||
lightdm.default_session;
var session = this._sessionsObject.find((val) => {return val.key === key})
var session = this._sessionsObject.find((val) => {
return val.key === key;
});
if (session === undefined) {
// This should never happen
this._defaultSession = {key: "awesome", name: "Awesome WM"}
this._defaultSession = { key: "awesome", name: "Awesome WM" };
} else {
this._defaultSession = session
this._defaultSession = session;
}
this._setSessionDefault()
this._setSessionDefault();
}
_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);
}
_setSessionList() {
var dropdown = this._sessionList
dropdown.innerHTML = ""
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
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()
})
this._updateDefaults(this._sessionsObject[i]);
this._setSessionDefault();
});
li.appendChild(button)
dropdown.appendChild(li)
li.appendChild(button);
dropdown.appendChild(li);
}
}
_setKeydown() {
var dropdown = this._sessionList
var dropdown = this._sessionList;
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
sessions_dropdown.classList.add("hide")
this._sessionsButton.focus()
sessions_dropdown.classList.add("hide");
this._sessionsButton.focus();
}
})
});
}
_setButton() {
var dropdown = this._sessionList
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")
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")
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()
this._sessionsObject = lightdm.sessions;
this._updateOnStartup();
this._setSessionList();
this._setButton();
this._setKeydown();
}
}

68
themes/dracula/js/sidebar.js vendored

@ -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()
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
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
this._sidebar.classList.add("hide");
this._sidebarButton.focus();
this._visible = false;
}
toggleSidebar() {
if (this._visible) {
this.hideSidebar()
this.hideSidebar();
} else {
this.showSidebar()
this.showSidebar();
}
}
_setKeydown() {
this._sidebar.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
this.hideSidebar()
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
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
this._sidebar.classList.add("hide");
this._visible = false;
}
})
});
}
_init() {
this._setSidebar()
this._setKeydown()
this._setSidebar();
this._setKeydown();
}
}

56
themes/dracula/js/time-date.js vendored

@ -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()
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()
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()
this._updateTimeDate();
setInterval(() => {
this._updateTimeDate()
}, 1000)
this._updateTimeDate();
}, 1000);
}
_setButtons() {
this._timeDateButton.addEventListener("click", (ev) => {
this.toggleTimeDate()
})
this.toggleTimeDate();
});
this._passForm.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
this.toggleTimeDate()
this.toggleTimeDate();
}
})
});
}
async toggleTimeDate() {
this._timeDateButton.blur()
this._passForm.blur()
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()
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")
this._timeDateButton.classList.add("hide");
await wait(300);
this._passForm.classList.remove("hide");
}
}
_init() {
this._setTimer()
this._setButtons()
this._setTimer();
this._setButtons();
}
}

3
themes/gruvbox/README.md vendored

@ -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.
</center>
## 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

56
themes/gruvbox/css/style.css vendored

@ -49,7 +49,7 @@
@media screen and (min-width: 3000px) and (min-height: 1200px) {
#screen {
zoom: 2.0;
zoom: 2;
}
}
@ -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,7 +162,8 @@ button {
transition: var(--animation-duration);
}
#login-form:focus-within, #login-form:hover {
#login-form:focus-within,
#login-form:hover {
filter: drop-shadow(2px 6px 10px rgba(0, 0, 0, 0.8));
}
@ -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);
}

42
themes/gruvbox/index.html vendored

@ -1,11 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link rel="stylesheet" href="css/style.css" class="style">
<link rel="stylesheet" href="../../_vendor/material-icons/css/materialdesignicons.min.css" onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" class="style">
<link rel="stylesheet" href="css/style.css" class="style" />
<link
rel="stylesheet"
href="../../_vendor/material-icons/css/materialdesignicons.min.css"
onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'"
class="style"
/>
<!--<script src="../_vendor/js/mock.js"></script>-->
@ -23,7 +31,7 @@
<div id="background-image">
<i class="mdi mdi-account"></i>
</div>
<img src="" alt="">
<img src="" alt="" />
</div>
<div id="user-label">
<b>User</b>
@ -32,7 +40,17 @@
<div id="pass-form">
<form action="POST">
<div id="input">
<input id="input-password" name="password" type="password" autocomplete="off" autofocus="true" placeholder="Enter your password">
<input
id="input-password"
name="password"
type="password"
autocomplete="off"
autofocus="true"
placeholder="Enter your password"
/>
<button id="pass-eye" type="button" class="button">
<i class="mdi mdi-eye"></i>
</button>
</div>
<div>
<button id="submit-button" type="submit" class="button">
@ -59,14 +77,10 @@
<li><button>Normal sheer</button></li>
</ul>
</div>
</div>
</div>
<div id="session-label" class="info">
</div>
<div id="lock-label" class="info hide">
Lock
</div>
<div id="session-label" class="info"></div>
<div id="lock-label" class="info hide">Lock</div>
<div id="time-date" class="info">
<span id="time-label">20:00</span>
<span id="date-label">12-07-21</span>
@ -74,9 +88,7 @@
<div id="system-status" class="label-bar">
<div id="layouts-list">
<button id="layouts-button" class="">
LATAM
</button>
<button id="layouts-button" class="">LATAM</button>
<ul id="layouts-dropdown" class="dropdown hide">
<li><button>Latam</button></li>
<li><button>English</button></li>

139
themes/gruvbox/js/accounts.js vendored

@ -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
var img = this._userImage.querySelector("img");
img.src = this._defaultUser.image;
img.onerror = function () {
img.src = ""
}
this._userLabel.innerHTML = `<b>${this._defaultUser.display_name}</b>`
img.src = "";
};
this._userLabel.innerHTML = `<b>${this._defaultUser.display_name}</b>`;
}
_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")
var dropdown = this._accountsList.querySelector(".dropdown");
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
dropdown.classList.add("hide")
this._accountsButton.focus()
dropdown.classList.add("hide");
this._accountsButton.focus();
}
})
});
}
_setButton() {
var dropdown = this._accountsList.querySelector(".dropdown")
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")
}
})
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")
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();
}
}

99
themes/gruvbox/js/authenticate.js vendored

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

44
themes/gruvbox/js/battery.js vendored

@ -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 = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`
this._battery.style.visibility = "visible";
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${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();
}
}

25
themes/gruvbox/js/brightness.js vendored

@ -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 = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%`
this._brightness.style.visibility = "visible";
var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5;
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${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();
}
}

119
themes/gruvbox/js/debug.js vendored

@ -1,18 +1,20 @@
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 = {};
window.theme_utils.dirlist = function (path, mode, callback) {
callback([])
}
window.theme_utils.bind_this = function(context) {return context}
callback([]);
};
window.theme_utils.bind_this = function (context) {
return context;
};
}
if (!window.greeter_config) {
@ -22,12 +24,16 @@ class Debug {
},
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];
});
}
}
}

56
themes/gruvbox/js/index.js vendored

@ -1,62 +1,60 @@
form = document.querySelector("#form > form")
form = document.querySelector("#form > form");
function getArrayForm(inputs) {
if (!inputs) return false
var data = {}
if (!inputs) return false;
var data = {};
inputs.forEach((x) => {
data[x.name] = x.value
})
return data
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);

98
themes/gruvbox/js/layouts.js vendored

@ -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 = []
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})` : "")
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 = ""
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
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)
this.layout = this._layouts[i];
this._setDefault();
lightdm.layout = this.layout;
});
li.appendChild(button);
dropdown.appendChild(li);
}
}
_setKeydown() {
let dropdown = this._dropdown
let dropdown = this._dropdown;
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
dropdown.classList.add("hide")
this._button.focus()
dropdown.classList.add("hide");
this._button.focus();
}
})
});
}
_setButton() {
let dropdown = this._dropdown
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")
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")
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()
this.layout = lightdm.layout;
this._layouts = greeter_config.layouts;
this._setDefault();
this._setLayoutList();
this._setButton();
this._setKeydown();
}
}

98
themes/gruvbox/js/power.js vendored

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

112
themes/gruvbox/js/sessions.js vendored

@ -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 = `<b>${this._defaultSession.name}</b>`
this._sessionLabel.innerHTML = `<b>${this._defaultSession.name}</b>`;
}
_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")
var dropdown = this._sessionList.querySelector(".dropdown");
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
dropdown.classList.add("hide")
this._sessionsButton.focus()
dropdown.classList.add("hide");
this._sessionsButton.focus();
}
})
});
}
_setButton() {
var dropdown = this._sessionList.querySelector(".dropdown")
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")
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")
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();
}
}

22
themes/gruvbox/js/time-date.js vendored

@ -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()
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()
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()
this._updateTimeDate();
setInterval(() => {
this._updateTimeDate()
}, 1000)
this._updateTimeDate();
}, 1000);
}
_init() {
this._setTimer()
this._setTimer();
}
}

Loading…
Cancel
Save