fix(themes): Add classes for toolbar elements

This commit is contained in:
Jackie Luo 2016-03-11 16:55:28 -08:00
parent ae4ca59526
commit 270d1210b3
2 changed files with 11 additions and 8 deletions

View file

@ -171,6 +171,7 @@ class Toolbar extends React.Component
toolbars = @state.columns.map (components, idx) => toolbars = @state.columns.map (components, idx) =>
<div style={position: 'absolute', top:0, display:'none'} <div style={position: 'absolute', top:0, display:'none'}
className="toolbar-#{@state.columnNames[idx]}"
data-column={idx} data-column={idx}
key={idx}> key={idx}>
{@_flexboxForComponents(components)} {@_flexboxForComponents(components)}
@ -220,6 +221,7 @@ class Toolbar extends React.Component
state = state =
mode: WorkspaceStore.layoutMode() mode: WorkspaceStore.layoutMode()
columns: [] columns: []
columnNames: []
# Add items registered to Regions in the current sheet # Add items registered to Regions in the current sheet
if @props.data?.columns[state.mode]? if @props.data?.columns[state.mode]?
@ -227,18 +229,19 @@ class Toolbar extends React.Component
continue if WorkspaceStore.isLocationHidden(loc) continue if WorkspaceStore.isLocationHidden(loc)
entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar, mode: state.mode}) entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar, mode: state.mode})
state.columns.push(entries) state.columns.push(entries)
state.columnNames.push(loc.Toolbar.id.split(":")[0]) if entries
# Add left items registered to the Sheet instead of to a Region # Add left items registered to the Sheet instead of to a Region
for loc in [WorkspaceStore.Sheet.Global, @props.data] for loc in [WorkspaceStore.Sheet.Global, @props.data]
entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar.Left, mode: state.mode}) entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar.Left, mode: state.mode})
state.columns[0]?.push(entries...) state.columns[0]?.push(entries...)
state.columns[0]?.push(ToolbarBack) if @props.depth > 0 if @props.depth > 0
state.columns[0]?.push(ToolbarBack)
# Add right items registered to the Sheet instead of to a Region # Add right items registered to the Sheet instead of to a Region
for loc in [WorkspaceStore.Sheet.Global, @props.data] for loc in [WorkspaceStore.Sheet.Global, @props.data]
entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar.Right, mode: state.mode}) entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar.Right, mode: state.mode})
state.columns[state.columns.length - 1]?.push(entries...) state.columns[state.columns.length - 1]?.push(entries...)
if state.mode is "popout" if state.mode is "popout"
state.columns[0]?.push(WindowTitle) state.columns[0]?.push(WindowTitle)

View file

@ -2,12 +2,12 @@
<div class="sheet-container"> <div class="sheet-container">
<div class="sheet-toolbar"> <div class="sheet-toolbar">
<div style="position:absolute; width:100%; height:100%; z-index: 1;" class="sheet-toolbar-container"> <div style="position:absolute; width:100%; height:100%; z-index: 1;" class="sheet-toolbar-container">
<div name="ToolbarWindowControls" class="toolbar-window-controls"> <div name="ToolbarWindowControls" class="toolbar-window-controls">
<button class="close" onClick="require('remote').getCurrentWindow().close()"></button> <button class="close" onClick="require('remote').getCurrentWindow().close()"></button>
<button class="minimize" onClick="require('remote').getCurrentWindow().minimize()"></button> <button class="minimize" onClick="require('remote').getCurrentWindow().minimize()"></button>
<button class="maximize" onClick="require('remote').getCurrentWindow().maximize()"></button> <button class="maximize" onClick="require('remote').getCurrentWindow().maximize()"></button>
</div> </div>
<div class="window-title"></div> <div class="window-title"></div>
</div> </div>
</div> </div>
<div id="container" style="left:0; right:0; position:absolute;"></div> <div id="container" style="left:0; right:0; position:absolute;"></div>