chore(css): remove ng-deep & cleanup pointless mixins

ffalt · Feb 18, 2024 · b575a0f · b575a0f
1 parent c1b3c5b
commit b575a0f
Show file tree

Hide file tree

Showing 13 changed files with 228 additions and 301 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test": "jest",
     "coverage": "jest --coverage true",
     "lint:scss": "stylelint \"**/*.scss\"",
-    "lint:css": "stylelint --fix \"**/*.css\"",
+    "lint:css": "stylelint \"**/*.css\"",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix"
   },

diff --git a/src/app/components/game/game-component.component.html b/src/app/components/game/game-component.component.html
@@ -46,31 +46,31 @@
 	</div>
 </div>
 
-<app-dialog #help (clickEvent)="toggleDialogState($event)" class="overlay-help" [title]="title">
+<app-dialog #help (clickEvent)="toggleDialogState($event)" className="overlay-help" [title]="title">
 	@if (help.visible) {
 		<app-help></app-help>
 	}
 </app-dialog>
 
-<app-dialog #info (clickEvent)="toggleDialogState($event)" class="overlay-info" [title]="'TILES'|translate">
+<app-dialog #info (clickEvent)="toggleDialogState($event)" className="overlay-info" [title]="'TILES'|translate">
 	@if (info.visible) {
 		<app-tiles-info></app-tiles-info>
 	}
 </app-dialog>
 
-<app-dialog #settings (clickEvent)="toggleDialogState($event)" class="overlay-settings" [title]="'SETTINGS'|translate">
+<app-dialog #settings (clickEvent)="toggleDialogState($event)" className="overlay-settings" [title]="'SETTINGS'|translate">
 	@if (settings.visible) {
 		<app-settings></app-settings>
 	}
 </app-dialog>
 
-<app-dialog #newgame (clickEvent)="toggleDialogState($event)" class="overlay-newgame" [title]="'SELECT_BOARD'|translate">
+<app-dialog #newgame (clickEvent)="toggleDialogState($event)" className="overlay-newgame" [title]="'SELECT_BOARD'|translate">
 	@if (newgame.visible) {
 		<app-choose-layout class="choose" (startEvent)="startGame($event)" [gameMode]="game.mode"></app-choose-layout>
 	}
 </app-dialog>
 
