JezerM
4 years ago
10 changed files with 1344 additions and 0 deletions
|
After Width: | Height: | Size: 340 KiB |
@ -0,0 +1,21 @@ |
|||||||
|
The MIT License (MIT) |
||||||
|
|
||||||
|
Copyright (c) 2016 Dracula Theme |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,546 @@ |
|||||||
|
:root { |
||||||
|
|
||||||
|
--bg0: #282A36; |
||||||
|
--bg1: #44475A; |
||||||
|
--bg2: #585C74; |
||||||
|
--bg3: #666e99; |
||||||
|
|
||||||
|
--alt0: #6272A4; |
||||||
|
--alt1: #7A88B3; |
||||||
|
|
||||||
|
--fg0: #F8F8F2; |
||||||
|
--fg1: #EAEAE0; |
||||||
|
--fg2: #DEDED2; |
||||||
|
|
||||||
|
--cyan: #8BE9fD; |
||||||
|
--green: #50FA7B; |
||||||
|
--orange: #FFb86C; |
||||||
|
--pink: #FF79C6; |
||||||
|
--purple: #BD93F9; |
||||||
|
--red: #FF5555; |
||||||
|
--yellow: #F1FA8C; |
||||||
|
|
||||||
|
--animation-duration: 300ms; |
||||||
|
} |
||||||
|
|
||||||
|
/* High DPI */ |
||||||
|
|
||||||
|
@media screen and (min-width: 3000px) and (min-height: 1200px) { |
||||||
|
html { |
||||||
|
zoom: 2.0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Basic */ |
||||||
|
|
||||||
|
html { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
background-color: black; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
html * { |
||||||
|
font-family: system-ui; |
||||||
|
font-size: 16px; |
||||||
|
transition: var(--animation-duration); |
||||||
|
color: var(--fg0); |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0; |
||||||
|
overflow-x: hidden; |
||||||
|
background-color: var(--bg0); |
||||||
|
} |
||||||
|
|
||||||
|
.hide { |
||||||
|
opacity: 0; |
||||||
|
visibility: hidden; |
||||||
|
max-height: 0; |
||||||
|
max-width: 0; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Scrollbar */ |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
} |
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
background-color: var(--fg2); |
||||||
|
} |
||||||
|
::-webkit-scrollbar-thumb:hover { |
||||||
|
background-color: var(--fg0); |
||||||
|
} |
||||||
|
|
||||||
|
/* Background */ |
||||||
|
|
||||||
|
#background { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
background-color: var(--bg0); |
||||||
|
} |
||||||
|
|
||||||
|
#background img { |
||||||
|
width: inherit; |
||||||
|
height: inherit; |
||||||
|
object-fit: cover; |
||||||
|
object-position: center; |
||||||
|
} |
||||||
|
|
||||||
|
#bg-cover { |
||||||
|
backdrop-filter: blur(4px); |
||||||
|
position: absolute; |
||||||
|
height: inherit; |
||||||
|
width: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
#screen { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
#cover { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
position: absolute; |
||||||
|
z-index: 10; |
||||||
|
transition: var(--animation-duration); |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
background-color: #282A36aa; |
||||||
|
backdrop-filter: blur(5px); |
||||||
|
} |
||||||
|
#cover > #message { |
||||||
|
font-size: 4em; |
||||||
|
font-weight: bold; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
/* Login form */ |
||||||
|
|
||||||
|
#login-wrapper { |
||||||
|
position: relative; |
||||||
|
background: var(--bg1); |
||||||
|
border-radius: 2px; |
||||||
|
max-height: 90vh; |
||||||
|
width: 30em; |
||||||
|
box-sizing: border-box; |
||||||
|
transition: var(--animation-duration); |
||||||
|
|
||||||
|
/*display: flex;*/ |
||||||
|
/*justify-content: center;*/ |
||||||
|
/*align-items: flex-start;*/ |
||||||
|
} |
||||||
|
body.success #login-wrapper { |
||||||
|
background-color: #79d28f; |
||||||
|
} |
||||||
|
body.failed #login-wrapper { |
||||||
|
background-color: #dd7878; |
||||||
|
} |
||||||
|
|
||||||
|
#login-wrapper-box { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 1.8em 3em; |
||||||
|
height: 8em; |
||||||
|
} |
||||||
|
|
||||||
|
#login-form { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
flex-direction: column; |
||||||
|
height: 10em; |
||||||
|
max-width: fit-content; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
background-color: var(--bg2); |
||||||
|
color: var(--fg0); |
||||||
|
border: 0; |
||||||
|
border-radius: 2px; |
||||||
|
padding: 1em; |
||||||
|
margin: 0.5em; |
||||||
|
font-size: inherit; |
||||||
|
font-family: inherit; |
||||||
|
} |
||||||
|
input:focus, input:focus-visible { |
||||||
|
border: 0; |
||||||
|
outline: auto var(--fg0); |
||||||
|
} |
||||||
|
:focus { |
||||||
|
outline: auto var(--fg0) !important; |
||||||
|
} |
||||||
|
|
||||||
|
#pass-form.hide { |
||||||
|
visibility: hidden; |
||||||
|
max-height: initial; |
||||||
|
max-width: initial; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
#input-password { |
||||||
|
box-shadow: 0 2px var(--cyan); |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#input-username { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
box-shadow: 0 2px var(--orange); |
||||||
|
} |
||||||
|
|
||||||
|
::placeholder { |
||||||
|
color: var(--fg2); |
||||||
|
} |
||||||
|
|
||||||
|
#pass-wrapper { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
|
||||||
|
#user-wrapper { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
flex-direction: row; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
#submit-button { |
||||||
|
background-color: #72bece; |
||||||
|
} |
||||||
|
#submit-button:hover, #submit-button:focus { |
||||||
|
background-color: var(--purple); |
||||||
|
} |
||||||
|
|
||||||
|
#users-button-wrapper { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
#users-button { |
||||||
|
background-color: var(--orange); |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
#users-button:hover, #users-button:focus { |
||||||
|
background-color: var(--red); |
||||||
|
} |
||||||
|
|
||||||
|
#users-dropdown { |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#users-dropdown .dropdown { |
||||||
|
background-color: var(--bg2); |
||||||
|
right: 0; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
#users-dropdown .dropdown button:hover, #users-dropdown .dropdown button:focus { |
||||||
|
background-color: var(--orange); |
||||||
|
} |
||||||
|
|
||||||
|
/* Time and date */ |
||||||
|
|
||||||
|
#time-date { |
||||||
|
position: absolute; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
background-color: transparent; |
||||||
|
transition: var(--animation-duration); |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
#time-date:hover, #time-date:focus { |
||||||
|
filter: drop-shadow(2px 2px 6px black); |
||||||
|
/*animation-name: shake;*/ |
||||||
|
animation-duration: 1s; |
||||||
|
animation-direction: normal; |
||||||
|
animation-iteration-count: 1; |
||||||
|
animation-timing-function: ease-in-out; |
||||||
|
} |
||||||
|
#time-date:hover *, #time-date:focus * { |
||||||
|
/*color: var(--cyan);*/ |
||||||
|
} |
||||||
|
#time-date.hide { |
||||||
|
display: flex; |
||||||
|
max-height: initial; |
||||||
|
max-width: initial; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#time-label { |
||||||
|
font-size: 4em; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Buttons */ |
||||||
|
button { |
||||||
|
/*color: var(--fg0);*/ |
||||||
|
border: 0; |
||||||
|
/*font-size: inherit;*/ |
||||||
|
/*font-family: inherit;*/ |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
background: var(--purple); |
||||||
|
border: 0; |
||||||
|
padding: 0.5em; |
||||||
|
font-size: inherit; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 2px; |
||||||
|
transition: var(--animation-duration); |
||||||
|
} |
||||||
|
|
||||||
|
.button-group { |
||||||
|
background: var(--purple); |
||||||
|
border: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: inherit; |
||||||
|
border-radius: 2px; |
||||||
|
transition: var(--animation-duration); |
||||||
|
} |
||||||
|
.button-group > * { |
||||||
|
background-color: transparent; |
||||||
|
cursor: pointer; |
||||||
|
padding: 0.5em 0.8em; |
||||||
|
transition: inherit; |
||||||
|
} |
||||||
|
.button-group > *:hover, .button-group > *:focus { |
||||||
|
background-color: var(--orange); |
||||||
|
} |
||||||
|
|
||||||
|
/* Auth message */ |
||||||
|
|
||||||
|
#auth-message { |
||||||
|
position: absolute; |
||||||
|
font-size: 4em; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
#auth-message.hide { |
||||||
|
display: block; |
||||||
|
max-width: initial; |
||||||
|
max-height: initial; |
||||||
|
} |
||||||
|
|
||||||
|
/* Bottom bar */ |
||||||
|
#bottom-bar { |
||||||
|
background-color: #585c7480; |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
width: -webkit-fill-available; |
||||||
|
min-height: 2em; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
padding: 0.5em; |
||||||
|
} |
||||||
|
#bottom-bar * { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
#bottom-bar .button { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0.5em 0.75em; |
||||||
|
} |
||||||
|
|
||||||
|
#sessions-button { |
||||||
|
background-color: var(--bg3); |
||||||
|
} |
||||||
|
#sessions-button > span { |
||||||
|
margin-left: 0.3em; |
||||||
|
} |
||||||
|
|
||||||
|
#sessions-button:hover, #sessions-button:focus { |
||||||
|
background-color: var(--purple); |
||||||
|
} |
||||||
|
|
||||||
|
#sessions-dropdown { |
||||||
|
max-height: 25vh; |
||||||
|
} |
||||||
|
|
||||||
|
#bottom-right { |
||||||
|
background-color: var(--bg3); |
||||||
|
margin-left: auto; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
/* Top bar */ |
||||||
|
#top-bar { |
||||||
|
background-color: transparent; |
||||||
|
width: -webkit-fill-available; |
||||||
|
min-height: 2em; |
||||||
|
padding: 1em; |
||||||
|
padding-bottom: 0; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
transition: var(--animation-duration); |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#bottom-bar.hide, #top-bar.hide { |
||||||
|
min-height: 0; |
||||||
|
max-height: 0; |
||||||
|
max-width: initial; |
||||||
|
display: flex; |
||||||
|
overflow: hidden; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Panel */ |
||||||
|
|
||||||
|
#panel-button { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
margin: 1em; |
||||||
|
|
||||||
|
background-color: var(--bg1); |
||||||
|
} |
||||||
|
#panel-button:hover, #panel-button:focus { |
||||||
|
background-color: var(--green); |
||||||
|
} |
||||||
|
|
||||||
|
.panel { |
||||||
|
position: fixed; |
||||||
|
width: 350px; |
||||||
|
height: -webkit-fill-available; |
||||||
|
background: var(--bg2); |
||||||
|
right: 0; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-content: flex-start; |
||||||
|
padding: 1.5em; |
||||||
|
|
||||||
|
overflow-y: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.panel.hide { |
||||||
|
transform: translateX(100%); |
||||||
|
display: flex; |
||||||
|
visibility: hidden; |
||||||
|
opacity: 100%; |
||||||
|
max-width: 100vw; |
||||||
|
max-height: 100vh; |
||||||
|
} |
||||||
|
|
||||||
|
.panel .image { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 48%; |
||||||
|
background-color: transparent; |
||||||
|
margin-top: 1em; |
||||||
|
padding: 0; |
||||||
|
cursor: pointer; |
||||||
|
border-color: var(--fg0); |
||||||
|
border-width: 1px; |
||||||
|
border-style: solid; |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.panel .image > img { |
||||||
|
background-color: var(--alt1); |
||||||
|
width: -webkit-fill-available; |
||||||
|
max-height: 200px; |
||||||
|
object-fit: cover; |
||||||
|
filter: brightness(0.8); |
||||||
|
} |
||||||
|
.panel .image:hover, .panel .image:focus { |
||||||
|
filter: drop-shadow(2px 2px 6px black); |
||||||
|
} |
||||||
|
.panel .image:hover > img, .panel .image:focus > img { |
||||||
|
filter: brightness(1); |
||||||
|
} |
||||||
|
|
||||||
|
.panel h3 { |
||||||
|
width: 80%; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
font-size: 1.2em; |
||||||
|
align-self: center; |
||||||
|
} |
||||||
|
|
||||||
|
#close-panel-button { |
||||||
|
background-color: var(--alt1); |
||||||
|
height: fit-content; |
||||||
|
align-self: center; |
||||||
|
} |
||||||
|
#close-panel-button:hover, #close-panel-button:focus { |
||||||
|
background-color: var(--red); |
||||||
|
} |
||||||
|
|
||||||
|
/* Dropdown */ |
||||||
|
.dropdown { |
||||||
|
position: absolute; |
||||||
|
background-color: var(--bg2); |
||||||
|
min-width: 8em; |
||||||
|
max-height: 60vh; |
||||||
|
overflow-y: auto; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
transition: var(--animation-duration); |
||||||
|
} |
||||||
|
.dropdown button { |
||||||
|
background-color: transparent; |
||||||
|
color: var(--fg0); |
||||||
|
padding: 0.8em; |
||||||
|
width: -webkit-fill-available; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.dropdown button:hover, .dropdown button:focus { |
||||||
|
background-color: var(--purple); |
||||||
|
} |
||||||
|
|
||||||
|
.dropdown li { |
||||||
|
text-decoration: none; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.dropdown.hide { |
||||||
|
visibility: hidden; |
||||||
|
opacity: 100%; |
||||||
|
display: block; |
||||||
|
max-height: 0 !important; |
||||||
|
overflow-y: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
/* Animations */ |
||||||
|
|
||||||
|
@keyframes shake { |
||||||
|
0% { |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
25% { |
||||||
|
transform: rotateZ(10deg); |
||||||
|
} |
||||||
|
75% { |
||||||
|
transform: rotateZ(-10deg); |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
<!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"> |
||||||
|
<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"> |
||||||
|
|
||||||
|
<script src="../_vendor/js/mock.js"></script> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div id="background"> |
||||||
|
<div id="bg-cover"></div> |
||||||
|
<img src="./assets/dracula.png" alt=""> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="cover" class="hide"> |
||||||
|
<div id="message"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="screen"> |
||||||
|
|
||||||
|
<div id="login-wrapper"> |
||||||
|
|
||||||
|
<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> |
||||||
|
</button> |
||||||
|
|
||||||
|
<div id="auth-message" class="hide"></div> |
||||||
|
|
||||||
|
<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"> |
||||||
|
|
||||||
|
<div id="users-button-wrapper"> |
||||||
|
<button id="users-button" class="button hide" type="button"> |
||||||
|
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||||
|
</button> |
||||||
|
<div id="users-dropdown"> |
||||||
|
<ul class="dropdown hide"> |
||||||
|
<li><button type="button">Vlad Tepes</button></li> |
||||||
|
<li><button type="button">Belmont</button></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="pass-wrapper"> |
||||||
|
<input id="input-password" name="password" type="password" autocomplete="off" autofocus="true" placeholder="Enter your password"> |
||||||
|
<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> |
||||||
|
</button> |
||||||
|
<ul id="sessions-dropdown" class="dropdown hide"> |
||||||
|
<li><button>Awesome</button></li> |
||||||
|
<li><button>Ubuntu</button></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="bottom-right" class="button-group"> |
||||||
|
<button id="shutdown-button"> |
||||||
|
<span class="mdi mdi-power"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button id="restart-button"> |
||||||
|
<span class="mdi mdi-restart"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button id="suspend-button"> |
||||||
|
<span class="mdi mdi-power-sleep"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button id="hibernate-button"> |
||||||
|
<span class="mdi mdi-power-cycle"></span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<button id="panel-button" class="button"> |
||||||
|
<span class="mdi mdi-menu mdi-24px"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<div id="sidebar" class="panel hide"> |
||||||
|
<h3>Background selector</h3> |
||||||
|
<button id="close-panel-button" class="button"> |
||||||
|
<span class="mdi mdi-close-thick mdi-24px"></span> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button class="image" tabindex="0"> |
||||||
|
<img src="./assets/dracula.png" alt=""> |
||||||
|
</button> |
||||||
|
<button class="image" tabindex="0"> |
||||||
|
<img src="./assets/dracula.png" alt=""> |
||||||
|
</button> |
||||||
|
<button class="image" tabindex="0"> |
||||||
|
<img src="./assets/dracula.png" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="js/debug.js"></script> |
||||||
|
<script src="js/accounts.js"></script> |
||||||
|
<script src="js/sessions.js"></script> |
||||||
|
<script src="js/authenticate.js"></script> |
||||||
|
<script src="js/sidebar.js"></script> |
||||||
|
<script src="js/index.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
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() |
||||||
|
} |
||||||
|
|
||||||
|
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") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_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 = "" |
||||||
|
|
||||||
|
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) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_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 |
||||||
|
|
||||||
|
this._localStorage.setItem("defaultUser", this._defaultUser.username) |
||||||
|
} |
||||||
|
|
||||||
|
_init() { |
||||||
|
this._usersObject = lightdm.users |
||||||
|
this._updateOnStartup() |
||||||
|
this._setAccountList() |
||||||
|
this._setButton() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
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() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
_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)) |
||||||
|
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() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,155 @@ |
|||||||
|
class Debug { |
||||||
|
constructor() { |
||||||
|
this._debugPass = "tepes" |
||||||
|
this._init() |
||||||
|
} |
||||||
|
|
||||||
|
_init() { |
||||||
|
console.log("DEBUG") |
||||||
|
|
||||||
|
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.lightdm) { |
||||||
|
window.lightdm = {} |
||||||
|
} |
||||||
|
|
||||||
|
var local_lightdm = { |
||||||
|
default_password: "tepes", |
||||||
|
is_authenticated: false, |
||||||
|
authentication_user: null, |
||||||
|
default_session: "awesome", |
||||||
|
can_suspend: true, |
||||||
|
can_hibernate: true, |
||||||
|
can_shutdown: true, |
||||||
|
can_restart: true, |
||||||
|
can_access_battery: true, |
||||||
|
can_access_brightness: true, |
||||||
|
sessions: [ |
||||||
|
{ |
||||||
|
name: "awesome wm", |
||||||
|
key: "awesome" |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "Ubuntu", |
||||||
|
key: "ubuntu" |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "i3wm", |
||||||
|
key: "i3" |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "bspwm", |
||||||
|
key: "bspwm" |
||||||
|
} |
||||||
|
], |
||||||
|
users: [ |
||||||
|
{ |
||||||
|
display_name: "Vlad Tepes", |
||||||
|
username: "dracula", |
||||||
|
image: "" |
||||||
|
}, |
||||||
|
{ |
||||||
|
display_name: "Trevor Belmont", |
||||||
|
username: "treffy", |
||||||
|
image: "" |
||||||
|
}, |
||||||
|
{ |
||||||
|
display_name: "Sypha Belnades", |
||||||
|
username: "speaker", |
||||||
|
image: "" |
||||||
|
} |
||||||
|
], |
||||||
|
languages: [ |
||||||
|
{ |
||||||
|
name: 'American English', |
||||||
|
code: 'en_US.utf8' |
||||||
|
} |
||||||
|
], |
||||||
|
language: 'American English', |
||||||
|
authenticate: username => { |
||||||
|
console.log(`Starting authentication with user: "${username}"`) |
||||||
|
}, |
||||||
|
cancel_authentication: () => { |
||||||
|
console.log(`Authentication cancelled`) |
||||||
|
}, |
||||||
|
respond: async (password) => { |
||||||
|
console.log(`Password provided: "${password}"`) |
||||||
|
if (password == this._debugPass) { |
||||||
|
lightdm.is_authenticated = true |
||||||
|
} else { |
||||||
|
await wait(2000) |
||||||
|
} |
||||||
|
authentication_done() |
||||||
|
}, |
||||||
|
start_session: session => { |
||||||
|
alert(`Logged with session: "${session}"`) |
||||||
|
location.reload() |
||||||
|
}, |
||||||
|
shutdown: () => { |
||||||
|
console.log("System is shutting down...") |
||||||
|
setTimeout(() => location.reload(), 2000) |
||||||
|
}, |
||||||
|
restart: () => { |
||||||
|
console.log("System is rebooting...") |
||||||
|
setTimeout(() => location.reload(), 2000) |
||||||
|
}, |
||||||
|
hibernate: () => { |
||||||
|
console.log("System is hibernating") |
||||||
|
setTimeout(() => location.reload(), 2000) |
||||||
|
}, |
||||||
|
suspend: () => { |
||||||
|
console.log("System is suspending") |
||||||
|
setTimeout(() => location.reload(), 2000) |
||||||
|
}, |
||||||
|
batteryData: { |
||||||
|
name: "Battery 0", |
||||||
|
level: 85, |
||||||
|
state: "Discharging" |
||||||
|
}, |
||||||
|
batteryUpdate: () => { |
||||||
|
console.log("Battery updated") |
||||||
|
}, |
||||||
|
brightness: 50, |
||||||
|
brightnessSet: (quantity) => { |
||||||
|
lightdm.brightness = quantity |
||||||
|
}, |
||||||
|
brightnessIncrease: (quantity) => { |
||||||
|
lightdm.brightness += quantity |
||||||
|
if (lightdm.brightness > 100) lightdm.brightness = 100 |
||||||
|
}, |
||||||
|
brightnessDecrease: (quantity) => { |
||||||
|
lightdm.brightness -= quantity |
||||||
|
if (lightdm.brightness < 0) lightdm.brightness = 0 |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (lightdm.mock == undefined) { |
||||||
|
window.lightdm = {} |
||||||
|
Object.assign(window.lightdm, local_lightdm) |
||||||
|
} else { |
||||||
|
Object.keys(local_lightdm).forEach((key) => { |
||||||
|
var realKey = `_${key}` |
||||||
|
lightdm[realKey] = local_lightdm[key] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
|
||||||
|
function getArrayForm(inputs) { |
||||||
|
if (!inputs) return false |
||||||
|
var data = {} |
||||||
|
inputs.forEach((x) => { |
||||||
|
data[x.name] = x.value |
||||||
|
}) |
||||||
|
return data |
||||||
|
} |
||||||
|
|
||||||
|
async function wait(ms) { |
||||||
|
return new Promise( resolve => { |
||||||
|
setTimeout(() => { |
||||||
|
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()) |
||||||
|
|
||||||
|
accounts = new Accounts() |
||||||
|
|
||||||
|
sessions = new Sessions() |
||||||
|
|
||||||
|
authenticate = new Authenticate() |
||||||
|
|
||||||
|
sidebar = new Sidebar() |
||||||
|
|
||||||
|
//power = new Power()
|
||||||
|
|
||||||
|
//battery = new Battery()
|
||||||
|
|
||||||
|
//brightness = new Brightness()
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener("GreeterReady", initGreeter) |
||||||
|
|
||||||
|
//const panel_button = document.querySelector("#panel-button")
|
||||||
|
//const close_panel_button = document.querySelector("#close-panel-button")
|
||||||
|
const panel = document.querySelector(".panel") |
||||||
|
const screen = document.querySelector("#screen") |
||||||
|
|
||||||
|
const sessions_button = document.querySelector("#sessions-button") |
||||||
|
const sessions_dropdown = document.querySelector("#sessions-dropdown") |
||||||
|
|
||||||
|
const time_date_button = document.querySelector("#time-date") |
||||||
|
const pass_form = document.querySelector("#pass-form") |
||||||
|
|
||||||
|
//screen.addEventListener("click", (ev) => {
|
||||||
|
//if (ev.target == panel_button || ev.target.parentElement == panel_button) {
|
||||||
|
//panel.classList.toggle("hide")
|
||||||
|
//panel_button.blur()
|
||||||
|
//wait(100).then(() => {close_panel_button.focus()})
|
||||||
|
//} else
|
||||||
|
//if (ev.target != panel && ev.target.closest(".panel") == null) {
|
||||||
|
//panel.classList.add("hide")
|
||||||
|
//}
|
||||||
|
|
||||||
|
//if (ev.target == close_panel_button || ev.target.parentElement == close_panel_button) {
|
||||||
|
//panel.classList.toggle("hide")
|
||||||
|
//panel_button.focus()
|
||||||
|
//}
|
||||||
|
|
||||||
|
//if (ev.target == sessions_button || ev.target.parentElement == sessions_button) {
|
||||||
|
//sessions_dropdown.classList.toggle("hide")
|
||||||
|
//} else
|
||||||
|
//if (ev.target != sessions_dropdown && ev.target.closest(".dropdown") == null) {
|
||||||
|
//sessions_dropdown.classList.add("hide")
|
||||||
|
//}
|
||||||
|
//})
|
||||||
|
|
||||||
|
async function toggleTimeDate() { |
||||||
|
time_date_button.blur() |
||||||
|
pass_form.blur() |
||||||
|
if (time_date_button.classList.contains("hide")) { |
||||||
|
pass_form.classList.add("hide") |
||||||
|
await wait(300) |
||||||
|
time_date_button.classList.remove("hide") |
||||||
|
await wait(100) |
||||||
|
time_date_button.focus() |
||||||
|
} else { |
||||||
|
time_date_button.classList.add("hide") |
||||||
|
await wait(300) |
||||||
|
pass_form.classList.remove("hide") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
time_date_button.addEventListener("click", async (ev) => { |
||||||
|
toggleTimeDate() |
||||||
|
}) |
||||||
|
|
||||||
|
pass_form.addEventListener("keydown", (ev) => { |
||||||
|
if (ev.keyCode == 27) { |
||||||
|
toggleTimeDate() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
//sessions_dropdown.addEventListener("keydown", (ev) => {
|
||||||
|
//if (ev.keyCode == 27) {
|
||||||
|
//sessions_dropdown.classList.toggle("hide")
|
||||||
|
//sessions_button.focus()
|
||||||
|
//}
|
||||||
|
//})
|
||||||
|
|
||||||
|
//panel.addEventListener("keydown", (ev) => {
|
||||||
|
//if (ev.keyCode == 27) {
|
||||||
|
//panel.classList.toggle("hide")
|
||||||
|
//panel_button.focus()
|
||||||
|
//}
|
||||||
|
//})
|
||||||
|
|
||||||
|
//const time_label = document.querySelector("#time-label")
|
||||||
|
//const date_label = document.querySelector("#date-label")
|
||||||
|
|
||||||
|
//function updateTimeDate() {
|
||||||
|
//time_label.innerText = theme_utils.get_current_localized_time()
|
||||||
|
//date_label.innerText = theme_utils.get_current_localized_date()
|
||||||
|
//}
|
||||||
|
|
||||||
|
//setInterval(updateTimeDate, 1000)
|
||||||
@ -0,0 +1,91 @@ |
|||||||
|
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() |
||||||
|
} |
||||||
|
|
||||||
|
getDefaultSession() { |
||||||
|
return this._defaultSession.key |
||||||
|
} |
||||||
|
|
||||||
|
_setSessionDefault() { |
||||||
|
this._sessionLabel.innerText = this._defaultSession.name |
||||||
|
} |
||||||
|
|
||||||
|
_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() |
||||||
|
} |
||||||
|
|
||||||
|
_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() |
||||||
|
}) |
||||||
|
|
||||||
|
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() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
_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() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
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() |
||||||
|
} |
||||||
|
|
||||||
|
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 |
||||||
|
} |
||||||
|
|
||||||
|
toggleSidebar() { |
||||||
|
if (this._visible) { |
||||||
|
this.hideSidebar() |
||||||
|
} else { |
||||||
|
this.showSidebar() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_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 |
||||||
|
} |
||||||
|
|
||||||
|
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 |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
_init() { |
||||||
|
this._setSidebar() |
||||||
|
this._setKeydown() |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue