Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use '.jenkins-card' for cards #497

Merged
merged 15 commits into from
Sep 25, 2024
Merged

Use '.jenkins-card' for cards #497

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2e873c1
Use Jenkins cards SCSS
janfaracik Jun 26, 2024
f450d68
Push
janfaracik Jun 26, 2024
d1495da
Merge branch 'main' into use-jenkins-cards
janfaracik Sep 3, 2024
2bd7a93
Update app.scss
janfaracik Sep 3, 2024
a9bac4a
Update pom.xml
janfaracik Sep 3, 2024
4a85d7f
Rename classes
janfaracik Sep 3, 2024
49c6050
Update theme
janfaracik Sep 3, 2024
bd1d029
Update _cards.scss
janfaracik Sep 3, 2024
63aba64
Update pipeline-console.scss
janfaracik Sep 3, 2024
d40c84d
Merge branch 'main' into use-jenkins-cards
janfaracik Sep 3, 2024
2d07720
Update _cards.scss
janfaracik Sep 3, 2024
fec2a25
Update _cards.scss
janfaracik Sep 3, 2024
881d186
Fix overflow-x
janfaracik Sep 3, 2024
a068b05
Merge branch 'jenkinsci:main' into main
janfaracik Sep 25, 2024
a70c2c9
Merge branch 'main' into use-jenkins-cards
janfaracik Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<changelist>999999-SNAPSHOT</changelist>
<gitHubRepo>jenkinsci/pipeline-graph-view-plugin</gitHubRepo>
<!-- Baseline Jenkins version you use to build the plugin. Users must have this version or newer to run. -->
<jenkins.version>2.452.1</jenkins.version>
<jenkins.version>2.464</jenkins.version>
<node.version>20.16.0</node.version>
<npm.version>10.8.2</npm.version>
<spotless.check.skip>false</spotless.check.skip>
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ $status-failure: #d54c53;
$status-paused: #24b0d5;
$status-unknown: #d54cc4;

$graph-connector-grey: #949393;
$graph-connector-grey: color-mix(in srgb, var(--text-color-secondary), var(--background));
$progress-bg: #a7c7f2;
$progress-bar-color: #1d7dcf;
4 changes: 0 additions & 4 deletions src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import "react-tippy/dist/tippy.css";

:root {
--card-background: hsl(212, 30%, 96%);
--step-bg-running: color-mix(in srgb, var(--accent-color) 50%, white);
--step-bg-success: color-mix(in srgb, var(--success-color) 50%, white);
--step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, white);
Expand All @@ -18,7 +17,6 @@
}

