schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-09-20 09:33:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Added css overflow scroll to toolbar actions
This commit is contained in:
Orange Mug 2017-11-07 11:14:16 +00:00 committed by GitHub
commit 1f80cfcaa6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/components/Toolbar.jsx
View file

@ -107,40 +107,44 @@ export default class Toolbar extends React.Component {
isOpen={this.state.isOpen.sources}
onOpenToggle={this.toggleModal.bind(this, 'sources')}
/>
<ToolbarLink
href={"https://github.com/maputnik/editor"}
className="maputnik-toolbar-logo"
>
<img src={logoImage} alt="Maputnik" />
<h1>Maputnik</h1>
</ToolbarLink>
<ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
<OpenIcon />
<IconText>Open</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
<MdFileDownload />
<IconText>Export</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
<SourcesIcon />
<IconText>Sources</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
<SettingsIcon />
<IconText>Style Settings</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.props.onInspectModeToggle}>
<InspectionIcon />
<IconText>
{ this.props.inspectModeEnabled && <span>Map Mode</span> }
{ !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
</IconText>
</ToolbarAction>
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
<HelpIcon />
<IconText>Help</IconText>
</ToolbarLink>
<div className="maputnik-toolbar__inner">
<ToolbarLink
href={"https://github.com/maputnik/editor"}
className="maputnik-toolbar-logo"
>
<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>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
<MdFileDownload />
<IconText>Export</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
<SourcesIcon />
<IconText>Sources</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
<SettingsIcon />
<IconText>Style Settings</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.props.onInspectModeToggle}>
<InspectionIcon />
<IconText>
{ this.props.inspectModeEnabled && <span>Map Mode</span> }
{ !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
</IconText>
</ToolbarAction>
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
<HelpIcon />
<IconText>Help</IconText>
</ToolbarLink>
</div>
</div>
</div>
}
}

23
src/styles/_scrollbar.scss
View file

@ -1,12 +1,15 @@
::-webkit-scrollbar {
background-color: #26282e;
width: 5px;
}
// 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 {
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;
&::-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;
}
}

14
src/styles/_toolbar.scss
View file

@ -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;
}