[Kimchi-devel] [PATCH 3/3 v2] [Kimchi] Issue #606: Change icon to distinguish image generated template and iso generated template

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Thu Sep 1 17:14:06 UTC 2016


From: Samuel Guimarães <sguimaraes943 at gmail.com>

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/css/kimchi.css                      |  47 +++++-
 ui/css/src/modules/_iso-list.scss      |   2 +-
 ui/css/src/modules/_templates.scss     |  65 +++++---
 ui/images/file-o-img.svg               | 149 ++++++++++++++++++
 ui/images/file-o-iso.svg               | 149 ++++++++++++++++++
 ui/js/src/kimchi.template_add_main.js  |   5 +
 ui/js/src/kimchi.template_edit_main.js | 206 +++++++++++++------------
 ui/pages/template-add.html.tmpl        |   2 +-
 ui/pages/template-edit.html.tmpl       | 272 +++++++++++++++++----------------
 9 files changed, 640 insertions(+), 257 deletions(-)
 create mode 100644 ui/images/file-o-img.svg
 create mode 100644 ui/images/file-o-iso.svg

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 1562fd6..dff8013 100644
--- 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
index 355f590..22a5a9c 100644
--- 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
index d8f3da8..a75d803 100644
--- 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,7 +70,7 @@
     }
     .template-edit-wrapper-label {
         vertical-align: top;
-        min-width: 100px;
+        min-width: 172px;
         height: 35px;
         line-height: 35px;
         margin: 7px 0 8px;
@@ -71,8 +78,6 @@
     .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;
     }
 }
