dashboard search (#936)

- Improvement: Dashboard paginated lists now include a search input that jumps to the page containing the first match and highlights the row
- Improvement: Dashboard paginated lists show a loading indicator while fetching data
- Improvement: Hub dashboard navigates to and highlights newly provisioned instances

1 files changed, 47 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index ca577675b..8d4e60472 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -1749,6 +1749,53 @@ tr:last-child td {
 	text-align:			center;
 }
 
+.module-pager-search {
+	font-size:			12px;
+	padding:			4px 8px;
+	width:				14em;
+	border:				1px solid var(--theme_g2);
+	border-radius:		4px;
+	background:			var(--theme_g4);
+	color:				var(--theme_g0);
+	outline:			none;
+	transition:			border-color 0.15s, outline 0.3s;
+}
+
+.module-pager-search:focus {
+	border-color:		var(--theme_p0);
+}
+
+.module-pager-search::placeholder {
+	color:				var(--theme_g1);
+}
+
+@keyframes pager-search-flash {
+	from { box-shadow: inset 0 0 0 100px var(--theme_p2); }
+	to   { box-shadow: inset 0 0 0 100px transparent; }
+}
+
+.zen_table > .pager-search-highlight > div {
+	animation:			pager-search-flash 1s linear forwards;
+}
+
+.module-table .pager-search-highlight td {
+	animation:			pager-search-flash 1s linear forwards;
+}
+
+@keyframes pager-loading-pulse {
+	0%, 100% { opacity: 0.6; }
+	50%      { opacity: 0.2; }
+}
+
+.pager-loading {
+	color:				var(--theme_g1);
+	font-style:			italic;
+	font-size:			14px;
+	font-weight:		600;
+	padding:			12px 0;
+	animation:			pager-loading-pulse 1.5s ease-in-out infinite;
+}
+
 .module-table td, .module-table th {
 	padding-top:		4px;
 	padding-bottom:		4px;