Website Icons can now be toggled and optimized visual performance of …

…toggling buttons
Rabbit-Company · Jun 28, 2022 · a93435f · a93435f
1 parent 3e5fda8
commit a93435f
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 3 deletions.
diff --git a/website/css/settings.css b/website/css/settings.css
@@ -6,4 +6,8 @@ body{
     min-width: 500px;
     min-height: 500px;
     overflow-x: hidden;
+}
+
+select{
+    -webkit-appearance: none;
 }
diff --git a/website/js/default-functions.js b/website/js/default-functions.js
@@ -34,6 +34,17 @@ function toggleMenu(){
 	}
 }
 
+function toggleButton(id){
+	let button = document.getElementById(id);
+	if(button.className.includes('successButton')){
+		button.innerText = lang[readData('lang')]["disable"];
+		button.className = "dangerButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
+	}else{
+		button.innerText = lang[readData('lang')]["enable"];
+		button.className = "successButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
+	}
+}
+
 function copyToClipboard(text){
 	let textArea = document.createElement("textarea");
 	textArea.value = text;

diff --git a/website/js/passwords.js b/website/js/passwords.js
@@ -20,6 +20,7 @@ initStorageCache.then(() => {
 		let start = new Date().getTime();
 		if (readData('passwords') !== null && typeof(readData('passwords')) !== 'undefined') {
 			const passwords = JSON.parse(readData('passwords'));
+			const websiteIcons = readData('websiteIcons');
 			document.getElementById("stats-passwords").innerText = (passwords.length > 0) ? passwords.length : 0;
 			let html_passwords = "";
 			for (let i = 0; i < passwords.length; i++) {
@@ -28,7 +29,11 @@ initStorageCache.then(() => {
 
 				html_passwords += "<tr class='passwordsBorderColor'><td class='px-8 py-4 max-w-xs whitespace-nowrap overflow-hidden'><div class='flex items-center'><div class='flex-shrink-0 h-10 w-10'>";
 				//Icon
-				html_passwords += "<img class='h-10 w-10 rounded-full' loading='lazy' src='https://www.google.com/s2/favicons?domain=" + website + "' alt=''>";
+				if(websiteIcons == "true"){
+					html_passwords += "<img class='h-10 w-10 rounded-full' loading='lazy' src='https://www.google.com/s2/favicons?domain=" + website + "' alt=''>";
+				}else{
+					html_passwords += "<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='#2c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><line x1='3.6' y1='9' x2='20.4' y2='9' /><line x1='3.6' y1='15' x2='20.4' y2='15' /><path d='M11.5 3a17 17 0 0 0 0 18' /><path d='M12.5 3a17 17 0 0 1 0 18' /></svg>";
+				}
 				html_passwords += "</div><div class='ml-4'><div class='tertiaryColor text-sm font-medium max-w-[16rem] sm:max-w-[21rem] md:max-w-[27rem] lg:max-w-[35rem] xl:max-w-[45rem] 2xl:max-w-[45rem] overflow-hidden text-ellipsis'>";
 				//Url
 				html_passwords += website;

diff --git a/website/js/settings.js b/website/js/settings.js
@@ -36,6 +36,14 @@ initStorageCache.then(() => {
 		document.getElementById("toggle-2fa-btn").className = "successButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
 	}
 
+	if(readData('websiteIcons') == "true"){
+		document.getElementById("toggle-website-icons").innerText = lang[readData('lang')]["disable"];
+		document.getElementById("toggle-website-icons").className = "dangerButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
+	}else{
+		document.getElementById("toggle-website-icons").innerText = lang[readData('lang')]["enable"];
+		document.getElementById("toggle-website-icons").className = "successButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
+	}
+
 	if (readData('autoSearch') == "false") {
 		document.getElementById("toggle-auto-search").innerText = lang[readData('lang')]["enable"];
 		document.getElementById("toggle-auto-search").className = "successButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm";
@@ -421,13 +429,22 @@ document.getElementById("dialog-button-cancel").addEventListener("click", () =>
 	hide('dialog');
 });
 
+document.getElementById("toggle-website-icons").addEventListener("click", () => {
+	if(readData('websiteIcons') == "true") {
+		writeData('websiteIcons', "false");
+	}else{
+		writeData('websiteIcons', "true");
+	}
+	toggleButton('toggle-website-icons');
+});
+
 document.getElementById("toggle-auto-search").addEventListener("click", () => {
 	if (readData('autoSearch') == "false") {
 		writeData('autoSearch', "true");
 	} else {
 		writeData('autoSearch', "false");
 	}
-	location.reload();
+	toggleButton('toggle-auto-search');
 });
 
 document.getElementById("toggle-2fa-btn").addEventListener("click", () => {

diff --git a/website/passwords.html b/website/passwords.html
@@ -101,7 +101,7 @@
                   </div>
                   <div class="px-4 py-5 secondaryBackgroundColor shadow overflow-hidden sm:p-6">
                     <dt class="text-sm font-medium secondaryColor truncate">Client Version</dt>
-                    <dd class="mt-1 text-3xl font-semibold tertiaryColor">6.2.0</dd>
+                    <dd class="mt-1 text-3xl font-semibold tertiaryColor">6.3.0</dd>
                   </div>
                 </dl>
               </div>

diff --git a/website/settings.html b/website/settings.html
@@ -154,6 +154,22 @@
                     </div>
                 </div>
             </li>
+            <!-- Website Icons -->
+            <li class="secondaryBackgroundColor shadow overflow-hidden rounded-md px-6 py-4">
+                <div>
+                    <label id="label-website-icons" class="secondaryColor block text-sm font-medium sm:mt-px sm:pt-2">
+                      Website Icons
+                    </label>
+                    <div class="mt-5">
+                      <button id="toggle-website-icons" type="button" class="successButton font-bold inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md focus:outline-none sm:text-sm">
+                        Enable
+                      </button>
+                    </div>
+                    <label class="secondaryColor block text-sm font-medium sm:mt-px sm:pt-2">
+                      Enabling website icons might reduce your privacy.
+                    </label>
+                </div>
+            </li>
             <!-- Auto Search -->
             <li class="secondaryBackgroundColor shadow overflow-hidden rounded-md px-6 py-4">
                 <div>