packages
/
lightdm-webkit2-greeter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added Layouts support to gruvbox theme

sisyphus
JezerM 3 years ago
parent
dbb980e56e
commit
b80fa11caf
No known key found for this signature in database
GPG Key ID: 66BBC5D01388C6B5
5 changed files with 121 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      themes/gruvbox/css/style.css
  2. 19
      themes/gruvbox/index.html
  3. 4
      themes/gruvbox/js/index.js
  4. 77
      themes/gruvbox/js/layouts.js
  5. 3
      themes/gruvbox/js/power.js

24
themes/gruvbox/css/style.css vendored
Unescape View File

@ -62,7 +62,7 @@ html {
font-family: system-ui; font-family: system-ui;
font-size: var(--base-font-size); font-size: var(--base-font-size);
text-rendering: optimizeSpeed; text-rendering: optimizeSpeed;
image-rendering: pixelated; /*image-rendering: pixelated;*/
} }
html > * { html > * {
@ -128,6 +128,7 @@ button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer;
background-color: #282828aa; background-color: #282828aa;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
@ -138,6 +139,9 @@ button {
font-weight: bold; font-weight: bold;
cursor: default; cursor: default;
} }
#cover:focus {
outline: 0 !important;
}
#screen { #screen {
width: 100%; width: 100%;
@ -286,6 +290,7 @@ input:focus, input:focus-visible {
} }
.label-bar > * { .label-bar > * {
background-color: transparent;
padding: 8px; padding: 8px;
transition: var(--animation-duration); transition: var(--animation-duration);
border-radius: 5px; border-radius: 5px;
@ -297,11 +302,25 @@ input:focus, input:focus-visible {
display: none; display: none;
} }
.label-bar > *:hover { .label-bar > *:hover, .label-bar > *:focus-within {
background: #3c3836aa; background: #3c3836aa;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
#layouts-list {
padding: 0;
}
#layouts-button {
all: unset;
cursor: pointer;
padding: 8px;
}
#layouts-dropdown {
position: absolute;
margin: 2px;
}
#system-status { #system-status {
top: 0; top: 0;
right: 0; right: 0;
@ -314,6 +333,7 @@ input:focus, input:focus-visible {
#system-power > * { #system-power > * {
background: transparent; background: transparent;
font-size: 2em; font-size: 2em;
cursor: pointer;
} }
#system-power > *:hover, #system-power > *:focus { #system-power > *:hover, #system-power > *:focus {
background: #3c3836aa; background: #3c3836aa;

19
themes/gruvbox/index.html vendored
Unescape View File

@ -7,15 +7,15 @@
<link rel="stylesheet" href="css/style.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"> <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> <!--<script src="../_vendor/js/mock.js"></script>-->
<title>Gruvbox theme</title> <title>Gruvbox theme</title>
</head> </head>
<body> <body>
<div id="background"></div> <div id="background"></div>
<div id="cover" class="hide"> <button id="cover" class="hide">
<div id="message"></div> <div id="message"></div>
</div> </button>
<div id="screen"> <div id="screen">
<div id="login-form"> <div id="login-form">
<div id="login-form-box"> <div id="login-form-box">
@ -49,8 +49,8 @@
<ul id="sessions-dropdown" class="dropdown hide"> <ul id="sessions-dropdown" class="dropdown hide">
<li><button>Awesome</button></li> <li><button>Awesome</button></li>
<li><button>Ubuntu</button></li> <li><button>Ubuntu</button></li>
</div>
</ul> </ul>
</div>
<div id="users-list"> <div id="users-list">
<button id="users-button" class="button"> <button id="users-button" class="button">
<span class="mdi mdi-chevron-down mdi-24px"></span> <span class="mdi mdi-chevron-down mdi-24px"></span>
@ -73,6 +73,16 @@
</div> </div>
<div id="system-status" class="label-bar"> <div id="system-status" class="label-bar">
<div id="layouts-list">
<button id="layouts-button" class="">
LATAM
</button>
<ul id="layouts-dropdown" class="dropdown hide">
<li><button>Latam</button></li>
<li><button>English</button></li>
</ul>
</div>
<div id="brightness-label"></div> <div id="brightness-label"></div>
<div id="battery-label"></div> <div id="battery-label"></div>
</div> </div>
@ -97,6 +107,7 @@
<script src="js/accounts.js"></script> <script src="js/accounts.js"></script>
<script src="js/sessions.js"></script> <script src="js/sessions.js"></script>
<script src="js/time-date.js"></script> <script src="js/time-date.js"></script>
<script src="js/layouts.js"></script>
<script src="js/power.js"></script> <script src="js/power.js"></script>
<script src="js/battery.js"></script> <script src="js/battery.js"></script>
<script src="js/brightness.js"></script> <script src="js/brightness.js"></script>

