Font icons for container actions.

fonts/kitematic.svg

@@ -18,9 +18,10 @@
 <glyph unicode="&#108;" d="M69 196c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 62-28 62-62 0-33-29-61-62-61z m0 112c-28 0-52-23-52-51 0-27 24-50 52-50 28 0 51 23 51 50-1 28-23 51-51 51z m188-112c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 63-28 63-62 0-33-29-61-63-61z m0 112c-28 0-51-23-51-51 0-27 23-50 51-50 28 0 51 23 51 50-1 28-23 51-51 51z m189-112c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 63-28 63-62 0-33-28-61-63-61z m0 112c-28 0-52-23-52-51 0-27 24-50 52-50 28 0 51 23 51 50 0 28-23 51-51 51z"/>
 <glyph unicode="&#109;" d="M298 6l-85 0c-3 0-6 2-6 6l0 65c-3 2-7 3-12 5-10 4-22 8-32 13l-45-45c-3-2-6-2-8 0l-60 60c-1 1-1 2-1 4 0 3 1 4 1 5l45 45c-8 16-15 38-19 62l-64 0c-4 0-6 3-6 6l0 66c0 3 2 6 6 6l64 0c4 10 11 29 18 45l-45 45c-3 3-3 6 0 8l59 60c3 2 6 2 9 0l45-45c14 8 33 15 45 19l0 64c0 4 3 6 6 6l85 0c3 0 6-2 6-6l0-64c10-4 31-11 45-19l45 45c3 2 6 2 8 0l60-60c1-1 1-2 1-4 0-3-1-4-1-5l-45-45c8-13 14-30 18-46l64 0c3 0 6-2 6-6l0-67c0-4-3-6-6-6l-63 0c-5-36-11-48-19-62l45-46c2-2 2-5 0-8l-60-59c-2-3-5-3-8 0l-45 45c-10-5-23-10-32-13-5-1-10-4-12-5l0-65c-1-2-4-4-7-4z m-78 12l73 0 0 63c0 2 1 5 3 5 4 2 10 3 17 7 11 3 25 8 35 14 2 1 4 1 7-1l44-44 51 51-44 44c-2 3-2 5-1 7l1 2c10 14 16 25 20 65 0 4 3 5 6 5l63 0 0 56-63 0c-2 0-5 2-6 4-4 18-12 36-20 50-1 3-1 6 1 8l44 44-51 51-44-44c-2-3-5-3-7-1-16 9-42 19-50 20-3 0-5 3-5 6l0 63-73 0 0-63c0-3-2-5-4-6-11-2-35-12-50-20-3-2-6-2-7 1l-45 44-51-51 44-44c3-3 3-5 2-8-10-15-18-40-21-50-1-2-3-4-6-4l-63 0 0-56 63 0c4 0 6-3 6-5 4-25 12-51 21-67 1-2 1-6-2-7l-44-44 51-51 45 44c2 2 4 2 7 1 9-6 22-11 34-14 7-3 13-5 17-7 2-1 3-4 3-5l0-63z m36 139c-55 0-99 44-99 99 0 55 44 99 99 99 55 0 99-44 99-99 0-55-44-99-99-99z m0 186c-48 0-87-39-87-87 0-48 39-87 87-87 48 0 87 39 87 87 0 48-39 87-87 87z"/>
 <glyph unicode="&#110;" d="M85 208c-2 0-3 1-4 2l-75 107c-2 2-1 5 1 7 3 2 6 1 8-1l70-101 92 101c2 2 5 2 8 0 2-2 2-5 0-7l-96-107c0 0-3-1-4-1z m217-160c-3 0-5 2-5 5 0 4 2 6 5 6 54 2 105 24 142 65 35 38 54 88 52 139-4 109-98 195-209 190-56-2-107-25-143-67-38-43-57-101-52-164 0-3-2-5-6-5-3 0-5 2-5 5-5 66 14 127 54 172 39 43 92 68 151 70 117 4 215-85 220-201 2-54-17-106-56-147-37-41-91-66-148-68z"/>
