From 954c0c4a047f78bd529b869287d00e34a3a2a2a5 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 9 Jan 2025 14:39:32 +0000
Subject: [PATCH 1/4] Init
---
.../resources/lib/layout/copyButton.jelly | 4 +-
.../lib/layout/copyButton/copyButton.js | 6 +-
src/main/scss/components/_buttons.scss | 55 +++++++++++++++----
3 files changed, 52 insertions(+), 13 deletions(-)
diff --git a/core/src/main/resources/lib/layout/copyButton.jelly b/core/src/main/resources/lib/layout/copyButton.jelly
index 8a65c641657a..fc4234b0f21f 100644
--- a/core/src/main/resources/lib/layout/copyButton.jelly
+++ b/core/src/main/resources/lib/layout/copyButton.jelly
@@ -59,7 +59,9 @@ THE SOFTWARE.
message="${attrs.message ?: '%Copied'}"
tooltip="${attrs.label != null ? null : attrs.tooltip ?: '%Copy'}"
type="button">
-
+
+
+
${attrs.label}
diff --git a/core/src/main/resources/lib/layout/copyButton/copyButton.js b/core/src/main/resources/lib/layout/copyButton/copyButton.js
index 2a9c7bfe56ff..e23e18a60e38 100644
--- a/core/src/main/resources/lib/layout/copyButton/copyButton.js
+++ b/core/src/main/resources/lib/layout/copyButton/copyButton.js
@@ -18,8 +18,10 @@ Behaviour.specify(
navigator.clipboard
.writeText(text)
.then(() => {
- // Show the completion message
- hoverNotification(copyButton.getAttribute("message"), copyButton);
+ copyButton.classList.add("cecilia");
+ setTimeout(() => {
+ copyButton.classList.remove("cecilia");
+ }, 2000);
})
.catch(() => {
hoverNotification(
diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
index a8c5c7b91bfd..055ffbea69a5 100644
--- a/src/main/scss/components/_buttons.scss
+++ b/src/main/scss/components/_buttons.scss
@@ -190,24 +190,40 @@
.jenkins-copy-button {
.jenkins-copy-button__icon {
position: relative;
- width: 0.9rem;
+ display: grid;
+ grid-template-columns: 1fr;
+ place-items: center;
+ width: 1.125rem;
height: 1.125rem;
transition: var(--standard-transition);
+ svg {
+ grid-area: 1 / 1;
+ scale: -0.5;
+ opacity: 0;
+ transition: var(--elastic-transition);
+ filter: blur(2px);
+ color: var(--success-color);
+
+ * {
+ stroke-width: 40px;
+ }
+ }
+
&::before,
&::after {
content: "";
- position: absolute;
- width: 75%;
- height: 75%;
+ position: relative;
+ width: 0.6875rem;
+ height: 0.875rem;
border: 0.1rem solid currentColor;
border-radius: 0.2rem;
transition: var(--standard-transition);
+ grid-area: 1 / 1;
}
&::before {
- top: 4%;
- left: 1%;
+ translate: -16% -10%;
clip-path: polygon(
100% 0,
100% 22.5%,
@@ -219,19 +235,38 @@
}
&::after {
- bottom: 4%;
- right: 1%;
+ translate: 16% 10%;
+ }
+ }
+
+ &.cecilia {
+ --button-background: color-mix(in srgb, var(--success-color) 10%, transparent);
+ --button-background--hover: var(--button-background);
+ --button-background--active: var(--button-background);
+
+ .jenkins-copy-button__icon {
+ &::before, &::after {
+ scale: 1.25;
+ opacity: 0;
+ filter: blur(1px);
+ }
+
+ svg {
+ scale: 1.25;
+ opacity: 1;
+ filter: blur(0);
+ }
}
}
&:hover {
.jenkins-copy-button__icon {
&::before {
- transform: translate(7%, 4.5%);
+ translate: -11% -8%;
}
&::after {
- transform: translate(-7%, -4.5%);
+ translate: 11% 8%;
}
}
}
From 8090452f4da884e554f4f727709434db1b40c85c Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 9 Jan 2025 14:40:07 +0000
Subject: [PATCH 2/4] Rename class
---
core/src/main/resources/lib/layout/copyButton/copyButton.js | 4 ++--
src/main/scss/components/_buttons.scss | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/core/src/main/resources/lib/layout/copyButton/copyButton.js b/core/src/main/resources/lib/layout/copyButton/copyButton.js
index e23e18a60e38..2b736b8a816f 100644
--- a/core/src/main/resources/lib/layout/copyButton/copyButton.js
+++ b/core/src/main/resources/lib/layout/copyButton/copyButton.js
@@ -18,9 +18,9 @@ Behaviour.specify(
navigator.clipboard
.writeText(text)
.then(() => {
- copyButton.classList.add("cecilia");
+ copyButton.classList.add("jenkins-copy-button--copied");
setTimeout(() => {
- copyButton.classList.remove("cecilia");
+ copyButton.classList.remove("jenkins-copy-button--copied");
}, 2000);
})
.catch(() => {
diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
index 055ffbea69a5..6881d0a523bf 100644
--- a/src/main/scss/components/_buttons.scss
+++ b/src/main/scss/components/_buttons.scss
@@ -239,7 +239,7 @@
}
}
- &.cecilia {
+ &--copied {
--button-background: color-mix(in srgb, var(--success-color) 10%, transparent);
--button-background--hover: var(--button-background);
--button-background--active: var(--button-background);
From 1a290c7b48d6ed9b5f2479f182025ee2d0185f6a Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 9 Jan 2025 14:53:47 +0000
Subject: [PATCH 3/4] Update _buttons.scss
---
src/main/scss/components/_buttons.scss | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
index 6881d0a523bf..b20b573e0a5f 100644
--- a/src/main/scss/components/_buttons.scss
+++ b/src/main/scss/components/_buttons.scss
@@ -240,12 +240,17 @@
}
&--copied {
- --button-background: color-mix(in srgb, var(--success-color) 10%, transparent);
+ --button-background: color-mix(
+ in sRGB,
+ var(--success-color) 10%,
+ transparent
+ );
--button-background--hover: var(--button-background);
--button-background--active: var(--button-background);
.jenkins-copy-button__icon {
- &::before, &::after {
+ &::before,
+ &::after {
scale: 1.25;
opacity: 0;
filter: blur(1px);
From 4617883487888b563cb6b68dfac38993f3dad576 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 9 Jan 2025 15:02:52 +0000
Subject: [PATCH 4/4] Update _buttons.scss
---
src/main/scss/components/_buttons.scss | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
index b20b573e0a5f..58e1eba373aa 100644
--- a/src/main/scss/components/_buttons.scss
+++ b/src/main/scss/components/_buttons.scss
@@ -24,7 +24,6 @@
min-height: 2.25rem;
white-space: nowrap;
gap: 1ch;
- transition: var(--standard-transition);
&::before {
background: var(--button-background);
@@ -218,7 +217,11 @@
height: 0.875rem;
border: 0.1rem solid currentColor;
border-radius: 0.2rem;
- transition: var(--standard-transition);
+ transition:
+ translate var(--standard-transition),
+ scale var(--standard-transition),
+ opacity var(--standard-transition),
+ filter var(--standard-transition);
grid-area: 1 / 1;
}
@@ -240,6 +243,8 @@
}
&--copied {
+ color: var(--success-color) !important;
+
--button-background: color-mix(
in sRGB,
var(--success-color) 10%,