Improved button press feedback

* Added more feedback when pressing buttons. * Cleaned up older, not/rarely used CSS rules.
r3-team · May 17, 2022 · 8beadfe · 8beadfe
1 parent 8843199
commit 8beadfe
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -33,4 +33,7 @@
 }
 .settings .settings-page-limit div{
 	margin-right:16px;
+}
+.settings .account-action{
+	margin:10px 5px 10px 10px;
 }
diff --git 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"