-<app-dialog (clickEvent)="clickMessage()" [visible]="!!game.message" class="overlay-message" [noClose]="true">
+<app-dialog (clickEvent)="clickMessage()" [visible]="!!game.message" className="overlay-message" [noClose]="true">
 	@if (game.message) {
 		<div class="overlay-message-message" (click)="clickMessage()">
 			@if (game.message.msgID) {

diff --git a/src/app/components/game/game-component.component.scss b/src/app/components/game/game-component.component.scss
@@ -74,8 +74,7 @@
 		.ctrl {
 			display: inline-block;
 			color: var(--main-text-color);
-
-			@include no-select;
+			user-select: none;
 
 			.link {
 				text-decoration: none;
@@ -251,83 +250,6 @@
 		overflow: hidden;
 	}
 
-	.overlay-info {
-		::ng-deep {
-			.overlay {
-				z-index: 10010;
-
-				.overlay-popup {
-					width: 90%;
-					height: 90%;
-				}
-			}
-		}
-	}
-
-	.overlay-settings {
-		::ng-deep {
-			.overlay {
-				z-index: 10010;
-
-				.overlay-popup {
-					width: 90%;
-					max-height: 90%;
-					max-width: 1400px;
-				}
-			}
-		}
-	}
-
-	.overlay-newgame {
-		::ng-deep {
-			.overlay {
-				z-index: 10010;
-
-				.overlay-popup {
-					width: 98%;
-					height: 98%;
-					overflow: hidden;
-
-					@include respond-to-height(small-down) {
-						padding: 10px;
-					}
-				}
-			}
-		}
-	}
-
-	.overlay-message {
-		::ng-deep {
-			.overlay-message-message {
-				padding: 2em;
-			}
-
-			.overlay-popup {
-				cursor: pointer;
-				font-weight: 600;
-				text-align: center;
-				color: var(--dialog-headline-color);
-				padding: 0;
-
-				@include no-select;
-			}
-		}
-	}
-
-	.overlay-help {
-		::ng-deep {
-			.overlay {
-				z-index: 10010;
-
-				.overlay-popup {
-					max-height: 90%;
-					width: 90%;
-					max-width: 1200px;
-				}
-			}
-		}
-	}
-
 	@include respond-to-horizontal-device(pad) {
 		flex-direction: row;
 

diff --git a/src/app/modules/core/components/board/board.component.scss b/src/app/modules/core/components/board/board.component.scss
@@ -13,8 +13,7 @@
 		position: relative;
 		transform-origin: 0 0 0;
 		transform: translate(0, 0) scale(1);
-
-		@include no-select;
+		user-select: none;
 	}
 
 	.gesture-indicator {

diff --git a/src/app/modules/core/components/dialog/dialog.component.html b/src/app/modules/core/components/dialog/dialog.component.html
@@ -1,5 +1,5 @@
 @if (visible) {
-	<div class="overlay" (click)="toggle();">
+	<div class="overlay {{className}}" (click)="toggle();">
 		<div class="overlay-popup" (click)="$event.stopPropagation();">
 			@if (title) {
 				<h1>🀄️{{ title }}</h1>

diff --git a/src/app/modules/core/components/dialog/dialog.component.scss b/src/app/modules/core/components/dialog/dialog.component.scss
@@ -20,5 +20,4 @@
 			font-size: 1.1em;
 		}
 	}
-
 }
diff --git a/src/app/modules/core/components/dialog/dialog.component.ts b/src/app/modules/core/components/dialog/dialog.component.ts
@@ -7,6 +7,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 })
 export class DialogComponent {
 	@Input() title?: string;
+	@Input() className: string;
 	@Input() visible: boolean = false;
 	@Input() noClose: boolean = false;
 	@Output() readonly clickEvent = new EventEmitter<boolean>();

diff --git a/src/app/modules/editor/components/board/board.component.scss b/src/app/modules/editor/components/board/board.component.scss
@@ -8,8 +8,7 @@
 		width: 100%;
 		max-height: 960px;
 		background-color: var(--main-background-color);
-
-		@include no-select;
+		user-select: none;
 
 		g.stage {
 			transition: opacity 500ms;

diff --git a/src/app/modules/editor/components/editor/editor.component.scss b/src/app/modules/editor/components/editor/editor.component.scss
@@ -22,6 +22,30 @@
 		cursor: pointer;
 	}
 
+	.buttons {
+		text-align: center;
+
+		button {
+			background-color: transparent;
+			background-image: none;
+			border: 1px solid var(--main-bg-color-dk);
+			cursor: pointer;
+			font-size: 1em;
+			color: var(--text-highlight-color);
+			padding: 2px 16px;
+
+			&:hover {
+				color: var(--main-text-color-hover);
+				border: 1px solid var(--main-text-color-hover);
+			}
+
+			&[disabled] {
+				color: var(--text-disabled-color);
+				cursor: default;
+			}
+		}
+	}
+
 	.editor-content {
 		width: 100%;
 		height: 100%;
@@ -154,29 +178,4 @@
 
 		}
 	}
-
-	.buttons {
-		text-align: center;
-
-		button {
-			background-color: transparent;
-			background-image: none;
-			border: 1px solid var(--main-bg-color-dk);
-			cursor: pointer;
-			font-size: 1em;
-			color: var(--text-highlight-color);
-			padding: 2px 16px;
-
-			&:hover {
-				color: var(--main-text-color-hover);
-				border: 1px solid var(--main-text-color-hover);
-			}
-
-			&[disabled] {
-				color: var(--text-disabled-color);
-				cursor: default;
-			}
-		}
-	}
-
 }
diff --git a/src/app/modules/editor/components/layout/layout.component.scss b/src/app/modules/editor/components/layout/layout.component.scss
@@ -33,7 +33,25 @@
 		}
 
 		button {
-			@include button;
+			background-color: transparent;
+			background-image: none;
+			color: var(--text-highlight-color);
+			border: 1px solid var(--main-bg-color-dk);
+			cursor: pointer;
+
+			&:hover {
+				color: var(--main-text-color-hover);
+				border: 1px solid var(--main-bg-color-lt);
+			}
+
+			&.text-button {
+				padding: 10px 16px;
+			}
+
+			&[disabled] {
+				color: var(--text-disabled-color);
+				cursor: default;
+			}
 		}
 	}
 
@@ -85,8 +103,7 @@
 			}
 
 			span {
-				@include no-select;
-
+				user-select: none;
 				display: inline-block;
 				min-width: 0.8em;
 			}
@@ -113,8 +130,7 @@
 			span {
 				cursor: pointer;
 				text-decoration: underline;
-
-				@include no-select;
+				user-select: none;
 			}
 		}
 

diff --git a/src/app/modules/editor/components/manager/manager.component.scss b/src/app/modules/editor/components/manager/manager.component.scss
@@ -90,9 +90,26 @@
 	}
 
 	button {
-		@include button;
-
+		background-color: transparent;
+		background-image: none;
+		color: var(--text-highlight-color);
+		border: 1px solid var(--main-bg-color-dk);
+		cursor: pointer;
 		text-align: center;
+
+		&:hover {
+			color: var(--main-text-color-hover);
+			border: 1px solid var(--main-bg-color-lt);
+		}
+
+		&.text-button {
+			padding: 10px 16px;
+		}
+
+		&[disabled] {
+			color: var(--text-disabled-color);
+			cursor: default;
+		}
 	}
 
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,5 +20,4 @@ @@
     			font-size: 1.1em;
     		}
     	}
     }