Issue kimchi-project#606: Change icon to distinguish image generated …

…template and iso generated template Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com>
d3scomp · Sep 1, 2016 · 190e612 · 190e612
1 parent 1c48656
commit 190e612
Show file tree

Hide file tree

Showing 9 changed files with 640 additions and 257 deletions.
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
@@ -207,7 +207,7 @@
 #template-add-window.modal-content ul#list-remote-iso li.col-md-3,
 #guest-add-window.modal-content ul#list-local-iso li.col-md-3,
 #guest-add-window.modal-content ul#list-remote-iso li.col-md-3 {
-  width: 241px;
+  width: 239px;
   margin: 10px 5px 0;
 }
 
@@ -1455,6 +1455,11 @@ body.wok-gallery {
   padding: 10px 30px;
 }
 
+#template-edit-window .wok-mask {
+  top: 0 !important;
+  z-index: 3;
+}
+
 #template-edit-window .tab-content .tab-pane {
   position: relative;
 }
@@ -1482,7 +1487,7 @@ body.wok-gallery {
 
 #template-edit-window .template-edit-wrapper-label {
   vertical-align: top;
-  min-width: 100px;
+  min-width: 172px;
   height: 35px;
   line-height: 35px;
   margin: 7px 0 8px;
@@ -1491,8 +1496,6 @@ body.wok-gallery {
 #template-edit-window .template-edit-wrapper-controls {
   vertical-align: top;
   width: 400px;
-  vertical-align: top;
-  min-width: 100px;
   height: 35px;
   line-height: 35px;
   margin: 7px 0 8px;
@@ -1544,6 +1547,11 @@ body.wok-gallery {
   height: 40px;
 }
 
+#template-edit-window #template-edit-memory-textbox {
+  width: 308px !important;
+  display: inline;
+}
+
 #template-edit-window #guest-max-processor-panel {
   display: none;
 }
@@ -1662,6 +1670,12 @@ body.wok-gallery {
   font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
+#template-add-window.modal-content label.check-all {
+  display: inline-block;
+  vertical-align: middle;
+  padding-top: 8px;
+}
+
 #template-add-window.modal-content button#iso-more,
 #template-add-window.modal-content button#iso-more-loading {
   clear: both;
@@ -1681,7 +1695,7 @@ body.wok-gallery {
 }
 
 #template-add-window .filter {
-  width: 977px;
+  float: right;
   height: 40px;
   overflow: visible;
   clear: both;
@@ -1720,6 +1734,29 @@ body.wok-gallery {
   font-size: 32px;
 }
 
+#template-add-window span.iso-image-indicator .fa {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#template-add-window span.iso-image-indicator i.fa.fa-file-iso,
+#template-add-window span.iso-image-indicator i.fa.fa-file-img {
+  display: inline-block;
+  width: 27px;
+  height: 25px;
+  margin-right: 3px;
+}
+
+#template-add-window span.iso-image-indicator i.fa.fa-file-iso {
+  background: url("../images/file-o-iso.svg") no-repeat 50% 50%;
+  background-size: contain;
+}
+
+#template-add-window span.iso-image-indicator i.fa.fa-file-img {
+  background: url("../images/file-o-img.svg") no-repeat 50% 50%;
+  background-size: contain;
+}
+
 #template-add-window span.iso-image-alert {
   position: absolute;
   bottom: 17px;

diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss
@@ -103,7 +103,7 @@
     }
     ul#list-local-iso li.col-md-3,
     ul#list-remote-iso li.col-md-3 {
-        width: 241px;
+        width: 239px;
         margin: 10px 5px 0;
     }
     h3.iso-title {

diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
@@ -18,6 +18,9 @@
 
 /* Add Template Modal Window */
 
+
+$kimchi-icon-path: '../images';
+
 .templates-modal {
     .modal-dialog {
         width: 1100px;
@@ -41,6 +44,10 @@
 }
 
 #template-edit-window {
+    .wok-mask {
+        top: 0 !important;
+        z-index: 3;
+    }
     .tab-content .tab-pane {
         position: relative;
     }
@@ -63,16 +70,14 @@
     }
     .template-edit-wrapper-label {
         vertical-align: top;
-        min-width: 100px;
+        min-width: 172px;
         height: 35px;
         line-height: 35px;
         margin: 7px 0 8px;
     }
     .template-edit-wrapper-controls {
         vertical-align: top;
         width: 400px;
-        vertical-align: top;
-        min-width: 100px;
         height: 35px;
         line-height: 35px;
         margin: 7px 0 8px;
@@ -117,6 +122,10 @@
             }
         }
     }
+    #template-edit-memory-textbox {
+        width: 308px !important;
+        display: inline;
+    }
     #guest-max-processor-panel {
         display: none;
     }
@@ -213,6 +222,11 @@
         font-weight: 400;
         font-family: $font-family-sans-serif;
     }
+    &.modal-content label.check-all {
+        display: inline-block;
+        vertical-align: middle;
+        padding-top: 8px;
+    }
     &.modal-content button#iso-more,
     &.modal-content button#iso-more-loading {
         clear: both;
@@ -228,7 +242,7 @@
         padding-left: 0 !important;
     }
     .filter {
-         width: 977px;
+        float: right;
         height: 40px;
         overflow: visible;
         clear: both;
@@ -260,6 +274,26 @@
         bottom: 10px;
         right: 10px;
         font-size: 32px;
+        .fa {
+            display: inline-block;
+            vertical-align: middle;
+        }
+        i.fa.fa-file-iso,
+        i.fa.fa-file-img {
+            display: inline-block;
+            width: 27px;
+            height: 25px;
+            margin-right: 3px;
+
+        }
+        i.fa.fa-file-iso {
+            background: url('#{$kimchi-icon-path}/file-o-iso.svg') no-repeat 50% 50%;
+            background-size: contain;
+        }
+        i.fa.fa-file-img {
+            background: url('#{$kimchi-icon-path}/file-o-img.svg') no-repeat 50% 50%;
+            background-size: contain;
+        }
     }
     span.iso-image-alert {
         position: absolute;
@@ -453,7 +487,8 @@
             display: none;
         }
         .wok-vm-body {
-            position: relative;;
+            position: relative;
+            ;
             padding: 0 20px 0 20px;
             width: 240px;
             display: inline-block;
@@ -564,29 +599,23 @@
         font-size: 10pt;
         padding: 6px 8px;
     }
-
     .wok-vm-list .tooltip-inner {
         max-width: 300px;
     }
-
-    .wok-vm-list  .tooltip[style] {
-       left: 79px !important;
+    .wok-vm-list .tooltip[style] {
+        left: 79px !important;
     }
-
-    .wok-vm-list   .tooltip-arrow[style] {
-       left: 10px !important;
+    .wok-vm-list .tooltip-arrow[style] {
+        left: 10px !important;
     }
-
     .wok-vm-gallery .tooltip-inner {
         max-width: 320px;
     }
-
     .wok-vm-gallery .tooltip[style] {
-       left: 7px !important;
-       right: 7px !important;
+        left: 7px !important;
+        right: 7px !important;
     }
-
     .wok-vm-gallery .tooltip-arrow[style] {
-       left: 207px !important;
+        left: 207px !important;
     }
 }