myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-11 14:19:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add zoom setting

Browse Source
This commit is contained in:
Geomitron
2024-07-11 17:08:36 -05:00
parent 1f7184dcc3
commit 2d9fad5d03
6 changed files with 80 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src-angular/app/app.component.ts
View File

@@ -14,5 +14,16 @@ export class AppComponent {
constructor(settingsService: SettingsService) {
// Ensure settings are loaded before rendering the application
settingsService.loadSettings().then(() => this.settingsLoaded = true)
document.addEventListener('keydown', event => {
if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
event.preventDefault()
if (event.key === '+' || event.key === '=') {
settingsService.zoomIn()
} else {
settingsService.zoomOut()
}
}
})
}
}

68
src-angular/app/components/settings/settings.component.html
View File

@@ -19,34 +19,48 @@
<label class="form-control w-full max-w-xs">
<div class="label">
<span class="label-text">Theme</span>
<span class="label-text">Appearance</span>
</div>
<div class="dropdown dropdown-hover">
<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
<ul>
<li><a (click)="setTheme('business')">Business</a></li>
<li><a (click)="setTheme('dark')">Dark</a></li>
<li><a (click)="setTheme('dim')">Dim</a></li>
<li><a (click)="setTheme('night')">Night</a></li>
<li><a (click)="setTheme('sunset')">Sunset</a></li>
<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
</ul>
</li>
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
<ul>
<li><a (click)="setTheme('aqua')">Aqua</a></li>
<li><a (click)="setTheme('emerald')">Emerald</a></li>
<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
<li><a (click)="setTheme('nord')">Nord</a></li>
<li><a (click)="setTheme('valentine')">Valentine</a></li>
<li><a (click)="setTheme('winter')">Winter</a></li>
</ul>
</li>
</ul>
<div class="flex gap-3 items-center">
<div class="dropdown dropdown-hover">
<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
<ul>
<li><a (click)="setTheme('business')">Business</a></li>
<li><a (click)="setTheme('dark')">Dark</a></li>
<li><a (click)="setTheme('dim')">Dim</a></li>
<li><a (click)="setTheme('night')">Night</a></li>
<li><a (click)="setTheme('sunset')">Sunset</a></li>
<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
</ul>
</li>
<li>
<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
<ul>
<li><a (click)="setTheme('aqua')">Aqua</a></li>
<li><a (click)="setTheme('emerald')">Emerald</a></li>
<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
<li><a (click)="setTheme('nord')">Nord</a></li>
<li><a (click)="setTheme('valentine')">Valentine</a></li>
<li><a (click)="setTheme('winter')">Winter</a></li>
</ul>
</li>
</ul>
</div>
<div class="join join-vertical">
<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
<i class="bi bi-zoom-in"></i>
</button>
</div>
<div class="tooltip tooltip-right" data-tip="Zoom Out (ctrl -)">
<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomOut()">
<i class="bi bi-zoom-out"></i>
</button>
</div>
</div>
</div>
</label>

19
src-angular/app/core/services/settings.service.ts
View File

@@ -1,9 +1,10 @@
import { DOCUMENT } from '@angular/common'
import { Inject, Injectable } from '@angular/core'
import _ from 'lodash'
import { Difficulty, Instrument } from 'scan-chart'
import { Settings, themes } from '../../../../src-shared/Settings'
import { Settings, themes } from '../../../../src-shared/Settings.js'
@Injectable({
providedIn: 'root',
@@ -90,4 +91,20 @@ export class SettingsService {
this.settings.isCompactTable = value
this.saveSettings()
}
get zoomFactor() {
return this.settings.zoomFactor
}
set zoomFactor(value: number) {
this.settings.zoomFactor = value
this.saveSettings()
}
zoomIn() {
this.zoomFactor = _.round(this.zoomFactor + 0.1, 3)
}
zoomOut() {
if (_.round(this.zoomFactor - 0.1, 3) > 0) {
this.zoomFactor = _.round(this.zoomFactor - 0.1, 3)
}
}
}