isark
/
Nothing
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

Lots of css changes woohooo

Browse Source
merge-notes
isark 2 years ago
parent b2e7947fb3
commit 5cb0953df7
14 changed files with 229 additions and 96 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -23,6 +23,7 @@
"@types/markdown-it": "^13.0.0",
"@types/natural-compare": "^1.4.1",
"angular-resize-event": "^3.2.0",
"bootstrap": "^5.3.2",
"fuzzr": "https://github.com/isark2/fuzzr#v0.3.1",
"markdown-it": "^13.0.1",
"markdown-it-color": "^2.1.1",

22
src/app/app.component.html
Unescape View File

@ -1,24 +1,12 @@
<div *ngIf="!overlayService.isOverlay" class="main-container standalone">
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
<div *ngIf="!overlayService.isOverlay" class="main-container standalone primary">
<mat-tab-group color="primary" backgroundColor="primary" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
mat-stretch-tabs="false" class="tabs">
<mat-tab>
<ng-template mat-tab-label>
<span class="tab-label">Settings</span>
</ng-template>
<settings class="content"></settings>
<mat-tab label="Settings">
<settings class="content h-100 w-100"></settings>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="tab-label">Editor</span>
</ng-template>
<mat-tab label="Editor">
<plan-editor class="content"></plan-editor>
</mat-tab>
<!-- <mat-tab>
<ng-template mat-tab-label>
<span class="tab-label">Gems</span>
</ng-template>
<app-gem-finder></app-gem-finder>
</mat-tab> -->
</mat-tab-group>
</div>

11
src/app/app.component.scss
Unescape View File

