WIP: Tweak map styles

znorman-harris · znorman-harris · commit ddddbc4bdc23 · 2024-08-19T11:37:39.000-06:00
diff --git a/apps/notebook/components/src/app/app.module.ts b/apps/notebook/components/src/app/app.module.ts
@@ -28,6 +28,7 @@ import { PLAY } from './icons/play';
 import { SAVE } from './icons/save';
 import { MaterialModule } from './material.module';
 import { VSCodeRendererMessenger } from './services/vscode-renderer-messenger.service';
+import { MY_LOCATION_FILLED } from './icons/my-location-fill';
 
 @NgModule({
   declarations: [AppComponent],
@@ -92,6 +93,7 @@ export class AppModule implements DoBootstrap {
     const icons: { [key: string]: any } = {
       'fast-forward': FAST_FORWARD,
       'fast-rewind': FAST_REWIND,
+      my_location_fill: MY_LOCATION_FILLED,
       pause: PAUSE,
       play: PLAY,
       save: SAVE,
diff --git a/apps/notebook/components/src/app/components/entry/entry.component.ts b/apps/notebook/components/src/app/components/entry/entry.component.ts
@@ -17,6 +17,10 @@ import { DataSharingService } from '../data-sharing.service';
  */
 export const IDL_NB_ENTRY_COMPONENT_SELECTOR = 'idl-nb-entry';
 
+const DEFAULT_CLASS = 'vscode-outlined';
+
+const OUTLINED_CLASS = 'vscode-outlined-focus';
+
 /**
  * Entry components handles the logic of determining the right thing
  * to render and creates the correct type of element to display
@@ -68,19 +72,19 @@ export class EntryComponent implements AfterViewInit {
    */
   embed!: IDLNotebookEmbeddedItem<IDLNotebook_EmbedType>;
 
-  class = '';
+  class = DEFAULT_CLASS;
 
   constructor(
     @Host() private dataShare: DataSharingService,
     private el: ElementRef<HTMLElement>
   ) {}
 
   ngAfterViewInit() {
-    this.el.nativeElement.onclick = () => {
-      this.class = 'vscode-outlined';
+    this.el.nativeElement.onmousedown = () => {
+      this.class = OUTLINED_CLASS;
     };
     this.el.nativeElement.onmouseleave = () => {
-      this.class = '';
+      this.class = DEFAULT_CLASS;
     };
   }
 }
diff --git a/apps/notebook/components/src/app/components/map/map.component.html b/apps/notebook/components/src/app/components/map/map.component.html
@@ -1,18 +1,17 @@
 <!-- chart gets added directly in the component so we can have unique ID for canvas element -->
 
-<div
-  class="map-container vscode-outlined cell-item-full-height"
-  style="position: relative"
->
+<div class="map-container cell-item-full-height" style="position: relative">
   <canvas #MapCanvas></canvas>
 
-  <!-- <div class="controls">
-    <button mat-mini-fab (click)="resetView()">
-      <mat-icon>fullscreen</mat-icon>
-    </button>
-  </div> -->
+  <div class="map-controls" fxLayout="row" fxLayoutAlign="space-around center">
+    <mat-icon
+      (click)="resetView()"
+      class="icon-button"
+      svgIcon="my_location_fill"
+    ></mat-icon>
+  </div>
 
-  <div class="credits">
+  <div class="map-credits">
     <div style="padding-left: 5px; padding-right: 5px">
       Base map: Powered by <a href="https://www.esri.com/en-us/home">Esri</a>
     </div>
diff --git a/apps/notebook/components/src/app/components/map/map.component.ts b/apps/notebook/components/src/app/components/map/map.component.ts
@@ -47,19 +47,13 @@ export const IDL_NB_MAP_COMPONENT_SELECTOR = 'idl-nb-map';
         width: 100%;
       }
 
-      .credits {
+      .map-credits {
         position: absolute;
         right: 0;
         bottom: 0;
         color: black !important;
         background: rgba(150, 150, 150, 125);
       }
-
-      .controls {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-      }
     `,
   ],
 })
diff --git a/apps/notebook/components/src/app/icons/fast-forward.ts b/apps/notebook/components/src/app/icons/fast-forward.ts
@@ -1 +1 @@
-export const FAST_FORWARD = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M104-240v-480l346 240-346 240Zm407 0v-480l346 240-346 240Z"/></svg>`;
+export const FAST_FORWARD = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M104-240v-480l346 240-346 240Zm407 0v-480l346 240-346 240Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/icons/fast-rewind.ts b/apps/notebook/components/src/app/icons/fast-rewind.ts
@@ -1 +1 @@
-export const FAST_REWIND = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M854-240 508-480l346-240v480Zm-402 0L106-480l346-240v480Z"/></svg>`;
+export const FAST_REWIND = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M854-240 508-480l346-240v480Zm-402 0L106-480l346-240v480Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/icons/my-location-fill.ts b/apps/notebook/components/src/app/icons/my-location-fill.ts
@@ -0,0 +1 @@
+export const MY_LOCATION_FILLED = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/icons/pause.ts b/apps/notebook/components/src/app/icons/pause.ts
@@ -1 +1 @@
-export const PAUSE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M555-200v-560h175v560H555Zm-325 0v-560h175v560H230Z"/></svg>`;
+export const PAUSE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M555-200v-560h175v560H555Zm-325 0v-560h175v560H230Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/icons/play.ts b/apps/notebook/components/src/app/icons/play.ts
@@ -1 +1 @@
-export const PLAY = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M320-203v-560l440 280-440 280Z"/></svg>`;
+export const PLAY = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M320-203v-560l440 280-440 280Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/icons/save.ts b/apps/notebook/components/src/app/icons/save.ts
@@ -1 +1 @@
-export const SAVE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Z"/></svg>`;
+export const SAVE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Z"/></svg>`;
diff --git a/apps/notebook/components/src/app/styles/shared-styles.scss b/apps/notebook/components/src/app/styles/shared-styles.scss
@@ -1,6 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
-$accent: var(--vscode-activityBarBadge-background);
 $cell-height-limit: 500px;
 
 .div {
@@ -10,11 +9,21 @@ $cell-height-limit: 500px;
 }
 
 .mat-primary {
-  --mdc-slider-handle-color: #{$accent} !important;
-  --mdc-slider-focus-handle-color: #{$accent} !important;
-  --mdc-slider-hover-handle-color: #{$accent} !important;
-  --mdc-slider-active-track-color: #{$accent} !important;
-  --mdc-slider-inactive-track-color: #{$accent} !important;
+  --mdc-slider-handle-color: var(
+    --vscode-activityBarBadge-background
+  ) !important;
+  --mdc-slider-focus-handle-color: var(
+    --vscode-activityBarBadge-background
+  ) !important;
+  --mdc-slider-hover-handle-color: var(
+    --vscode-activityBarBadge-background
+  ) !important;
+  --mdc-slider-active-track-color: var(
+    --vscode-activityBarBadge-background
+  ) !important;
+  --mdc-slider-inactive-track-color: var(
+    --vscode-activityBarBadge-background
+  ) !important;
   /* --mdc-slider-with-tick-marks-inactive-container-color: var(
     --vscode-activityBarBadge-background
   ) !important; */
@@ -26,14 +35,11 @@ $cell-height-limit: 500px;
 // override class for more compact icon buttons without "<button>"
 .icon-button {
   cursor: pointer;
+  color: var(--vscode-activityBar-foreground);
 }
 
 .renderer-toolbar {
-  // outline-style: solid !important;
-  // outline-width: 1px !important;
-  // outline-color: #{$accent} !important;
   margin-bottom: 15px;
-  // width: 100%;
 }
 
 .renderer-toolbar-vertical-left {
@@ -45,9 +51,13 @@ $cell-height-limit: 500px;
 }
 
 .vscode-outlined {
+  outline: none;
+}
+
+.vscode-outlined-focus {
   outline-style: solid !important;
   outline-width: 1px !important;
-  outline-color: #{$accent} !important;
+  outline-color: var(--vscode-notebook-focusedCellBorder) !important;
 }
 
 .cell-item-height-max {
@@ -67,9 +77,18 @@ $cell-height-limit: 500px;
   max-width: calc(100% - 50px);
 }
 
+.map-controls {
+  position: absolute;
+  left: 5px;
+  bottom: 5px;
+  padding: 5px;
+  background: var(--vscode-activityBar-background);
+  border-radius: 10px;
+}
+
 .custom-slider {
   input[type='range'] {
-    accent-color: #{$accent} !important;
+    accent-color: var(--vscode-activityBarBadge-background) !important;
   }
 
   :focus {

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export const FAST_FORWARD = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M104-240v-480l346 240-346 240Zm407 0v-480l346 240-346 240Z"/></svg>`;
	`1`	+export const FAST_FORWARD = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M104-240v-480l346 240-346 240Zm407 0v-480l346 240-346 240Z"/></svg>`;
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export const FAST_REWIND = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M854-240 508-480l346-240v480Zm-402 0L106-480l346-240v480Z"/></svg>`;
	`1`	+export const FAST_REWIND = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M854-240 508-480l346-240v480Zm-402 0L106-480l346-240v480Z"/></svg>`;
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+export const MY_LOCATION_FILLED = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z"/></svg>`;
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export const PAUSE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M555-200v-560h175v560H555Zm-325 0v-560h175v560H230Z"/></svg>`;
	`1`	+export const PAUSE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M555-200v-560h175v560H555Zm-325 0v-560h175v560H230Z"/></svg>`;
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export const PLAY = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M320-203v-560l440 280-440 280Z"/></svg>`;
	`1`	+export const PLAY = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M320-203v-560l440 280-440 280Z"/></svg>`;
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-export const SAVE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Z"/></svg>`;
	`1`	+export const SAVE = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="currentColor"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Z"/></svg>`;