Merge pull request #783 from UziTech/left-width

Author: aminya

lib/canvas-layer.js

@@ -1,4 +1,4 @@
-"use babel"
+/** @babel */
 "use strict"
 
 /**

lib/minimap-element.js

@@ -13,34 +13,6 @@ import element from "./decorators/element"
 import MinimapQuickSettingsElement from "./minimap-quick-settings-element"
 const elementResizeDetector = elementResizeDetectorImport({ strategy: "scroll" })
 
-let overlayStyle
-
-function ensureOverlayStyle() {
-  if (!overlayStyle) {
-    overlayStyle = document.createElement("style")
-    overlayStyle.setAttribute("context", "atom-text-editor-minimap")
-    document.head.appendChild(overlayStyle)
-  }
-}
-
-function removeOverlayStyle() {
-  if (overlayStyle) {
-    overlayStyle.parentNode.removeChild(overlayStyle)
-    overlayStyle = null
-  }
-}
-
-function updateOverlayStyle(basis) {
-  if (overlayStyle) {
-    overlayStyle.textContent = `
-    atom-text-editor[with-minimap].editor > div,
-    atom-text-editor[with-minimap] > div {
-      margin-left: ${basis}px;
-    }
-    `
-  }
-}
-
 const SPEC_MODE = atom.inSpecMode()
 
 /**
@@ -118,10 +90,6 @@ class MinimapElement {
 
     // Configs
 
-    /**
-     * @access private
-     */
-    this.displayMinimapOnLeft = false
     /**
      * @access private
      */
@@ -224,7 +192,6 @@ class MinimapElement {
       atom.config.observe("minimap.displayMinimapOnLeft", (displayMinimapOnLeft) => {
         this.displayMinimapOnLeft = displayMinimapOnLeft
 
-        displayMinimapOnLeft ? ensureOverlayStyle() : removeOverlayStyle()
         this.updateMinimapFlexPosition()
         this.measureHeightAndWidth(true, true)
       }),
@@ -410,7 +377,7 @@ class MinimapElement {
     this.attachedToTextEditor = this.queryParentSelector("atom-text-editor") === this.minimap.getTextEditorElement()
 
     if (this.attachedToTextEditor) {
-      this.minimap.getTextEditorElement().setAttribute("with-minimap", "")
+      this.minimap.getTextEditorElement().setAttribute("with-minimap", this.displayMinimapOnLeft ? "left" : "right")
     }
 
     this.subscriptions.add(this.subscribeToMediaQuery())
@@ -494,6 +461,9 @@ class MinimapElement {
    */
   updateMinimapFlexPosition() {
     this.classList.toggle("left", this.displayMinimapOnLeft)
+    if (this.attachedToTextEditor) {
+      this.minimap.getTextEditorElement().setAttribute("with-minimap", this.displayMinimapOnLeft ? "left" : "right")
+    }
   }
 
   /**
@@ -1086,13 +1056,10 @@ class MinimapElement {
         ) {
           this.flexBasis = width
           canvasWidth = width
-          updateOverlayStyle(width)
         } else {
-          updateOverlayStyle(canvasWidth)
           delete this.flexBasis
         }
       } else {
-        updateOverlayStyle(canvasWidth)
         delete this.flexBasis
       }
 

spec/minimap-element-spec.js

@@ -1503,11 +1503,11 @@ describe("MinimapElement", () => {
         expect(minimapElement.classList.contains("left")).toBeTruthy()
       })
 
-      it("creates a style node with an offset for atom overlays", () => {
+      it("changes with-minimap attribute value to direction", () => {
         atom.config.set("minimap.displayMinimapOnLeft", true)
-
-        const node = document.querySelector('style[context="atom-text-editor-minimap"]')
-        expect(node).toExist()
+        expect(editorElement.getAttribute("with-minimap")).toBe("left")
+        atom.config.set("minimap.displayMinimapOnLeft", false)
+        expect(editorElement.getAttribute("with-minimap")).toBe("right")
       })
 
       describe("and then toggled off", () => {

styles/minimap.less

@@ -7,7 +7,7 @@ atom-notifications:empty {
 atom-text-editor[with-minimap] {
   display: flex;
 
-  .editor--private {
+  > div {
     order: 2;
     flex: 1 0 90%;
     width: 90%;
@@ -31,26 +31,23 @@ html {
     cursor: default;
 
     &:not([stand-alone]) {
-      contain: @contain_all;
       height: 100%;
       order: 3;
       width: 10%;
       flex: 0 0 10%;
 
       &.left {
-        contain: @contain_all;
         order: 1;
-        position: absolute;
       }
     }
 
-    &.absolute {
-      contain: @contain_all;
+    // ignore absolute mode the minimap is on the left, because
+    // it would conflict with the editor's gutter
+    &.absolute:not(.left) {
       position: absolute;
       right: 0;
 
       &.adjust-absolute-height {
-        contain: @contain_all;
         pointer-events: none;
 
         canvas,
@@ -60,13 +57,6 @@ html {
         }
       }
 
-      // absolute mode do nothing when the minimap is on the left, because
-      // it would conflict with the editor's gutter
-      &.left {
-        contain: @contain_all;
-        right: initial;
-      }
-
       .open-minimap-quick-settings {
         contain: @contain_all;
         right: 16px;
@@ -90,7 +80,6 @@ html {
       border-left: 0px solid rgba(127, 127, 127, 0.1);
 
       &:active {
-        contain: @contain_all;
         cursor: -webkit-grabbing;
       }
 
@@ -179,7 +168,6 @@ minimap-quick-settings {
       height: 1px;
 
       &:first-child {
-        contain: @contain_all;
         display: none;
       }
     }