Skip to content

Commit

Permalink
Add show/hide of right-side buttons.
Browse files Browse the repository at this point in the history 
(#131)
  • Loading branch information
@panaaj
panaaj committed Feb 17, 2024
1 parent 09e06c9 commit d8e26c2
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 151 deletions.
17 changes: 10 additions & 7 deletions src/app/app.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,18 @@ mat-nav-list {
}

.rightUtilsPanel {
max-width:55px;
max-width:48px;
z-index: 200;
position: absolute;
top: 0px;
right: 0px;
background-color: rgba(130,130,130,.3);
padding: 10px 2px 2px 2px;
bottom: 0px;
padding: 0px 2px 2px 2px;
overflow: auto;
scrollbar-width: none;
}
.rightUtilsPanel div {
.rightUtilsPanel div {
text-align: center;
height: 60px;
}

Expand Down Expand Up @@ -148,7 +151,7 @@ mat-nav-list {
height: 45px;
}

.nosmall {
.instrumentsBtn {
display: block;
}

Expand All @@ -159,8 +162,8 @@ mat-nav-list {
}
}

@media only screen and (max-width: 400px) {
.nosmall {
@media only screen and (max-width: 800px) {
.instrumentsBtn {
display: none;
}
}
288 changes: 157 additions & 131 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div [ngClass]="{ 'dark-theme': app.config.darkMode.enabled }">
<div class="appframe mat-app-background">
<!-- TOOLBAR-->
<!-- TOOLBAR -->
<div class="mainToolBar">
<button
mat-icon-button
Expand Down Expand Up @@ -556,153 +556,176 @@
>
<!-- utilities panel -->
<div class="rightUtilsPanel">
<!-- instrument sidebar open button -->
<div class="nosmall">
<!-- show/hide utils -->
<div style="padding-top: 5px">
<button
mat-mini-fab
*ngIf="
app.data.optAppPanel &&
!draw.enabled &&
!measure.enabled &&
!app.data.vessels.activeId
style="background-color: #e5e0e0"
(click)="toggleUtilsPanel()"
[matTooltip]="
app.config.rightSideButtons
? 'Hide Buttons'
: 'Show Buttons'
"
(click)="sideright.toggle()"
matTooltip="Instruments"
matTooltipPosition="below"
>
<mat-icon>av_timer</mat-icon>
<mat-icon>{{
app.config.rightSideButtons
? 'arrow_forward_ios'
: 'arrow_back_ios'
}}</mat-icon>
</button>
<br />&nbsp;<br />&nbsp;
</div>

<!-- Web audio enable -->
<div *ngIf="display.audio.state != 'running'">
<button
mat-mini-fab
color="warn"
matTooltip="Web Audio off! Click to enable."
matTooltipPosition="left"
(click)="enableAudio()"
>
<mat-icon>volume_off</mat-icon>
</button>
<br />&nbsp;<br />
</div>
<div *ngIf="app.config.rightSideButtons">
<!-- instrument sidebar open button -->
<div class="instrumentsBtn">
<button
mat-mini-fab
*ngIf="
app.data.optAppPanel &&
!draw.enabled &&
!measure.enabled &&
!app.data.vessels.activeId
"
(click)="sideright.toggle()"
matTooltip="Instruments"
matTooltipPosition="below"
>
<mat-icon>av_timer</mat-icon>
</button>
<br />&nbsp;<br />&nbsp;
</div>

<!-- fullscreen enable -->
<div *ngIf="display.fullscreen.enabled">
<button
mat-mini-fab
(click)="toggleFullscreen()"
matTooltip="Go Fullscreen"
matTooltipPosition="left"
>
<mat-icon>
{{
display.fullscreen.active
? 'fullscreen_exit '
: 'fullscreen'
}}
</mat-icon>
</button>
<br />&nbsp;<br />
</div>
<!-- Web audio enable -->
<div *ngIf="display.audio.state != 'running'">
<button
mat-mini-fab
color="warn"
matTooltip="Web Audio off! Click to enable."
matTooltipPosition="left"
(click)="enableAudio()"
>
<mat-icon>volume_off</mat-icon>
</button>
<br />&nbsp;<br />
</div>

<!-- WakeLock enable -->
<div>
<wakelock
[setOn]="app.config.selections.wakeLock"
(has)="handleHasWakeLock($event)"
(change)="handleWakelockChange($event)"
></wakelock>
<span *ngIf="app.data.hasWakeLock"><br />&nbsp;<br /></span>
</div>
<!-- fullscreen enable -->
<div *ngIf="display.fullscreen.enabled">
<button
mat-mini-fab
(click)="toggleFullscreen()"
matTooltip="Go Fullscreen"
matTooltipPosition="left"
>
<mat-icon>
{{
display.fullscreen.active
? 'fullscreen_exit '
: 'fullscreen'
}}
</mat-icon>
</button>
<br />&nbsp;<br />
</div>

<!-- Experiments -->
<div *ngIf="app.config.experiments">
<fb-experiments
(selected)="openExperiment($event)"
></fb-experiments>
<br />&nbsp;<br />
</div>
<!-- WakeLock enable -->
<div>
<wakelock
[setOn]="app.config.selections.wakeLock"
(has)="handleHasWakeLock($event)"
(change)="handleWakelockChange($event)"
></wakelock>
<span *ngIf="app.data.hasWakeLock"><br />&nbsp;<br /></span>
</div>

<!-- PiP enable -->
<div
*ngIf="
app.config.resources.video.enable &&
app.config.resources.video.url
"
>
<pip-video [src]="vidUrl" [muted]="true" (click)="focusMap()">
</pip-video>
<br />&nbsp;<br />
</div>
<!-- Experiments -->
<div *ngIf="app.config.experiments">
<fb-experiments
(selected)="openExperiment($event)"
></fb-experiments>
<br />&nbsp;<br />
</div>

<!-- constrain zoom to selected map(s) extent -->
<div>
<button
mat-mini-fab
[color]="app.config.map.limitZoom ? 'primary' : 'accent'"
(click)="toggleLimitMapZoom()"
matTooltip="Constrain map zoom."
matTooltipPosition="left"
<!-- PiP enable -->
<div
*ngIf="
app.config.resources.video.enable &&
app.config.resources.video.url
"
>
<mat-icon>zoom_in_map</mat-icon>
</button>
<br />&nbsp;<br />
</div>
<pip-video [src]="vidUrl" [muted]="true" (click)="focusMap()">
</pip-video>
<br />&nbsp;<br />
</div>

<!-- Invert colors -->
<div>
<button
mat-mini-fab
[color]="app.config.map.invertColor ? 'primary' : 'accent'"
(click)="invertAISTextColor()"
matTooltip="Invert feature text color."
matTooltipPosition="left"
>
<mat-icon>{{
true ? 'invert_colors' : 'invert_colors_off'
}}</mat-icon>
</button>
<br />&nbsp;<br />
</div>
<!-- constrain zoom to selected map(s) extent -->
<div>
<button
mat-mini-fab
[color]="app.config.map.limitZoom ? 'primary' : 'accent'"
(click)="toggleLimitMapZoom()"
matTooltip="Constrain map zoom."
matTooltipPosition="left"
>
<mat-icon>zoom_in_map</mat-icon>
</button>
<br />&nbsp;<br />
</div>

<!-- Autopilot console-->
<div *ngIf="app.data.autopilot.hasApi">
<button
mat-mini-fab
[color]="
app.data.vessels.self.autopilot.enabled
? 'primary'
: 'accent'
"
matTooltip="Autopilot"
matTooltipPosition="left"
(click)="app.data.autopilot.console = true"
>
<mat-icon> alt_route </mat-icon>
</button>
<br />&nbsp;<br />
</div>
<!-- Invert colors -->
<div>
<button
mat-mini-fab
[color]="app.config.map.invertColor ? 'primary' : 'accent'"
(click)="invertAISTextColor()"
matTooltip="Invert feature text color."
matTooltipPosition="left"
>
<mat-icon>{{
true ? 'invert_colors' : 'invert_colors_off'
}}</mat-icon>
</button>
<br />&nbsp;<br />
</div>

<!-- Drop Waypoint button -->
<div>
<button
mat-mini-fab
color="accent"
(click)="
skres.showWaypointEditor(
null,
app.data.vessels.self.position
)
"
matTooltip="Mark Vessel position"
matTooltipPosition="left"
>
<mat-icon>add_location</mat-icon>
</button>
<br />&nbsp;<br />
<!-- Autopilot console-->
<div *ngIf="app.data.autopilot.hasApi">
<button
mat-mini-fab
[color]="
app.data.vessels.self.autopilot.enabled
? 'primary'
: 'accent'
"
matTooltip="Autopilot"
matTooltipPosition="left"
(click)="app.data.autopilot.console = true"
>
<mat-icon> alt_route </mat-icon>
</button>
<br />&nbsp;<br />
</div>

<!-- Drop Waypoint button -->
<div>
<button
mat-mini-fab
color="accent"
(click)="
skres.showWaypointEditor(
null,
app.data.vessels.self.position
)
"
matTooltip="Mark Vessel position"
matTooltipPosition="left"
>
<mat-icon>add_location</mat-icon>
</button>
<br />&nbsp;<br />
</div>
</div>
</div>

Expand Down Expand Up @@ -927,6 +950,8 @@
<br />
<button
mat-icon-button
matTooltip="Autopilot Console"
matTooltipPosition="above"
[disabled]="!app.data.autopilot.hasApi"
[matTooltip]="display.navDataPanel.apModeText"
(click)="app.data.autopilot.console = true"
Expand All @@ -948,6 +973,7 @@
<button
mat-icon-button
matTooltip="Reverse route direction"
matTooltipPosition="above"
[disabled]="!app.data.activeRoute"
(click)="skres.courseReverse()"
>
Expand Down
Loading

0 comments on commit d8e26c2

Please sign in to comment.