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

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- 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