Improve filterbox gliches and ui.

llaske · Jul 30, 2024 · 4ea6c37 · 4ea6c37
1 parent 15239d3
commit 4ea6c37
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 42 deletions.
diff --git a/v2/css/styles.css b/v2/css/styles.css
@@ -433,11 +433,13 @@ a {
 }
 
 .filterBox-sugarizer {
-	margin-top: 0px;
-	height: 45px;
+	height: 50px;
 	width: fit-content;
-	margin: 10px;
-	color: white
+	padding-inline: 6px;
+	color: white;
+	border: 2px solid transparent;
+	border-bottom: 0;
+	position: relative;
 }
 
 .filterBox {
@@ -449,8 +451,7 @@ a {
 }
 
 .filterBox-icon {
-	margin: 2px;
-	margin-top: 12px !important;
+	margin-top: 8px !important;
 }
 
 .filterBox-down {
@@ -467,35 +468,31 @@ a {
 	background-position-x: center;
 	background-color: black;
 	background-size: 47px;
-	border: 2px solid #808080;
-	border-bottom: 0;
+	border-color: #808080;
 }
 
 .filterBox-text {
 	margin-top: 14px;
-	margin-left: 15px;
-	margin-right: 4px;
+	margin-left: 4px;
 }
 
 .filterBox-content {
 	position: absolute;
 	background-color: black;
-	max-width: 271px;
-	min-width: 161px;
-	min-height: 51px;
-	max-height: 80vh;
+	max-width: 270px;
+	min-width: 200px;
 	pointer-events: auto;
 	border: 2px solid #808080;
 	color: white;
 	overflow: auto;
 	z-index: 1;
-	margin-left: -2px;
-	margin-top: 5px;
+	top: 100%;
+	left: 0;
 }
 
 .filterBox-header {
 	height: 40px;
-	margin-left: 5px;
+	margin-left: 8px;
 	margin-right: 5px;
 	margin-bottom: 10px;
 	font-weight: bold;
@@ -514,14 +511,19 @@ a {
 	color: white;
 	border-width: 2px;
 	z-index: 1;
-	max-height: 50vh;
+	max-height: 80vh;
 	overflow-y: auto;
 }
 
+.filterBox-items .filterBox-text, .filterBox-items .filterBox-icon {
+	margin-top: 0 !important;
+}
+
 .filterBox-items-item {
 	display: flex;
 	height: 35px;
-	margin: 3px 0px;
+	padding: 6px 8px;
+	align-items: center
 }
 
 .filterBox-items-item:hover {
@@ -1380,6 +1382,9 @@ a {
 	pointer-events: none;
 	filter: brightness(0.6);
 }
+#typepalette .filterBox-items {
+	height: 74vh;
+}
 .journal-toolleft {
 	gap: 10px !important;
 }
@@ -1473,6 +1478,12 @@ a {
 .fade-leave-active {
 	transition: opacity 0.3s ease-in;
 }
+.fade-fast-enter-active,
+.fade-fast-leave-active {
+	transition: opacity 0.2s ease-out;
+}
+.fade-fast-enter-from,
+.fade-fast-leave-to,
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
@@ -1599,4 +1610,7 @@ a {
 	z-index: 100;
 	user-select: none;
 }
-
+.journal-loader img {
+	display: block;
+	margin: 14px auto 24px auto;
+}
diff --git a/v2/icons/view-created.svg b/v2/icons/view-created.svg
diff --git a/v2/icons/view-lastedit.svg b/v2/icons/view-lastedit.svg
diff --git a/v2/js/components/filterbox.js b/v2/js/components/filterbox.js
@@ -14,28 +14,32 @@ const FilterBox ={
 					ref="filterBox"
 					v-if="optionsData && (optionsData.icon || optionsData.name)"
 					v-bind:class="showSubpopup? 'filterBox-sugarizer filterBox-up': 'filterBox-sugarizer filterBox-down'"
+					v-on:click="showFilterBox()"
 				>
-					<div class="filterBox" v-on:click="showFilterBox()">
-						<icon class="filterBox-icon"
-							v-if="selectedData.icon"
-							:key="this.iconKey"
-							:id="'optionsData.id'+selectedData.icon.id"
-							:svgfile=selectedData.icon.iconData
-							:color=selectedData.icon.color
-							:size=selectedData.icon.size
-							:x=selectedData.icon.iconx
-							:y=selectedData.icon.icony
-							:isNative=selectedData.icon.isNative
-						></icon>
-						<div v-if="selectedData.name" class="filterBox-text">{{ selectedData.name }}</div>
+					<div class="filterBox">
+						<div :style="'width:' + selectedData.icon.size + 'px;'">
+							<icon class="filterBox-icon"
+								v-show="selectedData.icon"
+								:key="this.iconKey"
+								:id="'options-id'+selectedData.icon.id"
+								:svgfile=selectedData.icon.iconData
+								:color=selectedData.icon.color
+								:size=selectedData.icon.size
+								:x=selectedData.icon.iconx
+								:y=selectedData.icon.icony
+								:isNative=selectedData.icon.isNative
+							></icon>
+						</div>
+						<div v-if="optionsData.name && selectedData.name" class="filterBox-text">{{ selectedData.name }}</div>
 					</div>
 					<div ref="filterBoxPopup">
+						<transition name="fade-fast" appear>
 						<div v-if="showSubpopup" class="filterBox-content">
 							<div v-if="optionsData.header" class="filterBox-header">{{ optionsData.header }}</div>
 							<div class="filterBox-hr"></div>
 							<div class="filterBox-items">
 								<div class="filterBox-items-item" 
-									v-for="item in optionsData.filterBoxList" key="item.index"
+									v-for="item in optionsData.filterBoxList" :key="item.index"
 									v-on:click=optionisSelected(item)
 								>
 									<icon class="filterBox-icon"
@@ -53,6 +57,7 @@ const FilterBox ={
 								</div>
 							</div>
 						</div>
+						</transition>
 					</div>
 				</div>`,
 	components: {

diff --git a/v2/js/screens/journal.js b/v2/js/screens/journal.js
@@ -397,7 +397,7 @@ const Journal = {
 				id: "filter-type",
 				iconData: "icons/view-type.svg",
 				isNative: "true",
-				size: "18",
+				size: "20",
 			},
 			name: this.$t("AllType"),
 			header: this.$t("SelectFilter"),
@@ -408,7 +408,7 @@ const Journal = {
 			icon: {
 				id: "filter-time",
 				iconData: "icons/view-created.svg",
-				size: "18",
+				size: "20",
 				isNative: "true",
 			},
 			name: this.$t("Anytime"),
@@ -420,10 +420,9 @@ const Journal = {
 			icon: {
 				id: "sort-palette",
 				iconData: "icons/view-lastedit.svg",
-				size: "18",
+				size: "20",
 				isNative: "true",
 			},
-			name: this.$t("SortByUpdated"),
 			header: this.$t("SortDisplay"),
 			filterBoxList: this.getSortPaletteList(),
 		};