Skip to content

Commit

Permalink
Tidy up categories
Browse files Browse the repository at this point in the history
  • Loading branch information
@janfaracik
janfaracik committed Dec 23, 2024
1 parent 4b0be26 commit 5dd34a0
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 148 deletions.
2 changes: 1 addition & 1 deletion core/src/main/resources/hudson/model/View/newJob.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ THE SOFTWARE.

<div>
<div class="jenkins-form-label">${%ItemType.label}</div>
<div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
<ul id="items" class="categories" role="radiogroup" aria-labelledby="Items" data-valid="false" />
</div>

<!-- <j:if test="${!empty(app.items)}">-->
Expand Down
36 changes: 12 additions & 24 deletions src/main/js/add-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,28 +114,6 @@ $.when(getItems()).done(function (data) {
//////////////////////////////////
// Draw functions

function drawCategory(category) {
var $category = $("<div/>")
.addClass("category")
.attr("id", "j-add-item-type-" + cleanClassName(category.id));
var $items = $("<ul/>").addClass("j-item-options");
var $catHeader = $('<div class="header" />');
var title = "<h2>" + category.name + "</h2>";
var description = "<p>" + category.description + "</p>";

// Add items
$.each(category.items, function (i, elem) {
$items.append(drawItem(elem));
});

$catHeader.append(title);
$catHeader.append(description);
$category.append($catHeader);
$category.append($items);

return $category;
}

function drawItem(elem) {
var item = document.createElement("li");
item.tabIndex = 0;
Expand Down Expand Up @@ -256,9 +234,19 @@ $.when(getItems()).done(function (data) {
$("#add-item-panel").removeAttr("style");

// Render all categories
var $categories = $("div.categories");
var $categories = $("ul.categories");
$.each(data.categories, function (i, elem) {
drawCategory(elem).appendTo($categories);
// drawCategory(elem).appendTo($categories);

console.log(elem.items);

elem.items.forEach(e => {
console.log(drawItem(e))
// drawItem(e).appendTo($categories);

$categories.append(drawItem(e));
})

});

// Focus
Expand Down
198 changes: 78 additions & 120 deletions src/main/js/widgets/add/addform.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,52 +78,47 @@

.c-D33833 {
border: 1px solid #900;
box-shadow:
inset #900 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #903,
inset -5px -10px 15px 14px #d33833;
box-shadow: inset #900 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #903,
inset -5px -10px 15px 14px #d33833;
}

.c-6D6B6D {
border: 1px solid #000;
box-shadow:
inset #333 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #222,
inset -5px -10px 15px 14px #555;
box-shadow: inset #333 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #222,
inset -5px -10px 15px 14px #555;
}

.c-335061 {
border: 1px solid #356;
box-shadow:
inset #024 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #012,
inset -5px -10px 15px 14px #335061;
box-shadow: inset #024 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #012,
inset -5px -10px 15px 14px #335061;
}

.c-49728B {
border: 1px solid #036;
box-shadow:
inset #036 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #036,
inset -5px -10px 15px 14px #49728b;
box-shadow: inset #036 0 0 1px,
inset #fff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #036,
inset -5px -10px 15px 14px #49728b;
}

.c-6699CC {
border: 1px solid #6699cc;
box-shadow:
inset #003399 0 0 1px,
inset #ffffff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #336699,
inset -5px -10px 15px 14px #6699cc;
box-shadow: inset #003399 0 0 1px,
inset #ffffff 0 0 0 1px,
0 5px 3px -2px rgba(0, 0, 0, 0.25),
inset -5px -5px 10px 2px #336699,
inset -5px -10px 15px 14px #6699cc;
}

input {
Expand All @@ -133,112 +128,75 @@

.categories {
background: var(--card-background);
border: 1.5px solid var(--input-border);
border-radius: var(--form-input-border-radius);
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;

.category {
.header {
padding: 0 20px;
li {
@include mixins.item($border: false);

h2 {
margin: 0;
padding: 15px 0 0;
}
-webkit-touch-callout: none;

p {
margin-top: 5px;
}
user-select: none;
padding: 0.9rem;
gap: 0.25rem 0.9rem;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
border-radius: 0;
background: var(--input-color);
border: 1.5px solid var(--input-border);
margin-bottom: -1.5px;

&:first-of-type {
border-top-left-radius: var(--form-input-border-radius);
border-top-right-radius: var(--form-input-border-radius);
}

.desc {
color: var(--text-color-secondary);
&:last-of-type {
border-bottom-left-radius: var(--form-input-border-radius);
border-bottom-right-radius: var(--form-input-border-radius);
}
}
}

.categories.flat {
.category {
border-bottom: none;

.header {
display: none;
.icon {
grid-row: span 2;
}
}
}
}

.j-item-options li,
.j-item-options {
display: block;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

.category, .j-item-options {
display: contents;
}

.j-item-options {
li.active {
border: 1.5px solid color-mix(in srgb, var(--text-color-secondary) 20%, var(--card-background));

&::before {
background: var(--item-background--hover);
}
}

li {
@include mixins.item($border: false);

-webkit-touch-callout: none;


user-select: none;
padding: 0.9rem;
gap: 0.25rem 0.9rem;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
border-radius: 0;
border-bottom: 1.5px solid color-mix(in srgb, var(--text-color-secondary) 20%, var(--card-background));
margin-bottom: -1px;

//&:first-of-type {
// border-top-left-radius: var(--form-input-border-radius);
// border-top-right-radius: var(--form-input-border-radius);
//}
label {
display: block;
font-size: var(--font-size-sm);
font-weight: 450;
color: var(--text-color);
cursor: pointer;

input {
position: absolute;
top: 24px;
left: 25px;
display: none;
}
}

//&:last-of-type {
// border-bottom-left-radius: var(--form-input-border-radius);
// border-bottom-right-radius: var(--form-input-border-radius);
//}
.desc {
color: var(--text-color-secondary);
grid-column: 2;
padding-right: 2rem;
}

.icon {
grid-row: span 2;
}
&.active {
border: 1.5px solid color-mix(in srgb, var(--text-color-secondary) 20%, var(--card-background));
z-index: 2;

label {
display: block;
font-size: var(--font-size-sm);
font-weight: 450;
color: var(--text-color);
cursor: pointer;
&::before {
background: var(--item-background--hover);
}

input {
position: absolute;
top: 24px;
left: 25px;
display: none;
.icon {
background: white;
}
}
}

.desc {
grid-column: 2;
padding-right: 2rem;
}
}
}
6 changes: 3 additions & 3 deletions src/main/scss/abstracts/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,13 +311,13 @@ $semantics: (
--section-padding: 1.625rem;
--input-color: color-mix(
in sRGB,
var(--text-color-secondary) 1.5%,
var(--text-color-secondary) 1%,
var(--background)
);
--input-border: color-mix(
in sRGB,
var(--text-color-secondary) 25%,
transparent
var(--text-color-secondary) 20%,
var(--card-background)
);
--input-border-hover: color-mix(
in sRGB,
Expand Down

0 comments on commit 5dd34a0

Please sign in to comment.