Merge pull request #190 from orangemug/feature/overflow-toolbar-actions

Added css overflow scroll to toolbar actions

src/components/Toolbar.jsx

@@ -107,6 +107,7 @@ export default class Toolbar extends React.Component {
           isOpen={this.state.isOpen.sources}
           onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
+      <div className="maputnik-toolbar__inner">
         <ToolbarLink
           href={"https://github.com/maputnik/editor"}
           className="maputnik-toolbar-logo"
@@ -114,6 +115,7 @@ export default class Toolbar extends React.Component {
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik</h1>
         </ToolbarLink>
+        <div className="maputnik-toolbar__actions">
           <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
             <OpenIcon />
             <IconText>Open</IconText>
@@ -142,5 +144,7 @@ export default class Toolbar extends React.Component {
             <IconText>Help</IconText>
           </ToolbarLink>
         </div>
+      </div>
+    </div>
   }
 }

src/styles/_scrollbar.scss

@@ -1,12 +1,15 @@
-::-webkit-scrollbar {
+// 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) {
+  &::-webkit-scrollbar {
     background-color: #26282e;
     width: 5px;
-}
+  }
 
-::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border-radius: 6px;
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     background-color: #666;
     padding-left: 2px;
     padding-right: 2px;
+  }
 }

src/styles/_toolbar.scss

@@ -54,3 +54,17 @@
   display: inline;
   margin-left: $margin-1;
 }
+
+.maputnik-toolbar-logo {
+  flex: 0 0 140px;
+}
+
+.maputnik-toolbar__inner {
+  display: flex;
+}
+
+.maputnik-toolbar__actions {
+  white-space: nowrap;
+  flex: 1;
+  overflow-y: auto;
+}