[Kimchi-devel] [PATCH] [Kimchi] Adding Gallery View at Templates screen
andreteodoro.work at gmail.com
andreteodoro.work at gmail.com
Fri Dec 18 18:42:50 UTC 2015
From: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
---
ui/css/src/modules/_templates.scss | 115 ++++++++++++++++++++++++++++++++++---
ui/js/src/kimchi.template_main.js | 20 ++++++-
ui/pages/tabs/templates.html.tmpl | 17 +++---
3 files changed, 134 insertions(+), 18 deletions(-)
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index 3cf6c25..44e68c2 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -198,6 +198,7 @@
}
}
+
/* VM List View classes*/
#templates-root-container {
@@ -244,18 +245,18 @@
}
}
.ul-body {
- display: block;
+ display: block;
width: 100%;
clear: both;
padding: 0;
margin: 0;
list-style: none;
- > li:nth-child(even) {
- background-color: $table-bg-accent;
- }
- > li:nth-child(odd) {
- background-color: $table-bg;
- }
+ > li:nth-child(even) {
+ background-color: $table-bg-accent;
+ }
+ > li:nth-child(odd) {
+ background-color: $table-bg;
+ }
}
.column-name {
width: 17.4900%;
@@ -312,4 +313,102 @@
}
}
}
-}
+ .wok-vm-gallery {
+ display: block;
+ width: 100%;
+ list-style-type: none;
+ margin: 0;
+ padding-left: 5px;
+ .wok-vm-header {
+ display: none;
+ }
+ .wok-vm-body {
+ padding: 0 20px 0 20px;
+ width: 240px;
+ display: inline-block;
+ border: 1px solid $table-first-row-border-color;
+ margin-right: 20px;
+ > span {
+ display: inline-block;
+ width: 100%;
+ font-family: $font-family-sans-serif;
+ font-size: 12.5pt;
+ line-height: $line-height-base;
+ font-weight: 400;
+ }
+ }
+ .ul-body {
+ display: inline-block;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+ .column-name {
+ line-height: 2.5 !important;
+ font-size: 15.3pt !important;
+ font-weight: 500 !important;
+ text-overflow: ellipsis !important;
+ overflow: hidden !important;
+ padding-right: 35px !important;
+ }
+ .item-hidden {
+ &.column-type,
+ &.column-version,
+ &.column-processors {
+ padding-bottom: 11px;
+ }
+ }
+ .item-hidden {
+ &.column-memory {
+ padding-bottom: 38px;
+ }
+ }
+ .font-bold {
+ font-weight: bold !important;
+ }
+ .pull-right {
+ float: none !important;
+ padding-bottom: 22px;
+ }
+ .dropdown-menu {
+ width: 100%;
+ }
+ .menu-flat {
+ width: 239px;
+ margin-left: -20px;
+ }
+ .btn {
+ width: 100%;
+ text-align: left;
+ padding-left: 42px;
+ border-radius: 0;
+ }
+ .name-distro-icon {
+ background-color: transparent;
+ background-size: 32px 32px;
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+ &.icon-centos {
+ background-image: url('#{$wok-icon-path}/icon-centos.png');
+ }
+ &.icon-debian {
+ background-image: url('#{$wok-icon-path}/icon-debian.png');
+ }
+ &.icon-fedora {
+ background-image: url('#{$wok-icon-path}/icon-fedora.png');
+ }
+ &.icon-opensuse {
+ background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+ }
+ &.icon-ubuntu {
+ background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+ }
+ &.icon-gentoo {
+ background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+ }
+ &.icon-unknown {
+ background-image: url('#{$wok-icon-path}/icon-unknown.png');
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
index 7002b03..1c80db8 100644
--- a/ui/js/src/kimchi.template_main.js
+++ b/ui/js/src/kimchi.template_main.js
@@ -16,7 +16,7 @@
* limitations under the License.
*/
- kimchi.doListTemplates = function() {
+kimchi.doListTemplates = function() {
$('.wok-mask').removeClass('hidden');
kimchi.listTemplates(function(result) {
if (result && result.length) {
@@ -39,7 +39,9 @@
$('.wok-mask').fadeOut(300, function() {});
}
- var options = { valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter'] };
+ var options = {
+ valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter']
+ };
var templatesList = new List('templates-container', options);
}, function(err) {
@@ -84,7 +86,19 @@ kimchi.templateBindClick = function() {
}, function(err) {
wok.message.error(err.responseJSON.reason);
});
- }, function(){});
+ }, function() {});
+ });
+
+ $('#gallery-table-button').on('click', function(event) {
+ if ($("#templates-grid").hasClass('wok-vm-list')) {
+ $("#templates-grid").removeClass("wok-vm-list");
+ $("#templates-grid").addClass("wok-vm-gallery");
+ $("#gallery-table-button").html("View Table <i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i>");
+ } else {
+ $("#templates-grid").removeClass("wok-vm-gallery");
+ $("#templates-grid").addClass("wok-vm-list");
+ $("#gallery-table-button").html("View Gallery <i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i>");
+ }
});
}
kimchi.hideTitle = function() {
diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
index ee05df8..3ac1059 100644
--- a/ui/pages/tabs/templates.html.tmpl
+++ b/ui/pages/tabs/templates.html.tmpl
@@ -51,6 +51,9 @@
<div class="templates">
<div id="templates-container" class="container hidden">
<div class="row grid-control empty-when-logged-off">
+ <div class="pull-left">
+ <button type="button" id="gallery-table-button" class="btn btn-default">$_("View Gallery") <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button>
+ </div>
<div class="pull-right">
<label for="search_input" class="sr-only">$_("Filter"):</label>
<input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
@@ -92,7 +95,7 @@
</script>
<script id="templateTmpl" type="html/text">
<li class="wok-vm-body">
- <span class='column-name' title="{name}" val="{name}">{name}</span><!--
+ <span class='column-name name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!--
--><span class='column-action pull-right'>
<span class="pull-right">
<div class="dropdown menu-flat">
@@ -106,14 +109,14 @@
</div>
</span>
</span><!--
- --><span class='column-type os-type-filter distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!--
- --><span class="item-hidden">$_("OS")</span><!--
- --><span class='column-version os-version-filter' val="{os_version}">{os_version}</span><!--
- --><span class="item-hidden">$_("Version")</span><!--
+ --><span class='column-type os-type-filter distro-icon icon-{os_distro} font-bold' val="{os_distro}">{os_distro}</span><!--
+ --><span class="item-hidden column-type os-type-filter">$_("OS")</span><!--
+ --><span class='column-version os-version-filter font-bold' val="{os_version}">{os_version}</span><!--
+ --><span class="item-hidden column-version os-version-filter">$_("Version")</span><!--
--><span class='column-processors cpus-filter' val="{cpus}"><strong>{cpus}</strong> $_("cores")</span><!--
- --><span class="item-hidden">$_("CPUs")</span><!--
+ --><span class="item-hidden column-processors cpus-filter">$_("CPUs")</span><!--
--><span class='column-memory memory-filter' val="{memory}"><strong>{memory}</strong> $_("M")</span><!--
- --><span class="item-hidden">$_("Memory")</span>
+ --><span class="item-hidden column-memory memory-filter">$_("Memory")</span>
</li>
</script>
</body>
--
1.8.3.1
More information about the Kimchi-devel
mailing list