From 8beadfeadb35735d4cb4db3c3beb030d27f6d302 Mon Sep 17 00:00:00 2001
From: Gabriel Herbert <gabriel@rei3.de>
Date: Tue, 17 May 2022 12:02:02 +0200
Subject: [PATCH] Improved button press feedback

* Added more feedback when pressing buttons.
* Cleaned up older, not/rarely used CSS rules.
---
 www/comps/button.css   | 27 +++++++++++++++++++--------
 www/comps/button.js    |  4 +++-
 www/comps/list.js      |  6 ++++--
 www/comps/settings.css |  3 +++
 www/comps/settings.js  |  4 ++--
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/www/comps/button.css b/www/comps/button.css
index 332fd79b..7c7bcf47 100644
--- a/www/comps/button.css
+++ b/www/comps/button.css
@@ -1,4 +1,3 @@
-/* button */
 .button{
 	height:30px;
 	margin:0px 8px 0px 0px;
@@ -16,9 +15,8 @@
 	height:40px;
 	font-size:120%;
 }
-.button.inactive{
-	/*filter:brightness(70%)*/;
-}
+
+/* button with background styling */
 .button.background{
 	margin:0px 4px 0px 0px;
 	padding:4px 0px 4px 10px;
@@ -28,6 +26,13 @@
 	color:var(--color-bg-font);
 	transition:color 0.1s, box-shadow 0.1s, background-color 0.1s;
 }
+.button.background:active:not(.noMargin):not(.inactive){
+	height:28px;
+	margin:1px 5px 1px 1px;
+}
+.button.background.large:active:not(.noMargin):not(.inactive){
+	height:38px;
+}
 .button.background.inactive{
 	filter:grayscale(100%);
 }
@@ -40,15 +45,16 @@
 .button.background.darkBg.cancel{
 	border:2px solid var(--color-cancel-border);
 }
+
+/* layout overwrites */
 .button.right{
 	float:right;
 }
-.button.spaced{
-	margin:10px 18px 10px 10px;
-}
-.button.not-spaced{
+.button.noMargin{
 	margin:0px;
 }
+
+/* button content */
 .button img{
 	height:22px;
 	margin:3px;
@@ -69,6 +75,11 @@
 }
 .button:focus:not(.background):not(.inactive) img,
 .button:hover:not(.background):not(.inactive) img{
+	height:26px;
+	margin:1px;
+	transition:height 0.2s, margin 0.2s;
+}
+.button:active:not(.background):not(.inactive) img{
 	height:28px;
 	margin:0px;
 	transition:height 0.2s, margin 0.2s;
diff --git a/www/comps/button.js b/www/comps/button.js
index 77a8e04d..b17570bb 100644
--- a/www/comps/button.js
+++ b/www/comps/button.js
@@ -40,7 +40,8 @@ let MyButton = {
 		darkBg:{ type:Boolean, required:false, default:false },
 		large: { type:Boolean, required:false, default:false },
 		naked: { type:Boolean, required:false, default:false },
-		right: { type:Boolean, required:false, default:false }
+		right: { type:Boolean, required:false, default:false },
+		tight: { type:Boolean, required:false, default:false }
 	},
 	emits:['trigger','trigger-middle','trigger-right'],
 	computed:{
@@ -53,6 +54,7 @@ let MyButton = {
 				inactive:!this.active,
 				large:this.large,
 				noHighlight:!this.active,
+				noMargin:this.tight,
 				right:this.right
 			};
 		}
diff --git a/www/comps/list.js b/www/comps/list.js
index b2aa31b9..127e63aa 100644
--- a/www/comps/list.js
+++ b/www/comps/list.js
@@ -540,14 +540,16 @@ let MyList = {
 					:tabindex="isInput ? '0' : '-1'"
 				>
 					<div class="actions" v-if="hasBulkActions" @click.stop="">
-						<my-button class="not-spaced"
+						<my-button
 							@trigger="selectRow(ri)"
 							:image="selectedRows.includes(ri) ? 'checkbox1.png' : 'checkbox0.png'"
 							:naked="true"
+							:tight="true"
 						/>
-						<my-button class="not-spaced" image="delete.png"
+						<my-button image="delete.png"
 							@trigger="delAsk([ri])"
 							:naked="true"
+							:tight="true"
 						/>
 					</div>
 					<div class="header"></div>
diff --git a/www/comps/settings.css b/www/comps/settings.css
index f6d117ed..5674a601 100644
--- a/www/comps/settings.css
+++ b/www/comps/settings.css
@@ -33,4 +33,7 @@
 }
 .settings .settings-page-limit div{
 	margin-right:16px;
+}
+.settings .account-action{
+	margin:10px 5px 10px 10px;
 }
\ No newline at end of file
diff --git a/www/comps/settings.js b/www/comps/settings.js
index ab3c660a..4682bde1 100644
--- a/www/comps/settings.js
+++ b/www/comps/settings.js
@@ -392,8 +392,8 @@ let MySettingsAccount = {
 			</tbody>
 		</table>
 		
-		<div>
-			<my-button image="save.png" class="right spaced"
+		<div class="account-action">
+			<my-button image="save.png" class="right"
 				@trigger="setCheck"
 				:active="canSave"
 				:caption="capGen.button.save"