[data-theme="dark"] {
--card-background: hsl(230deg 14% 23%);
--step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
--step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
--step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
Expand All @@ -30,8 +28,6 @@
@media (prefers-color-scheme: dark) {
[data-theme="dark-system"],
[data-theme="dark-system"] {
--card-background: hsl(230deg 14% 23%);
//--step-text-color: hsl(230deg 14% 23%);
--step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
--step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
--step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
Expand Down
90 changes: 13 additions & 77 deletions src/main/frontend/pipeline-graph-view/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,80 +20,18 @@
}

&__item {
position: relative;
border-radius: 15px;
padding: 20px;
background: var(--card-background);
overflow: auto;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

likely this change causes graph overflow:

image 
pipeline {
    agent any
    stages {
        stage('Non-Parallel Stage') {
            steps {
                echo 'This stage will be executed first.'
            }
        }
        stage('Parallel Stage') {
            failFast true
            parallel {
                stage('Branch A') {
                    steps {
                        echo "On Branch A"
                    }
                }
                stage('Branch B') {
                    steps {
                        echo "On Branch B"
                    }
                }
                stage('Branch C') {
                    stages {
                        stage('Nested 1') {
                            steps {
                                echo "In stage Nested 1 within Branch C"
                            }
                        }
                        stage('Nested 2') {
                            steps {
                                echo "In stage Nested 2 within Branch C"
                            }
                        }
                    }
                }
            }
        }
        stage('Skipped stage') {
            when {
                branch 'master'
            }
            steps {
                echo 'This stage will be skipped.'
            }
        }
        stage('Parallel Stage 2') {
            failFast true
            parallel {
                stage('Branch A') {
                    steps {
                        echo "On Branch A"
                    }
                }
                stage('Branch B') {
                    steps {
                        echo "On Branch B"
                    }
                }
                stage('Branch C') {
                    stages {
                        stage('Nested 1B') {
                            steps {
                                echo "In stage Nested 1B within Branch C"
                            }
                        }
                        stage('Nested 2B') {
                            steps {
                                echo "In stage Nested 2B within Branch C"
                            }
                        }
                    }
                }
            }
        }
    }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

likely this change causes graph overflow:

image ``` pipeline { agent any stages { stage('Non-Parallel Stage') { steps { echo 'This stage will be executed first.' } } stage('Parallel Stage') { failFast true parallel { stage('Branch A') { steps { echo "On Branch A" } } stage('Branch B') { steps { echo "On Branch B" } } stage('Branch C') { stages { stage('Nested 1') { steps { echo "In stage Nested 1 within Branch C" } } stage('Nested 2') { steps { echo "In stage Nested 2 within Branch C" } } } } } } stage('Skipped stage') { when { branch 'master' } steps { echo 'This stage will be skipped.' } } stage('Parallel Stage 2') { failFast true parallel { stage('Branch A') { steps { echo "On Branch A" } } stage('Branch B') { steps { echo "On Branch B" } } stage('Branch C') { stages { stage('Nested 1B') { steps { echo "In stage Nested 1B within Branch C" } } stage('Nested 2B') { steps { echo "In stage Nested 2B within Branch C" } } } } } } } } ```

Good spot, should be sorted now

box-shadow: 0 0 1px rgba(black, 0.06);
min-height: unset;
max-height: unset;

hr {
background: var(--secondary);
border: none;
height: 2px;
margin: 0.4rem 0 calc(0.4rem + 15px);
margin: 0;
opacity: 0.2;
}

&:hover {
.pgv-cards__item__title__actions {
opacity: 1;
}
}

&--wide {
grid-column: span 2;
}
}

&__item__title {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 20px 0;
padding: 0;
font-weight: 600;
font-size: 1rem;

a {
svg {
width: 18px;
height: 18px;
color: var(--text-color) !important;
}
}
}

&__item__title__actions {
display: flex;
align-items: center;
gap: 15px;
opacity: 0.5;
transition: 0.3s ease;
}

&__item__title-float {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 20px 20px 0 20px;
z-index: 1;

&::before {
content: "";
position: absolute;
inset: 0;
bottom: -20px;
backdrop-filter: blur(20px);
z-index: -1;
border-radius: 15px 15px 0 0;
mask-image: linear-gradient(white 25%, transparent);
pointer-events: none;
}
}
}

/* Modal */
Expand All @@ -109,21 +47,29 @@
height: 100%;
max-height: unset;
background-color: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 1000;

opacity: 1;
visibility: visible;
transform: scale(1);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;

// Reset styles inherit from .jenkins-card
border-radius: 0;

&::after {
display: none;
}
}
.pgv-modal__open > .pgv-modal__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--card-background);
padding: 1rem 1.5rem;
background-color: var(--background);
box-shadow: var(--dialog-box-shadow);
width: 95%;
height: 90%;
border-radius: 0.5rem;
Expand All @@ -139,24 +85,14 @@
background-color: var(--card-background);
}

.pgv-modal__close_button:hover {
background-color: darkgray;
}

.pgv-modal__closer {
display: none;
display: none !important;
}

.pgv-modal__open .pgv-modal__closer {
display: flex;
display: flex !important;
}

.pgv-modal__open .pgv-modal__expander {
display: none;
}

.pgv-modal__expander:hover,
.pgv-modal__closer:hover {
background: var(--item-background--hover);
border-radius: 14px;
}
28 changes: 8 additions & 20 deletions src/main/frontend/pipeline-graph-view/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
:root {
--card-background: hsl(212, 30%, 96%);
--card-gap: 1rem;
}

Expand All @@ -8,39 +7,28 @@
max-width: unset;
}

[data-theme="dark"] {
--card-background: hsl(230deg 14% 23%);
}

@media (prefers-color-scheme: dark) {
[data-theme="dark-system"],
[data-theme="dark-system"] {
--card-background: hsl(230deg 14% 23%);
}
}

@import "cards";

