schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-29 07:00:27 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added css overflow scroll to toolbar actions.

Browse source
This commit is contained in:
orangemug 2017-11-06 10:23:13 +00:00
parent d502d9b1bb
commit ae370f04c1
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

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

23
src/styles/_scrollbar.scss
View file

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

14
src/styles/_toolbar.scss
View file

@ -54,3 +54,17 @@
display: inline; display: inline;
margin-left: $margin-1; 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;
}