Skip to content

Commit

Permalink
Improved codes page #319
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Dec 2, 2024
1 parent 2c871c3 commit ac7a60a
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 51 deletions.
12 changes: 11 additions & 1 deletion interface/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ html {

/* code element */
.code {
@apply transparent-800 flex w-full max-w-2xl flex-grow basis-1/3 flex-col rounded-2xl p-3;
@apply transparent-800 w-full flex-grow rounded-xl p-4 small:w-1/3 max-w-2xl;
}

.dialog {
Expand Down Expand Up @@ -152,6 +152,16 @@ h5 {
overflow: hidden;
}

/* progress bar */
.progressFull {
position: relative;
width: 100%;
height: 15px;
background: hsla(0, 0%, 100%, 5.12%);
border-radius: 30px;
overflow: hidden;
}

.progressFill {
width: 0%;
height: 100%;
Expand Down
106 changes: 56 additions & 50 deletions interface/windows/codes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,55 +28,69 @@ export const generateCodeElements = (data: LibImportFile) => {
const element = document.createElement("div")

// set div content
if (settings.settings.codesDescription === false) {
if (settings.settings.codesDescription) {
element.innerHTML = `
<div class="mt-5 flex flex-row px-5">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="whitespace-nowrap mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
<div class="flex flex-row justify-between">
<div class="flex flex-col justify-start mb-3">
<div class="flex">
<p id="name${i}" class="text-2xl font-medium whitespace-nowrap truncate">
${issuers[i]}
</p>
</div>
<div class="flex">
<p id="code${i}" class="text-2xl text-gray-200" >-</p>
</div>
</div>
<div class="flex flex-1 justify-center px-3">
<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-[150px] select-all rounded-2xl py-3 px-5 text-2xl focusRing">-</p>
<div class="flex items-center justify-between mb-3">
<button
id="button${i}"
class="bg-white flex justify-center items-center font-medium rounded-full gap-1 hover:bg-gray-200 duration-200 px-4 text-black text-lg py-2"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
</svg>
${language.common.copy}
</button>
</div>
<div class="flex flex-1 justify-end">
<h3 id="time${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
</div>
</div>
<div class="mt-5 flex flex-col items-center justify-center">
<div class="progress">
<div id="progress${i}" class="progressFill" />
<div class="pb-4 flex items-start">
<p id="description${i}" class="text-lg text-gray-200 transparent-800 py-1 px-2 rounded-xl select-all truncate" >${names[i]}</p>
</div>
<div class="progressFull mb-3">
<div id="progress${i}" class="progressFill" />
</div>
<div class="mb-5 mt-5 flex items-center justify-center">
<button id="button${i}" class="button w-[150px] py-3 px-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg>
${language.common.copy}
</button>
</div>`
`
} else {
element.innerHTML = `
<div class="mt-5 flex flex-row px-5">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="whitespace-nowrap mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
<div class="flex flex-row justify-between">
<div class="flex flex-col justify-start mb-3">
<div class="flex">
<p id="name${i}" class="text-2xl font-medium whitespace-nowrap truncate">
${issuers[i]}
</p>
</div>
<div class="flex">
<p id="code${i}" class="text-2xl text-gray-200" >-</p>
</div>
</div>
<div class="flex flex-1 justify-center px-3">
<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-[150px] select-all rounded-2xl py-3 px-5 text-2xl focusRing">-</p>
<div class="flex items-center justify-between mb-3">
<button
id="button${i}"
class="bg-white flex justify-center items-center font-medium rounded-full gap-1 hover:bg-gray-200 duration-200 px-4 text-black text-lg py-2"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
</svg>
${language.common.copy}
</button>
</div>
<div class="flex flex-1 justify-end">
<h3 id="time${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
</div>
</div>
<div class="mt-5 flex flex-col items-center justify-center">
<div class="progress">
<div id="progress${i}" class="progressFill" />
</div>
<div class="progressFull mb-3">
<div id="progress${i}" class="progressFill" />
</div>
<p tabindex="0" class="text-2xl transparent-900 py-3 px-5 rounded-2xl select-all mt-5" id="description${i}">Description</p>
<div class="mb-5 mt-5 flex items-center justify-center">
<button id="button${i}" class="button w-[150px] py-3 px-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg>
${language.common.copy}
</button>
</div>`
`
}

// add div
Expand All @@ -86,18 +100,11 @@ export const generateCodeElements = (data: LibImportFile) => {
document.querySelector(".content").appendChild(element)

// get elements
const name = document.querySelector(`#name${i}`)
const code = document.querySelector(`#code${i}`)
const time = document.querySelector(`#time${i}`)
const description = document.querySelector(`#description${i}`)
// const time = document.querySelector(`#time${i}`)
const progress = document.querySelector(`#progress${i}`)
const button = document.querySelector(`#button${i}`)

// description
if (settings.settings.codesDescription === true) {
description.textContent = names[i].length > 35 ? `${names[i].slice(0, 35)}...` : names[i]
}

// add to query
searchQuery.push({
name: `${issuers[i].toLowerCase().trim()}`,
Expand All @@ -116,9 +123,8 @@ export const generateCodeElements = (data: LibImportFile) => {
const value = remainingTime * (100 / 30)
progress.style.width = `${value}%`

name.textContent = issuers[i]
code.textContent = token
time.textContent = remainingTime.toString()
// time.textContent = remainingTime.toString()

button.addEventListener("click", () => {
clipboard.writeText(code.textContent)
Expand Down Expand Up @@ -166,7 +172,7 @@ export const generateCodeElements = (data: LibImportFile) => {
const refreshCodes = (secrets: string[]) => {
for (let i = 0; i < secrets.length; i++) {
const code = document.querySelector(`#code${i}`)
const time = document.querySelector(`#time${i}`)
// const time = document.querySelector(`#time${i}`)
const progress = document.querySelector(`#progress${i}`)

// generate token
Expand All @@ -183,7 +189,7 @@ const refreshCodes = (secrets: string[]) => {

// set content
code.textContent = token
time.textContent = remainingTime.toString()
// time.textContent = remainingTime.toString()
}
}

Expand All @@ -199,7 +205,7 @@ export const search = () => {
// restart
for (let i = 0; i < searchQuery.length; i++) {
const div = document.querySelector(`#codes${[i]}`)
div.style.display = "flex"
div.style.display = "block"
}

document.querySelector(".noSearchResults").style.display = "none"
Expand Down

0 comments on commit ac7a60a

Please sign in to comment.