raucao/marco
1
0
Fork 0
Code Issues 17 Pull Requests Actions Releases 5 Activity

Break up settings into sub sections

Browse Source
This commit is contained in:
Râu Cao
2026-04-21 14:17:14 +04:00
parent 54445f249b
commit 54ba99673f
2 changed files with 115 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
app/components/app-menu/settings.gjs
View File

@@ -29,6 +29,7 @@ export default class AppMenuSettings extends Component {
} }
<template> <template>
{{! template-lint-disable no-nested-interactive }}
<div class="sidebar-header"> <div class="sidebar-header">
<button type="button" class="back-btn" {{on "click" @onBack}}> <button type="button" class="back-btn" {{on "click" @onBack}}>
<Icon @name="arrow-left" @size={{20}} @color="#333" /> <Icon @name="arrow-left" @size={{20}} @color="#333" />
@@ -41,88 +42,121 @@ export default class AppMenuSettings extends Component {
<div class="sidebar-content"> <div class="sidebar-content">
<section class="settings-section"> <section class="settings-section">
<div class="form-group"> <details>
<label for="show-quick-search">Quick search buttons visible</label> <summary>
<select <Icon @name="map" @size={{20}} />
id="show-quick-search" <span>Map & UI</span>
class="form-control" </summary>
{{on "change" this.toggleQuickSearchButtons}} <div class="details-content">
> <div class="form-group">
<option <label for="show-quick-search">Quick search buttons visible</label>
value="true" <select
selected={{if this.settings.showQuickSearchButtons "selected"}} id="show-quick-search"
> class="form-control"
Yes {{on "change" this.toggleQuickSearchButtons}}
</option>
<option
value="false"
selected={{unless
this.settings.showQuickSearchButtons
"selected"
}}
>
No
</option>
</select>
</div>
<div class="form-group">
<label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
<select
id="map-kinetic"
class="form-control"
{{on "change" this.toggleKinetic}}
>
<option
value="true"
selected={{if this.settings.mapKinetic "selected"}}
>
On
</option>
<option
value="false"
selected={{unless this.settings.mapKinetic "selected"}}
>
Off
</option>
</select>
</div>
<div class="form-group">
<label for="overpass-api">Overpass API Provider</label>
<select
id="overpass-api"
class="form-control"
{{on "change" this.updateApi}}
>
{{#each this.settings.overpassApis as |api|}}
<option
value={{api.url}}
selected={{if
(eq api.url this.settings.overpassApi)
"selected"
}}
> >
{{api.name}} <option
</option> value="true"
{{/each}} selected={{if
</select> this.settings.showQuickSearchButtons
</div> "selected"
<div class="form-group"> }}
<label for="photon-api">Photon API Provider</label> >
<select Yes
id="photon-api" </option>
class="form-control" <option
{{on "change" this.updatePhotonApi}} value="false"
> selected={{unless
{{#each this.settings.photonApis as |api|}} this.settings.showQuickSearchButtons
<option "selected"
value={{api.url}} }}
selected={{if (eq api.url this.settings.photonApi) "selected"}} >
No
</option>
</select>
</div>
<div class="form-group">
<label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
<select
id="map-kinetic"
class="form-control"
{{on "change" this.toggleKinetic}}
> >
{{api.name}} <option
</option> value="true"
{{/each}} selected={{if this.settings.mapKinetic "selected"}}
</select> >
</div> On
</option>
<option
value="false"
selected={{unless this.settings.mapKinetic "selected"}}
>
Off
</option>
</select>
</div>
</div>
</details>
<details>
<summary>
<Icon @name="server" @size={{20}} />
<span>API Providers</span>
</summary>
<div class="details-content">
<div class="form-group">
<label for="overpass-api">Overpass API Provider</label>
<select
id="overpass-api"
class="form-control"
{{on "change" this.updateApi}}
>
{{#each this.settings.overpassApis as |api|}}
<option
value={{api.url}}
selected={{if
(eq api.url this.settings.overpassApi)
"selected"
}}
>
{{api.name}}
</option>
{{/each}}
</select>
</div>
<div class="form-group">
<label for="photon-api">Photon API Provider</label>
<select
id="photon-api"
class="form-control"
{{on "change" this.updatePhotonApi}}
>
{{#each this.settings.photonApis as |api|}}
<option
value={{api.url}}
selected={{if
(eq api.url this.settings.photonApi)
"selected"
}}
>
{{api.name}}
</option>
{{/each}}
</select>
</div>
</div>
</details>
<details>
<summary>
<Icon @name="zap" @size={{20}} />
<span>Nostr</span>
</summary>
<div class="details-content">
{{! Nostr settings will go here }}
</div>
</details>
</section> </section>
</div> </div>
</template> </template>

2
app/styles/app.css
View File

@@ -595,7 +595,7 @@ body {
display: block; display: block;
font-size: 0.85rem; font-size: 0.85rem;
color: #666; color: #666;
margin-bottom: 0.25rem; margin-bottom: 0.5rem;
} }
.form-control { .form-control {