-<glyph unicode="&#111;" d="M475 3l-438 0c-19 0-34 15-34 34l0 438c0 19 15 34 34 34l438 0c19 0 34-15 34-34l0-438c0-19-15-34-34-34z m-438 492c-11 0-20-9-20-20l0-438c0-11 9-20 20-20l438 0c11 0 20 9 20 20l0 438c0 11-9 20-20 20z"/>
 <glyph unicode="&#97;" d="M242 489c0-29 0-59 0-89 30 0 59 0 89 0 0-30 0-59 0-89 10 0 19 0 29 1 10 3 19 5 28 10-1 3-2 5-5 7-5 12-6 24-6 38 1 9 2 19 6 27 4 6 7 11 12 17 2 2 3 4 5 6 3-3 6-5 10-8 11-10 20-21 27-35 2-5 4-10 6-16 15 4 28 4 43-2 8-3 16-8 24-12-1-3-3-5-4-9-4-8-9-15-15-22-9-9-22-15-35-18-9-2-16-2-24-2-2 0-2 0-3-1-6-16-14-32-24-46 0 0 0 0 0-1 1 0 1 0 3 0 22 0 44 0 67 0 15 0 27-12 27-27 0-57 0-116 0-173 0-15-12-26-27-26-80 0-160 0-242 0-14 0-24 8-26 22 0 1 0 3 0 4 0 27 0 55 0 82 0 2 0 2 0 3-2 0-5 0-7 0-13-1-26-1-39 0-32 2-62 11-89 30-19 13-33 30-45 50-7 15-12 29-16 46-1 6-1 13-2 19 0 0 0 1 0 1 0 5 0 10 0 16 0 0 0 0 0 1 0 3 0 6 1 9 0 3 1 6 1 10 15 0 30 0 44 0 0 31 0 60 0 89 30 0 59 0 89 0 0 29 0 59 0 89 33-1 65-1 98-1z m111-254c-41 0-80 0-121 0-9 0-16-7-16-17 0-57 0-115 0-173 0-9 7-17 17-17 80 0 161 0 241 0 10 0 17 8 17 17 0 57 0 115 0 173 0 10-7 16-17 16-40 1-80 1-121 1z m47 167c-4-4-6-8-8-13-5-14-6-26-4-41 2-10 5-20 12-28 0 0 1-1 1-1-18-12-36-18-57-18-107 0-214 0-321 0-1 0-1 0-2 0 0-6-1-12-1-17 0-8 1-17 2-25 2-16 7-30 15-44 10-19 24-34 40-46 25-17 55-26 85-28 9-1 20 0 29 0 5 0 10 1 15 1 0 1 0 2 0 2 0 25 0 50 0 76 0 2 0 4 0 5 2 13 12 22 26 22 52 0 106 0 158 0 1 0 2 0 3 1 11 17 21 36 28 56 0 1 1 2 2 2 11-1 21 0 30 2 15 4 27 12 35 23 2 3 4 7 6 10-9 6-20 9-30 9-11 1-21-1-32-5 0 11-5 22-10 32-5 10-12 18-22 25z m-246 77c0-27 0-53 0-78 26 0 52 0 77 0 0 26 0 52 0 78-25 0-51 0-77 0z m0-167c26 0 52 0 77 0 0 27 0 53 0 78-26 0-52 0-77 0 0-26 0-51 0-78z m166 0c0 27 0 53 0 78-26 0-53 0-78 0 0-26 0-52 0-78 27 0 52 0 78 0z m-177 0c0 27 0 53 0 78-26 0-52 0-77 0 0-26 0-52 0-78 26 0 51 0 77 0z m187-174c-2-2-4-4-6-7-9-11-20-20-29-31-1-1-3-2-6-2-4 1-5 5-2 9 2 2 6 5 8 7 7 7 14 15 21 22 0 0 0 0 0 1-3 2-6 5-8 7-7 8-14 15-21 22-2 2-2 5 0 7 2 3 6 3 8 0 11-10 23-23 35-35-1 0 0 0 0 0z m49-27c10 0 19 0 30 0 2 0 4-1 5-3 1-2 0-5-2-6-1-1-2-1-3-1-19 0-39 0-58 0-3 0-5 2-5 6 0 3 2 5 5 5 9-1 19-1 28-1z m-236 121c0-15-10-28-24-31-16-5-30 4-36 18-7 16 0 35 14 42 18 10 39 0 45-20 0-1 1-3 1-4 0-1 0-3 0-5z m-53 0c0-1 1-4 1-7 4-13 19-18 30-11 8 5 12 15 10 24-4 13-16 20-28 16-7-3-12-12-13-22z"/>
 <glyph unicode="&#103;" d="M267 6c-7 0-15 0-21 0-3 0-7 0-10 1-11 1-20 3-31 5-26 5-51 15-75 28-34 21-62 47-82 79-25 38-38 80-41 124 0 0 0 1 0 1 0 7 0 14 0 20 0 0 0 2 0 2 1 23 5 46 13 69 19 53 53 96 100 128 38 25 80 38 125 41 0 0 1 0 1 0 8 0 15 0 21 0 0 0 1 0 1 0 11-2 20-2 31-4 26-3 50-12 72-25 40-20 71-49 95-86 25-38 38-79 40-123 0 0 0-2 0-2 0-7 0-14 0-20 0 0 0-1 0-1-1-18-4-35-7-51-18-68-58-119-118-154-21-13-45-21-70-27-12-3-24-5-36-5-2 0-6 0-8 0z m-73 186c-40 33-43 91-11 128 31 35 85 41 122 12 19-14 31-34 34-58 5-31-4-57-27-79 26-13 46-32 61-57 14-26 18-53 13-82 75 46 128 146 102 256-26 110-130 189-249 181-114-8-208-99-219-214-2-29 0-59 7-86 8-29 21-54 37-78 18-23 38-42 63-59-9 62 24 114 67 136z m24-1c-2-2-4-3-6-3-14-6-27-14-39-25-31-32-42-69-34-113 0-1 2-2 3-2 37-21 76-30 118-29 13 0 26 1 39 4 25 4 47 13 70 25 1 0 1 1 2 2 4 17 5 35 2 51-9 42-34 70-73 87-5 3-9 4-13 5 1 0 1 1 2 1 6 5 13 10 18 14 17 19 24 42 19 67-7 44-50 71-93 62-38-8-66-45-59-88 3-23 15-41 36-54 2-1 6-2 8-4z"/>
 <glyph unicode="&#105;" d="M300 293c-2 0-4 0-5 2-3 2-3 6 0 8l200 200c2 3 6 3 8 0 3-2 3-6 0-8l-200-200c0-2-2-2-3-2z m-275-274c-1 0-4 0-5 1-3 2-3 6 0 9l200 200c2 2 6 2 9 0 2-3 2-7 0-9l-200-200c0-1-3-1-4-1z m475 337c-4 0-7 2-7 6l0 131-131 0c-4 0-6 3-6 7 0 3 2 6 6 6l138 0c3 0 6-3 6-6l0-138c0-4-3-6-6-6z m-350-350l-138 0c-3 0-6 3-6 6l0 138c0 4 3 6 6 6 4 0 7-2 7-6l0-131 131 0c4 0 6-3 6-7 0-3-2-6-6-6z"/>
 <glyph unicode="&#112;" d="M504-1c-1 0-4 0-5 1l-202 202c-3 3-3 6 0 9 2 2 6 2 8 0l202-203c3-2 3-6 0-8-1-1-2-1-3-1z m-322 152c-97 0-176 79-176 176 0 97 79 176 176 176 96 0 175-79 175-176 0-98-79-176-175-176z m0 339c-91 0-165-73-165-164 0-91 74-164 165-164 90 0 164 73 164 164 0 91-75 164-164 164z"/>