.app-details__item svg {
color: currentColor !important;
width: 16px;
height: 16px;
.pgv-details-card {
display: flex;
flex-direction: column;
gap: 1rem;
}

.app-details__item {
.pgv-details__item {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 15px;
margin: 0;

span {
display: contents;
}

svg {
color: currentColor !important;
width: 16px;
height: 16px;
width: 1.125rem;
height: 1.125rem;
}

&--link {
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16px;
overflow-x: auto;

* {
box-sizing: border-box;
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/pipeline-graph-view/pipeline-graph/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ $status-failure: #d54c53;
$status-paused: #24b0d5;
$status-unknown: #d54cc4;

$graph-connector-grey: #949393;
$graph-connector-grey: color-mix(in srgb, var(--text-color-secondary), var(--background));
$progress-bg: #a7c7f2;
$progress-bar-color: #1d7dcf;
50 changes: 26 additions & 24 deletions src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,31 +51,33 @@
<script src="${rootURL}/plugin/pipeline-graph-view/js/bundles/pipeline-graph-view-bundle.js"/>
</p:card>
<p:card title="${it.runDetailsCard.title}">
<j:forEach var="card" items="${it.runDetailsCard.items}">
<j:choose>
<j:when test="${card.separator}">
<hr/>
</j:when>
<j:otherwise>
<p class="app-details__item">
<l:icon src="${card.icon}"/>
<j:choose>
<j:when test="${!empty(card.href)}">
<a
class="app-details__item--link"
href="${card.href}"
>
<div class="pgv-details-card">
<j:forEach var="card" items="${it.runDetailsCard.items}">
<j:choose>
<j:when test="${card.separator}">
<hr/>
</j:when>
<j:otherwise>
<p class="pgv-details__item">
<l:icon src="${card.icon}"/>
<j:choose>
<j:when test="${!empty(card.href)}">
<a
class="pgv-details__item--link"
href="${card.href}"
>
${card.text}
</a>
</j:when>
<j:otherwise>
${card.text}
</a>
</j:when>
<j:otherwise>
${card.text}
</j:otherwise>
</j:choose>
</p>
</j:otherwise>
</j:choose>
</j:forEach>
</j:otherwise>
</j:choose>
</p>
</j:otherwise>
</j:choose>
</j:forEach>
</div>
</p:card>
</div>
</l:main-panel>
Expand Down
31 changes: 16 additions & 15 deletions src/main/resources/lib/pipeline-graph-view/card.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,29 @@
Set true if you want to allow users to click a button to pop out a larger version of the card
</st:attribute>
</st:documentation>
<div class="pgv-cards__item${attrs.type == 'wide' ? ' pgv-cards__item--wide' : ''}${attrs.expandable == 'true' ? ' pgv-modal' : ''}">
<div class="jenkins-card pgv-cards__item${attrs.type == 'wide' ? ' pgv-cards__item--wide' : ''}${attrs.expandable == 'true' ? ' pgv-modal' : ''}">
<j:choose>
<j:when test="${attrs.expandable == 'true'}">
<div class="pgv-modal__content">
<p class="pgv-cards__item__title">${attrs.title}
<a href="#" class="pgv-modal__expander">
<span class="icon-sm">
<l:icon src="symbol-resize-outline plugin-ionicons-api" tooltip="${%Expand} ${attrs.title}"/>
</span>
</a>
<a href="#" class="pgv-modal__closer">
<span class="icon-sm">
<l:icon src="symbol-close-circle-outline plugin-ionicons-api" tooltip="${%Close} ${attrs.title}"/>
</span>
</a>
</p>
<div class="jenkins-card__title">
${attrs.title}
<div class="jenkins-card__controls">
<a href="#" class="jenkins-card__reveal pgv-modal__expander" tooltip="${%Expand}">
<l:icon src="symbol-expand" />
</a>
<a href="#" class="jenkins-card__reveal pgv-modal__closer" tooltip="${%Close} ${attrs.title}">
<l:icon src="symbol-close-circle-outline plugin-ionicons-api" />
</a>
</div>
</div>
<d:invokeBody/>
</div>
</j:when>
<j:otherwise>
<p class="pgv-cards__item__title">${attrs.title}</p>
<d:invokeBody/>
<div class="jenkins-card__title">${attrs.title}</div>
<div class="jenkins-card__content">
<d:invokeBody/>
</div>
</j:otherwise>
</j:choose>
</div>
Expand Down
Loading