Merge pull request #666 from orangemug/fix/issue-646

Fix to make layer list header visible at all times

src/components/Toolbar.jsx

@@ -210,7 +210,11 @@ export default class Toolbar extends React.Component {
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
             <IconText>View </IconText>
-            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
+            <select
+              className="maputnik-select"
+              onChange={(e) => this.handleSelection(e.target.value)}
+              value={currentView.id}
+            >
               {views.map((item) => {
                 return (
                   <option key={item.id} value={item.id} disabled={item.disabled}>

src/styles/_input.scss

@@ -97,6 +97,13 @@
 .maputnik-select {
   @extend .maputnik-input;
 
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: $color-gray url("#{$icon-down-arrow}") right center no-repeat;
+  color: $color-white;
+  background-position: calc(100% - 2px) center;
+  padding-right: 20px;
+
   height: 24px;
 }
 

src/styles/_layer.scss

@@ -2,11 +2,14 @@
 .maputnik-layer-list {
   height: 100%;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 
   &-header {
     padding: $margin-2 $margin-2 $margin-3;
 
     @include flex-row;
+    flex: 0 0;
 
     > * {
       vertical-align: middle;
@@ -25,6 +28,9 @@
     padding: 0;
     margin: 0;
     padding-bottom: $margin-5;
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
   &-item-handle {

src/styles/_scrollbar.scss

@@ -1,5 +1,4 @@
-// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
-div:not(.maputnik-toolbar__actions) {
+*:not(select) {
   &::-webkit-scrollbar {
     background-color: #26282e;
     width: 8px;

src/styles/_toolbar.scss

@@ -17,7 +17,7 @@
   text-decoration: none;
   display: block;
   flex: 0 0 190px;
-  width: 190px;
+  width: 200px;
   text-align: left;
   background-color: $color-black;
   padding: $margin-2;
@@ -102,15 +102,13 @@
   @extend .maputnik-toolbar-link;
 
   select {
-    // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
-    color: $color-black !important;
-    margin-left: 4px;
+    margin-left: 6px;
     border-width: 0;
-
-    option {
-      // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
-      color: $color-black !important;
-    }
+    display: inline;
+    width: auto;
+    border: solid 1px $color-midgray;
+    vertical-align: inherit;
+    margin-top: -2px;
   }
 }
 

src/styles/_vars.scss

@@ -25,3 +25,6 @@ $layout-list-width: 200px;
 $layout-editor-width: 370px;
 $layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
 
+// 'menu-down' from 'https://materialdesignicons.com/'
+// See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>
+$icon-down-arrow: "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M7,10L12,15L17,10H7Z' /></svg>"