openwrt-mirror/luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci.git synced 2025-12-21 17:04:35 +04:00
Code Issues Packages Projects Releases Wiki Activity

luci-base: make items of UIDynamicList drag-sortable

Browse Source 
Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
This commit is contained in:
Ramon Van Gorkom
2024-11-21 21:34:14 +01:00
committed by Paul Donald
parent fefb9acf57
commit 80f18df48f
6 changed files with 212 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View File

@@ -624,9 +624,11 @@ select,
border-radius: 3px;
color: var(--text-color-high);
position: relative;
pointer-events: none;
pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */
overflow: hidden;
word-break: break-all;
cursor: move; /* drag-and-drop */
user-select: text; /* text selection in drag-and-drop */
}
.cbi-dynlist > .item::after {
@@ -645,10 +647,35 @@ select,
pointer-events: auto;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .item.drag-over {
border-top: 1px solid var(--text-color-highest);
}
/* Make item being dragged in UIDynamicList partially transparent*/
.cbi-dynlist > .item.dragging {
opacity: 0.5;
}
/* prevent pointer changing when over the span element in UIDynamicList */
.cbi-dynlist > .item > span {
pointer-events: none;
}
.cbi-dynlist > .add-item {
display: flex;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid var(--text-color-highest);
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid var(--text-color-highest);
}
.cbi-dynlist > .add-item > input,
.cbi-dynlist > .add-item > button {
flex: 1 1 auto;

26
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View File

@@ -1378,10 +1378,12 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
max-width: 25rem;
margin-right: 2em;
padding: .5em .25em .25em 0;
pointer-events: none;
pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */
color: #666;
border-bottom: 2px solid rgba(0, 0, 0, .26);
outline: 0;
cursor: move; /* drag-and-drop */
user-select: text; /* text selection in drag-and-drop */
}
.cbi-dynlist[name="sshkeys"] > .item {
@@ -1403,9 +1405,21 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
background-color: var(--red-color-high);
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .item.drag-over {
border-top: 1px solid black;
}
/* Make item being dragged in UIDynamicList partially transparent*/
.cbi-dynlist > .item.dragging {
opacity: 0.5;
}
/* prevent pointer changing when over the span element in UIDynamicList */
.cbi-dynlist > .item > span {
white-space: normal;
word-break: break-word;
pointer-events: none;
}
.cbi-dynlist > .add-item {
@@ -1415,6 +1429,16 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
min-width: 16rem;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid black;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid black;
}
.cbi-dynlist > .add-item:not([ondrop]) > input {
overflow: hidden;
width: 100%;

28
themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
View File

@@ -1173,9 +1173,11 @@ textarea {
position: relative;
overflow: hidden;
transition: box-shadow .25s ease-in-out;
pointer-events: none;
pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */
flex: 1 1 100%;
word-break: break-all;
cursor: move; /* drag-and-drop */
user-select: text; /* text selection in drag-and-drop */
}
.cbi-dynlist > .item::after {
@@ -1196,6 +1198,20 @@ textarea {
pointer-events: all;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .item.drag-over {
border-top: 1px solid black;
}
/* Make item being dragged in UIDynamicList partially transparent*/
.cbi-dynlist > .item.dragging {
opacity: 0.5;
}
/* prevent pointer changing when over the span element in UIDynamicList */
.cbi-dynlist > .item > span {
pointer-events: none;
}
.cbi-dynlist[disabled] > .item::after {
pointer-events: none;
}
@@ -1209,6 +1225,16 @@ textarea {
display: flex;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid black;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid black;
}
.cbi-dynlist > .add-item > input {
flex: 1;
min-width: 18.5rem;

29
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View File

@@ -1340,10 +1340,12 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after {
border: 1px outset #000;
border-radius: 3px;
position: relative;
pointer-events: none;
pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: move; /* drag-and-drop */
user-select: text; /* text selection in drag-and-drop */
}
.cbi-dynlist > .item::after {
@@ -1364,10 +1366,35 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after {
height: auto;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .item.drag-over {
border-top: 1px solid red;
}
/* Make item being dragged in UIDynamicList partially transparent*/
.cbi-dynlist > .item.dragging {
opacity: 0.5;
}
/* prevent pointer changing when over the span element in UIDynamicList */
.cbi-dynlist > .item > span {
pointer-events: none;
}
.cbi-dynlist > .add-item {
display: flex;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid re;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid red;
}
.cbi-dynlist > .add-item > input {
flex: 1 1 auto;
}