From 6667e2cdc6569ec00de0f9d1a59fd099fcb8f500 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Feb 15 2018 11:24:20 +0000
Subject: tidy up the library widget


---

diff --git a/hubs/widgets/library/__init__.py b/hubs/widgets/library/__init__.py
index 214fe90..d6a17af 100644
--- a/hubs/widgets/library/__init__.py
+++ b/hubs/widgets/library/__init__.py
@@ -26,6 +26,12 @@ class Library(Widget):
         )]
     is_react = True
     views_module = ".views"
+    description = {
+                   "stream": "Bookmark links for display on your stream",
+                   "user": "Bookmark links for display on your hub",
+                   "team": ("Bookmark links for display on the team's "
+                            "hub"),
+                  }
 
     def get_props(self, instance, *args, **kwargs):
         props = super(Library, self).get_props(instance, *args, **kwargs)
diff --git a/js/app/widgets/library/Link.js b/js/app/widgets/library/Link.js
index 2651388..18d40fe 100644
--- a/js/app/widgets/library/Link.js
+++ b/js/app/widgets/library/Link.js
@@ -15,17 +15,31 @@ export default class Link extends React.Component {
             alt=""
             />
         </div>
-        <div className={`media-body ${this.props.showDropdown ? "pr-3" : ""}`}>
-          { this.props.showDropdown &&
+        <div className={`media-body align-self-center`}>
+          <a
+            href={this.props.url}
+            className="d-block"
+            target="_blank"
+            >
+            {this.props.title}
+          </a>
+          <p className="mb-0 description">
+            <small>
+              {this.props.description}
+            </small>
+          </p>
+        </div>
+        { this.props.showDropdown &&
             <div
-              className="dropdown"
+              className="dropdown align-self-center"
               >
               <button
-                className="btn btn-link text-secondary dropdown-toggle"
+                className="btn btn-link text-secondary"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
                 >
+                 <i className="fa fa-cog"></i>
               </button>
               <div
                 className="dropdown-menu dropdown-menu-right"
@@ -46,19 +60,6 @@ export default class Link extends React.Component {
               </div>
             </div>
           }
-          <a
-            href={this.props.url}
-            className="d-block"
-            target="_blank"
-            >
-            {this.props.title}
-          </a>
-          <p className="mb-0 description">
-            <small>
-              {this.props.description}
-            </small>
-          </p>
-        </div>
       </li>
     );
   }
diff --git a/js/app/widgets/library/Widget.js b/js/app/widgets/library/Widget.js
index 0e701af..84d2e9f 100644
--- a/js/app/widgets/library/Widget.js
+++ b/js/app/widgets/library/Widget.js
@@ -198,16 +198,17 @@ class LibraryWidget extends React.Component {
               }
             </div>
             :
-            <p className="text-secondary">
-              <em>No links yet.</em>
+            <p className="text-secondary text-center">
+              <em>No items in this Library yet.</em>
             </p>
           }
           {this.props.hub.perms.config &&
             <div>
               <div className="text-center">
                 <button
-                  className="btn btn-secondary btn-sm"
+                  className="btn btn-outline-secondary btn-block btn-sm"
                   onClick={this.onAddDialogOpen}
+                  title="add new link to library"
                   >
                   Add a New Item
                 </button>
diff --git a/js/app/widgets/library/library.css b/js/app/widgets/library/library.css
index 54dc556..9eead32 100644
--- a/js/app/widgets/library/library.css
+++ b/js/app/widgets/library/library.css
@@ -1,5 +1,5 @@
 .widget-library div.link-preview {
-  max-width: 25%;
+  max-width: 72px;
 }
 .widget-library img.link-preview {
   width: 100%;
@@ -11,11 +11,10 @@
     border-bottom: 1px solid #eee;
 }
 
-.widget-library .Link .dropdown {
-    position: absolute;
-    right: .5em;
-}
-
 .widget-library .Link .description {
     line-height: 1;
 }
+
+.widget-library .btn{
+    cursor: pointer;
+}