From 8619d1ee64f8de4f92a0a9bed362022e8a53c892 Mon Sep 17 00:00:00 2001 From: Jakub Nowak Date: Sun, 9 Feb 2025 20:07:38 +0800 Subject: [PATCH] User and session selection rotaries --- css/styles.css | 120 +++++++++++++++++++++++++++++++++++++++++++ index.html | 32 ++++++++++++ js/session-select.js | 37 +++++++++++++ js/user-select.js | 37 +++++++++++++ 4 files changed, 226 insertions(+) create mode 100644 js/session-select.js create mode 100644 js/user-select.js diff --git a/css/styles.css b/css/styles.css index 0fcbc5f..b7dddc7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -92,6 +92,18 @@ body { transform: translate(-200px, 200px); } +.bottom-middle { + position: absolute; + left: 50%; + transform: translateX(-50%); + transition: transform 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.bottom-middle.hidden { + transform: translate(-50%, 300px); +} + + .bottom-right { position: absolute; bottom: 0; @@ -123,6 +135,10 @@ body { top: var(--bleed-extra); } +.bottom-bleed-extra { + bottom: var(--bleed-extra); +} + .center-text { text-align: center; } @@ -211,3 +227,107 @@ body { #battery-icon { background: url("../assets/svg/battery-mid.svg"); } + +.input-container { + display: flex; + background: white; + border-radius: 1rem; + background-color: transparent; + + backdrop-filter: blur( 2px ); + -webkit-backdrop-filter: blur( 2px ); + box-shadow: + var(--tl-shadow-primary-concave), + var(--br-shadow-primary-concave); + padding: 0.3rem; + gap: 0.3rem; +} + +.input-container input { + border-radius: 0.8rem; + background-color: transparent; + + backdrop-filter: blur( 2px ); + -webkit-backdrop-filter: blur( 2px ); + box-shadow: + var(--tl-shadow-primary-convex), + var(--br-shadow-primary-convex), + 0px 0px 100px color-mix(in srgb, var(--primary) 0%, transparent), + 0px 0px 100px color-mix(in srgb, var(--secondary) 0%, transparent); + width: 100%; + flex-basis: 100%; + padding: 1rem; + border: none; + border: 1px solid transparent; + color: white; + transition: all 0.2s ease-in-out; +} + +.input-container input:focus { + border: 1px solid var(--primary-dim); + outline: none; + box-shadow: + inset 0px 0px 10px color-mix(in srgb, var(--primary) 20%, transparent), + inset 0px 0px 10px color-mix(in srgb, var(--secondary) 20%, transparent), + 0px 0px 100px color-mix(in srgb, var(--secondary) 20%, transparent), + 0px 0px 100px color-mix(in srgb, var(--primary) 20%, transparent); +} + +@media (max-width: 500px) { + .input-container { + flex-direction: column; + } + + .input-container input { + border-radius: 0.8rem; + } +} + +.dial-container { + display: flex; + align-items: center; + gap: 20px; + padding: 10px; + border-radius: 1rem; + + background-color: transparent; + + backdrop-filter: blur( 2px ); + -webkit-backdrop-filter: blur( 2px ); + + border-radius: 14px; + box-shadow: var(--tl-shadow-primary-concave), + var(--br-shadow-primary-concave); + + margin-bottom: 20px; +} + +.arrow { + cursor: pointer; + padding: 10px; + user-select: none; + pointer-events: all; +} + +.items-container { + width: 200px; + overflow: hidden; +} + +.items-wrapper { + display: flex; + transition: transform 0.3s ease-in-out; +} + +.item { + min-width: 200px; + text-align: center; + padding: 10px; + flex-shrink: 0; + + font-weight: bold; + font-size: 16px; + + text-shadow: var(--tl-shadow-secondary-concave), + var(--br-shadow-secondary-concave); +} diff --git a/index.html b/index.html index 73d6dc0..181158d 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,36 @@
citadel
+ + @@ -41,6 +71,8 @@ + + diff --git a/js/session-select.js b/js/session-select.js new file mode 100644 index 0000000..844cf7f --- /dev/null +++ b/js/session-select.js @@ -0,0 +1,37 @@ +const sessionsWrapper = document.querySelector('#session-items-wrapper'); +const sessions = document.querySelectorAll('#session'); +let currentSession = 0; +let isAnimatingSession = false; + +function cycleSession(direction) { + if (isAnimatingSession) return; + + const itemWidth = sessions[0].offsetWidth; + const oldIndex = currentSession; + currentSession = (currentSession + direction + sessions.length) % sessions.length; + + const animationOffset = direction * itemWidth; + + sessionsWrapper.style.transform = `translateX(${-oldIndex * itemWidth - animationOffset}px)`; + isAnimatingSession = true; + + setTimeout(() => { + sessionsWrapper.style.transition = 'none'; + sessionsWrapper.style.transform = `translateX(-${currentSession * itemWidth}px)`; + void sessionsWrapper.offsetHeight; // Trigger reflow + sessionsWrapper.style.transition = 'transform 0.3s ease-in-out'; + isAnimatingSession = false; + }, 300); +} + +function populateSessions() { + let sessionObjects = lightdm.sessions; + sessionsWrapper.innerHtml = ""; + sessionObjects.forEach((s) => { + let newSession = document.createElement("div"); + newSession.id = s.key; + newSession.className = "item session"; + newSession.textContent = s.name; + usersWrapper.appendChild(newSession); + }); +} diff --git a/js/user-select.js b/js/user-select.js new file mode 100644 index 0000000..5851b7c --- /dev/null +++ b/js/user-select.js @@ -0,0 +1,37 @@ +const usersWrapper = document.querySelector('#user-items-wrapper'); +const users = document.querySelectorAll('.user'); +let currentUser = 0; +let isAnimatingUsers = false; + +function cycleUser(direction) { + if (isAnimatingUsers) return; + + const itemWidth = users[0].offsetWidth; + const oldIndex = currentUser; + currentUser = (currentUser + direction + users.length) % users.length; + + const animationOffset = direction * itemWidth; + + usersWrapper.style.transform = `translateX(${-oldIndex * itemWidth - animationOffset}px)`; + isAnimatingUsers = true; + + setTimeout(() => { + usersWrapper.style.transition = 'none'; + usersWrapper.style.transform = `translateX(-${currentUser * itemWidth}px)`; + void usersWrapper.offsetHeight; // Trigger reflow + usersWrapper.style.transition = 'transform 0.3s ease-in-out'; + isAnimatingUsers = false; + }, 300); +} + +function populateUsers() { + let userObjects = lightdm.users; + usersWrapper.innerHtml = ""; + userObjects.forEach((u) => { + let newUser = document.createElement("div"); + newUser.id = u.username; + newUser.className = "item user"; + newUser.textContent = u.display_name; + usersWrapper.appendChild(newUser); + }); +}