Browse Source

Added background selector, and power buttons

sisyphus
JezerM 4 years ago
parent
commit
23894efcd6
No known key found for this signature in database
GPG Key ID: 66BBC5D01388C6B5
  1. BIN
      themes/dracula/assets/window-blurred.png
  2. 29
      themes/dracula/css/style.css
  3. 32
      themes/dracula/index.html
  4. 70
      themes/dracula/js/backgrounds.js
  5. 94
      themes/dracula/js/index.js
  6. 83
      themes/dracula/js/power.js
  7. 56
      themes/dracula/js/time-date.js

BIN
themes/dracula/assets/window-blurred.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

29
themes/dracula/css/style.css vendored

@ -38,6 +38,8 @@ html {
width: 100vw; width: 100vw;
background-color: black; background-color: black;
font-size: 16px; font-size: 16px;
text-rendering: optimizeSpeed;
image-rendering: pixelated;
} }
html * { html * {
font-family: system-ui; font-family: system-ui;
@ -137,11 +139,10 @@ body {
width: 30em; width: 30em;
box-sizing: border-box; box-sizing: border-box;
transition: var(--animation-duration); transition: var(--animation-duration);
/*display: flex;*/
/*justify-content: center;*/
/*align-items: flex-start;*/
} }
/*#login-wrapper:hover, #login-wrapper:focus, #login-wrapper:focus-within {*/
/*filter: drop-shadow(2px 4px 6px black);*/
/*}*/
body.success #login-wrapper { body.success #login-wrapper {
background-color: #79d28f; background-color: #79d28f;
} }
@ -448,10 +449,20 @@ button {
max-height: 100vh; max-height: 100vh;
} }
.panel .image { #background-selector {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: -webkit-fill-available;
height: auto;
}
#background-selector .image {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 48%; width: 48%;
max-height: 100px;
background-color: transparent; background-color: transparent;
margin-top: 1em; margin-top: 1em;
padding: 0; padding: 0;
@ -462,17 +473,17 @@ button {
border-radius: 0; border-radius: 0;
} }
.panel .image > img { #background-selector .image > img {
background-color: var(--alt1); background-color: var(--alt1);
width: -webkit-fill-available; width: -webkit-fill-available;
max-height: 200px; height: 100%;
object-fit: cover; object-fit: cover;
filter: brightness(0.8); filter: brightness(0.8);
} }
.panel .image:hover, .panel .image:focus { #background-selector .image:hover, #background-selector .image:focus {
filter: drop-shadow(2px 2px 6px black); filter: drop-shadow(2px 2px 6px black);
} }
.panel .image:hover > img, .panel .image:focus > img { #background-selector .image:hover > img, #background-selector .image:focus > img {
filter: brightness(1); filter: brightness(1);
} }

32
themes/dracula/index.html vendored

@ -81,19 +81,19 @@
</div> </div>
<div id="bottom-right" class="button-group"> <div id="bottom-right" class="button-group">
<button id="shutdown-button"> <button id="shutdown-button" class="hide">
<span class="mdi mdi-power"></span> <span class="mdi mdi-power"></span>
</button> </button>
<button id="restart-button"> <button id="restart-button" class="hide">
<span class="mdi mdi-restart"></span> <span class="mdi mdi-restart"></span>
</button> </button>
<button id="suspend-button"> <button id="suspend-button" class="hide">
<span class="mdi mdi-power-sleep"></span> <span class="mdi mdi-power-sleep"></span>
</button> </button>
<button id="hibernate-button"> <button id="hibernate-button" class="hide">
<span class="mdi mdi-power-cycle"></span> <span class="mdi mdi-power-cycle"></span>
</button> </button>
</div> </div>
@ -112,17 +112,18 @@
<span class="mdi mdi-close-thick mdi-24px"></span> <span class="mdi mdi-close-thick mdi-24px"></span>
</button> </button>
<button class="image" tabindex="0"> <div id="background-selector">
<img src="./assets/dracula.png" alt=""> <button class="image" tabindex="0">
</button> <img src="./assets/dracula.png" alt="">
<button class="image" tabindex="0"> </button>
<img src="./assets/dracula.png" alt=""> <button class="image" tabindex="0">
</button> <img src="./assets/dracula.png" alt="">
<button class="image" tabindex="0"> </button>
<img src="./assets/dracula.png" alt=""> <button class="image" tabindex="0">
</button> <img src="./assets/dracula.png" alt="">
</button>
</div>
</div> </div>
</div> </div>
<script src="js/debug.js"></script> <script src="js/debug.js"></script>
@ -130,6 +131,9 @@
<script src="js/sessions.js"></script> <script src="js/sessions.js"></script>
<script src="js/authenticate.js"></script> <script src="js/authenticate.js"></script>
<script src="js/sidebar.js"></script> <script src="js/sidebar.js"></script>
<script src="js/backgrounds.js"></script>
<script src="js/time-date.js"></script>
<script src="js/power.js"></script>
<script src="js/index.js"></script> <script src="js/index.js"></script>
</body> </body>
</html> </html>

