Archive update v0.53.2

src/ts/components/shared/action-bar/action-bar.pug

@@ -1,3 +1,6 @@
+ng-template(#actionsModal)
+	actions-modal((close)="closeActions()" [focusTrap]="true" (keydown)="$event.stopPropagation()")
+
 .action-bar(
 	[class.has-scroller]="hasScroller" [class.is-mobile]="mobile" [class.is-blurred]="blurred"
 	#scroller (mousewheel)="scroll($event)" (wheel)="scroll($event)" (scroll)="true")
@@ -14,6 +17,8 @@
 		[draggablePad]="10"
 		(draggableDrag)="drag(i)"
 		(draggableDrop)="drop($event, i)")
+	button.action-settings.game-button((click)="openActions()" style="touch-action: inherit;")
+		fa-icon.action-icon([icon]="cogIcon" [fixedWidth]="true")
 	.action-button-padding
 .scroller-label
 	| scroll using this bar

src/ts/components/shared/action-bar/action-bar.scss

@@ -7,7 +7,7 @@
 
 .action-bar {
 	overflow: hidden;
-	padding-bottom: 7px;
+	padding-bottom: 0px;
 	padding-top: 7px;
 	padding-right: 5px;
 	max-width: calc(100vw - 50px);
@@ -60,7 +60,14 @@
 	}
 }
 
-action-button {
+.action-icon {
+	font-size: 30px;
+	position: relative;
+	right: 6px;
+	bottom: 8px;
+}
+
+action-button, .action-settings {
 	pointer-events: auto;
 	margin: 3px 6px;
 

src/ts/components/shared/action-bar/action-bar.ts

@@ -1,4 +1,5 @@
 import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ButtonAction } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
 import { isMobile } from '../../../client/data';
@@ -6,6 +7,7 @@ import { useAction, serializeActions } from '../../../client/buttonActions';
 import { SettingsService } from '../../services/settingsService';
 import { ACTIONS_LIMIT } from '../../../common/constants';
 import { last } from '../../../common/utils';
+import { faCog } from '../../../client/icons';
 
 @Component({
 	selector: 'action-bar',
@@ -14,11 +16,14 @@ import { last } from '../../../common/utils';
 })
 export class ActionBar {
 	@ViewChild('scroller', { static: true }) scroller!: ElementRef;
+	@ViewChild('actionsModal', { static: true }) actionsModal!: ElementRef;
 	@Input() blurred = false;
+	readonly cogIcon = faCog;
 	activeAction: ButtonAction | undefined = undefined;
 	shortcuts = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='];
+	private modalRef?: BsModalRef;
 	private _editable = false;
-	constructor(private game: PonyTownGame, private settings: SettingsService) {
+	constructor(private game: PonyTownGame, private settings: SettingsService, private modalService: BsModalService) {
 	}
 	@Input() get editable() {
 		return this._editable;
@@ -68,6 +73,20 @@ export class ActionBar {
 			this.scroller.nativeElement.scrollLeft += delta * 20;
 		}
 	}
+	openActions() {
+		if (this.modalRef) {
+			this.closeActions();
+		}
+		else {
+			this.modalRef = this.modalService.show(this.actionsModal, { ignoreBackdropClick: true });
+		}
+	}
+	closeActions() {
+		if (this.modalRef) {
+			this.modalRef.hide();
+			this.modalRef = undefined;
+		}
+	}
 	private updateFreeSlots() {
 		const actions = this.actions;