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

fix table rendering #297

Merged
merged 1 commit into from
Dec 2, 2023
Merged

fix table rendering #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/main/resources/io/jenkins/plugins/designlibrary/Table/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ THE SOFTWARE.
<!-- TODO sorted doesn't seem to be doing anything, is there more that should be added about tables? -->

<div class="jdl-component-group">
<div class="sample-remote jdl-component-sample" data-sample="index.html" />
<s:code language="xml" file="index.html" />
<div class="sample-remote jdl-component-sample" data-sample="index.jelly" data-render="true"/>
<s:code language="xml" file="index.jelly" />
</div>
</s:sample>
</j:jelly>
53 changes: 29 additions & 24 deletions src/main/resources/io/jenkins/plugins/designlibrary/sample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ document.addEventListener("DOMContentLoaded", () => {
.forEach(element => {
const fileName = element.dataset.sample;
const executable = element.dataset.executable;
const render = element.dataset.render

// On the inputs page the preview markup link adds a hash to the url which breaks the regex extraction
const strippedHash = window.location.href.replace('#', '')
Expand All @@ -15,37 +16,41 @@ document.addEventListener("DOMContentLoaded", () => {
fetch(fullUrl)
.then(response => response.text())
.then(text => {
element.innerText = text
if (render === "true") {
element.innerHTML = text
} else {
element.innerText = text

Prism.highlightElement(element)
Prism.highlightElement(element)

function setPrismBackgroundVariable() {
const computedStyle = window.getComputedStyle(element.parentElement)
const background = computedStyle.getPropertyValue('background')
function setPrismBackgroundVariable() {
const computedStyle = window.getComputedStyle(element.parentElement)
const background = computedStyle.getPropertyValue('background')

document.documentElement.style
.setProperty(prismVariable, background);
}
document.documentElement.style
.setProperty(prismVariable, background);
}

// This is for the copy clipboard section which doesn't use prism
// We need to match the colour
const prismVariable = '--prism-background'
if (!getComputedStyle(document.documentElement).getPropertyValue(prismVariable)) {
setPrismBackgroundVariable()
// This is for the copy clipboard section which doesn't use prism
// We need to match the colour
const prismVariable = '--prism-background'
if (!getComputedStyle(document.documentElement).getPropertyValue(prismVariable)) {
setPrismBackgroundVariable()

if (window.isSystemRespectingTheme) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
// If done immediately while appearance is changing from light to dark sometimes the wrong value is retrieved
// A slight delay fixes this
setTimeout(() => setPrismBackgroundVariable(), 50)
});
if (window.isSystemRespectingTheme) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
// If done immediately while appearance is changing from light to dark sometimes the wrong value is retrieved
// A slight delay fixes this
setTimeout(() => setPrismBackgroundVariable(), 50)
});
}
}
}

const codeWrapper = element.closest(".jdl-component-code");
if (codeWrapper) {
const copyButton = codeWrapper.querySelector(".copy-button, .jenkins-copy-button")
copyButton.setAttribute("text", text)
const codeWrapper = element.closest(".jdl-component-code");
if (codeWrapper) {
const copyButton = codeWrapper.querySelector(".copy-button, .jenkins-copy-button")
copyButton.setAttribute("text", text)
}
}
});
if (executable === "true") {
Expand Down
24 changes: 12 additions & 12 deletions src/main/webapp/Table/index.html → src/main/webapp/Table/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
<table class="jenkins-table sortable jenkins-!-margin-bottom-0">
<thead>
<th>
Hello world
Name
</th>
<th>
Hello world
Status
</th>
<th>
Hello world
Reason
</th>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="jenkins-table__link">Link</a>
<a href="#" class="jenkins-table__link">Link 1</a>
</td>
<td>
Row
Success
<a href="#" class="jenkins-table__link jenkins-table__badge model-link inside">#7</a>
</td>
<td>
Row
No Errors
</td>
</tr>
<tr>
<td>
<a href="#" class="jenkins-table__link">Link</a>
<a href="#" class="jenkins-table__link">Link 2</a>
</td>
<td>
Row
Failure
</td>
<td>
Row
Can't compile
</td>
</tr>
<tr>
<td>
<a href="#" class="jenkins-table__link">Link</a>
<a href="#" class="jenkins-table__link">Link 3</a>
</td>
<td>
Row
Unstable
</td>
<td>
Row
Test Failed
</td>
</tr>
</tbody>
Expand Down
Loading