Skip to content

Commit

Permalink
* Fix fonts in inspection panel.
Browse files Browse the repository at this point in the history 
* Add keyboard controls info.
  • Loading branch information
@Waguramu
Waguramu committed Sep 24, 2024
1 parent c2d158e commit 444d8fc
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 5 deletions.
152 changes: 149 additions & 3 deletions erdblick_app/app/preferences.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,14 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr
selector: 'pref-components',
template: `
<div class="bttn-container" [ngClass]="{'elevated': inspectionService.isInspectionPanelVisible }">
<p-button (click)="openHelp()" icon="pi pi-question" label="" class="help-button" pTooltip="Help"
<p-button (click)="openHelp()" icon="pi pi-question" label="" class="pref-button" pTooltip="Help"
tooltipPosition="right"></p-button>
<p-button (click)="showPreferencesDialog()" icon="pi pi-cog" label="" class="pref-button"
pTooltip="Preferences" tooltipPosition="right"></p-button>
<p-button (click)="showControlsDialog()" label="" class="pref-button controls-button"
pTooltip="Controls" tooltipPosition="right">
<span class="material-icons" style="font-size: 1.2em; margin: 0 auto;">keyboard</span>
</p-button>
</div>
<p-dialog header="Preferences" [(visible)]="dialogVisible" [position]="'center'"
[resizable]="false" [modal]="true" #pref class="pref-dialog">
Expand Down Expand Up @@ -50,8 +54,60 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr
<p-divider></p-divider>
<p-button (click)="pref.close($event)" label="Close" icon="pi pi-times"></p-button>
</p-dialog>
<p-dialog header="Keyboard Controls" [(visible)]="controlsDialogVisible" [position]="'center'"
[resizable]="false" [modal]="true" #controls class="pref-dialog">
<div class="keyboard-dialog">
<ul class="keyboard-list">
<li>
<div class="key-multi">
<span class="key highlight">Ctrl</span>
<span class="key">K</span>
</div>
<div class="control-desc">Open Search</div>
</li>
<li>
<div class="key-multi">
<span class="key highlight">Ctrl</span>
<span class="key">J</span>
</div>
<div class="control-desc">Zoom to Target Feature</div>
</li>
<li>
<span class="key">M</span>
<div class="control-desc">Open Maps & Styles Panel</div>
</li>
<li>
<span class="key">W</span>
<div class="control-desc">Move Camera Up</div>
</li>
<li>
<span class="key">A</span>
<div class="control-desc">Move Camera Left</div>
</li>
<li>
<span class="key">S</span>
<div class="control-desc">Move Camera Down</div>
</li>
<li>
<span class="key">D</span>
<div class="control-desc">Move Camera Right</div>
</li>
<li>
<span class="key">Q</span>
<div class="control-desc">Zoom In</div>
</li>
<li>
<span class="key">E</span>
<div class="control-desc">Zoom Out</div>
</li>
<li>
<span class="key">R</span>
<div class="control-desc">Reset Camera Orientation</div>
</li>
</ul>
</div>
<p-button (click)="controls.close($event)" label="Close" icon="pi pi-times"></p-button>
</p-dialog>
`,
styles: [`
.slider-container {
Expand All @@ -69,6 +125,90 @@ import {MAX_NUM_TILES_TO_LOAD, MAX_NUM_TILES_TO_VISUALIZE, ParametersService} fr
padding: 0.5em;
}
.keyboard-dialog {
width: 400px;
padding: 20px;
text-align: center;
background-color: white;
border-radius: 12px;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
font-weight: bold;
}
.keyboard-list {
list-style-type: none;
padding: 0;
}
.keyboard-list li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.keyboard-list li span {
display: inline-block;
background-color: #eef1f7;
padding: 8px 12px;
border-radius: 8px;
color: #333;
font-weight: bold;
min-width: 50px;
text-align: center;
}
.control-desc {
color: #666;
font-size: 14px;
}
/* Alegria / Corporate Memphis style - Bold colors and geometric shapes */
.dialog-header {
display: flex;
justify-content: center;
align-items: center;
background-color: #4CAF50;
color: white;
padding: 10px 0;
border-radius: 8px 8px 0 0;
}
.icon {
width: 50px;
height: 50px;
margin-right: 10px;
}
/* Keyboard key styling */
.key {
border-radius: 8px;
background-color: #ffcc00;
font-size: 18px;
padding: 8px 12px;
color: #333;
}
.key-multi {
display: flex;
gap: 5px;
}
.key-multi .key {
background-color: #00bcd4;
padding: 6px 10px;
}
.highlight {
background-color: #ff5722;
color: white;
}
@media only screen and (max-width: 56em) {
.elevated {
bottom: 3.5em;
Expand All @@ -82,6 +222,8 @@ export class PreferencesComponent {
tilesToLoadInput: number = 0;
tilesToVisualizeInput: number = 0;

controlsDialogVisible = false;

constructor(private messageService: InfoMessageService,
public mapService: MapService,
public styleService: StyleService,
Expand Down Expand Up @@ -112,6 +254,10 @@ export class PreferencesComponent {
this.dialogVisible = true;
}

showControlsDialog() {
this.controlsDialogVisible = true;
}

openHelp() {
window.open("https://developer.nds.live/tools/the-new-mapviewer/user-guide", "_blank");
}
Expand Down
25 changes: 23 additions & 2 deletions erdblick_app/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ body {
bottom: 0;
justify-content: center;
display: flex;
font-size: smaller;
font-size: 0.8em;
background-color: rgba(#fff, 0.25);
color: black;
padding-right: 0.5em;
Expand All @@ -89,6 +89,27 @@ body {
}
}

.pref-button {
width: 3em;
height: 3em;
margin-left: 0.5em;
margin-bottom: 0.5em;

.p-button {
border-radius: 50%;
padding: 0.8em 0;
width: 3em;
height: 3em;
}
}

.controls-button {
.p-button {
background: none;
border: none;
}
}

.pref-button {
width: 3em;
height: 3em;
Expand Down Expand Up @@ -223,8 +244,8 @@ body {

table {
direction: ltr;
font-size: smaller;
border-collapse: collapse;
font-size: 0.9em !important;

td {
padding: 0 0 0 0.5em;
Expand Down

0 comments on commit 444d8fc

Please sign in to comment.