diff --git a/ui/images/file-o-img.svg b/ui/images/file-o-img.svg
new file mode 100644
index 0000000..da92afa
--- /dev/null
+++ b/ui/images/file-o-img.svg
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+Copyright (c) 2014-2015, Dave Gandy (http://elusiveicons.com),
+with Elusive Icons.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+#################################
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+#################################
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting - in part or in whole - any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+-->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="1792"
+   height="1792"
+   viewBox="0 0 1792 1792"
+   id="file-o-img"
+   version="1.1">
+  <title id="title">Font Awesome by Dave Gandy - http://fontawesome.io</title>
+  <metadata id="metadata4152">
+      <rdf:RDF>
+          <cc:Work rdf:about="">
+              <dc:format>image/svg+xml</dc:format>
+              <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+              <dc:title>Font Awesome by Dave Gandy - http://fontawesome.io</dc:title>
+              <cc:license rdf:resource="http://scripts.sil.org/OFL" />
+              <dc:creator>
+                  <cc:Agent>
+                      <dc:title>Font Awesome by Dave Gandy - http://fontawesome.io</dc:title>
+                  </cc:Agent>
+              </dc:creator>
+              <dc:rights>
+                  <cc:Agent>
+                      <dc:title>Font Awesome</dc:title>
+                  </cc:Agent>
+              </dc:rights>
+          </cc:Work>
+          <cc:License rdf:about="http://scripts.sil.org/OFL">
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Reproduction" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Distribution" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Embedding" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/DerivativeWorks" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/Notice" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/Attribution" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/ShareAlike" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/DerivativeRenaming" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/BundlingWhenSelling" />
+          </cc:License>
+      </rdf:RDF>
+  </metadata>
+  <path
+    d="M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280z" />
+  <path
+    d="m 309.39392,848.86503 0,59.02519 108.67577,0 0,400.32948 -108.67577,0 0,59.0253 287.83454,0 0,-59.0253 -108.67576,0 0,-400.32948 108.67576,0 0,-59.02519 -287.83454,0 z" />
+  <path
+    d="m 679.86372,850.60109 0,516.64391 64.58048,0 0,-456.57711 92.70429,272.21021 53.12266,0 92.35702,-272.21021 0,456.57711 64.92773,0 0,-516.64391 -94.0931,0 -90.27381,263.18301 -89.57938,-263.18301 -93.74589,0 z" />
+  <path
+    d="m 1478.4397,1324.5387 0,-223.2544 -142.3549,0 0,57.6367 75.344,0 0,139.23 c -9.7218,7.6385 -20.1381,13.541 -31.9431,17.0129 -11.805,3.4723 -25.3461,5.2082 -40.6232,5.2082 -45.8313,0 -79.8576,-17.0133 -102.0788,-51.7337 -22.2213,-34.7209 -32.9847,-87.8436 -32.9847,-160.0626 0,-70.8303 11.1106,-123.60567 34.0263,-159.02083 22.9156,-35.41504 56.9419,-53.12258 102.7732,-53.12258 21.8741,0 42.7065,4.51369 62.4973,12.84666 19.4436,8.33297 38.8872,21.52682 57.6364,39.23428 l 0,-71.87173 c -18.7492,-12.49947 -37.8456,-21.52682 -57.6364,-27.77657 -20.138,-6.24972 -40.9704,-9.37457 -62.4973,-9.37457 -65.9693,0 -117.7031,23.95729 -154.507,71.17743 -37.1512,47.22025 -55.5531,113.18931 -55.5531,197.90791 0,85.0657 18.0547,151.0351 54.8586,198.2553 36.4568,47.2202 87.4962,70.483 153.4655,70.483 27.0822,0 52.4282,-4.1666 76.0383,-13.1941 23.6101,-9.0274 44.7897,-22.2211 63.5389,-39.5813 z" />
+</svg>
diff --git a/ui/images/file-o-iso.svg b/ui/images/file-o-iso.svg
new file mode 100644
index 0000000..1e40cca
--- /dev/null
+++ b/ui/images/file-o-iso.svg
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+Copyright (c) 2014-2015, Dave Gandy (http://elusiveicons.com),
+with Elusive Icons.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+#################################
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+#################################
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting - in part or in whole - any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+-->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="1792"
+   height="1792"
+   viewBox="0 0 1792 1792"
+   id="file-o-iso"
+   version="1.1">
+  <title id="title">Font Awesome by Dave Gandy - http://fontawesome.io</title>
+  <metadata id="metadata4152">
+      <rdf:RDF>
+          <cc:Work rdf:about="">
+              <dc:format>image/svg+xml</dc:format>
+              <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+              <dc:title>Font Awesome by Dave Gandy - http://fontawesome.io</dc:title>
+              <cc:license rdf:resource="http://scripts.sil.org/OFL" />
+              <dc:creator>
+                  <cc:Agent>
+                      <dc:title>Font Awesome by Dave Gandy - http://fontawesome.io</dc:title>
+                  </cc:Agent>
+              </dc:creator>
+              <dc:rights>
+                  <cc:Agent>
+                      <dc:title>Font Awesome</dc:title>
+                  </cc:Agent>
+              </dc:rights>
+          </cc:Work>
+          <cc:License rdf:about="http://scripts.sil.org/OFL">
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Reproduction" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Distribution" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/Embedding" />
+              <cc:permits rdf:resource="http://scripts.sil.org/pub/OFL/DerivativeWorks" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/Notice" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/Attribution" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/ShareAlike" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/DerivativeRenaming" />
+              <cc:requires rdf:resource="http://scripts.sil.org/pub/OFL/BundlingWhenSelling" />
+          </cc:License>
+      </rdf:RDF>
+  </metadata>
+  <path
+    d="M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280z" />
+  <path
+    d="m 309.39392,848.86503 0,59.02519 108.67577,0 0,400.32948 -108.67577,0 0,59.0253 287.83454,0 0,-59.0253 -108.67576,0 0,-400.32948 108.67576,0 0,-59.02519 -287.83454,0 z" />
+  <path
+    d="m 1018.7377,866.57261 c -24.30448,-9.02739 -47.56736,-15.62433 -69.4414,-20.13802 -22.22124,-4.51369 -43.05363,-6.94413 -62.84443,-6.94413 -51.73386,0 -93.05147,14.23549 -124.30009,42.01202 -31.24862,27.77657 -46.52572,64.92756 -46.52572,111.10613 0,37.15109 10.76341,66.66369 32.63746,88.53789 21.52681,22.2211 56.5947,38.5401 104.85648,49.3035 l 37.49834,8.6801 c 33.33187,7.6385 56.94193,18.0546 70.48301,31.596 13.54108,13.8879 20.48521,33.6788 20.48521,59.3722 0,28.471 -10.06899,50.6921 -29.51259,66.6637 -19.7908,15.9716 -47.22014,23.6101 -82.63526,23.6101 -24.30448,0 -48.26174,-3.8192 -71.87185,-11.805 -23.61006,-7.6385 -48.95615,-20.1383 -75.34389,-37.1511 l 0,74.6495 c 24.65171,10.4161 49.30339,18.4019 73.9551,23.6101 24.30448,5.2079 48.95616,7.6385 73.26064,7.6385 58.33077,0 102.77328,-12.8467 133.32749,-38.8875 30.5542,-25.693 45.8313,-63.5388 45.8313,-112.8419 0,-41.665 -11.1106,-74.9969 -33.3319,-99.3013 -22.22122,-24.3044 -57.63634,-42.012 -106.24531,-53.4701 l -36.80391,-8.3327 c -34.7207,-7.9858 -58.33077,-18.055 -70.8302,-30.207 -12.49947,-11.805 -18.74919,-29.5126 -18.74919,-52.4284 0,-26.04035 9.37457,-46.87283 28.81818,-62.14993 19.09637,-15.2771 45.13688,-23.26288 78.46875,-23.26288 21.52685,0 43.05367,3.47209 64.58049,10.41622 21.52685,6.94413 42.70648,17.36035 64.23329,30.90139 l 0,-71.17739 z" />
+  <path
+    d="m 1409.3455,1108.5758 c 0,76.3855 -7.9858,130.5499 -23.6101,163.1871 -15.6243,32.6376 -41.3176,48.6092 -76.7327,48.6092 -35.4151,0 -61.1084,-16.3186 -76.7327,-48.9561 -15.6243,-32.6376 -23.2629,-86.802 -23.2629,-162.8402 0,-76.0381 7.6386,-130.54984 23.2629,-163.18741 15.6243,-32.63725 41.3176,-48.956 76.7327,-48.956 35.4151,0 61.1084,16.31875 76.7327,48.956 15.6243,32.63757 23.6101,87.14931 23.6101,163.18741 z m 73.2607,0 c 0,-90.2738 -14.5827,-157.97918 -43.0537,-202.42161 -28.471,-44.4425 -72.219,-66.66373 -130.5498,-66.66373 -58.3307,0 -102.0788,22.22123 -130.5498,66.66373 -28.471,44.44243 -42.7065,112.14781 -42.7065,202.42161 0,90.9682 14.2355,158.3262 42.7065,202.4215 28.471,44.4426 71.8718,66.3168 130.5498,66.3168 58.3308,0 102.0788,-22.2215 130.5498,-66.6637 28.471,-44.4427 43.0537,-111.8007 43.0537,-202.0746 z" />
+</svg>
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 341bab3..aa76fcc 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -81,6 +81,11 @@ kimchi.template_add_main = function() {
             } else {
                 volume.icon = 'fa fa-globe';
             }
+            if ((volume.path).substr((volume.path).lastIndexOf('.')+1) === 'iso'){
+                volume.format = 'iso';
+            } else {
+                volume.format = 'img';
+            }
             if (!volume.hasOwnProperty('has_permission')) {
                 volume.has_permission = true;
             }
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index 13b643b..a2032cc 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -22,43 +22,43 @@ kimchi.template_edit_main = function() {
     var templateDiskSize;
     var baseImageTemplate;
     $('#template-name', templateEditMain).val(kimchi.selectedTemplate);
-    $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-        $('.tab-content').css('overflow','hidden');
+    $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+        $('.tab-content').css('overflow', 'hidden');
         var target = $(this).attr('href');
-        $(target).css('left','-'+$(window).width()+'px');
+        $(target).css('left', '-' + $(window).width() + 'px');
         var left = $(target).offset().left;
         $(target).css({
-                left: left
-            }).animate({
-                    "left": "0px"
-            },400, function() {
-            $('.tab-content').css('overflow','visible');
+            left: left
+        }).animate({
+            "left": "0px"
+        }, 400, function() {
+            $('.tab-content').css('overflow', 'visible');
         });
     });
 
     $('#template-show-max-memory').on('click', function(e) {
-            e.preventDefault;
-            $('.max-memory-field').slideToggle();
-            var text = $('#template-show-max-memory span.text').text();
-            $('#template-show-max-memory span.text').text(text == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']);
-            $('#template-show-max-memory i.fa').toggleClass('fa-plus-circle fa-minus-circle');
+        e.preventDefault;
+        $('.max-memory-field').slideToggle();
+        var text = $('#template-show-max-memory span.text').text();
+        $('#template-show-max-memory span.text').text(text == i18n['KCHVMED6008M'] ? i18n['KCHVMED6009M'] : i18n['KCHVMED6008M']);
+        $('#template-show-max-memory i.fa').toggleClass('fa-plus-circle fa-minus-circle');
     });
 
     var initTemplate = function(template) {
         origDisks = template.disks;
         origNetworks = template.networks;
-        for(var i=0;i<template.disks.length;i++){
-            if(template.disks[i].base){
+        for (var i = 0; i < template.disks.length; i++) {
+            if (template.disks[i].base) {
                 template["vm-image"] = template.disks[i].base;
                 $('.templ-edit-cdrom').addClass('hide');
                 $('.templ-edit-vm-image').removeClass('hide');
                 break;
             }
         }
-        for ( var prop in template) {
+        for (var prop in template) {
             var value = template[prop];
             if (prop == 'graphics') {
-               value = value["type"];
+                value = value["type"];
             }
             $('input[name="' + prop + '"]', templateEditMain).val(value);
         }
@@ -98,18 +98,19 @@ kimchi.template_edit_main = function() {
             // Gather storagepools data
             var storagePoolsInfo = new Object();
             $.each(result, function(index, pool) {
-               if (pool.state === 'active' && pool.type != 'kimchi-iso') {
+                if (pool.state === 'active' && pool.type != 'kimchi-iso') {
                     if (pool.type === 'iscsi' || pool.type === 'scsi') {
                         volumes = new Object();
                         kimchi.listStorageVolumes(pool.name, function(vols) {
                             $.each(vols, function(i, vol) {
                                 storagePoolsInfo[pool.name + "/" + vol.name] = {
-                                    'type' : pool.type,
-                                    'volSize': vol.capacity / Math.pow(1024, 3)};
+                                    'type': pool.type,
+                                    'volSize': vol.capacity / Math.pow(1024, 3)
+                                };
                             });
                         }, null, true);
                     } else {
-                        storagePoolsInfo[pool.name] = { 'type' : pool.type };
+                        storagePoolsInfo[pool.name] = { 'type': pool.type };
                     }
                 }
             });
@@ -134,7 +135,7 @@ kimchi.template_edit_main = function() {
                 });
 
                 $(storageRow + ' .selectStorageName').append(storageOptions);
-                if(!$(storageRow + ' .selectStorageName option[value="'+storageData.storageName+'"]').length){
+                if (!$(storageRow + ' .selectStorageName option[value="' + storageData.storageName + '"]').length) {
                     var invalidOption = '<option disabled="disabled" selected="selected" value="' + storageData.storageName + '">' + storageData.storageName + '</option>';
                     $(storageRow + ' .selectStorageName').prepend(invalidOption);
                     $(storageRow + ' .selectStorageName').parent().addClass('has-error')
@@ -142,7 +143,7 @@ kimchi.template_edit_main = function() {
                 $(storageRow + ' .selectStorageName').val(storageData.storageName);
                 $(storageRow + ' .selectStorageName').selectpicker();
 
-                if (storageData.storageType === 'iscsi' || storageData.storageType  === 'scsi') {
+                if (storageData.storageType === 'iscsi' || storageData.storageType === 'scsi') {
                     $(storageRow + ' .template-storage-disk').attr('readonly', true).prop('disabled', true);
                     $(storageRow + ' #diskFormat').val('raw');
                     $(storageRow + ' #diskFormat').prop('disabled', true).change();
@@ -155,8 +156,7 @@ kimchi.template_edit_main = function() {
                 if (isImageBasedTemplate()) {
                     $(storageRow + ' #diskFormat').val('qcow2');
                     $(storageRow + ' #diskFormat').prop('disabled', 'disabled');
-                }
-                else {
+                } else {
                     $(storageRow + ' #diskFormat').val(storageData.storageDiskFormat);
                     $(storageRow + ' #diskFormat').on('change', function() {
                         $(storageRow + ' .template-storage-disk-format').val($(this).val());
@@ -164,7 +164,7 @@ kimchi.template_edit_main = function() {
                 }
                 $(storageRow + ' #diskFormat').selectpicker();
 
-                $('.delete', '#form-template-storage').on( "click",function(event) {
+                $('.delete', '#form-template-storage').on("click", function(event) {
                     event.preventDefault();
                     $(this).parent().parent().remove();
                 });
@@ -192,34 +192,35 @@ kimchi.template_edit_main = function() {
                     }
                     $(storageRow + ' #diskFormat').selectpicker('refresh');
                 });
-            };  // End of addStorageItem funtion
+            }; // End of addStorageItem funtion
 
             if (origDisks && origDisks.length) {
-                origDisks.sort(function(a, b){return a.index-b.index});
+                origDisks.sort(function(a, b) {
+                    return a.index - b.index });
                 $.each(origDisks, function(index, diskEntities) {
                     var defaultPool = diskEntities.pool.name.split('/').pop()
                     var storageNodeData = {
-                        storageIndex : diskEntities.index,
-                        storageName : diskEntities.volume ? defaultPool + '/' + diskEntities.volume : defaultPool,
-                        storageType : diskEntities.pool.type,
-                        storageDisk : diskEntities.size,
-                        storageDiskFormat : diskEntities.format ? diskEntities.format : 'qcow2',
-                        storageVolume : diskEntities.volume
+                        storageIndex: diskEntities.index,
+                        storageName: diskEntities.volume ? defaultPool + '/' + diskEntities.volume : defaultPool,
+                        storageType: diskEntities.pool.type,
+                        storageDisk: diskEntities.size,
+                        storageDiskFormat: diskEntities.format ? diskEntities.format : 'qcow2',
+                        storageVolume: diskEntities.volume
                     }
                     addStorageItem(storageNodeData);
                 });
             }
 
-            var storageID = origDisks.length -1;
+            var storageID = origDisks.length - 1;
             $('#template-edit-storage-add-button').on("click", function(event) {
                 event.preventDefault();
                 storageID = storageID + 1;
                 var storageNodeData = {
-                    storageName : 'default',
-                    storageType : 'dir',
-                    storageDisk : '10',
-                    storageDiskFormat : 'qcow2',
-                    storageIndex : storageID
+                    storageName: 'default',
+                    storageType: 'dir',
+                    storageDisk: '10',
+                    storageDiskFormat: 'qcow2',
+                    storageIndex: storageID
                 }
                 addStorageItem(storageNodeData);
             });
@@ -231,16 +232,16 @@ kimchi.template_edit_main = function() {
                 var networkName = networkData.networkV;
                 var nodeInterface = $.parseHTML(wok.substitute($('#template-interface-tmpl').html(), networkData));
                 $('.template-tab-body', '#form-template-interface').append(nodeInterface);
-                $('.delete', '#form-template-interface').on( "click",function(event) {
+                $('.delete', '#form-template-interface').on("click", function(event) {
                     event.preventDefault();
                     $(this).parent().parent().remove();
                 });
                 var networkOptions = '';
-                for(var i=0;i<result.length;i++){
-                    if(networkName===result[i].name) {
+                for (var i = 0; i < result.length; i++) {
+                    if (networkName === result[i].name) {
                         networkOptions += '<option selected="selected">' + result[i].name + '</option>';
                     }
-                    if(result[i].state === "active" && networkName!==result[i].name) {
+                    if (result[i].state === "active" && networkName !== result[i].name) {
                         networkOptions += '<option>' + result[i].name + '</option>';
                     }
                 }
@@ -248,70 +249,70 @@ kimchi.template_edit_main = function() {
                 $('select', '#form-template-interface #networkID' + networkItemNum).selectpicker();
                 networkItemNum += 1;
             };
-            if(result && result.length > 0) {
-                for(var i=0;i<origNetworks.length;i++) {
+            if (result && result.length > 0) {
+                for (var i = 0; i < origNetworks.length; i++) {
                     addInterfaceItem({
-                        networkID : 'networkID' + networkItemNum,
-                        networkV : origNetworks[i],
-                        type : 'network'
+                        networkID: 'networkID' + networkItemNum,
+                        networkV: origNetworks[i],
+                        type: 'network'
                     });
                 }
             }
-            $('#template-edit-interface-add-button').on( "click", function(event) {
+            $('#template-edit-interface-add-button').on("click", function(event) {
                 event.preventDefault();
                 addInterfaceItem({
-                    networkID : 'networkID' + networkItemNum,
-                    networkV : 'default',
-                    type : 'network'
+                    networkID: 'networkID' + networkItemNum,
+                    networkV: 'default',
+                    type: 'network'
                 });
             });
         };
 
-        var initProcessor = function(){
-            var setCPUValue = function(){
-                if(!$('#cores').hasClass("invalid-field")&&$('#cores').val()!=""){
-                    var computedCpu = parseInt($("#cores").val())*parseInt($("#threads").val());
+        var initProcessor = function() {
+            var setCPUValue = function() {
+                if (!$('#cores').hasClass("invalid-field") && $('#cores').val() != "") {
+                    var computedCpu = parseInt($("#cores").val()) * parseInt($("#threads").val());
                     $("#vcpus").val(computedCpu);
                     if ($("#cpus-check").prop("checked")) {
                         //If topology is checked, set maxcpu to be the same as # of cpu otherwise, backend gives error
                         $("#guest-edit-max-processor-textbox").val(computedCpu);
                     }
-                }else{
+                } else {
                     $("#vcpus").val('');
                 }
             };
-            $("input:text", "#form-template-processor").on('keyup', function(){
+            $("input:text", "#form-template-processor").on('keyup', function() {
                 $(this).toggleClass("invalid-field", !$(this).val().match('^[0-9]*$'));
-                if($(this).prop('id')=='cores') setCPUValue();
+                if ($(this).prop('id') == 'cores') setCPUValue();
             });
-            $("input:checkbox", "#form-template-processor").click(function(){
+            $("input:checkbox", "#form-template-processor").click(function() {
                 $('#threads').selectpicker();
                 $(".topology", "#form-template-processor").slideToggle();
                 $("#vcpus").attr("disabled", $(this).prop("checked"));
                 $("#guest-edit-max-processor-textbox").attr("disabled", $(this).prop("checked"));
                 setCPUValue();
             });
-            $('#threads').change(function(){
+            $('#threads').change(function() {
                 setCPUValue();
             });
-            kimchi.getCPUInfo(function(data){
+            kimchi.getCPUInfo(function(data) {
                 var options = "";
                 var topo = template.cpu_info.topology;
-                for(var i=0;Math.pow(2,i)<=data.threads_per_core;i++){
-                    var lastOne = Math.pow(2,i+1)>data.threads_per_core?" selected":"";
-                    options += "<option"+lastOne+">"+Math.pow(2,i)+"</option>";
+                for (var i = 0; Math.pow(2, i) <= data.threads_per_core; i++) {
+                    var lastOne = Math.pow(2, i + 1) > data.threads_per_core ? " selected" : "";
+                    options += "<option" + lastOne + ">" + Math.pow(2, i) + "</option>";
                 }
                 $('#threads').append(options);
-                if(template.cpu_info.vcpus){
+                if (template.cpu_info.vcpus) {
                     $("#vcpus").val(template.cpu_info.vcpus);
                 }
-                if(template.cpu_info.maxvcpus){
+                if (template.cpu_info.maxvcpus) {
                     $("#guest-edit-max-processor-textbox").val(template.cpu_info.maxvcpus);
                 }
-                if(topo&&topo.cores){
+                if (topo && topo.cores) {
                     $("#cores").val(topo.cores);
                 }
-                if(topo&&topo.threads){
+                if (topo && topo.threads) {
                     $('#threads').val(topo.threads);
                     $('#threads').selectpicker();
                     $("input:checkbox", "#form-template-processor").trigger('click');
@@ -326,14 +327,14 @@ kimchi.template_edit_main = function() {
             });
         };
 
-        var checkInvalids = function(){
+        var checkInvalids = function() {
             $.each(template.invalid, function(key, value) {
-                if(key === 'cdrom' || key === 'vm-image'){
-                    $('.tab-content input[name="'+key+'"]').attr('disabled',false).parent().addClass('has-error has-feedback has-changes');
+                if (key === 'cdrom' || key === 'vm-image') {
+                    $('.tab-content input[name="' + key + '"]').attr('disabled', false).parent().addClass('has-error has-changes');
                     return true;
-                }else if(key === 'storagepools'){
+                } else if (key === 'storagepools') {
                     return true;
-                }else {
+                } else {
                     return false;
                 }
             });
@@ -348,32 +349,34 @@ kimchi.template_edit_main = function() {
 
     $('#tmpl-edit-button-save').on('click', function() {
         $button = $(this);
-        $button.html('<span class="wok-loading-icon" /> '+i18n['KCHAPI6010M']);
+        $button.html('<span class="wok-loading-icon" /> ' + i18n['KCHAPI6010M']);
+        $button.prop('disabled', true);
+        $('.modal .wok-mask').removeClass('hidden');
         $('.modal input[type="text"]').prop('disabled', true);
         $('.modal input[type="checkbox"]').prop('disabled', true);
         $('.modal select').prop('disabled', true);
         $('.modal .selectpicker').addClass('disabled');
-        var editableFields = [ 'name', 'memory', 'graphics', 'max-memory'];
+        var editableFields = ['name', 'memory', 'graphics', 'max-memory'];
         var data = {};
         var disks = $('.template-tab-body .item', '#form-template-storage');
         var disksForUpdate = new Array();
         $.each(disks, function(index, diskEntity) {
             var newDisk = {
-                'index' : index,
-                'pool' : {'name': '/plugins/kimchi/storagepools/' + $(diskEntity).find('.template-storage-name').val()},
-                'size' : Number($(diskEntity).find('.template-storage-disk').val()),
-                'format' : $(diskEntity).find('.template-storage-disk-format').val()
+                'index': index,
+                'pool': { 'name': '/plugins/kimchi/storagepools/' + $(diskEntity).find('.template-storage-name').val() },
+                'size': Number($(diskEntity).find('.template-storage-disk').val()),
+                'format': $(diskEntity).find('.template-storage-disk-format').val()
             };
 
             // image based template: add base to dictionary
-            if ((baseImageTemplate) && (index == 0))  {
+            if ((baseImageTemplate) && (index == 0)) {
                 newDisk["base"] = $('#template-edit-vmimage-textbox').val();
             }
 
             var storageType = $(diskEntity).find('.template-storage-type').val();
-            if(storageType === 'iscsi' || storageType === 'scsi') {
+            if (storageType === 'iscsi' || storageType === 'scsi') {
                 newDisk['volume'] = newDisk['pool']['name'].split('/').pop();
-                newDisk['pool']['name'] =  newDisk['pool']['name'].slice(0,  newDisk['pool']['name'].lastIndexOf('/'));
+                newDisk['pool']['name'] = newDisk['pool']['name'].slice(0, newDisk['pool']['name'].lastIndexOf('/'));
                 delete newDisk.size;
             }
             disksForUpdate.push(newDisk);
@@ -382,37 +385,36 @@ kimchi.template_edit_main = function() {
 
         $.each(editableFields, function(i, field) {
             if (field == 'graphics') {
-               var type = $('#form-template-general [name="' + field + '"]').val();
-               data[field] = {'type': type};
-            }
-            else {
-               data[field] = $('#form-template-general [name="' + field + '"]').val();
+                var type = $('#form-template-general [name="' + field + '"]').val();
+                data[field] = { 'type': type };
+            } else {
+                data[field] = $('#form-template-general [name="' + field + '"]').val();
             }
         });
         data['memory'] = Number(data['memory']);
         data['max-memory'] = Number(data['max-memory']);
 
-        memory = {'current': data['memory'], 'maxmemory': data['max-memory']};
+        memory = { 'current': data['memory'], 'maxmemory': data['max-memory'] };
 
         data['memory'] = memory;
         delete data['max-memory'];
 
         var cpu = parseInt($('#vcpus').val());
         var maxCpu = parseInt($('#guest-edit-max-processor-textbox').val());
-        var maxCpuFinal = cpu;  //Initially set maxCpu to be the same as cpu
+        var maxCpuFinal = cpu; //Initially set maxCpu to be the same as cpu
         if (maxCpu >= cpu) {
             maxCpuFinal = maxCpu;
         }
 
-        if($('.tab-content .has-changes > input[name="cdrom"]').length){
+        if ($('.tab-content .has-changes > input[name="cdrom"]').length) {
             data['cdrom'] = $('.tab-content input[name="cdrom"]').val();
         }
 
-        if($('.tab-content .has-changes > input[name="vm-image"]').length){
+        if ($('.tab-content .has-changes > input[name="vm-image"]').length) {
             data['vm-image'] = $('.tab-content input[name="vm-image"]').val();
         }
 
-         if($("input:checkbox", "#form-template-processor").prop("checked")){
+        if ($("input:checkbox", "#form-template-processor").prop("checked")) {
             //Check if maxCpu field has a value
             data['cpu_info'] = {
                 vcpus: cpu,
@@ -423,7 +425,7 @@ kimchi.template_edit_main = function() {
                     threads: parseInt($("#threads").val())
                 }
             };
-        }else{
+        } else {
             data['cpu_info'] = {
                 vcpus: cpu,
                 maxvcpus: maxCpuFinal,
@@ -444,26 +446,30 @@ kimchi.template_edit_main = function() {
             data.networks = [];
         }
 
-        if($('.has-error', '#form-template-storage').length){
+        if ($('.has-error', '#form-template-storage').length) {
             // Workaround to check if invalid storage wasn't changed
-            $('a[href="#storage"]','#edit-template-tabs').tab('show');
+            $('a[href="#storage"]', '#edit-template-tabs').tab('show');
+            $('.modal .wok-mask').addClass('hidden');
             $button.html(i18n['KCHAPI6007M']);
+            $button.prop('disabled', false);
             $('.modal input[type="text"]').prop('disabled', false);
             $('.modal input[type="checkbox"]').prop('disabled', false);
             $('.modal select').prop('disabled', false);
             $('.modal .selectpicker').removeClass('disabled');
-            wok.message.error(i18n['KCHTMPL6007M'],'#alert-modal-container');
-        }else {
+            wok.message.error(i18n['KCHTMPL6007M'], '#alert-modal-container');
+        } else {
             kimchi.updateTemplate($('#template-name').val(), data, function() {
                 kimchi.doListTemplates();
                 wok.window.close();
             }, function(err) {
+            $('.modal .wok-mask').addClass('hidden');
                 $button.html(i18n['KCHAPI6007M']);
+                $button.prop('disabled', false);
                 $('.modal input[type="text"]').prop('disabled', false);
                 $('.modal input[type="checkbox"]').prop('disabled', false);
                 $('.modal select').prop('disabled', false);
                 $('.modal .selectpicker').removeClass('disabled');
-                wok.message.error(err.responseJSON.reason,'#alert-modal-container');
+                wok.message.error(err.responseJSON.reason, '#alert-modal-container');
             });
         }
     });
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index d4c7216..a5136f0 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -90,7 +90,7 @@
                                                                 <dd>$_("Size")</dd>
                                                             </dl>
                                                             <span data-toggle="tooltip" title="$_('QEMU does not have enough permission to work with this file')" class="{volume_hidden} iso-image-alert"><i class="fa fa-exclamation-triangle fa-lg"></i></span>
-                                                            <span class="iso-image-indicator"><i class="{icon}"></i></span>
+                                                            <span class="iso-image-indicator"><i class="fa fa-file-{format}"></i><i class="{icon}"></i></span>
                                                         </span>
                                                     </span>
                                                 </label>
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index 2d7deed..6cac885 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -24,145 +24,153 @@
 <html>
 <body>
 <div id="template-edit-window" class="window modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title">$_("Edit Template")</h4>
-            </div>
-            <div class="modal-body">
-                <span id="alert-modal-container"></span>
-                <div id="edit-template-tabs">
-                    <input type="hidden" id="template-name" name="templateName" />
-                    <ul class="nav nav-tabs" role="tablist">
-                        <li role="presentation" class="active">
-                            <a href="#general" aria-controls="general" role="tab" data-toggle="tab">$_("General")</a>
-                        </li>
-                        <li role="presentation">
-                            <a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">$_("Storage")</a>
-                        </li>
-                        <li role="presentation">
-                            <a href="#interface" aria-controls="interface" role="tab" data-toggle="tab">$_("Interface")</a>
-                        </li>
-                        <li role="presentation">
-                            <a href="#processor" aria-controls="processor" role="tab" data-toggle="tab">$_("Processor")</a>
-                        </li>
-                    </ul>
-                    <div class="tab-content">
-                        <div role="tabpanel" class="tab-pane active" id="general">
-                            <form id="form-template-general">
-                                <div class="form-template-inline-wrapper">
-                                    <div class="template-edit-wrapper-label">
-                                        <label for="template-edit-id-textbox">$_("Name")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label">
-                                        <label for="template-edit-vendor-textbox">$_("Vendor")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label">
-                                        <label for="template-edit-version-textbox">$_("Version")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label">
-                                        <label for="template-edit-memory-textbox">$_("Memory (MB)")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label max-memory-field" style="display: none;">
-                                        <label for="template-edit-max-memory-textbox">$_("Max Memory (MB)")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label templ-edit-cdrom">
-                                        <label for="template-edit-cdrom-textbox">$_("CDROM")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label templ-edit-vm-image hide">
-                                        <label for="template-edit-vmimage-textbox">$_("Image File")</label>
-                                    </div>
-                                    <div class="template-edit-wrapper-label">
-                                        <label>$_("Graphics")</label>
-                                    </div>
-                                </div>
-                                <div class="form-template-inline-wrapper">
-                                    <div class="template-edit-wrapper-controls">
-                                        <input id="template-edit-id-textbox" class="form-control" name="name" type="text" />
-                                    </div>
-                                    <div class="template-edit-wrapper-controls">
-                                        <input id="template-edit-vendor-textbox" class="form-control"  name="os_distro" type="text" disabled="disabled" />
-                                    </div>
-                                    <div class="template-edit-wrapper-controls">
-                                        <input id="template-edit-version-textbox" class="form-control"  name="os_version" type="text" disabled="disabled" />
-                                    </div>
-                                    <div class="template-edit-wrapper-controls">
-                                        <input id="template-edit-memory-textbox" class="form-control"  name="memory" type="number" step="1024" min="1024" style="width: 75%; display: inline;"/>
-                                        <button id="template-show-max-memory" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button>
-                                    </div>
-                                    <div class="template-edit-wrapper-controls max-memory-field" style="display: none;">
-                                        <input id="template-edit-max-memory-textbox" class="form-control" name="max-memory" type="number" min="1024" step="1024" />
-                                    </div>
-                                    <div class="template-edit-wrapper-controls templ-edit-cdrom">
-                                        <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" />
-                                        <span class="form-control-feedback">
-                                            <i class="fa fa-times"></i>
-                                        </span>
-                                    </div>
-                                    <div class="template-edit-wrapper-controls templ-edit-vm-image hide">
-                                        <input id="template-edit-vmimage-textbox"  class="form-control" name="vm-image" type="text" disabled="disabled" />
-                                        <span class="fa fa-times form-control-feedback"></span>
-                                    </div>
-                                    <div class="template-edit-wrapper-controls">
-                                            <select id="template-edit-graphics" name="graphics" class="form-control"  />
-                                    </div>
-                                </div>
-                            </form>
+    <div class="modal-header">
+        <h4 class="modal-title">$_("Edit Template")</h4>
+    </div>
+    <div class="modal-body">
+        <span id="alert-modal-container"></span>
+        <div id="edit-template-tabs">
+            <input type="hidden" id="template-name" name="templateName" />
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active">
+                    <a href="#general" aria-controls="general" role="tab" data-toggle="tab">$_("General")</a>
+                </li>
+                <li role="presentation">
+                    <a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">$_("Storage")</a>
+                </li>
+                <li role="presentation">
+                    <a href="#interface" aria-controls="interface" role="tab" data-toggle="tab">$_("Interface")</a>
+                </li>
+                <li role="presentation">
+                    <a href="#processor" aria-controls="processor" role="tab" data-toggle="tab">$_("Processor")</a>
+                </li>
+            </ul>
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="general">
+                    <form id="form-template-general">
+                        <div class="form-template-inline-wrapper">
+                            <div class="template-edit-wrapper-label">
+                                <label for="template-edit-id-textbox">$_("Name")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label">
+                                <label for="template-edit-vendor-textbox">$_("Vendor")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label">
+                                <label for="template-edit-version-textbox">$_("Version")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label">
+                                <label for="template-edit-memory-textbox">$_("Memory (MB)")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label max-memory-field" style="display: none;">
+                                <label for="template-edit-max-memory-textbox">$_("Max Memory (MB)")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label templ-edit-cdrom">
+                                <label for="template-edit-cdrom-textbox">$_("CDROM")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label templ-edit-vm-image hide">
+                                <label for="template-edit-vmimage-textbox">$_("Image File")</label>
+                            </div>
+                            <div class="template-edit-wrapper-label">
+                                <label>$_("Graphics")</label>
+                            </div>
                         </div>
-                        <div role="tabpanel" class="tab-pane" id="storage">
-                            <form id="form-template-storage">
-                                <div class="template-tab-header">
-                                    <span class="template-storage-cell storage-pool">$_("Storage Pool")</span>
-                                    <span class="template-storage-cell type">$_("Type")</span>
-                                    <span class="template-storage-cell disk">$_("Disk(GB)")</span>
-                                    <span class="template-storage-cell format">$_("Disk Format")</span>
-                                    <button type="button" id="template-edit-storage-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Storage")</button>
-                                </div>
-                                <div class="template-tab-body">
-                                </div>
-                            </form>
+                        <div class="form-template-inline-wrapper">
+                            <div class="template-edit-wrapper-controls">
+                                <input id="template-edit-id-textbox" class="form-control" name="name" type="text" />
+                            </div>
+                            <div class="template-edit-wrapper-controls">
+                                <input id="template-edit-vendor-textbox" class="form-control"  name="os_distro" type="text" disabled="disabled" />
+                            </div>
+                            <div class="template-edit-wrapper-controls">
+                                <input id="template-edit-version-textbox" class="form-control"  name="os_version" type="text" disabled="disabled" />
+                            </div>
+                            <div class="template-edit-wrapper-controls">
+                                <input id="template-edit-memory-textbox" class="form-control"  name="memory" type="number" step="1024" min="1024" />
+                                <button id="template-show-max-memory" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button>
+                            </div>
+                            <div class="template-edit-wrapper-controls max-memory-field" style="display: none;">
+                                <input id="template-edit-max-memory-textbox" class="form-control" name="max-memory" type="number" min="1024" step="1024" />
+                            </div>
+                            <div class="template-edit-wrapper-controls templ-edit-cdrom form-group has-feedback">
+                                <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" />
+                                <span class="form-control-feedback">
+                                    <i class="fa fa-times"></i>
+                                </span>
+                            </div>
+                            <div class="template-edit-wrapper-controls templ-edit-vm-image form-group has-feedback hide">
+                                <input id="template-edit-vmimage-textbox"  class="form-control" name="vm-image" type="text" disabled="disabled" />
+                                <span class="fa fa-times form-control-feedback"></span>
+                            </div>
+                            <div class="template-edit-wrapper-controls">
+                                    <select id="template-edit-graphics" name="graphics" class="form-control"  />
+                            </div>
                         </div>
-                        <div role="tabpanel" class="tab-pane" id="interface">
-                            <form id="form-template-interface">
-                                <div class="template-tab-header">
-                                    <span class="template-interface-cell network">$_("Network")</span>
-                                    <span class="template-interface-cell type">$_("Type")</span>
-                                    <button type="button" id="template-edit-interface-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Interface")</button>
-                                </div>
-                                <div class="template-tab-body"></div>
-                            </form>
+                    </form>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="storage">
+                    <form id="form-template-storage">
+                        <div class="template-tab-header">
+                            <span class="template-storage-cell storage-pool">$_("Storage Pool")</span>
+                            <span class="template-storage-cell type">$_("Type")</span>
+                            <span class="template-storage-cell disk">$_("Disk(GB)")</span>
+                            <span class="template-storage-cell format">$_("Disk Format")</span>
+                            <button type="button" id="template-edit-storage-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Storage")</button>
+                        </div>
+                        <div class="template-tab-body">
                         </div>
-                        <div role="tabpanel" class="tab-pane" id="processor">
-                            <form id="form-template-processor">
+                    </form>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="interface">
+                    <form id="form-template-interface">
+                        <div class="template-tab-header">
+                            <span class="template-interface-cell network">$_("Network")</span>
+                            <span class="template-interface-cell type">$_("Type")</span>
+                            <button type="button" id="template-edit-interface-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Interface")</button>
+                        </div>
+                        <div class="template-tab-body"></div>
+                    </form>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="processor">
+                    <form id="form-template-processor">
+                        <div class="form-group">
+                            <div id="guest-processor">
+                                <label for="vcpus">$_("Current CPU Number")</label>
+                                <input id="vcpus" class="form-control" name="processor" type="number" min="1" />
+                                <button id="guest-show-max-processor" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button>
+                            </div>
+                            <div id="guest-max-processor-panel" class="form-group">
+                                <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label>
+                                <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" />
+                            </div>
+                        </div>
+                        <div class="manual form-group">
+                            <input type="checkbox" class="wok-checkbox" id="cpus-check" />
+                            <label for="cpus-check">$_("Manually set CPU topology")</label>
+                        </div>
+                        <div class="topology">
+                            <div class="form-group">
+                                <label for="cores">$_("Cores")</label>
+                                <input type="text" class="form-control" value="1" id="cores" />
+                            </div>
+                            <div>
                                 <div class="form-group">
-                                    <div id="guest-processor">
-                                        <label for="vcpus">$_("Current CPU Number")</label>
-                                        <input id="vcpus" class="form-control" name="processor" type="number" min="1" />
-                                        <button id="guest-show-max-processor" class="btn btn-primary" type="button"><i class="fa fa-plus-circle"></i> <span class="text">$_("More")</span></button>
-                                    </div>
-                                    <div id="guest-max-processor-panel" class="form-group">
-                                        <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label>
-                                        <input id="guest-edit-max-processor-textbox" class="form-control" name="max-processor" type="number" min="1" />
-                                    </div>
+                                    <label for="threads">$_("Threads")</label>
+                                    <select id="threads" class="selectpicker col-md-12 col-lg-12"></select>
                                 </div>
-                                <div class="manual form-group">
-                                    <input type="checkbox" class="wok-checkbox" id="cpus-check" />
-                                    <label for="cpus-check">$_("Manually set CPU topology")</label>
-                                </div>
-                                <div class="topology">
-                                    <div class="form-group">
-                                        <label for="cores">$_("Cores")</label>
-                                        <input type="text" class="form-control" value="1" id="cores" />
-                                    </div>
-                                    <div>
-                                        <div class="form-group">
-                                            <label for="threads">$_("Threads")</label>
-                                            <select id="threads" class="selectpicker col-md-12 col-lg-12"></select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </form>
+                            </div>
                         </div>
-                    </div>
+                    </form>
                 </div>
+            </div>
+        </div>
+        <div class="wok-mask hidden" role="presentation">
+          <div class="wok-mask-loader-container">
+            <div class="wok-mask-loading">
+                <div class="wok-mask-loading-icon"></div>
+                <div class="wok-mask-loading-text">$_("Loading")...</div>
+            </div>
+          </div>
+        </div>
     </div>
     <div class="modal-footer">
             <button id="tmpl-edit-button-save" class="btn btn-default">$_("Save")</button>
-- 
2.5.5




More information about the Kimchi-devel mailing list