Tooltips and redesigned image cards.

src/ContainerListItem.react.js

@@ -4,6 +4,8 @@ var Router = require('react-router');
 var remote = require('remote');
 var dialog = remote.require('dialog');
 var ContainerStore = require('./ContainerStore');
+var OverlayTrigger = require('react-bootstrap').OverlayTrigger;
+var Tooltip = require('react-bootstrap').Tooltip;
 
 var ContainerListItem = React.createClass({
   handleItemMouseEnter: function () {
@@ -43,18 +45,43 @@ var ContainerListItem = React.createClass({
 
     var state;
     if (container.State.Downloading) {
-      state = <div className="state state-downloading"><div style={style} className="downloading-arrow"></div></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Downloading</Tooltip>}>
+          <div className="state state-downloading">
+            <div style={style} className="downloading-arrow"></div>
+          </div>
+        </OverlayTrigger>
+      );
     } else if (container.State.Running && !container.State.Paused) {
-      state = <div className="state state-running"><div style={style} className="runningwave"></div></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Running</Tooltip>}>
+          <div className="state state-running"><div style={style} className="runningwave"></div></div>
+        </OverlayTrigger>
+      );
     } else if (container.State.Restarting) {
-      state = <div className="state state-restarting" style={style}></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Restarting</Tooltip>}>
+          <div className="state state-restarting" style={style}></div>
+        </OverlayTrigger>
+      );
     } else if (container.State.Paused) {
-      state = <div className="state state-paused"></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Paused</Tooltip>}>
+          <div className="state state-paused"></div>
+        </OverlayTrigger>
+      );
     } else if (container.State.ExitCode) {
-      // state = <div className="state state-error"></div>;
-      state = <div className="state state-stopped"></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Stopped</Tooltip>}>
+          <div className="state state-stopped"></div>
+        </OverlayTrigger>
+      );
     } else {
-      state = <div className="state state-stopped"></div>;
+      state = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip>Stopped</Tooltip>}>
+          <div className="state state-stopped"></div>
+        </OverlayTrigger>
+      );
     }
 
     return (

src/ImageCard.react.js

@@ -2,6 +2,8 @@ var $ = require('jquery');
 var React = require('react/addons');
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
+var OverlayTrigger = require('react-bootstrap').OverlayTrigger;
+var Tooltip = require('react-bootstrap').Tooltip;
 
 var ImageCard = React.createClass({
   getInitialState: function () {
@@ -42,10 +44,34 @@ var ImageCard = React.createClass({
   render: function () {
     var self = this;
     var name;
-    if (this.props.image.is_official) {
-      name = <span><RetinaImage src="official.png"/>{this.props.image.name}</span>;
+    var imageNameTokens = this.props.image.name.split('/');
+    var namespace;
+    var repo;
+    if (imageNameTokens.length > 1) {
+      namespace = imageNameTokens[0];
+      repo = imageNameTokens[1];
     } else {
-      name = <span>{this.props.image.name}</span>;
+      namespace = "official";
+      repo = imageNameTokens[0];
+    }
+    if (this.props.image.is_official) {
+      name = (
+        <div>
+          <div className="namespace official">{namespace}</div>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip>{this.props.image.name}</Tooltip>}>
+            <span className="repo">{repo}</span>
+          </OverlayTrigger>
+        </div>
+      );
+    } else {
+      name = (
+        <div>
+          <div className="namespace">{namespace}</div>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip>{this.props.image.name}</Tooltip>}>
+            <span className="repo">{repo}</span>
+          </OverlayTrigger>
+        </div>
+      );
     }
     var description;
     if (this.props.image.description) {
@@ -75,6 +101,12 @@ var ImageCard = React.createClass({
     } else {
       tags = <RetinaImage className="tags-loading" src="loading-white.png"/>;
     }
+    var officialBadge;
+    if (this.props.image.is_official) {
+      officialBadge = (
+        <RetinaImage src="official.png" />
+      );
+    }
     return (
       <div className="image-item">
         <div className="tag-overlay" onClick={self.handleCloseTagOverlay}>
@@ -84,6 +116,9 @@ var ImageCard = React.createClass({
           <RetinaImage src={imgsrc}/>
         </div>
         <div className="card">
+          <div className="badges">
+            {officialBadge}
+          </div>
           <div className="name">
             {name}
           </div>
@@ -91,14 +126,18 @@ var ImageCard = React.createClass({
             {description}
           </div>
           <div className="actions">
-            <div className="stars">
-              <span className="icon icon-star-9"></span>
-              <span className="text">{this.props.image.star_count}</span>
-            </div>
-            <div className="tags">
-              <span className="icon icon-tag-1"></span>
-              <span className="text" onClick={self.handleTagOverlayClick.bind(self, this.props.image.name)} data-name={this.props.image.name}>{this.state.chosenTag}</span>
-            </div>
+            <OverlayTrigger placement="bottom" overlay={<Tooltip>Favorites</Tooltip>}>
+              <div className="stars">
+                <span className="icon icon-star-9"></span>
+                <span className="text">{this.props.image.star_count}</span>
+              </div>
+            </OverlayTrigger>
+            <OverlayTrigger placement="bottom" overlay={<Tooltip>Change Tag</Tooltip>}>
+              <div className="tags">
+                <span className="icon icon-tag-1"></span>
+                <span className="text" onClick={self.handleTagOverlayClick.bind(self, this.props.image.name)} data-name={this.props.image.name}>{this.state.chosenTag}</span>
+              </div>
+            </OverlayTrigger>
             <div className="action">
               <a className="btn btn-action" onClick={self.handleClick.bind(self, this.props.image.name)}>Create</a>
             </div>

styles/new-container.less

@@ -156,6 +156,12 @@
     }
     .card {
       padding: 10px 20px 10px 20px;
+      position: relative;
+      .badges {
+        position: absolute;
+        right: 15px;
+        top: 8px;
+      }
       .name {
         font-size: 18px;
         color: @gray-darkest;
@@ -164,26 +170,31 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        img {
-          margin-right: 7px;
-          position: relative;
-          top: -1px;
+        margin-bottom: 10px;
+        .namespace {
+          font-size: 11px;
+          color: @gray-lighter;
+          margin-bottom: -3px;
+          &.official {
+            color: @brand-action;
+          }
         }
       }
       .description {
         font-size: 12px;
         color: @gray-normal;
-        height: 65px;
+        height: 50px;
         text-overflow: ellipsis;
         overflow: hidden;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
+        -webkit-line-clamp: 3;
         display: -webkit-box;
         word-wrap: break-word;
       }
       .actions {
         width: 190px;
-        padding-top: 25px;
+        position: absolute;
+        bottom: 8px;
         .stars {
           height: 15px;
           font-size: 10px;
@@ -237,8 +248,6 @@
         }
         display: flex;
         flex-direaction: row;
-        position: relative;
-        bottom: 0px;
       }
     }
   }

styles/theme.less

@@ -201,3 +201,10 @@ input[type="text"] {
 .btn-info    { .btn-styles(@btn-info-bg); }
 .btn-warning { .btn-styles(@btn-warning-bg); }
 .btn-danger  { .btn-styles(@btn-danger-bg); }
+
+.tooltip {
+  .tooltip-inner {
+    font-size: 10px;
+    padding-bottom: 5px;
+  }
+}