diff --git a/README.md b/README.md index d7123612..47ca50d1 100644 --- a/README.md +++ b/README.md @@ -302,6 +302,60 @@ atom-text-editor { } ``` +#### Make Minimap Visible area display like Sublime Text + +Put the following code in your user stylesheet to make your minimap look like Sublime text. +It's more easy to view when you have code hightlight in minimap. + +`Default State (Hidden)`|`Hover`|`Only display Visible area when hover or click/drag event.` +---|---|:---: +![](https://github.com/machinavn/minimap/blob/master/resources/on-default-minimap.png?raw=true)|![](https://github.com/machinavn/minimap/blob/master/resources/on-hover-minimap.png?raw=true)|![](https://github.com/machinavn/minimap/blob/master/resources/on-scroll-minimap.png?raw=true) + +```css +atom-text-editor, +atom-text-editor::shadow, +html { + atom-text-editor-minimap { + &::shadow { + .minimap-visible-area { + background-color: #7c7c7c; + // Color of Visible area. + opacity: 0; + // Default 0 when you not working with minimap + cursor: default; + // Change cursor style to pointer. + transition: 0.5s opacity; + // Better UI. + &:hover { + opacity: 0.2; + } // Only display Minimap visible area when working. + &:active { + cursor: default; + } // Change cursor when dragging. + } + + } + } + &:hover::shadow { + .minimap-visible-area { + opacity: 0.2; + transition: opacity 1s; + } // When Hover to all minimap area, visible area will display. + } + + &:active::shadow { + .minimap-visible-area { + opacity: 0.2; + transition: opacity 0.5s; + } // Display Minimap visible area when dragging. + } + } +} + +``` + + + ### ASCII Art Comments One neat trick is to use ASCII art to create huge comments visible in the minimap. This is really efficient when navigating huge files. diff --git a/resources/on-default-minimap.png b/resources/on-default-minimap.png new file mode 100644 index 00000000..012d20a4 Binary files /dev/null and b/resources/on-default-minimap.png differ diff --git a/resources/on-hover-minimap.png b/resources/on-hover-minimap.png new file mode 100644 index 00000000..b1fa3967 Binary files /dev/null and b/resources/on-hover-minimap.png differ diff --git a/resources/on-scroll-minimap.png b/resources/on-scroll-minimap.png new file mode 100644 index 00000000..dd503106 Binary files /dev/null and b/resources/on-scroll-minimap.png differ