updates for popup-details feature of UI.

static/ng/resources/css/repository.css

@@ -108,4 +108,23 @@
 
 .popover{
   max-width: 500px;
-}
+}
+
+.popover-header {
+    padding:8px 14px;
+    background-color:#f7f7f7;
+    border-bottom:1px solid #ebebeb;
+    -webkit-border-radius:5px 5px 0 0;
+    -moz-border-radius:5px 5px 0 0;
+    border-radius:5px 5px 0 0;
+}
+
+.popover-title {
+    height: 2.5em;
+    padding: 8px 14px;
+    margin: 0;
+    font-size: 14px;
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #ebebeb;
+    border-radius: 5px 5px 0 0;
+}

static/ng/resources/js/components/details/retrieve-projects.directive.js

@@ -125,6 +125,14 @@
       $(document).on('click', clickHandler);
       
       function clickHandler(e) {
+        var target = $(e.target).parent();
+        $('[data-toggle="popover"]').each(function () {
+          //the 'is' for buttons that trigger popups
+          //the 'has' for icons within a button that triggers a popup
+          if (!$(this).is(target) && $(this).has(target).length === 0 && $('.popover').has(target).length === 0) {
+            $(this).parent().popover('hide');
+          }
+        });
         var targetId = $(e.target).attr('id');
         if(targetId === 'switchPane' || 
            targetId === 'retrievePane' ||

static/ng/resources/js/components/repository/list-tag.directive.html

@@ -10,7 +10,7 @@
       <tbody>
         <tr ng-repeat="tag in vm.tags">
           <td>//tag//</td>
-          <td style="text-align: center;"><popup-details repo-name="//vm.repoName//" tag="//tag//"></popup-details></td>
+          <td style="text-align: center;"><popup-details repo-name="//vm.repoName//" tag="//tag//" index="//$index//"></popup-details></td>
           <td>
             <pull-command repo-name="//vm.repoName//" tag="//tag//"></pull-command>   
           </td>

static/ng/resources/js/components/repository/list-tag.directive.js

@@ -61,11 +61,18 @@
         'repoName': '='
       },
       'replace': true,
+      'link': link,
       'controller': ListTagController,
       'controllerAs': 'vm',
       'bindToController': true
     };
     return directive;
+    
+    function link(scope, element, attrs, ctrl) {
+      
+    }
+    
+    
   }
   
 })();

static/ng/resources/js/components/repository/popup-details.directive.html

@@ -1,4 +1,4 @@
-<a href="javascript:void(0);">
+<a href="javascript:void(0)" role="button" data-trigger="click"  data-toggle="popover" data-placement="right" disabled>
-<span tabindex="0" class="glyphicon glyphicon-info-sign" role="button" data-trigger="focus" data-toggle="popover" data-placement="right">
+<span class="glyphicon glyphicon-info-sign" >
 </span>
-</a>
+</a>

static/ng/resources/js/components/repository/popup-details.directive.js

@@ -10,8 +10,9 @@
   
   function PopupDetailsController(ListManifestService, $filter, dateLFilter) {
     var vm = this;
-
+    
     vm.retrieve = retrieve;
+    
     function retrieve() {
       ListManifestService(vm.repoName, vm.tag)
         .success(getManifestSuccess)
@@ -35,7 +36,8 @@
       'templateUrl': '/static/ng/resources/js/components/repository/popup-details.directive.html',
       'scope': {
         'repoName': '@',
-        'tag': '@'
+        'tag': '@',
+        'index': '@'
       },
       'link': link,
       'controller': PopupDetailsController,
@@ -46,21 +48,34 @@
     
     function link(scope, element, attrs, ctrl) {
       ctrl.retrieve();
-      scope.$watch('vm.manifest', function(current, origin) {
+     
+      scope.$watch('vm.manifest', function(current) {
         if(current) {
-          element.find('span').popover({
+          element
-            'content': generateContent,
+            .popover({
-            'html': true
+              'template': '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>',
-          });  
+              'title': '<div class="pull-right clearfix"><a href="javascript:void(0);"><span class="glyphicon glyphicon-remove-circle"></span></a></div>',
+              'content': generateContent,
+              'html': true
+            })
+            .on('shown.bs.popover', function(e){                       
+              $('[type="text"]:input', element.parent())
+                .select()
+                .end()
+                .on('click', function() {
+                  $(this).select();
+                });
+              element.parent().find('.glyphicon.glyphicon-remove-circle').on('click', function() {
+                element.trigger('click');        
+              });
+            });
         }
       });
-      
       function generateContent() {
-        var content = 
+        var content =  '<form class="form-horizontal">' +
-        '<form class="form-horizontal">' +
           '<div class="form-group">' +
           '<label class="col-sm-3 control-label">Id</label>' +
-          '<div class="col-sm-9"><p class="form-control-static long-line">' + ctrl.manifest['Id'] + '</p></div></div>' +
+          '<div class="col-sm-9"><p class="form-control-static long-line"><input type="text" id="txtImageId" value="' + ctrl.manifest['Id'] + '" readonly size="40"></p></div></div>' +
           '<div class="form-group"><label class="col-sm-3 control-label">Parent</label>' +
           '<div class="col-sm-9"><p class="form-control-static long-line">' + ctrl.manifest['Parent'] + '</p></div></div>' +
           '<div class="form-group"><label class="col-sm-3 control-label">Created</label>' +