From 80f18df48fcc39d22dfabb133e9bc823d7aeff86 Mon Sep 17 00:00:00 2001 From: Ramon Van Gorkom Date: Thu, 21 Nov 2024 21:34:14 +0100 Subject: luci-base: make items of UIDynamicList drag-sortable Signed-off-by: Ramon Van Gorkom --- .../htdocs/luci-static/openwrt.org/cascade.css | 29 +++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) (limited to 'themes/luci-theme-openwrt') diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 6ef9d63e72..2e7ba94aef 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -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; } -- cgit v1.2.3