@ -27,15 +27,6 @@ plan-display {
flex: 1 1 auto;
}
.standalone {
color: black;
}
.tab-label {
color: black;
}
.content {
height: 100%;
display: flex;
@ -46,6 +37,6 @@ mat-tab-group {
height: 100%;
}
settings {
.settings {
height: 100%;
}

1
src/app/app.module.ts
Unescape View File

@ -36,7 +36,6 @@ export function initializeApp(configService: ConfigService) {
OverlayModule,
SettingsComponent,
MatTabsModule,
// GemFinderComponent
],
providers: [
{

9
src/app/color-picker/color-picker.component.html
Unescape View File

@ -1,3 +1,10 @@
<span #clickColorPickerElement>
<button mat-raised-button color="primary"><ng-content></ng-content></button>
<button mat-raised-button color="accent" class="w-100">
<div class="center">
<span class="text">
<ng-content></ng-content>
</span>
<span class="realBG"><span *ngIf="value" class="transparency-grid colorDisplay" [ngStyle]="{'background-color': value}"></span></span>
</div>
</button>
</span>

36
src/app/color-picker/color-picker.component.scss
Unescape View File

@ -0,0 +1,36 @@
:host {
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.colorDisplay {
display: inline-block;
width: 20px;
height: 20px;
}
.text {
display: inline-block
}
.transparency-grid {
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;;
}
.realBG {
background-color: #fff;
margin-left: 5px;
width: 20px;
height: 20px;
}

18
src/app/color-picker/color-picker.component.ts
Unescape View File

@ -32,6 +32,8 @@ export class ColorPickerComponent implements AfterViewInit {
@Output('color')
outColor = new EventEmitter<Color>;
underlyingValue?: string;
justSet: boolean = false;
@Input('setColor') set color(value: string) {
@ -42,6 +44,16 @@ export class ColorPickerComponent implements AfterViewInit {
this.initialColor = value;
}
get value () {
if(this.initialColor) {
return this.initialColor;
}
if(this.underlyingValue) {
return this.underlyingValue;
}
return undefined;
}
initialColor?: string;
loaded: Subject<void> = new Subject<void>();
@ -59,12 +71,14 @@ export class ColorPickerComponent implements AfterViewInit {
this.justSet = false;
return;
}
this.underlyingValue = color.hex;
return this.outColor.next(color);
},
parent: this.clickColorPickerElement?.nativeElement,
color: this.initialColor
color: this.initialColor,
});
})
});
this.underlyingValue = this.color;
}
ngAfterViewInit(): void {

65
src/app/plan-display/plan-display.component.html
Unescape View File

@ -3,49 +3,62 @@
<ng-container *ngIf="rect && planService.currentPlan">
<div class="target waypoint" [style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'"
[style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
[class]="hasWaypoint() ? 'active' : ''" (wheel)="onScroll($event)"
#targetRef>
[class]="hasWaypoint() ? 'active' : ''" (wheel)="onScroll($event)" #targetRef>
<ng-container *ngIf="planService.currentPlan">
<span hidden >{{planService.currentPlan.current}}</span>
<carousel [initIndex]="planService.currentPlan.current" [numVisible]="3" [slides]="planService.currentPlan.plan"
(afterInitSelf)="registerZoneSlides($event)">
<span hidden>{{planService.currentPlan.current}}</span>
<carousel [initIndex]="planService.currentPlan.current" [numVisible]="3"
[slides]="planService.currentPlan.plan" (afterInitSelf)="registerZoneSlides($event)">
<ng-template let-slide let-index="index">
<div class="zone-slide" [style.color]="configService.config.noteDefaultFg" [style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">{{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text" *ngIf="hasWaypoint(slide.area_key)">(W)</div></div>
<div class="zone-slide" [style.color]="configService.config.noteDefaultFg"
[style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">
{{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text"
*ngIf="hasWaypoint(slide.area_key)">(W)</div>
</div>
</ng-template>
</carousel>
<carousel [initIndex]="planService.currentPlan.current" [slides]="planService.currentPlan.plan" (afterInitSelf)="registerCurrentSlides($event)">
<carousel [initIndex]="planService.currentPlan.current" [slides]="planService.currentPlan.plan"
(afterInitSelf)="registerCurrentSlides($event)">
<ng-template let-slide>
<notes [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide (resized)="onResizeNote(noteSlide)"></notes>
<notes [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide
(resized)="onResizeNote(noteSlide)"></notes>
</ng-template>
</carousel>
</ng-container>
<button mat-icon-button *ngIf="overlayService.interactable" class="settings-button" (click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img src="assets/material-settings.svg"></button>
<button mat-icon-button *ngIf="overlayService.interactable" class="settings-button"
(click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img
src="assets/material-settings.svg"></button>
</div>
<ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable" [resizable]="true && overlayService.interactable" (drag)="onDrag($event)"
(resize)="onResize($event)" (dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)"
[bounds]="bounds" [snappable]="true" [style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
<ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable"
[resizable]="true && overlayService.interactable" (drag)="onDrag($event)" (resize)="onResize($event)"
(dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)" [bounds]="bounds" [snappable]="true"
[style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
</ng-container>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
<ng-template cdkConnectedOverlay
[cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
[cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
<div class="overlay">
<div class="planChooser">
<div>
<button mat-raised-button (click)="openDialog()">Browse Plans</button>
<button mat-raised-button (click)="loadBasePlan()">Load base plan</button>
</div>
<div class="enumerated">
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let plan of planService.planStore"><button (click)="setPrevious(plan)">{{plan}}</button></mat-list-item>
</mat-list>
<div class="overlay container-fluid vw-100">
<div class="row">
<div class="planChooser col-3 mt-4">
<div>
<button mat-raised-button (click)="openDialog()">Browse Plans</button>
<button mat-raised-button (click)="loadBasePlan()">Load base plan</button>
</div>
<div class="enumerated">
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let plan of planService.planStore"><button
(click)="setPrevious(plan)">{{plan}}</button></mat-list-item>
</mat-list>
</div>
</div>
<settings class="col offset-3"></settings>
</div>
<settings></settings>
<button mat-icon-button class="exit" *ngIf="planService.currentPlan" (click)="settingsOpen = false"><span>+</span></button>
<button mat-icon-button class="exit" *ngIf="planService.currentPlan"
(click)="settingsOpen = false"><span>+</span></button>
</div>
</ng-template>
</ng-container>

22
src/app/plan-display/plan-display.component.scss
Unescape View File

@ -74,12 +74,12 @@ notes {
;
}
.overlay {
display: grid;
grid-template-columns: 1fr 2fr;
width: 100vw;
height: 100vh;
}
// .overlay {
// display: grid;
// grid-template-columns: 1fr 2fr;
// width: 100vw;
// height: 100vh;
// }
.settings-button {
position: absolute;
@ -112,11 +112,11 @@ notes {
}
}
.overlay {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
// .overlay {
// width: 100vw;
// height: 100vh;
// background-color: rgba(0, 0, 0, 0.5);
// }
.material-symbols-outlined {
font-variation-settings:

58
src/app/settings/settings.component.html
Unescape View File

@ -1,19 +1,43 @@
<div class="settings">
<div class="colors">
<color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
background</color-picker>
<color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
backdrop color</color-picker>
<color-picker [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay default font color</color-picker>
</div>
<div class="checkboxes">
<mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
[(ngModel)]="configService.config.hideOnUnfocus">Auto hide on unfocus</mat-slide-toggle>
</div>
<div class="d-flex w-100 h-100 align-items-center">
<div class="d-flex flex-column settings col-xl-4 offset-xl-4 col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-xs-12">
<div class="row">
<h1>
Settings
<mat-divider></mat-divider>
</h1>
</div>
<div class="row">
<color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
background</color-picker>
</div>
<div class="row">
<color-picker [setColor]="configService.config.backdropBg"
(color)="onBackdropColorChange($event)">Overlay
backdrop color</color-picker>
</div>
<div class="row">
<color-picker [setColor]="configService.config.noteDefaultFg"
(color)="onNoteColorChange($event)">Overlay
default
font color</color-picker>
<button mat-raised-button (click)="rebindOverlayToggle()">Overlay toggle shortcut:
{{configService.config.toggleOverlay}}</button>
<button mat-raised-button (click)="rebindPreviousZone()">Previous zone shortcut:
{{configService.config.prev}}</button>
<button mat-raised-button (click)="rebindNextZone()">Next zone shortcut: {{configService.config.next}}</button>
</div>
<div class="row">
<mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
[(ngModel)]="configService.config.hideOnUnfocus">Auto hide on unfocus</mat-slide-toggle>
</div>
<div class="row">
<button mat-raised-button color="accent" (click)="rebindOverlayToggle()">Overlay toggle shortcut:
{{configService.config.toggleOverlay}}</button>
</div>
<div class="row">
<button mat-raised-button color="accent" (click)="rebindPreviousZone()">Previous zone shortcut:
{{configService.config.prev}}</button>
</div>
<div class="row">
<button mat-raised-button color="accent" (click)="rebindNextZone()">Next zone shortcut:
{{configService.config.next}}</button>
</div>
</div>
</div>

10
src/app/settings/settings.component.scss
Unescape View File

@ -5,9 +5,17 @@
.checkboxes {
display: grid;
grid-template-columns: 1fr 10fr;
grid-template-columns: 1fr 10fr;
}
mat-slide-toggle {
color: green;
}
.row {
--bs-gutter-x: 0;
}
.settings {
gap: 10px;
}

3
src/app/settings/settings.component.ts
Unescape View File

@ -13,11 +13,12 @@ import { MatButtonModule } from '@angular/material/button';
import { ShortcutService } from '../_services/shortcut.service';
import { RecordKeyChord } from '../directives/record-key-chord.directive';
import { Config } from '../_models/generated/Config';
import { MatDividerModule } from '@angular/material/divider';
@Component({
selector: 'settings',
standalone: true,
imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule],
imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule, MatButtonModule, MatDividerModule],
templateUrl: './settings.component.html',
styleUrls: ['./settings.component.scss']
})

64
src/styles.scss
Unescape View File

@ -1,19 +1,63 @@
@use '@angular/material' as mat;
@import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
@import 'node_modules/bootstrap/scss/bootstrap-utilities.scss';
@include mat.core();
$my-primary: mat.define-palette(mat.$indigo-palette, 700);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$nothing-primary-map: (
50 : #acb7b7,
100 : #849393,
200 : #687777,
300 : #475151,
400 : #384040,
500 : #2a3030,
600 : #1c2020,
700 : #0d0f0f,
800 : #000000,
900 : #000000,
A100 : #8ecbcb,
A200 : #4da6a6,
A400 : #375656,
A700 : #334040,
contrast: (
50 : #000000,
100 : #000000,
200 : #ffffff,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
$primary: $nothing-primary-map.500;
$accent: mat.$indigo-palette.500;
$nothing-primary-palette: mat.define-palette($nothing-primary-map, 500);
$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 800);
$my-theme: mat.define-light-theme((
$nothing-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
primary: $nothing-primary-palette,
accent: $nothing-accent-palette,
),
density: 0,
));
.mat-primary-on-dark {
--mdc-theme-text-primary-on-background: white;
}
// Emit theme-dependent styles for common features used across multiple components.
@include mat.all-component-themes($nothing-theme);
:root {
color: #afafaf;
@ -43,8 +87,10 @@ div.picker_wrapper.popup {
flex-grow: 1;
}
.mat-primary-on-dark {
--mdc-theme-text-primary-on-background: white;
.primary {
background-color: mat.get-color-from-palette($nothing-primary-palette, 500);
}
// Emit theme-dependent styles for common features used across multiple components.
@include mat.all-component-themes($my-theme);
.mat-divider {
--mat-divider-color: mat.get-color-from-palette($nothing-primary-palette, 100);
}

5
yarn.lock
Unescape View File

@ -3117,6 +3117,11 @@ boolbase@^1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
bootstrap@^5.3.2:
version "5.3.2"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.2.tgz#97226583f27aae93b2b28ab23f4c114757ff16ae"
integrity sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

Write Preview
Loading…
Cancel
Save