Skip to content

Commit

Permalink
WB: Restyle draggable cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@janfaracik
janfaracik committed Nov 29, 2021
1 parent 0b1d8ed commit 5566a69
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 175 deletions.
5 changes: 2 additions & 3 deletions core/src/main/resources/lib/form/hetero-list.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,13 @@ THE SOFTWARE.
</j:if>
</div>

<!-- TODO: help support is unintuitive; people should be able to see help from drop-down menu -->
<j:if test="${help!=null}">
<f:helpArea />
</j:if>

<d:invokeBody/>

<f:class-entry descriptor="${descriptor}" />

<d:invokeBody/>
</div>
</d:tag>
</d:taglib>
Expand Down
17 changes: 4 additions & 13 deletions core/src/main/resources/lib/form/repeatable/repeatable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,19 +173,10 @@ Behaviour.specify("INPUT.repeatable-add", 'repeatable', 0, function(e) {
e = null; // avoid memory leak
});

Behaviour.specify("INPUT.repeatable-delete", 'repeatable', 0, function(e) {
var b = makeButton(e,function(e) {
repeatableSupport.onDelete(e.target);
});
var be = $(b.get("element"));
be.on("mouseover",function() {
$(this).up(".repeated-chunk").addClassName("hover");
});
be.on("mouseout",function() {
$(this).up(".repeated-chunk").removeClassName("hover");
});

e = be = null; // avoid memory leak
Behaviour.specify("BUTTON.repeatable-delete", 'repeatable', 0, function(e) {
e.addEventListener("click", function() {
repeatableSupport.onDelete(e);
})
});

// radio buttons in repeatable content
Expand Down
4 changes: 3 additions & 1 deletion core/src/main/resources/lib/form/repeatableDeleteButton.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,7 @@ THE SOFTWARE.
</st:attribute>
</st:documentation>
<st:adjunct includes="lib.form.repeatable.repeatable"/>
<input type="button" value="${attrs.value ?: '%Delete'}" tooltip="${attrs.value ?: '%Delete'}" class="repeatable-delete danger" />
<button tooltip="${attrs.value ?: '%Delete'}" class="repeatable-delete danger" type="button">
<l:ionicon name="close-outline" />
</button>
</j:jelly>
72 changes: 0 additions & 72 deletions war/src/main/js/widgets/config/tabbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,78 +158,6 @@
}
}

// Repeatable elements

.repeated-container > .repeated-chunk {
padding: 0.75rem;
}

.repeated-chunk.hover {
border-color: var(--line-blue);
box-shadow: 0 2px 10px var(--shade), inset 0 200px 200px -200px var(--brightest-bg-color);
position: relative;
z-index: 2
}

.repeated-chunk {
border: 1px solid var(--shade);
margin: 2px;
position: relative;
}
// Styling for drag & drop items
.repeated-chunk.repeated-chunk--sortable-ghost,
.repeated-chunk.repeated-chunk--sortable-chosen {
border-width: 2px;
border-color: var(--line-blue);
}

.repeatable-delete {
position: absolute;
top: -4px;
right: 40px;
height: 20px;
width: 30px;
}

.repeatable-delete button {
text-align: center;
text-indent: -9999px;
width: 30px !important;
height: 18px !important;
padding: 0 !important;
margin: 0 !important;
.border-radius-top(0) !important;
background-color: var(--danger);
color: var(--light-bg-color);
border: 1px solid var(--danger-line);
line-height: 12px !important;
display: inline-block;
font-size: 8px;
min-width: 0;
min-height: 0;

&:focus,
&:hover {
background-color: var(--danger-dark);
border-color: var(--danger-dark-line);
color: var(--brightest-bg-color);
}

&:before {
content: 'X';
font-weight: bold;
position: absolute;
display: block;
left: 0;
top: 2;
width: 30px;
height: 16px;
text-align: center;
font-size: 12px;
text-indent: 0;
}
}

span.highlight {
background-color: #ffff00;
}
Expand Down
73 changes: 0 additions & 73 deletions war/src/main/less/base/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1107,54 +1107,6 @@ table.fingerprint-in-build td {
border-radius: 0.25em;
}

/* ========================= repeatable elements ========================= */

.repeated-chunk {
border: 2px dashed var(--input-border);
padding: 1rem;
border-radius: 6px;
}

.repeated-chunk.hover {
border-color: var(--medium-grey);
}

.repeated-chunk .show-if-last { visibility: hidden; }
.repeated-chunk.last .show-if-last { visibility: visible; }

.repeated-chunk .show-if-not-last { visibility: visible; }
.repeated-chunk.last .show-if-not-last { visibility: hidden; }

.repeated-chunk .show-if-not-only { visibility: visible; }
.repeated-chunk.only .show-if-not-only { visibility: hidden; }

/* == nested repeatable elements / 2 deep == */
.repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; }
.repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; }

.repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; }
.repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; }

.repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; }
.repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; }

/* == nested repeatable elements / 3 deep == */
.repeated-chunk .repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; }
.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; }

.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; }
.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; }

.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; }
.repeated-chunk .repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; }

/*
<DIV>s marked with to-be-removed is used in conjunction with repeatable.jelly and hetero-list.jelly
and represents a master copy that gets pulled out from HTML, then inserted later upon demand multiple times
when the user does "Add".
*/
div.to-be-removed { display: none; }

/* ========================= Other form related CSS ========================= */

.radioBlock-container {
Expand Down Expand Up @@ -1226,31 +1178,6 @@ textarea.rich-editor {
visibility: hidden;
}

/* ========================= D&D support in heterogenous/repeatable lists = */

.hetero-list-container.with-drag-drop .repeated-chunk,
.repeated-container.with-drag-drop .repeated-chunk {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

// SortableJS drag & drop classes
.repeated-chunk--sortable-ghost {
height: 100px;
width: 100%;
overflow: hidden;
}
.repeated-chunk--sortable-chosen {
height: 100px;
width: 100%;
background-color: transparent;
border: 2px solid var(--primary);

& > * {
display: none;
}
}

/* ========================= plugin update center ========================= */

#plugins .excerpt {
Expand Down
Loading

0 comments on commit 5566a69

Please sign in to comment.