[TIC-UI] add badge ui

- add bedge ui

Signed-off-by: ChangHyun Lee <leechwin.lee@samsung.com>
Change-Id: If20006bf41f735cb56f6fd424d7e36b35454ce9d

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 562d77f..a4ce0e5 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -29,6 +29,9 @@ body {
   }
 }
 
+.badge {
+    background-color: #337ab7;
+}
 
 /* Modal Dialog */
 .modal-dialog {

diff --git a/public/src/index.html b/public/src/index.html
index e09a350..4066490 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -124,7 +124,7 @@
                                         <tr><td>Installed Size</td><td id="tic-package-info-installed-size"></td></tr>
                                         <tr><td>Summary</td><td id="tic-package-info-summary"></td></tr>
                                         <tr><td>Description</td><td id="tic-package-info-description"></td></tr>
-                                        <tr><td>Dependency</td><td id="tic-package-info-dependency"></td></tr>
+                                        <tr><td>Dependency <span class="badge" id="tic-package-info-dependency-badge"></span></td><td id="tic-package-info-dependency"></td></tr>
                                     </tbody>
                                 </table>
                             </div>
@@ -137,8 +137,7 @@
                                     <tbody>
                                         <tr><td>Image Size</td><td id="tic-package-image-size"></td></tr>
                                         <tr><td>Image Installed Size</td><td id="tic-package-image-installed-size"></td></tr>
-                                        <tr><td>Number of Packages</td><td id="tic-package-count"></td></tr>
-                                        <tr><td>Package List</td><td id="tic-package-list"></td></tr>
+                                        <tr><td>Package List <span class="badge" id="tic-package-list-badge"></span></td><td id="tic-package-list"></td></tr>
                                     </tbody>
                                 </table>
                             </div>
@@ -165,8 +164,7 @@
                                     <tbody>
                                         <tr><td>Image Size</td><td id="tic-image-image-size"></td></tr>
                                         <tr><td>Image Installed Size</td><td id="tic-image-image-installed-size"></td></tr>
-                                        <tr><td>Number of Packages</td><td id="tic-image-package-count"></td></tr>
-                                        <tr><td>Package List</td><td id="tic-image-package-list"></td></tr>
+                                        <tr><td>Package List <span class="badge" id="tic-image-package-list-badge"></span></td><td id="tic-image-package-list"></td></tr>
                                     </tbody>
                                 </table>
                             </div>
@@ -208,6 +206,7 @@
                     <!-- Settings Column -->
                     <div class="col-md-12">
                         <div class="panel panel-primary">
+                            <div class="panel-heading">Settings</div>
                             <div class="panel-body">
                                 <!-- Settings Toolbar -->
                                 <div id="tic-repository-toolbar">

diff --git a/public/src/js/page/image.js b/public/src/js/page/image.js
index 9d83306..45fa98a 100644 (file)
--- a/public/src/js/page/image.js
+++ b/public/src/js/page/image.js
@@ -81,7 +81,7 @@ define([
     function updateSummary() {
         var pacakgeImageSize = $('#tic-image-image-size').empty();
         var packageImageInstalledSize = $('#tic-image-image-installed-size').empty();
-        var packageCount = $('#tic-image-package-count').empty();
+        var packageListBadge = $('#tic-image-package-list-badge').empty();
         var packageList = $('#tic-image-package-list').empty();
 
         checkedPackagesList = require('js/page/package').getCheckedPackages();
@@ -100,7 +100,7 @@ define([
             packageImageInstalledSize.html(Util.bytesToSize(imageInstalledSize));
         }
         if (_.isNumber(count)) {
-            packageCount.html(count);
+            packageListBadge.html(count);
         }
         if (!_.isEmpty(checkedPackagesList)) {
             packageList.html(_.orderBy(_.map(checkedPackagesList, 'text')).join('<br>'));

diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js
index 4d1464e..2b67f13 100644 (file)
--- a/public/src/js/page/package.js
+++ b/public/src/js/page/package.js
@@ -47,7 +47,7 @@ define([
     function _updateSummary() {
         var pacakgeImageSize = $('#tic-package-image-size').empty();
         var packageImageInstalledSize = $('#tic-package-image-installed-size').empty();
-        var packageCount = $('#tic-package-count').empty();
+        var packageListBadge = $('#tic-package-list-badge').empty();
         var packageList = $('#tic-package-list').empty();
 
         var list = _getChecked();
@@ -66,7 +66,7 @@ define([
             packageImageInstalledSize.html(Util.bytesToSize(imageInstalledSize));
         }
         if (_.isNumber(count)) {
-            packageCount.html(count);
+            packageListBadge.html(count);
         }
         if (!_.isEmpty(list)) {
             packageList.html(_.orderBy(_.map(list, 'text')).join('<br>'));
@@ -89,6 +89,7 @@ define([
         var summary = $('#tic-package-info-summary').empty();
         var description = $('#tic-package-info-description').empty();
         var dependency = $('#tic-package-info-dependency').empty();
+        var dependencyBadge = $('#tic-package-info-dependency-badge').empty();
 
         if (!_.isEmpty(node.text)) {
             text.html(node.text);
@@ -112,7 +113,7 @@ define([
             description.html(node.description);
         }
         if (!_.isEmpty(node.dependency)) {
-            // TODO: remove dependency ui in div and apply scroll ui
+            dependencyBadge.html(node.dependency.length)
             dependency.html(_.orderBy(node.dependency).join('<br>'));
         }
     }