diff --git a/src/components/ContainerList.react.js b/src/components/ContainerList.react.js index 7ff8504b3f..4a042b4c81 100644 --- a/src/components/ContainerList.react.js +++ b/src/components/ContainerList.react.js @@ -1,6 +1,5 @@ var React = require('react/addons'); var ContainerListItem = require('./ContainerListItem.react'); -var ContainerListNewItem = require('./ContainerListNewItem.react'); var ContainerList = React.createClass({ componentWillMount: function () { @@ -14,7 +13,6 @@ var ContainerList = React.createClass({ }); return ( ); diff --git a/src/components/ContainerListNewItem.react.js b/src/components/ContainerListNewItem.react.js deleted file mode 100644 index 237e620c4a..0000000000 --- a/src/components/ContainerListNewItem.react.js +++ /dev/null @@ -1,54 +0,0 @@ -var $ = require('jquery'); -var React = require('react'); -var Router = require('react-router'); -var metrics = require('../utils/MetricsUtil'); - -var ContainerListNewItem = React.createClass({ - mixins: [Router.Navigation, Router.State], - handleItemMouseEnter: function () { - var $action = $(this.getDOMNode()).find('.action'); - $action.show(); - }, - handleItemMouseLeave: function () { - var $action = $(this.getDOMNode()).find('.action'); - $action.hide(); - }, - handleDelete: function (event) { - metrics.track('Deleted Container', { - from: 'list', - type: 'new' - }); - - if (this.props.containers.length > 0 && this.getRoutes()[this.getRoutes().length - 2].name === 'new') { - var name = this.props.containers[0].Name; - this.transitionTo('containerHome', {name}); - } - $(this.getDOMNode()).fadeOut(300); - event.preventDefault(); - }, - render: function () { - var action; - if (this.props.containers.length > 0) { - action = ( -
- -
- ); - } - return ( - -
  • -
    -
    -
    - New Container -
    -
    - {action} -
  • -
    - ); - } -}); - -module.exports = ContainerListNewItem; diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js index 03319d7d20..a588db73c9 100644 --- a/src/components/Containers.react.js +++ b/src/components/Containers.react.js @@ -180,7 +180,9 @@ var Containers = React.createClass({

    Containers

    - + + +
    diff --git a/styles/left-panel.less b/styles/left-panel.less index 769fe64b4b..3ceb44068a 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -28,16 +28,31 @@ position: relative; } .create { + display: flex; flex: 1 auto; - text-align: right; + justify-content: flex-end; margin-right: 20px; margin-top: 3px; - .btn-new { - font-size: 24px; - color: @brand-action; - transition: all 0.25s; - &:hover { - color: darken(@brand-action, 15%); + a { + display: block; + text-decoration: none; + cursor: default; + &.active { + .btn-new { + opacity: 0.3; + &:hover { + color: @brand-action; + } + } + } + .btn-new { + display: block; + font-size: 24px; + color: @brand-action; + transition: all 0.25s; + &:hover { + color: darken(@brand-action, 15%); + } } } }