luci-base, themes: rework dynlist and dropdown widgets

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

3 files changed, 194 insertions, 14 deletions

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 67e19e7d0..73e6c3bed 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -492,12 +492,47 @@ select,
 	box-sizing: border-box;
 }
 
-.cbi-dropdown {
+.cbi-dropdown,
+.cbi-dynlist {
 	min-width: 210px;
 	max-width: 400px;
 	width: auto;
 }
 
+.cbi-dynlist {
+	height: auto;
+	min-height: 30px;
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.cbi-dynlist > .item {
+	margin-bottom: 4px;
+	box-shadow: 0 0 2px #ccc;
+	background: #fff;
+	padding: 2px 2em 2px 4px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	position: relative;
+	pointer-events: none;
+}
+
+.cbi-dynlist > .item::after {
+	content: "×";
+	position: absolute;
+	display: inline-flex;
+	align-items: center;
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	padding: 0 6px;
+	border: 1px solid #ccc;
+	border-radius: 0 3px 3px 0;
+	font-weight: bold;
+	color: #c44;
+	pointer-events: auto;
+}
+
 select {
 	padding: initial;
 	background: #fff;
@@ -548,7 +583,8 @@ textarea {
 .td > input[type=text],
 .td > input[type=password],
 .td > select,
-.td > .cbi-dropdown {
+.td > .cbi-dropdown,
+.cbi-dynlist > .add-item > .cbi-dropdown {
 	width: 100%;
 }
 
@@ -568,11 +604,12 @@ textarea {
 	color: #bfbfbf;
 }
 
-.btn, .cbi-button, input, textarea {
+.item::after, .btn, .cbi-button, input, textarea {
 	transition: border linear 0.2s, box-shadow linear 0.2s;
 	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+.item:hover::after,
 .btn:hover, .cbi-button:hover,
 input:focus, textarea:focus {
 	outline: 0;
@@ -1206,6 +1243,7 @@ footer {
 	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
 
+.item::after,
 .btn,
 .cbi-button {
 	cursor: pointer;
@@ -1318,6 +1356,7 @@ footer {
 	color: #404040;
 }
 
+.cbi-dynlist > .item:focus,
 .cbi-dropdown:focus {
 	outline: 2px solid #4b6e9b;
 }
@@ -1354,6 +1393,7 @@ footer {
 	font-weight: bold;
 	text-shadow: 1px 1px 0px #fff;
 	display: none;
+	justify-content: center;
 }
 
 .cbi-dropdown > ul > li {
@@ -1454,6 +1494,14 @@ footer {
 	border-bottom: none;
 }
 
+.cbi-dropdown[open] > ul.dropdown > li[unselectable] {
+	opacity: 0.7;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
+	width: 100%;
+}
+
 .cbi-dropdown[disabled] {
 	pointer-events: none;
 	opacity: .6;
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index a4d71eeb6..e62c9be21 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -153,7 +153,9 @@ input,
 }
 
 select:not([multiple="multiple"]):focus,
-input:focus {
+input:focus,
+.cbi-dropdown:focus,
+.cbi-dynlist > .item:focus {
     border-color: var(--main-color, #0099CC);
 }
 
@@ -642,7 +644,7 @@ td > table > tbody > tr > td,
 
 /* button style */
 
-.btn, .cbi-button {
+.btn, .cbi-button, .item::after {
     -webkit-appearance: none;
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.87);
@@ -675,6 +677,7 @@ td > table > tbody > tr > td,
 .cbi-button:hover,
 .cbi-button:focus,
 .cbi-button:active,
+.item:hover::after,
 .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover,
 .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus,
 .cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
@@ -958,6 +961,7 @@ td > table > tbody > tr > td,
 }
 
 
+.cbi-dynlist,
 .cbi-dropdown {
     display: inline-flex;
     cursor: pointer;
@@ -966,10 +970,6 @@ td > table > tbody > tr > td,
     height: auto;
 }
 
-.cbi-dropdown:focus {
-    outline: 2px solid #4b6e9b;
-}
-
 .cbi-dropdown > ul {
     margin: 0 !important;
     padding: 0;
@@ -1109,6 +1109,22 @@ td > table > tbody > tr > td,
     border-bottom: none;
 }
 
+.cbi-dropdown[open] > ul.dropdown > li[unselectable] {
+    opacity: 0.7;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
+    width: 100%;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[unselectable] {
+    opacity: 0.7;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
+    width: 100%;
+}
+
 .cbi-dropdown[disabled] {
     pointer-events: none;
     opacity: .6;
@@ -1122,6 +1138,68 @@ td > table > tbody > tr > td,
     width: auto;
 }
 
+.cbi-dynlist {
+    height: auto;
+    min-height: 30px;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.cbi-dynlist > .item {
+    margin: 0 2em 4px 0;
+    padding: 2px 4px;
+    border-bottom: 2px solid rgba(0, 0, 0, .26);
+    position: relative;
+    pointer-events: none;
+    cursor: default;
+}
+
+.cbi-dynlist > .item::after {
+    content: "×";
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    top: 0;
+    right: -2em;
+    bottom: 0;
+    padding: 0 6px;
+    border: 1px solid #c44;
+    font-weight: bold;
+    color: #c44;
+    pointer-events: auto;
+}
+
+.cbi-dynlist {
+    height: auto;
+    min-height: 30px;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.cbi-dynlist > .item {
+    margin: 0 2em 4px 0;
+    padding: 2px 4px;
+    border-bottom: 2px solid rgba(0, 0, 0, .26);
+    position: relative;
+    pointer-events: none;
+    cursor: default;
+}
+
+.cbi-dynlist > .item::after {
+    content: "×";
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    top: 0;
+    right: -2em;
+    bottom: 0;
+    padding: 0 6px;
+    border: 1px solid #c44;
+    font-weight: bold;
+    color: #c44;
+    pointer-events: auto;
+}
+
 
 /* luci */
 
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 94d6b5729..e650aa55a 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
@@ -516,7 +516,8 @@ input.cbi-input-password + img {
 
 .td select,
 .td .cbi-dropdown,
-.td input[type=text] {
+.td input[type=text],
+.cbi-dynlist > .add-item > .cbi-dropdown {
 	width: 100%;
 }
 
@@ -531,7 +532,7 @@ img.cbi-image-button {
 	vertical-align: middle;
 }
 
-.btn, .cbi-button {
+.btn, .cbi-button, .item::after {
 	padding: 0 .5em;
 	border-radius: 3px;
 	border: 1px solid #aaa;
@@ -545,9 +546,11 @@ img.cbi-image-button {
 	font-weight: bold;
 	line-height: 13pt;
 	height: 16pt;
+	box-sizing: border-box;
+	cursor: pointer;
 }
 
-.btn:hover, .cbi-button:hover {
+.btn:hover, .cbi-button:hover, .item:hover::after {
 	box-shadow: 0 0 3px #37c;
 }
 
@@ -1009,7 +1012,8 @@ ul.cbi-tabmenu li.cbi-tab {
 	background: #fff;
 }
 
-.cbi-dropdown:focus {
+.cbi-dropdown:focus,
+.cbi-dynlist > .item:focus {
 	outline: 2px solid #4b6e9b;
 }
 
@@ -1150,11 +1154,60 @@ ul.cbi-tabmenu li.cbi-tab {
 	border-bottom: none;
 }
 
+.cbi-dropdown[open] > ul.dropdown > li[unselectable] {
+	opacity: 0.7;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
+	width: 100%;
+}
+
 .cbi-dropdown[disabled] {
 	pointer-events: none;
 	opacity: .6;
 }
 
+.cbi-dynlist {
+	height: auto;
+	min-height: 30px;
+	min-width: 210px;
+	max-width: 100%;
+	width: auto;
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.cbi-dynlist > .item {
+	margin-bottom: 4px;
+	background: #eee;
+	padding: 2px 2em 2px 4px;
+	border: 1px outset #000;
+	border-radius: 3px;
+	position: relative;
+	pointer-events: none;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cbi-dynlist > .item::after {
+	content: "×";
+	position: absolute;
+	display: inline-flex;
+	align-items: center;
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	padding: 0 6px;
+	border: 1px outset #000;
+	background: #fff;
+	border-radius: 0 3px 3px 0;
+	font-weight: bold;
+	color: #c44;
+	pointer-events: auto;
+	height: auto;
+}
+
 input[type="text"] + .cbi-button,
 input[type="password"] + .cbi-button,
 select + .cbi-button {
@@ -1695,13 +1748,14 @@ select + .cbi-button {
 		height: 1.4em;
 	}
 
-	[data-dynlist] > input,
 	input.cbi-input-password {
 		width: calc(100% - 20px);
 	}
 
+	.cbi-dynlist,
 	.cbi-dropdown {
 		min-width: 100%;
+		display: flex;
 	}
 
 	.btn, .cbi-button {