feat: Permits css capabilities for minimap (#1860)

* css for theme * spacing * feedback updates
google · Aug 15, 2023 · f8cbacf · f8cbacf
1 parent 200701e
commit f8cbacf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/plugins/workspace-minimap/src/focus_region.ts b/plugins/workspace-minimap/src/focus_region.ts
@@ -51,7 +51,7 @@ export class FocusRegion {
     init() {
       // Make the svg group element.
       this.svgGroup = Blockly.utils.dom.createSvgElement(
-          Blockly.utils.Svg.G, {'class': 'focusRegion'}, null);
+          Blockly.utils.Svg.G, {'class': 'blockly-focus-region'}, null);
 
       // Make the mask under the svg group.
       const mask = Blockly.utils.dom.createSvgElement(
@@ -89,9 +89,6 @@ export class FocusRegion {
             'fill': 'black',
           }, mask);
 
-      // Theme.
-      this.background.setAttribute('fill', '#e6e6e6');
-
       // Add the svg group to the minimap.
       const parentSvg = this.minimapWorkspace.getParentSvg();
       if (parentSvg.firstChild) {
@@ -190,3 +187,9 @@ export class FocusRegion {
       return this.initialized;
     }
 }
+
+Blockly.Css.register(`
+.blockly-focus-region {
+  fill: #e6e6e6;
+}
+`);
diff --git a/plugins/workspace-minimap/src/minimap.ts b/plugins/workspace-minimap/src/minimap.ts
@@ -53,7 +53,7 @@ export class Minimap {
       // Create a wrapper div for the minimap injection.
       this.minimapWrapper = document.createElement('div');
       this.minimapWrapper.id = 'minimapWrapper' + this.primaryWorkspace.id;
-      this.minimapWrapper.className = 'minimapWrapper';
+      this.minimapWrapper.className = 'blockly-minimap';
 
       // Make the wrapper a sibling to the primary injection div.
       const primaryInjectParentDiv =
@@ -102,6 +102,7 @@ export class Minimap {
       this.enableFocusRegion();
     }
 
+
     /**
      * Disposes the minimap.
      * Unlinks from all DOM elements and remove all event listeners

diff --git a/plugins/workspace-minimap/src/positioned_minimap.ts b/plugins/workspace-minimap/src/positioned_minimap.ts
@@ -161,15 +161,20 @@ export class PositionedMinimap extends Minimap implements Blockly.IPositionable
      */
     private setAttributes(): void {
       const injectDiv = this.minimapWorkspace.getInjectionDiv();
-      // TODO: Styling properties will be added later this is a placeholder.
       injectDiv.parentElement.setAttribute('style',
           `z-index: 2;
           position: absolute;
           width: ${this.width}px;
           height: ${this.height}px;
           top: ${this.top}px;
-          left: ${this.left}px;
-          box-shadow: 2px 2px 10px grey;`);
+          left: ${this.left}px;`);
       Blockly.svgResize(this.minimapWorkspace);
     }
 }
+
+
+Blockly.Css.register(`
+.blockly-minimap {
+  box-shadow: 2px 2px 10px grey;
+}
+`);