Skip to content

Commit

Permalink
UI, buttons animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@veniware
veniware committed Sep 24, 2024
1 parent 66ad94c commit 42e6478
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 23 deletions.
43 changes: 26 additions & 17 deletions Protest/Front/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,11 @@ class Api extends List {

okButton.value = "Create";

innerBox.parentElement.style.maxWidth = "640px";
innerBox.parentElement.style.maxWidth = "680px";

innerBox.style.padding = "16px 32px";
innerBox.style.display = "grid";
innerBox.style.gridTemplateColumns = "auto 160px 275px 24px auto";
innerBox.style.gridTemplateColumns = "auto 160px 275px 44px 72px auto";
innerBox.style.gridTemplateRows = "repeat(3, 38px) 12px repeat(5, 32px)";
innerBox.style.alignItems = "center";

Expand All @@ -107,6 +107,7 @@ class Api extends List {
box.style.gridArea = `${counter} / 3 / ${counter+1} / 4`;

const toggle = this.CreateToggle(".", false, box);
toggle.label.style.minWidth = "0px";
toggle.label.style.color = "transparent";
input = toggle.checkbox;

Expand All @@ -133,15 +134,21 @@ class Api extends List {
keyInput.setAttribute("readonly", "true");

const copyButton = document.createElement("button");
copyButton.style.gridArea = " 2/ 4";
copyButton.style.gridArea = "2 / 4";
copyButton.style.minWidth = copyButton.style.width = "36px";
copyButton.style.height = "34px";
copyButton.style.backgroundImage = "url(mono/copy.svg?light)";
copyButton.style.backgroundSize = "28px";
copyButton.style.backgroundPosition = "50% 50%";
copyButton.style.backgroundRepeat = "no-repeat";
innerBox.append(copyButton);


const renewButton = document.createElement("button");
renewButton.textContent = "Renew";
renewButton.style.minWidth = renewButton.style.width = "64px";
renewButton.style.gridArea = " 2 / 5";
innerBox.append(renewButton);

const [readOnlyLabel, readOnlyInput] = AddParameter("Read-only:", "input", "toggle");
readOnlyInput.checked = true;
readOnlyInput.disabled = true;
Expand All @@ -153,23 +160,23 @@ class Api extends List {
labelPermissions.style.gridArea = `${++counter} / 2`;
innerBox.append(labelPermissions);

const [devicesLabel, devicesInput] = AddParameter("Devices", "input", "toggle");
devicesLabel.style.paddingLeft = "24px";
devicesLabel.style.backgroundImage = "url(mono/devices.svg)";
devicesLabel.style.backgroundSize = "20px";
devicesLabel.style.backgroundRepeat = "no-repeat";

const [usersLabel, usersInput] = AddParameter("Users", "input", "toggle");
usersLabel.style.paddingLeft = "24px";
usersLabel.style.backgroundImage = "url(mono/users.svg)";
usersLabel.style.backgroundSize = "20px";
usersLabel.style.backgroundRepeat = "no-repeat";

const [issuesLabel, issuesInput] = AddParameter("Issues", "input", "toggle");
issuesLabel.style.paddingLeft = "24px";
issuesLabel.style.backgroundImage = "url(mono/issues.svg)";
issuesLabel.style.backgroundSize = "20px";
issuesLabel.style.backgroundRepeat = "no-repeat";
const [devicesLabel, devicesInput] = AddParameter("Devices", "input", "toggle");
devicesLabel.style.paddingLeft = "24px";
devicesLabel.style.backgroundImage = "url(mono/devices.svg)";
devicesLabel.style.backgroundSize = "20px";
devicesLabel.style.backgroundRepeat = "no-repeat";

const [lifelineLabel, lifelineInput] = AddParameter("Lifeline", "input", "toggle");
lifelineLabel.style.paddingLeft = "24px";
lifelineLabel.style.backgroundImage = "url(mono/lifeline.svg)";
lifelineLabel.style.backgroundSize = "20px";
lifelineLabel.style.backgroundRepeat = "no-repeat";

const [utilitiesLabel, utilitiesInput] = AddParameter("Network utilities", "input", "toggle");
utilitiesLabel.style.paddingLeft = "24px";
Expand All @@ -196,8 +203,10 @@ class Api extends List {
try {
navigator.clipboard.writeText(keyInput.value);

copyButton.style.animation = "bg-roll-up .6s linear";
setTimeout(()=>copyButton.style.animation = "", 600);
if (copyButton.style.animation === "") {
copyButton.style.animation = "bg-roll-up .6s linear";
setTimeout(()=>copyButton.style.animation = "", 600);
}
}
catch (ex) {
this.ConfirmBox(ex, true, "mono/error.svg");
Expand Down
12 changes: 8 additions & 4 deletions Protest/Front/passwordgen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,10 @@ class PassGen extends Window {
try {
navigator.clipboard.writeText(this.passwordInput.value);

copyButton.style.animation = "bg-roll-up .6s linear";
setTimeout(()=>copyButton.style.animation = "", 600);
if (copyButton.style.animation === "") {
copyButton.style.animation = "bg-roll-up .6s linear";
setTimeout(()=>copyButton.style.animation = "", 600);
}
}
catch {
this.ConfirmBox(ex, true, "mono/error.svg");
Expand All @@ -284,8 +286,10 @@ class PassGen extends Window {
if (this.passwordInput.value.length < 1) return;
UI.PromptAgent(this, "stamp", this.passwordInput.value);

stampButton.style.animation = "bg-stamp .6s linear";
setTimeout(()=>stampButton.style.animation = "", 600);
if (stampButton.style.animation === "") {
stampButton.style.animation = "bg-stamp .6s linear";
setTimeout(()=>stampButton.style.animation = "", 600);
}
};

this.passwordInput.oninput = ()=> {
Expand Down
7 changes: 6 additions & 1 deletion Protest/Front/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ class View extends Window {
stampButton.style.minWidth = "40px";
stampButton.style.height = "32px";
stampButton.style.backgroundImage = "url(mono/stamp.svg?light)";
stampButton.style.backgroundSize = "28px 28px";
stampButton.style.backgroundSize = "24px 24px";
stampButton.style.backgroundPosition = "center center";
stampButton.style.backgroundRepeat = "no-repeat";

Expand Down Expand Up @@ -300,6 +300,11 @@ class View extends Window {
if (response.status !== 200) LOADER.HttpErrorHandler(response.status);
const password = await response.text();
UI.PromptAgent(this, "stamp", password);

if (stampButton.style.animation === "") {
stampButton.style.animation = "bg-stamp .6s linear";
setTimeout(()=>stampButton.style.animation = "", 600);
}
}
catch (ex) {
this.ConfirmBox(ex, true, "mono/error.svg");
Expand Down
2 changes: 1 addition & 1 deletion Protest/Front/window.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,7 +708,7 @@
@keyframes bg-roll-up {
0% { background-size: 28px; background-position: 50% 50% }
50% { background-size: 36px; background-position: 50% calc(50% - 48px) }
51% { background-size: 20px; background-position: 50% calc(50% + 48px) }
50.01% { background-size: 20px; background-position: 50% calc(50% + 48px) }
100% { background-size: 28px; background-position: 50% 50% }
}

Expand Down

0 comments on commit 42e6478

Please sign in to comment.