diff --git a/client/app/scripts/components/details.js b/client/app/scripts/components/details.js index 9bd1b9c8c..da74daaf3 100644 --- a/client/app/scripts/components/details.js +++ b/client/app/scripts/components/details.js @@ -1,15 +1,26 @@ const React = require('react'); +const AppActions = require('../actions/app-actions'); const NodeDetails = require('./node-details'); const Details = React.createClass({ + handleClickClose: function(ev) { + ev.preventDefault(); + AppActions.clickCloseDetails(); + }, + render: function() { return (
+
+
+ +
+
diff --git a/client/app/styles/main.less b/client/app/styles/main.less index d174c4f89..c76ab2034 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -316,6 +316,33 @@ h2 { top: 24px; bottom: 48px; width: 420px; + + .details-tools-wrapper { + position: relative; + } + + .details-tools { + position: absolute; + top: 16px; + right: 24px; + + span { + .palable; + padding: 4px; + margin-left: 2px; + font-size: 110%; + color: @white; + cursor: pointer; + opacity: 0.7; + border: 1px solid rgba(255, 255, 255, 0); + border-radius: 10%; + + &:hover { + opacity: 1; + border-color: rgba(255, 255, 255, 0.6); + } + } + } } .node-details { @@ -327,7 +354,7 @@ h2 { &-header { - padding: 24px 36px 16px 36px; + padding: 36px 36px 16px 36px; &-row { display: flex;