diff --git a/fonts/kitematic.eot b/fonts/kitematic.eot index b31399dd8f..29b7a10466 100644 Binary files a/fonts/kitematic.eot and b/fonts/kitematic.eot differ diff --git a/fonts/kitematic.svg b/fonts/kitematic.svg index 6d6a89b1dc..0eb4c9c371 100644 --- a/fonts/kitematic.svg +++ b/fonts/kitematic.svg @@ -18,9 +18,10 @@ - + + diff --git a/fonts/kitematic.ttf b/fonts/kitematic.ttf index 84d2f048c8..fed09b3609 100644 Binary files a/fonts/kitematic.ttf and b/fonts/kitematic.ttf differ diff --git a/fonts/kitematic.woff b/fonts/kitematic.woff index 9d2678cf43..cec78819b3 100644 Binary files a/fonts/kitematic.woff and b/fonts/kitematic.woff differ diff --git a/src/components/ContainerDetailsSubheader.react.js b/src/components/ContainerDetailsSubheader.react.js index bc9d4a348d..73d86cbd3b 100644 --- a/src/components/ContainerDetailsSubheader.react.js +++ b/src/components/ContainerDetailsSubheader.react.js @@ -117,46 +117,6 @@ var ContainerDetailsSubheader = React.createClass({ }); } }, - handleItemMouseEnterView: function () { - var $action = $(this.getDOMNode()).find('.action .view'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveView: function () { - var $action = $(this.getDOMNode()).find('.action .view'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterRestart: function () { - var $action = $(this.getDOMNode()).find('.action .restart'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveRestart: function () { - var $action = $(this.getDOMNode()).find('.action .restart'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterStop: function () { - var $action = $(this.getDOMNode()).find('.action .stop'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveStop: function () { - var $action = $(this.getDOMNode()).find('.action .stop'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterStart: function () { - var $action = $(this.getDOMNode()).find('.action .start'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveStart: function () { - var $action = $(this.getDOMNode()).find('.action .start'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterTerminal: function () { - var $action = $(this.getDOMNode()).find('.action .terminal'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveTerminal: function () { - var $action = $(this.getDOMNode()).find('.action .terminal'); - $action.css("visibility", "hidden"); - }, render: function () { var runActionClass = classNames({ action: true, @@ -200,16 +160,16 @@ var ContainerDetailsSubheader = React.createClass({ var startStopToggle; if (this.disableStop()) { startStopToggle = ( -
-
- Start +
+
+
START
); } else { startStopToggle = ( -
-
- Stop +
+
+
STOP
); } @@ -217,17 +177,17 @@ var ContainerDetailsSubheader = React.createClass({
{startStopToggle} -
-
- Restart +
+
+
RESTART
-
-
- Terminal +
+
+
EXEC
-
-
- View +
+
+
VIEW
diff --git a/styles/icons.less b/styles/icons.less index 59405421b3..433502efa6 100644 --- a/styles/icons.less +++ b/styles/icons.less @@ -22,8 +22,8 @@ speak: none; line-height: 1; //-webkit-font-smoothing: subpixel-antialiased; - /*-webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale;*/ + //-webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before, @@ -36,8 +36,8 @@ speak: none; line-height: 1; //-webkit-font-smoothing: subpixel-antialiased; - /*-webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale;*/ + //-webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .icon-add:before { @@ -73,9 +73,6 @@ .icon-restart:before { content: "n"; } -.icon-stop:before { - content: "o"; -} .icon-docker-cli:before { content: "a"; } @@ -88,3 +85,9 @@ .icon-search:before { content: "p"; } +.icon-start:before { + content: "o"; +} +.icon-stop:before { + content: "q"; +} diff --git a/styles/right-panel.less b/styles/right-panel.less index d1ebdcfc0a..a9687ffb30 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -43,56 +43,53 @@ background-color: white; height: 45px; font-size: 10px; - color: @gray-normal; .details-header-actions { flex: 1 auto; text-align: left; .action { display: inline-block; position: relative; - img { - width: 35px; - height: 35px; - } + width: 60px; + height: 44px; + padding-top: 0.2rem; + .box-button(); + border-right: 1px solid @color-divider; &.disabled { opacity: 0.3; &:active { - img, .btn-label { - -webkit-filter: brightness(1); - } } } &:active { - img, .btn-label { - -webkit-filter: brightness(0.8); - } } .action-icon { - color: @gray-normal; - margin-right: 15px; - } - .btn-label { - position: absolute; - color: @brand-action; - font-size: 10px; - width: 200px; - top: 38px; - &.view { - left: 8px; - } - &.restart { - left: 3px; + text-align: center; + height: 44px; + .icon { + font-size: 24px; + margin-left: 0.6rem; } &.stop { - left: 8px; + position: relative; + top: 0.3rem; + .icon { + font-size: 20px; + margin-top: 1rem; + } } &.start { - left: 8px; + position: relative; + top: 0.3rem; + .icon { + font-size: 20px; + margin-top: 1rem; + } } - &.terminal { - left: 1px; - } - visibility: hidden; + } + .btn-label { + text-align: center; + font-size: 8px; + position: relative; + top: -1.5rem; } } }