+<glyph unicode="&#111;" d="M34 5c-15 0-26 11-26 29l0 444c0 18 10 29 26 29 4 0 9-1 16-3l443-226c14-6 16-16 16-22 0-5-2-14-16-22l-443-226c-7-2-12-3-16-3z m0 486c-8 0-10-9-10-13l0-444c0-4 2-13 10-13 1 0 4 0 8 1l443 226c5 3 8 6 8 8 0 2-2 5-8 8l-443 226c-4 0-7 1-8 1z"/>
+<glyph unicode="&#113;" d="M464 7l-416 0c-22 0-41 19-41 41l0 416c0 22 19 41 41 41l416 0c22 0 41-19 41-41l0-416c0-22-19-41-41-41z m-416 481c-14 0-24-10-24-24l0-416c0-14 10-24 24-24l416 0c14 0 24 10 24 24l0 416c0 14-10 24-24 24z"/>
 </font></defs></svg>

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 = (
-        <div className={startActionClass} onMouseEnter={this.handleItemMouseEnterStart} onMouseLeave={this.handleItemMouseLeaveStart}>
-          <div className="action-icon" onClick={this.handleStart}><RetinaImage src="button-start.png" /></div>
-          <span className="btn-label start">Start</span>
+        <div className={startActionClass}>
+          <div className="action-icon start" onClick={this.handleStart}><span className="icon icon-start"></span></div>
+          <div className="btn-label">START</div>
         </div>
       );
     } else {
       startStopToggle = (
-        <div className={stopActionClass} onMouseEnter={this.handleItemMouseEnterStop} onMouseLeave={this.handleItemMouseLeaveStop}>
-          <div className="action-icon" onClick={this.handleStop}><RetinaImage src="button-stop.png" /></div>
-          <span className="btn-label stop">Stop</span>
+        <div className={stopActionClass}>
+          <div className="action-icon stop" onClick={this.handleStop}><span className="icon icon-stop"></span></div>
+          <div className="btn-label">STOP</div>
         </div>
       );
     }
@@ -217,17 +177,17 @@ var ContainerDetailsSubheader = React.createClass({
       <div className="details-subheader">
         <div className="details-header-actions">
           {startStopToggle}
-          <div className={restartActionClass} onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
-            <div className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></div>
-            <span className="btn-label restart">Restart</span>
+          <div className={restartActionClass}>
+            <div className="action-icon" onClick={this.handleRestart}><span className="icon icon-restart"></span></div>
+            <div className="btn-label">RESTART</div>
           </div>
-          <div className={terminalActionClass} onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
-            <div className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></div>
-            <span className="btn-label terminal">Terminal</span>
+          <div className={terminalActionClass}>
+            <div className="action-icon" onClick={this.handleTerminal}><span className="icon icon-docker-exec"></span></div>
+            <div className="btn-label">EXEC</div>
           </div>
-          <div className={runActionClass} onMouseEnter={this.handleItemMouseEnterView} onMouseLeave={this.handleItemMouseLeaveView}>
-            <div className="action-icon" onClick={this.handleRun}><RetinaImage src="button-view.png"/></div>
-            <span className="btn-label view">View</span>
+          <div className={runActionClass}>
+            <div className="action-icon" onClick={this.handleRun}><span className="icon icon-browser-view"></span></div>
+            <div className="btn-label">VIEW</div>
           </div>
         </div>
         <div className="details-subheader-tabs">

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";
+}

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;
         }
       }
     }