4
themes/gruvbox/js/index.js vendored
Unescape View File

@ -21,7 +21,7 @@ async function wait(ms) {
async function initGreeter() { async function initGreeter() {
if (greeter_config.greeter.debug_mode) { if (greeter_config.greeter.debug_mode) {
debug = new Debug() //debug = new Debug()
} }
lightdm.authentication_complete?.connect(() => authentication_done()) lightdm.authentication_complete?.connect(() => authentication_done())
@ -38,6 +38,8 @@ async function initGreeter() {
time_date = new TimeDate() time_date = new TimeDate()
layouts = new Layouts()
power = new Power() power = new Power()
battery = new Battery() battery = new Battery()

77
themes/gruvbox/js/layouts.js vendored
Unescape View File

@ -0,0 +1,77 @@
class Layouts {
constructor() {
this._layoutList = document.querySelector("#layouts-list")
this._dropdown = document.querySelector("#layouts-dropdown")
this._button = document.querySelector("#layouts-button")
this._layouts = []
this.layout = {}
this._init()
}
_setDefault() {
let name = this.layout.name
let description = this.layout.description
let short = this.layout.short_description
this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "")
//this._button.name = description
}
_setLayoutList() {
let dropdown = this._dropdown
dropdown.innerHTML = ""
for (let i = 0; i < this._layouts.length; i++) {
let name = this._layouts[i].name
let description = this._layouts[i].description
let short = this._layouts[i].short_description
let li = document.createElement("li")
let button = document.createElement("button")
button.innerHTML = name + (short ? ` (${short})` : "")
button.name = description
button.addEventListener("click", () => {
this.layout = this._layouts[i]
this._setDefault()
lightdm.layout = this.layout
})
li.appendChild(button)
dropdown.appendChild(li)
}
}
_setKeydown() {
let dropdown = this._dropdown
dropdown.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) {
dropdown.classList.add("hide")
this._button.focus()
}
})
}
_setButton() {
let dropdown = this._dropdown
document.querySelector("#screen").addEventListener("click", (ev) => {
if (ev.target == this._button || ev.target.parentElement == this._button) {
dropdown.classList.toggle("hide")
} else
if (ev.target != dropdown && ev.target.closest(".dropdown") == null) {
dropdown.classList.add("hide")
}
})
document.querySelector("#screen").addEventListener("focusin", (ev) => {
if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) {
dropdown.classList.add("hide")
}
})
}
_init() {
this.layout = lightdm.layout
this._layouts = greeter_config.layouts
this._setDefault()
this._setLayoutList()
this._setButton()
this._setKeydown()
}
}

3
themes/gruvbox/js/power.js vendored
Unescape View File

@ -12,6 +12,9 @@ class Power {
_show_message(text) { _show_message(text) {
this._covermsg.innerHTML = text this._covermsg.innerHTML = text
this._cover.classList.remove("hide") this._cover.classList.remove("hide")
wait(500).then(() => {
this._cover.focus()
})
} }
async _do_shutdown() { async _do_shutdown() {

Write Preview
Loading…
Cancel
Save