Improved scene actors filter.

2024-01-07 23:44:33 +01:00
parent e32a366fff
commit 43949185c2
11 changed files with 456 additions and 90 deletions
--- a/components/filters/filters.vue
+++ b/components/filters/filters.vue
@@ -67,6 +67,120 @@ function toggleFilters(state) {
 }
 </script>

+<style>
+.filter-mode {
+	width: 100%;
+	color: var(--shadow);
+	background: none;
+	padding: .75rem;
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+
+	option {
+		color: var(--text-dark);
+	}
+}
+
+.filter-clear {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: .5rem 1rem;
+	color: var(--shadow-weak-10);
+	text-decoration: none;
+	cursor: default;
+
+	.icon {
+		fill: var(--shadow-weak-30);
+		margin: 0 0 0 1rem;
+	}
+
+	&.active {
+		color: var(--shadow);
+
+		.icon {
+			fill: var(--shadow-weak-10);
+		}
+
+		&:hover {
+			color: var(--text);
+			background: var(--shadow-hint);
+			cursor: pointer;
+
+			.icon {
+				fill: var(--alert);
+			}
+		}
+	}
+}
+
+.filter-items .filter-item {
+	display: flex;
+	align-items: stretch;
+
+	&:hover {
+		background: var(--shadow-weak-30);
+		cursor: pointer;
+	}
+
+	&.selected {
+		.filter-include  {
+			.filter-add {
+				fill: var(--success);
+			}
+
+			&:hover {
+				.filter-add {
+					display: none;
+				}
+
+				.filter-remove {
+					display: inline-block;
+				}
+			}
+		}
+	}
+}
+
+.filter-name {
+	min-width: 8rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-grow: 1;
+	padding: .25rem .75rem .25rem 1rem;
+	color: var(--text);
+	text-decoration: none;
+}
+
+.filter-include {
+	display: flex;
+	align-items: center;
+
+	.icon {
+		width: 1rem;
+		padding: 0 .75rem;
+		fill: var(--shadow-weak-30);
+	}
+
+	.filter-remove {
+		display: none;
+		fill: var(--alert);
+	}
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+
+.filter-include:hover,
+.filter-name:hover {
+	background: var(--shadow-weak-30);
+}
+</style>
+
 <style scoped>
 .filters-frame {
 	position: relative;
@@ -88,7 +202,7 @@ function toggleFilters(state) {
 	flex-grow: 1;
 	position: relative;
 	box-sizing: border-box;
-	padding: .5rem 0;
+	padding: 0 0 .5rem 0;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak-30);