From 9fa5df1bc76a95f4a3e99eb6b748f1d0556114ca Mon Sep 17 00:00:00 2001
From: UtkarshSiddhpura <utkarshsiddhpura09876@gmail.com>
Date: Mon, 29 Jul 2024 19:15:38 +0530
Subject: [PATCH] Improve filterbox gliches and ui.

---
 v2/css/styles.css             | 54 ++++++++++++++++++++++-------------
 v2/icons/view-created.svg     |  4 +--
 v2/icons/view-lastedit.svg    |  4 +--
 v2/js/components/filterbox.js | 33 ++++++++++++---------
 v2/js/screens/journal.js      |  7 ++---
 5 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/v2/css/styles.css b/v2/css/styles.css
index 061d9377a8..a20742ec36 100644
--- 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 {
@@ -1383,6 +1385,9 @@ a {
 	pointer-events: none;
 	filter: brightness(0.6);
 }
+#typepalette .filterBox-items {
+	height: 74vh;
+}
 .journal-toolleft {
 	gap: 10px !important;
 }
@@ -1476,6 +1481,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;
@@ -1602,4 +1613,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
index 577aceb75b..534caa0d38 100644
--- a/v2/icons/view-created.svg
+++ b/v2/icons/view-created.svg
@@ -5,7 +5,7 @@
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
 	<defs>
-		<mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="55" height="55">
+		<mask id="Mask-view-created" maskUnits="userSpaceOnUse" x="0" y="0" width="55" height="55">
             <rect x="0" y="0" width="55" height="55" fill="#FFFFFF" stroke="none"/>
 			<circle cx="21.5" cy="16" r="1.75" style="fill:#000000;;stroke:none"/>
 			<circle cx="21.5" cy="39" r="1.75" style="fill:#000000;;stroke:none"/>
@@ -15,7 +15,7 @@
             <line x1="21.5" y1="27.5" x2="29" y2="32.5" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
 		</mask>
 	</defs>
-    <circle cx="21" cy="27" r="15" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:3.5" mask="url(#Mask)"/>
+    <circle cx="21" cy="27" r="15" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:3.5" mask="url(#Mask-view-created)"/>
     <path d="M 46 17 l 7 7 l -14 0 z" fill="&stroke_color;" stroke="none"/>
     <path d="M 46 38 l 7 -7 l -14 0 z" fill="&stroke_color;" stroke="none"/>
 </svg>
diff --git a/v2/icons/view-lastedit.svg b/v2/icons/view-lastedit.svg
index fe26710182..266383f15c 100644
--- a/v2/icons/view-lastedit.svg
+++ b/v2/icons/view-lastedit.svg
@@ -5,7 +5,7 @@
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
 	<defs>
-		<mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="55" height="55">
+		<mask id="Mask-view-lastedit" maskUnits="userSpaceOnUse" x="0" y="0" width="55" height="55">
             <rect x="0" y="0" width="55" height="55" fill="#FFFFFF" stroke="none"/>
             <line x1="11" y1="19" x2="16" y2="19" stroke="#000000" stroke-width="2.5"/>
             <line x1="18" y1="19" x2="22" y2="19" stroke="#000000" stroke-width="2.5"/>
@@ -15,7 +15,7 @@
             <path d="M 17 35 l 2 -6 l 19 -19 l 4 3 l -19 19 z" fill="#000000" stroke="#000000" stroke-width="3"/>
 		</mask>
 	</defs>
-    <rect x="8" y="14" width="25" height="27" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:3.5" mask="url(#Mask)"/>
+    <rect x="8" y="14" width="25" height="27" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:3.5" mask="url(#Mask-view-lastedit)"/>
     <path d="M 17 35 l 1 -5 l 4 3 z" fill="&stroke_color;" stroke="none"/>
     <path d="M 17 35 m 2 -6 l 19 -19 l 4 3 l -19 19 z" fill="&stroke_color;" stroke="none"/>
     <path d="M 46 17 l 7 7 l -14 0 z" fill="&stroke_color;" stroke="none"/>
diff --git a/v2/js/components/filterbox.js b/v2/js/components/filterbox.js
index d477050a07..1db8f4c8d6 100644
--- 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
index edb6259acb..1a5f7c3a29 100644
--- a/v2/js/screens/journal.js
+++ b/v2/js/screens/journal.js
@@ -400,7 +400,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"),
@@ -411,7 +411,7 @@ const Journal = {
 			icon: {
 				id: "filter-time",
 				iconData: "icons/view-created.svg",
-				size: "18",
+				size: "20",
 				isNative: "true",
 			},
 			name: this.$t("Anytime"),
@@ -423,10 +423,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(),
 		};