[Kimchi-devel] [PATCH] [Kimchi] Adding Gallery View at Templates screen

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; --- 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