Breadcrumb Styles Improvement & "copy path" icon button (#180)

* improving breadcrumb styles, adding copy path button * improve spacing
djenriquez · Sep 1, 2017 · b2783aa · b2783aa
1 parent 0539041
commit b2783aa
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/app/components/Secrets/Generic/Generic.jsx b/app/components/Secrets/Generic/Generic.jsx
@@ -16,6 +16,9 @@ import JsonEditor from '../../shared/JsonEditor.jsx';
 import SecretWrapper from '../../shared/Wrapping/Wrapper.jsx'
 import { Link } from 'react-router'
 import ItemList from '../../shared/ItemList/ItemList.jsx';
+import copy from 'copy-to-clipboard';
+import ContentContentCopy from 'material-ui/svg-icons/content/content-copy';
+import IconButton from 'material-ui/IconButton';
 
 function snackBarMessage(message) {
     let ev = new CustomEvent("snackbar", { detail: { message: message } });
@@ -312,7 +315,15 @@ export default class GenericSecretBackend extends React.Component {
             let components = _.initial(this.getBaseDir(this.state.currentLogicalPath).split('/'));
             return _.map(components, (dir, index) => {
                 var relativelink = [].concat(components).slice(0, index + 1).join('/') + '/';
-                return (<Step key={index}><StepLabel style={{ paddingLeft: '5px', paddingRight: '5px' }} icon={<span />}><Link to={`/secrets/generic/${relativelink}`}>{dir}</Link></StepLabel></Step>)
+                if (index === 0) {
+                    // no left padding for first item
+                    var stepLabelStyle = { paddingLeft: '0'}
+                    var iconContainerStyle = { padding: '0' }
+                } else {
+                    var stepLabelStyle = { paddingLeft: '10px'}
+                    var iconContainerStyle = {}
+                }
+                return (<Step key={index}><StepLabel style={Object.assign({paddingRight: '10px', fontSize: '16px'}, stepLabelStyle)} iconContainerStyle={iconContainerStyle} icon={<span />}><Link to={`/secrets/generic/${relativelink}`}>{dir}</Link></StepLabel></Step>)
             });
         }
 
@@ -329,7 +340,12 @@ export default class GenericSecretBackend extends React.Component {
                         <Paper zDepth={0}>
                             <Toolbar style={{ alignItems: 'flex-start' }}>
                                 <ToolbarGroup>
-                                    <Subheader inset={false}>
+                                    <Subheader style={{ paddingLeft: "0" }} inset={false}>
+                                        <IconButton style={{paddingTop: "20px"}} tooltip="Copy Path" onTouchTap={() => { copy(this.state.currentLogicalPath) }} >
+                                            <ContentContentCopy />
+                                        </IconButton>
+                                    </Subheader>
+                                    <Subheader style={{ paddingLeft: "10px" }} inset={false}>
                                         <Stepper
                                             style={{ justifyContent: 'flex-start', fontWeight: 600 }}
                                             linear={false}