70
themes/dracula/js/backgrounds.js vendored

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

94
themes/dracula/js/index.js vendored

@ -35,7 +35,12 @@ async function initGreeter() {
sidebar = new Sidebar() sidebar = new Sidebar()
//power = new Power() time_date = new TimeDate()
backgrounds = new Backgrounds()
await backgrounds._init()
power = new Power()
//battery = new Battery() //battery = new Battery()
@ -43,88 +48,9 @@ async function initGreeter() {
} }
window.addEventListener("GreeterReady", initGreeter) if (window._ready_event === undefined) {
_ready_event = new Event("GreeterReady")
//const panel_button = document.querySelector("#panel-button") window.dispatchEvent(_ready_event)
//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) => { window.addEventListener("GreeterReady", initGreeter)
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)

83
themes/dracula/js/power.js vendored

@ -0,0 +1,83 @@
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()
}
_show_message(text) {
this._covermsg.innerHTML = text
this._cover.classList.remove("hide")
}
async _do_shutdown() {
this._show_message("Shutting down")
await wait(1000)
lightdm.shutdown()
}
async _do_restart() {
this._show_message("Restarting")
await wait(1000)
lightdm.restart()
}
async _do_hibernate() {
this._show_message("Hibernating")
await wait(1000)
lightdm.hibernate()
}
async _do_suspend() {
this._show_message("Suspending")
await wait(1000)
lightdm.suspend()
}
_setShutdown() {
if (!lightdm.can_shutdown) return
this._shutdown.addEventListener("click", () => {
this._do_shutdown()
})
this._shutdown.classList.remove("hide")
}
_setRestart() {
if (!lightdm.can_restart) return
this._restart.addEventListener("click", () => {
this._do_restart()
})
this._restart.classList.remove("hide")
}
_setHibernate() {
if (!lightdm.can_hibernate) return
this._hibernate.addEventListener("click", () => {
this._do_hibernate()
})
this._hibernate.classList.remove("hide")
}
_setSuspend() {
if (!lightdm.can_suspend) return
this._suspend.addEventListener("click", () => {
this._do_suspend()
})
this._suspend.classList.remove("hide")
}
_setCover() {
this._cover.addEventListener("click", () => {
this._cover.classList.add("hide")
})
}
_setButtons() {
this._setShutdown()
this._setRestart()
this._setHibernate()
this._setSuspend()
this._setCover()
}
_init() {
this._setButtons()
}
}

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

@ -0,0 +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()
}
_updateTimeDate() {
let date = theme_utils.get_current_localized_date()
let time = theme_utils.get_current_localized_time()
this._dateLabel.innerText = date
this._timeLabel.innerText = time
}
_setTimer() {
this._updateTimeDate()
setInterval(() => {
this._updateTimeDate()
}, 1000)
}
_setButtons() {
this._timeDateButton.addEventListener("click", (ev) => {
this.toggleTimeDate()
})
this._passForm.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
this.toggleTimeDate()
}
})
}
async toggleTimeDate() {
this._timeDateButton.blur()
this._passForm.blur()
if (this._timeDateButton.classList.contains("hide")) {
this._passForm.classList.add("hide")
await wait(300)
this._timeDateButton.classList.remove("hide")
await wait(100)
this._timeDateButton.focus()
} else {
this._timeDateButton.classList.add("hide")
await wait(300)
this._passForm.classList.remove("hide")
}
}
_init() {
this._setTimer()
this._setButtons()
}
}
Loading…
Cancel
Save