[Kimchi-devel] [PATCH] [Kimchi] Fix for Multi-culture UI issues for kimchi plugin.

Lucio Correia luciojhc at linux.vnet.ibm.com
Mon Dec 5 11:27:16 UTC 2016


Reviewed-By: Lucio Correia <luciojhc at linux.vnet.ibm.com>

On 02/12/2016 06:40, rajgupta at linux.vnet.ibm.com wrote:
> From: Rajat Gupta <rajat.triumph at gmail.com>
>
>     1. Fixed strings overlaps
>     2. Fixed button misalignments
>     3. Globalization text corrections
>
> Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
> ---
>  ui/css/kimchi.css                      | 156 +++++++++++++++++++++++----------
>  ui/css/src/modules/_edit-guests.scss   |  32 +++++--
>  ui/css/src/modules/_guests.scss        |   6 +-
>  ui/css/src/modules/_network.scss       |   4 +
>  ui/css/src/modules/_storage.scss       |  61 +++++++++----
>  ui/css/src/modules/_templates.scss     |  19 ++--
>  ui/js/src/kimchi.guest_edit_main.js    |  28 +++---
>  ui/js/src/kimchi.template_edit_main.js |   6 +-
>  ui/pages/guest-edit.html.tmpl          |  30 +++----
>  ui/pages/guest-storage-add.html.tmpl   |   2 +-
>  ui/pages/i18n.json.tmpl                |  10 +++
>  ui/pages/tabs/guests.html.tmpl         |  14 +--
>  ui/pages/tabs/storage.html.tmpl        |  34 +++----
>  ui/pages/tabs/templates.html.tmpl      |  24 ++---
>  ui/pages/template-edit.html.tmpl       |  28 +++---
>  15 files changed, 298 insertions(+), 156 deletions(-)
>
> diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
> index 1b2c1dd..64bae4f 100644
> --- a/ui/css/kimchi.css
> +++ b/ui/css/kimchi.css
> @@ -506,7 +506,7 @@
>
>  #guest-content-container .wok-guest-gallery .wok-guest-list-item {
>    padding: 0;
> -  width: 240px;
> +  width: 290px;
>    height: 435px;
>    display: inline-block;
>    border: 0;
> @@ -620,7 +620,7 @@
>    padding-left: 20px;
>    margin-right: 20px;
>    display: block;
> -  width: 220px;
> +  width: 290px;
>    white-space: nowrap;
>    cursor: default;
>  }
> @@ -671,7 +671,7 @@
>  }
>
>  #guest-content-container .wok-guest-gallery .wok-guest-list-item .menu-flat {
> -  width: 240px;
> +  width: 290px;
>  }
>
>  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn {
> @@ -1147,31 +1147,50 @@ body.wok-gallery {
>    margin: 15px 0 0;
>  }
>
> -#guest-edit-window form .header .column-actions,
> +#guest-edit-window form .header .cell.column-network {
> +  display: inline-block;
> +  overflow-x: hidden;
> +  overflow-y: hidden;
> +  text-overflow: ellipsis;
> +  white-space: nowrap;
> +  /*width: 184px;*/
> +}
> +
> +#guest-edit-window form .header,
> +#guest-edit-window form .header .cell.column-mac {
> +  display: inline-block;
> +  overflow-x: hidden;
> +  overflow-y: hidden;
> +  text-overflow: ellipsis;
> +  white-space: nowrap;
> +  /*width: 174px;*/
> +}
> +
> +#guest-edit-window form .column-actions,
>  #guest-edit-window form .task .column-actions,
>  #guest-edit-window form .body .column-actions {
>    text-align: right;
>  }
>
> -#guest-edit-window form .header .column-device,
> +#guest-edit-window form .column-device,
>  #guest-edit-window form .task .column-device,
>  #guest-edit-window form .body .column-device {
>    width: 12.7%;
>  }
>
> -#guest-edit-window form .header .column-path,
> +#guest-edit-window form .column-path,
>  #guest-edit-window form .task .column-path,
>  #guest-edit-window form .body .column-path {
>    width: 60.25%;
>  }
>
> -#guest-edit-window form .header .cell.column-network,
> +#guest-edit-window form .cell.column-network,
>  #guest-edit-window form .task .cell.column-network,
>  #guest-edit-window form .body .cell.column-network {
> -  width: 18%;
> +  width: 184px;
>  }
>
> -#guest-edit-window form .header .cell.column-network > span,
> +#guest-edit-window form .cell.column-network > span,
>  #guest-edit-window form .task .cell.column-network > span,
>  #guest-edit-window form .body .cell.column-network > span {
>    width: 100%;
> @@ -1180,74 +1199,77 @@ body.wok-gallery {
>    overflow: hidden;
>  }
>
> -#guest-edit-window form .header .cell.column-type,
> +#guest-edit-window form .cell.column-type,
>  #guest-edit-window form .task .cell.column-type,
>  #guest-edit-window form .body .cell.column-type {
> -  width: 18%;
> +  width: 184px;
>  }
>
> -#guest-edit-window form .header .cell.column-mode,
> +#guest-edit-window form .cell.column-mode,
>  #guest-edit-window form .task .cell.column-mode,
>  #guest-edit-window form .body .cell.column-mode {
> -  width: 16%;
> +  width: 164px;
>  }
>
> -#guest-edit-window form .header .cell.column-mac,
> +#guest-edit-window form .cell.column-mac,
>  #guest-edit-window form .task .cell.column-mac,
>  #guest-edit-window form .body .cell.column-mac {
> -  width: 14%;
> +  width: 174px;
>  }
>
> -#guest-edit-window form .header .cell.column-ip,
> +#guest-edit-window form .cell.column-ip,
>  #guest-edit-window form .task .cell.column-ip,
>  #guest-edit-window form .body .cell.column-ip {
> -  width: 12%;
> +  width: 150px;
> +  display: inline-block;
> +  text-overflow: ellipsis;
> +  white-space: nowrap;
>  }
>
> -#guest-edit-window form .header .cell.column-sel,
> +#guest-edit-window form .cell.column-sel,
>  #guest-edit-window form .task .cell.column-sel,
>  #guest-edit-window form .body .cell.column-sel {
>    width: 1.77%;
>  }
>
> -#guest-edit-window form .header .cell.column-snapshot-name,
> +#guest-edit-window form .cell.column-snapshot-name,
>  #guest-edit-window form .task .cell.column-snapshot-name,
>  #guest-edit-window form .body .cell.column-snapshot-name {
>    width: 58%;
>  }
>
> -#guest-edit-window form .header .cell.column-snapshot-created,
> +#guest-edit-window form .cell.column-snapshot-created,
>  #guest-edit-window form .task .cell.column-snapshot-created,
>  #guest-edit-window form .body .cell.column-snapshot-created {
>    width: 16.5%;
>  }
>
> -#guest-edit-window form .header .cell.column-pci-status,
> +#guest-edit-window form .cell.column-pci-status,
>  #guest-edit-window form .task .cell.column-pci-status,
>  #guest-edit-window form .body .cell.column-pci-status {
>    width: 3.7%;
>  }
>
> -#guest-edit-window form .header .cell.column-pci-status .fa,
> +#guest-edit-window form .cell.column-pci-status .fa,
>  #guest-edit-window form .task .cell.column-pci-status .fa,
>  #guest-edit-window form .body .cell.column-pci-status .fa {
>    color: #8cc63f;
>    font-size: 24px;
>  }
>
> -#guest-edit-window form .header .cell.column-pci-name,
> +#guest-edit-window form .cell.column-pci-name,
>  #guest-edit-window form .task .cell.column-pci-name,
>  #guest-edit-window form .body .cell.column-pci-name {
>    width: 21%;
>  }
>
> -#guest-edit-window form .header .cell.column-product,
> +#guest-edit-window form .cell.column-product,
>  #guest-edit-window form .task .cell.column-product,
>  #guest-edit-window form .body .cell.column-product {
>    width: 45%;
>  }
>
> -#guest-edit-window form .header .cell.column-vendor,
> +#guest-edit-window form .cell.column-vendor,
>  #guest-edit-window form .task .cell.column-vendor,
>  #guest-edit-window form .body .cell.column-vendor {
>    width: 24.1%;
> @@ -1612,7 +1634,7 @@ body.wok-gallery {
>
>  #template-edit-window .template-edit-wrapper-controls {
>    vertical-align: top;
> -  width: 400px;
> +  width: 480px;
>    height: 35px;
>    line-height: 35px;
>    margin: 7px 0 8px;
> @@ -1722,15 +1744,15 @@ body.wok-gallery {
>  }
>
>  #template-edit-window .template-storage-cell.type {
> -  width: 100px;
> +  width: 110px;
>  }
>
>  #template-edit-window .template-storage-cell.disk {
> -  width: 100px;
> +  width: 133px;
>  }
>
>  #template-edit-window .template-storage-cell.format {
> -  width: 250px;
> +  width: 162px;
>  }
>
>  #template-edit-window .template-interface-cell.network {
> @@ -1899,6 +1921,10 @@ body.wok-gallery {
>  }
>
>  /* VM List View classes*/
> +#templatestatusselect {
> +  width: 240px !important;
> +}
> +
>  #templates-root-container .grid-control input[type="text"] {
>    height: 38px;
>    display: inline-block;
> @@ -1985,6 +2011,10 @@ body.wok-gallery {
>    border-bottom: none;
>    border-top: 0;
>    background-color: #fff;
> +  width: 200px;
> +  overflow: hidden;
> +  text-overflow: ellipsis;
> +  white-space: nowrap;
>  }
>
>  #templates-root-container .wok-vm-list .wok-vm-body {
> @@ -2004,6 +2034,7 @@ body.wok-gallery {
>    font-size: 12.5pt;
>    line-height: 2.42857;
>    font-weight: 400;
> +  width: 200px;
>  }
>
>  #templates-root-container .wok-vm-list .wok-vm-body .column-type {
> @@ -2058,7 +2089,7 @@ body.wok-gallery {
>  }
>
>  #templates-root-container .wok-vm-list .column-action {
> -  width: 33.8000%;
> +  width: 232px;
>  }
>
>  #templates-root-container .wok-vm-list .item-hidden {
> @@ -2281,6 +2312,10 @@ body.wok-gallery {
>    display: block;
>  }
>
> +#networkConfig .alert-dismissable .close, .alert-dismissible .close {
> +  right: 7px !important;
> +}
> +
>  #network-root-container .wok-nw-loading-icon {
>    background: transparent url("../../../images/theme-default/spin5.svg") no-repeat 50% 50%;
>    -webkit-animation: spin 3s infinite linear;
> @@ -2595,7 +2630,7 @@ body.wok-gallery {
>  #storage-root-container .volumes .wok-gallery .volume-box-inner {
>    padding: 0 16px;
>    width: 409px;
> -  height: 110px;
> +  height: 150px;
>    display: flex;
>    flex-flow: row wrap;
>    justify-content: space-around;
> @@ -2657,13 +2692,17 @@ body.wok-gallery {
>  #storage-root-container .volumes .wok-gallery span.column-format,
>  #storage-root-container .volumes .wok-gallery span.column-type {
>    order: 3;
> -  width: 72px;
> +  width: 142px;
>    margin-top: -5px;
>  }
>
>  #storage-root-container .volumes .wok-gallery span.gallery-header {
>    font-weight: 600;
>    display: block;
> +  overflow: hidden;
> +  text-overflow: ellipsis;
> +  white-space: nowrap;
> +  width: 90px;
>  }
>
>  #storage-root-container .volumes .wok-gallery span.column-progress {
> @@ -2754,7 +2793,7 @@ body.wok-gallery {
>  @media (min-width: 992px) {
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-format,
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-format {
> -    width: 95px;
> +    width: 127px;
>    }
>  }
>
> @@ -2790,7 +2829,7 @@ body.wok-gallery {
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-capacity,
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-allocated,
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-progress {
> -    width: 95px;
> +    width: 142px;
>    }
>  }
>
> @@ -2845,14 +2884,14 @@ body.wok-gallery {
>  @media (min-width: 992px) {
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name,
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name {
> -    width: 333px;
> +    width: 250px;
>    }
>  }
>
>  @media (min-width: 1200px) {
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name,
>    #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name {
> -    width: 444px;
> +    width: 300px;
>    }
>  }
>
> @@ -2882,29 +2921,44 @@ body.wok-gallery {
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-state,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-state {
> -  width: 3.0519%;
> +  width: 2.0519%;
>    text-align: center;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-name,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-name {
> -  width: 12.7272%;
> +  width: 126px;
>    text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-type,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-type {
> -  width: 11.6883%;
> +  width: 101px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-location,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-location {
> -  width: 21.4285%;
> +  width: 171px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-usage {
> -  width: 9.41558%;
> +  width: 152px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage .usage-icon,
> @@ -2933,23 +2987,35 @@ body.wok-gallery {
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-capacity,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-capacity {
> -  width: 8.701298%;
> +  width: 129px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-allocated,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-allocated {
> -  width: 9.35064%;
> +  width: 134px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-disks,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-disks {
>    text-align: center;
> -  width: 2.9870%;
> +  width: 105px;
> +  text-overflow: ellipsis;
> +  display: inline-block;
> +  white-space: nowrap;
> +  overflow: hidden !important;
>  }
>
>  #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-action,
>  #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-action {
> -  width: 20.64%;
> +  width: 254px;
>    text-align: right;
>  }
>
> diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss
> index 6caa720..e3148bd 100644
> --- a/ui/css/src/modules/_edit-guests.scss
> +++ b/ui/css/src/modules/_edit-guests.scss
> @@ -94,7 +94,24 @@
>      }
>      form {
>          margin: 15px 0 0;
> -        .header,
> +        .header{
> +          .cell.column-network{
> +            display: inline-block;
> +            overflow-x: hidden;
> +            overflow-y: hidden;
> +            text-overflow: ellipsis;
> +            white-space: nowrap;
> +            /*width: 184px;*/
> +          },
> +          .cell.column-mac{
> +          display: inline-block;
> +          overflow-x: hidden;
> +          overflow-y: hidden;
> +          text-overflow: ellipsis;
> +          white-space: nowrap;
> +          /*width: 174px;*/
> +        }
> +        },
>          .task,
>          .body {
>              .column-actions {
> @@ -107,7 +124,7 @@
>                  width: 60.25%;
>              }
>              .cell.column-network {
> -                width: 18%;
> +              width: 184px;
>                  > span {
>                      width: 100%;
>                      display: inline-block;
> @@ -116,16 +133,19 @@
>                  }
>              }
>              .cell.column-type {
> -                width: 18%;
> +              width: 184px;
>              }
>              .cell.column-mode {
> -                width: 16%;
> +              width: 164px;
>              }
>              .cell.column-mac {
> -                width: 14%;
> +              width: 174px;
>              }
>              .cell.column-ip {
> -                width: 12%;
> +              width: 150px;
> +              display: inline-block;
> +              text-overflow: ellipsis;
> +              white-space: nowrap;
>              }
>              .cell.column-sel {
>                  width: 1.77%;
> diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
> index 7893cb3..37654dd 100644
> --- a/ui/css/src/modules/_guests.scss
> +++ b/ui/css/src/modules/_guests.scss
> @@ -223,7 +223,7 @@
>          }
>          .wok-guest-list-item {
>              padding: 0;
> -            width: 240px;
> +            width: 290px;
>              height: 435px;
>              display: inline-block;
>              border: 0;
> @@ -323,7 +323,7 @@
>                  padding-left: 20px;
>                  margin-right: 20px;
>                  display: block;
> -                width: 220px;
> +                width: 290px;
>                  white-space: nowrap;
>                  cursor: default;
>              }
> @@ -366,7 +366,7 @@
>                  background-repeat: no-repeat;
>              }
>              .menu-flat {
> -                width: 240px;
> +                width: 290px;
>              }
>              .btn {
>                  width: 100%;
> diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
> index b030ee4..12684ce 100644
> --- a/ui/css/src/modules/_network.scss
> +++ b/ui/css/src/modules/_network.scss
> @@ -38,6 +38,10 @@
>
>  }
>
> +#networkConfig .alert-dismissable .close, .alert-dismissible .close{
> +  right: 7px !important;
> +}
> +
>  #network-root-container {
>
>      .wok-nw-loading-icon {
> diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
> index 0ccc816..70cb3fa 100644
> --- a/ui/css/src/modules/_storage.scss
> +++ b/ui/css/src/modules/_storage.scss
> @@ -236,7 +236,7 @@
>          .volume-box-inner {
>              padding: 0 16px;
>              width: 409px;
> -            height: 110px;
> +            height: 150px;
>              display: flex;
>              flex-flow: row wrap;
>              justify-content: space-around;
> @@ -299,13 +299,17 @@
>          span.column-format,
>          span.column-type {
>              order: 3;
> -            width: 72px;
> +            width: 142px;
>              margin-top: -5px;
>          }
>
>          span.gallery-header {
>              font-weight: 600;
>              display: block;
> +            overflow: hidden;
> +            text-overflow: ellipsis;
> +            white-space: nowrap;
> +            width: 90px;
>          }
>
>          span.column-progress {
> @@ -406,7 +410,7 @@
>              > span.column-format {
>                  width: 57px;
>                  @media (min-width: $screen-md) {
> -                    width: 95px;
> +                    width: 127px;
>                  }
>                  @media (min-width: $screen-lg) {
>                      left: 173px;
> @@ -421,7 +425,7 @@
>                  width: 79px;
>                  text-transform: capitalize;
>                  @media (min-width: $screen-md) {
> -                    width: 95px;
> +                    width: 142px;
>                  }
>                  @media (min-width: $screen-lg) {
>                      left: 165px;
> @@ -449,10 +453,10 @@
>              > span.column-name {
>                  width: 202px;
>                  @media (min-width: $screen-md) {
> -                    width: 333px;
> +                    width: 250px;
>                  }
>                  @media (min-width: $screen-lg) {
> -                    width: 444px;
> +                    width: 300px;
>                  }
>
>                  label {
> @@ -485,21 +489,36 @@
>      .wok-datagrid > .wok-datagrid-header,
>      .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
>          > span.column-state {
> -            width: 3.0519%;
> +            width: 2.0519%;
>              text-align: center;
>          }
>          > span.column-name {
> -            width: 12.7272%;
> +            width: 126px;
>              text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-type {
> -            width: 11.6883%;
> +            width: 101px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-location {
> -            width: 21.4285%;
> +            width: 171px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-usage {
> -            width: 9.41558%;
> +            width: 152px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>              .usage-icon {
>                  padding-left: 35px;
>                  display: inline-block;
> @@ -518,17 +537,29 @@
>              }
>          }
>          > span.column-capacity {
> -            width: 8.701298%;
> +            width: 129px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-allocated {
> -            width: 9.35064%;
> +            width: 134px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-disks {
>              text-align: center;
> -            width: 2.9870%;
> +            width: 105px;
> +            text-overflow: ellipsis;
> +            display: inline-block;
> +            white-space: nowrap;
> +            overflow: hidden !important;
>          }
>          > span.column-action {
> -            width: 20.64%;
> +            width: 254px;
>              text-align: right;
>          }
>      }
> diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
> index f72efe9..c5d727e 100644
> --- a/ui/css/src/modules/_templates.scss
> +++ b/ui/css/src/modules/_templates.scss
> @@ -77,7 +77,7 @@ $kimchi-icon-path: '../images';
>      }
>      .template-edit-wrapper-controls {
>          vertical-align: top;
> -        width: 400px;
> +        width: 480px;
>          height: 35px;
>          line-height: 35px;
>          margin: 7px 0 8px;
> @@ -167,13 +167,13 @@ $kimchi-icon-path: '../images';
>          width: 180px !important;
>      }
>      .template-storage-cell.type {
> -        width: 100px;
> +        width: 110px;
>      }
>      .template-storage-cell.disk {
> -        width: 100px;
> +        width: 133px;
>      }
>      .template-storage-cell.format {
> -        width: 250px;
> +        width: 162px;
>      }
>      .template-interface-cell.network {
>          width: 220px;
> @@ -318,7 +318,9 @@ $kimchi-icon-path: '../images';
>
>
>  /* VM List View classes*/
> -
> +#templatestatusselect{
> +      width: 240px !important;
> +}
>  #templates-root-container {
>      .grid-control input[type="text"] {
>          height: 38px;
> @@ -390,6 +392,10 @@ $kimchi-icon-path: '../images';
>                  border-bottom: none;
>                  border-top: 0;
>                  background-color: $table-bg;
> +                width: 200px;
> +                overflow: hidden;
> +                text-overflow: ellipsis;
> +                white-space: nowrap;
>              }
>          }
>          .wok-vm-body {
> @@ -406,6 +412,7 @@ $kimchi-icon-path: '../images';
>                  font-size: 12.5pt;
>                  line-height: (1 + $line-height-base);
>                  font-weight: 400;
> +                width: 200px;
>              }
>              .column-type {
>                  padding-left: 40px !important;
> @@ -450,7 +457,7 @@ $kimchi-icon-path: '../images';
>              width: 1.6900%;
>          }
>          .column-action {
> -            width: 33.8000%;
> +            width: 232px;
>          }
>          .item-hidden {
>              display: none !important;
> diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
> index 7667fad..bb82077 100644
> --- a/ui/js/src/kimchi.guest_edit_main.js
> +++ b/ui/js/src/kimchi.guest_edit_main.js
> @@ -341,13 +341,13 @@ kimchi.guest_edit_main = function() {
>                        case 'ovs' :
>                                        $("#label-type-" + data.id, item).text(result.type);
>                                        $("#label-network-" + data.id, item).text(result.source);
> -                                      $("#label-mode-" + data.id, item).text('None');
> +                                      $("#label-mode-" + data.id, item).text(i18n['KCHVMED6018M']);
>                            break;
>
>                        case 'network' :
>                                        $("#label-type-" + data.id, item).text(result.type);
>                                        $("#label-network-" + data.id, item).text(result.network);
> -                                      $("#label-mode-" + data.id, item).text('None');
> +                                      $("#label-mode-" + data.id, item).text(i18n['KCHVMED6018M']);
>                              break;
>                      }
>
> @@ -397,7 +397,7 @@ kimchi.guest_edit_main = function() {
>
>                              break;
>                          case 'ovs':
> -                            $('#label-mode-' + data.id).html('None');
> +                            $('#label-mode-' + data.id).html(i18n['KCHVMED6018M']);
>                              $('#label-mode-' + data.id).removeClass('hide');
>                              $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true);
>
> @@ -405,7 +405,7 @@ kimchi.guest_edit_main = function() {
>                              $("span.column-network select", itemNode).selectpicker('refresh');
>                              break;
>                          case 'network':
> -                            $('#label-mode-' + data.id).html('None');
> +                            $('#label-mode-' + data.id).html(i18n['KCHVMED6018M']);
>                              $('#label-mode-' + data.id).removeClass('hide');
>                              $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true);
>
> @@ -470,14 +470,14 @@ kimchi.guest_edit_main = function() {
>              $('#form-guest-edit-interface > div.s390x').show();
>
>              var typeOptionsdata = [{
> -                label: "macvtap",
> -                value: "macvtap"
> +                label: i18n['KCHVMED6013M'],
> +                value: 'macvtap'
>              }, {
> -                label: "ovs",
> -                value: "ovs"
> +                label: i18n['KCHVMED6014M'],
> +                value: 'ovs'
>              }, {
> -                label: "network",
> -                value: "network"
> +                label: i18n['KCHVMED6015M'],
> +                value: 'network'
>              }];
>              var typeOptions = '';
>
> @@ -487,11 +487,11 @@ kimchi.guest_edit_main = function() {
>              }
>
>              var modeOptionsdata = [{
> -                label: "Bridge",
> -                value: "bridge"
> +                label: i18n['KCHVMED6016M'],
> +                value: 'bridge'
>              }, {
> -                label: "Vepa",
> -                value: "vepa"
> +                label: i18n['KCHVMED6017M'],
> +                value: 'vepa'
>              }];
>              var modeOptions = '';
>
> diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
> index 414a108..05bf1f4 100644
> --- a/ui/js/src/kimchi.template_edit_main.js
> +++ b/ui/js/src/kimchi.template_edit_main.js
> @@ -616,9 +616,9 @@ kimchi.template_edit_main = function() {
>                  //initialize type option
>                  var typeOptionsdata = {};
>                  var typeOptions = '';
> -                typeOptionsdata.macvtap = 'macvtap';
> -                typeOptionsdata.ovs = 'ovs';
> -                typeOptionsdata.network = 'network';
> +                typeOptionsdata.macvtap = i18n['KCHTMPL6009M'];
> +                typeOptionsdata.ovs = i18n['KCHTMPL6010M'];
> +                typeOptionsdata.network = i18n['KCHTMPL6011M'];
>
>                  $.each(typeOptionsdata, function(key, value) {
>                      if (value === networkData.type) {
> diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
> index 9dd0c8f..09a2ac4 100644
> --- a/ui/pages/guest-edit.html.tmpl
> +++ b/ui/pages/guest-edit.html.tmpl
> @@ -23,7 +23,7 @@
>  <!DOCTYPE html>
>  <html>
>  <body>
> -<div id="guest-edit-window" class="window modal-content">
> +<div id="guest-edit-window" class="window modal-content" style="width:1280px; right:80px;">
>      <div class="modal-header">
>          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
>          <h4 class="modal-title">$_("Edit Guest")</h4>
> @@ -63,7 +63,7 @@
>                  </div>
>                  <div class="form-group" id="guest-console-panel" style="display:none;">
>                      <label for="guest-edit-console">$_("Console")</label>
> -                    <select id="guest-edit-console" name="console" class="form-control">
> +                    <select id="guest-edit-console" data-none-selected-text="$_("Nothing selected")" name="console" class="form-control">
>                          <option value="sclp">$_("sclp")</option>
>                          <option value="virtio">$_("virtio")</option>
>                      </select>
> @@ -83,18 +83,18 @@
>              <form role="tabpanel" class="guest-edit-interface tab-pane" id="form-guest-edit-interface">
>                  <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i>$_("Add")</button>
>                  <div class="header">
> -                    <span class="cell column-network">$_("Network")</span>
> -                    <span class="cell column-type">$_("Type")</span>
> -                    <span class="cell column-mac">$_("MAC Address")</span>
> -                    <span class="cell column-ip">$_("IP Address")</span>
> +                    <span class="cell column-network" data-toggle="tooltip" title="$_('Network')">$_("Network")</span>
> +                    <span class="cell column-type" data-toggle="tooltip" title="$_('Type')">$_("Type")</span>
> +                    <span class="cell column-mac" data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span>
> +                    <span class="cell column-ip" data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span>
>                      <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
>                  </div>
>                  <div class="header s390x" style="display:none">
> -                    <span class="cell column-type">$_("Type")</span>
> -                    <span class="cell column-network">$_("Network/Interface")</span>
> -                    <span class="cell column-mode">$_("Mode")</span>
> -                    <span class="cell column-mac">$_("MAC Address")</span>
> -                    <span class="cell column-ip">$_("IP Address")</span>
> +                    <span class="cell column-type" data-toggle="tooltip" title="$_('Type')">$_("Type")</span>
> +                    <span class="cell column-network" data-toggle="tooltip" title="$_('Network/Interface')">$_("Network/Interface")</span>
> +                    <span class="cell column-mode" data-toggle="tooltip" title="$_('Mode')">$_("Mode")</span>
> +                    <span class="cell column-mac" data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span>
> +                    <span class="cell column-ip" data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span>
>                      <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
>                  </div>
>                  <div class="body"></div>
> @@ -272,7 +272,7 @@
>      <div class="item" id="{mac}">
>          <span class="cell column-network">
>              <span id="label-network-{id}" class="{viewMode}">{network}</span>
> -            <select class="{editMode}"></select>
> +            <select class="{editMode}" data-none-selected-text="$_("Nothing selected")"></select>
>          </span>
>          <span class="cell column-type">
>              {type}
> @@ -299,15 +299,15 @@
>      <div class="item" id="{mac}">
>          <span class="cell column-type">
>            <span id="label-type-{id}" class="{viewMode}">{type}</span>
> -          <select id="interface-s390x-type-{id}" class="{editMode}"></select>
> +          <select id="interface-s390x-type-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select>
>          </span>
>          <span class="cell column-network">
>              <span id="label-network-{id}" class="{viewMode}">{network}{source}</span>
> -            <select id="interface-s390x-network-{id}" class="{editMode}"></select>
> +            <select id="interface-s390x-network-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select>
>          </span>
>          <span class="cell column-mode">
>              <span id="label-mode-{id}" class="{viewMode}">{mode}</span>
> -            <select id="interface-s390x-mode-{id}" class="{editMode}"></select>
> +            <select id="interface-s390x-mode-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select>
>          </span>
>          <span class="cell column-mac">
>              <span id="label-mac-{id}" class="{viewMode}">{mac}</span>
> diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl
> index dad3c3b..3b60b14 100644
> --- a/ui/pages/guest-storage-add.html.tmpl
> +++ b/ui/pages/guest-storage-add.html.tmpl
> @@ -95,7 +95,7 @@
>                              </div>
>                              <div class="form-group volume">
>                                  <label>$_("Storage Volume")</label>
> -                                <select id="guest-disk-vol" class="selectpicker col-md-12 col-lg-12">
> +                                <select id="guest-disk-vol" data-none-selected-text="$_("Nothing selected")" class="selectpicker col-md-12 col-lg-12">
>                                  </select>
>                                  <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage volume to be attached")</p>
>                              </div>
> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
> index cd23fcb..4510921 100644
> --- a/ui/pages/i18n.json.tmpl
> +++ b/ui/pages/i18n.json.tmpl
> @@ -54,6 +54,9 @@
>      "KCHTMPL6006M": "$_("Not Available")",
>      "KCHTMPL6007M": "$_("Please check the invalid Storage Pools")",
>      "KCHTMPL6008M": "$_("Please check the invalid Storage Pools or Paths")",
> +    "KCHTMPL6009M": "$_("macvtap")",
> +    "KCHTMPL6010M": "$_("ovs")",
> +    "KCHTMPL6011M": "$_("network")",
>
>      "KCHVM6001M": "$_("This will delete the %1 virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")",
>      "KCHVM6002M": "$_("Power off Confirmation")",
> @@ -90,6 +93,13 @@
>      "KCHVMED6010M": "$_("Successfully attached device to VM")",
>      "KCHVMED6011M": "$_("Successfully detached device from VM")",
>      "KCHVMED6012M": "$_("Following devices will be affected, confirm?")",
> +    "KCHVMED6013M": "$_("macvtap")",
> +    "KCHVMED6014M": "$_("ovs")",
> +    "KCHVMED6015M": "$_("network")",
> +    "KCHVMED6016M": "$_("Bridge")",
> +    "KCHVMED6017M": "$_("Vepa")",
> +    "KCHVMED6018M": "$_("None")",
> +
>
>      "KCHNET6001M": "$_("unavailable")",
>      "KCHNET6002M": "$_("This action will interrupt network connectivity for any virtual machine that depend on the %1 network.")",
> diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl
> index 37c9ce2..5d49e1c 100644
> --- a/ui/pages/tabs/guests.html.tmpl
> +++ b/ui/pages/tabs/guests.html.tmpl
> @@ -50,13 +50,13 @@
>                  <ul class="wok-guest-list">
>                      <li class="wok-guest-list-header">
>                        <span class="column-state"><span class="sr-only">$_("State")</span></span><!--
> -                      --><span class="column-name"><span>$_("Guest Name ID")</span></span><!--
> -                      --><span class="column-type"><span>$_("OS Type")</span></span><!--
> -                      --><span class="column-vnc"><span>$_("VNC")</span></span><!--
> -                      --><span class="column-processors"><span>$_("Processors Utilization")</span></span><!--
> -                      --><span class="column-memory"><span>$_("Memory Utilization")</span></span><!--
> -                      --><span class="column-storage"><span>$_("Storage I/O")</span></span><!--
> -                      --><span class="column-network"><span>$_("Network I/O")</span></span><!--
> +                      --><span class="column-name"><span data-toggle="tooltip" title="$_('Guest Name ID')">$_("Guest Name ID")</span></span><!--
> +                      --><span class="column-type"><span data-toggle="tooltip" title="$_('OS Type')">$_("OS Type")</span></span><!--
> +                      --><span class="column-vnc"><span data-toggle="tooltip" title="$_('VNC')">$_("VNC")</span></span><!--
> +                      --><span class="column-processors"><span data-toggle="tooltip" title="$_('Processors Utilization')">$_("Processors Utilization")</span></span><!--
> +                      --><span class="column-memory"><span data-toggle="tooltip" title="$_('Memory Utilization')">$_("Memory Utilization")</span></span><!--
> +                      --><span class="column-storage"><span data-toggle="tooltip" title="$_('Storage I/O')">$_("Storage I/O")</span></span><!--
> +                      --><span class="column-network"><span data-toggle="tooltip" title="$_('Network I/O')">$_("Network I/O")</span></span><!--
>                        --><span class="column-action" style="display:none">
>                            <span class="sr-only">$_("Actions")</span><!--
>                        --></span>
> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
> index 5468138..7c1ed39 100644
> --- a/ui/pages/tabs/storage.html.tmpl
> +++ b/ui/pages/tabs/storage.html.tmpl
> @@ -41,13 +41,13 @@
>              <div id='storageGrid' class="hidden">
>                  <div>
>                      <span class="column-state"><span class="sr-only">$_("State")</span></span><!--
> -                    --><span class="column-name">$_("Name")</span><!--
> -                    --><span class="column-type">$_("Type")</span><!--
> -                    --><span class="column-location">$_("Location")</span><!--
> -                    --><span class="column-usage">$_("%Used")</span><!--
> -                    --><span class="column-allocated">$_("Allocated")</span><!--
> -                    --><span class="column-capacity">$_("Capacity")</span><!--
> -                    --><span class="column-disks">$_("Disks")</span><!--
> +                    --><span class="column-name" data-taggle="tooltip" title="$_('Name')">$_("Name")</span><!--
> +                    --><span class="column-type" data-taggle="tooltip" title="$_('Type')">$_("Type")</span><!--
> +                    --><span class="column-location" data-taggle="tooltip" title="$_('Location')">$_("Location")</span><!--
> +                    --><span class="column-usage" data-taggle="tooltip" title="$_('%Used')">$_("%Used")</span><!--
> +                    --><span class="column-allocated" data-taggle="tooltip" title="$_('Allocated')">$_("Allocated")</span><!--
> +                    --><span class="column-capacity" data-taggle="tooltip" title="$_('Capacity')">$_("Capacity")</span><!--
> +                    --><span class="column-disks" data-taggle="tooltip" title="$_('Disks')">$_("Disks")</span><!--
>                      --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span>
>                  </div>
>                  <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
> @@ -87,8 +87,8 @@
>           <span class='column-state' val="{state}"><span class='storage-state {state}'><i class="fa fa-power-off"></i></span></span><!--
>      --><span class='column-name' title="{name}" val="{name}">{name}</span><!--
>      --><span class='column-type' val="{type}">{type}</span><!--
> -    --><span class='column-location' val="{path}">{path}</span><!--
> -    --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!--
> +    --><span class='column-location' title="{path}" val="{path}">{path}</span><!--
> +    --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>$_("%")</span><!--
>      --><span class='column-allocated' val="{allocated}">{allocated}</span><!--
>      --><span class='column-capacity' val="{capacity}">{capacity}</span><!--
>      --><span class="column-disks {state}"><div class="handle arrow-down"></div></span><!--
> @@ -108,7 +108,8 @@
>           <div class="volumes">
>              <div id="volume-{name}" class="volumeslist" data-name="{name}" data-type="{type}">
>                  <div class="row">
> -                    <div class="pull-left">
> +                    <div class="col-sm-7">
> +                        <div class="btn-group">
>                          <div class="dropdown menu-flat pool-action">
>                              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button>
>                              <ul class="dropdown-menu actionsheet">
> @@ -119,14 +120,17 @@
>                                  <li class="disabled critical"><a href="#" class="volume-delete" data-name="{name}"><i class="fa fa-minus-circle"></i> $_("Delete")</a></li>
>                              </ul>
>                          </div>
> -                        <button type="button" class="btn btn-default toggle-gallery"><span class="text">$_('View Gallery')</span> <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button>
> +                      </div>
> +                      <button type="button" class="btn btn-default toggle-gallery"><span class="text">$_('View Gallery')</span> <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="col-sm-5">
>                      <div class="pull-right">
>                          <label><span class="sr-only">$_('Filter:')</span>
>                              <input type="text" class="filter form-control search" placeholder="$_('Filter')">
>                          </label>
>                      </div>
>                  </div>
> +              </div>
>                  <div class="wok-datagrid wok-list">
>                      <div class="wok-datagrid-header">
>                          <span class="column-name">$_('Name')</span><!--
> @@ -168,12 +172,12 @@
>                      <input type="checkbox" class="wok-checkbox" name="selected-volume[]" id="{checkbox}" value="{name}">
>                      <label class="volume-name volume-name-filter" for="{checkbox}"><span class="volume-inline-progress hidden"><span class="wok-loading-icon"></span></span> {name}</label><!--
>                     --></span><!--
> -                   --><span class="column-format volume-format-filter"><span class="gallery-header">$_('Format')</span><span class="format-text">{format}</span></span><!--
> -                   --><span class="column-type volume-type-filter"><span class="gallery-header">$_('Type')</span>{type}</span><!--
> +                   --><span class="column-format volume-format-filter"><span class="gallery-header" title="$_('Format')">$_('Format')</span><span class="format-text">{format}</span></span><!--
> +                   --><span class="column-type volume-type-filter"><span class="gallery-header" title="$_('Type')">$_('Type')</span>{type}</span><!--
>                     --><span class="column-used-by volume-used-by-filter"><i class="fa fa-exclamation-circle" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}"></i><span class="format-text" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}">{used_by_text}</span></span><!--
>                     --><span class="column-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</span><!--
> -                   --><span class="column-allocated"><span class="gallery-header">$_('Allocation')</span>{allocation}</span><!--
> -                   --><span class="column-capacity"><span class="gallery-header">$_('Capacity')</span>{capacity}</span><!--
> +                   --><span class="column-allocated"><span class="gallery-header" title="$_('Allocation')">$_('Allocation')</span>{allocation}</span><!--
> +                   --><span class="column-capacity"><span class="gallery-header" title="$_('Capacity')">$_('Capacity')</span>{capacity}</span><!--
>                     --><span class="column-progress hidden"><span class="progress-status"></span> <span class="progress-transferred"></span>
>                          </span>
>              </div>
> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
> index 2207292..f947bc9 100644
> --- a/ui/pages/tabs/templates.html.tmpl
> +++ b/ui/pages/tabs/templates.html.tmpl
> @@ -37,15 +37,15 @@
>                  </div>
>
>                  <div class="form-group pull-right">
> -                    <div class="btn-group bootstrap-select control">
> -                        <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" title="Status" aria-expanded="false"><span class="filter-option pull-left">$_("Status")</span>&nbsp;<span class="caret"></span></button>
> +                    <div class="btn-group bootstrap-select control" id="templatestatusselect">
> +                        <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" aria-expanded="false"><span class="filter-option pull-left" data-placement="auto bottom" data-toggle="tooltip" title="$_('Status')">$_("Status")</span>&nbsp;<span class="caret"></span></button>
>                          <div class="dropdown-menu open" style="max-height: 668px; overflow: hidden; min-height: 0px;padding: 0px;">
>                              <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 656px; overflow-y: auto; min-height: 0px;">
> -                                <li nwAct="sort"><a href="#" class="sort" data-sort="name-filter">$_("Name")</a></li>
> -                                <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter">$_("OS")</a></li>
> -                                <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter">$_("Version")</a></li>
> -                                <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter">$_("Current CPUs")</a></li>
> -                                <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter">$_("Memory")</a></li>
> +                                <li nwAct="sort"><a href="#" class="sort" data-sort="name-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Name')">$_("Name")</a></li>
> +                                <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('OS')">$_("OS")</a></li>
> +                                <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Version')">$_("Version")</a></li>
> +                                <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Current CPUs')">$_("Current CPUs")</a></li>
> +                                <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Memory')">$_("Memory")</a></li>
>                              </ul>
>                          </div>
>                      </div>
> @@ -57,11 +57,11 @@
>              <div id="alert-container"></div>
>              <ul id="templates-grid" class="wok-vm-list hidden empty-when-logged-off">
>                  <li class="wok-vm-header">
> -                        <span class="column-name">$_("Template Name (ID)")</span><!--
> -                  --><span class="column-type">$_("OS")</span><!--
> -                  --><span class="column-version">$_("Version")</span><!--
> -                  --><span class="column-processors">$_("Current CPUs")</span><!--
> -                  --><span class="column-memory">$_("Memory")</span><!--
> +                        <span class="column-name" data-placement="auto bottom" data-toggle="tooltip" title="$_('Template Name (ID)')">$_("Template Name (ID)")</span><!--
> +                  --><span class="column-type" data-placement="auto bottom" data-toggle="tooltip" title="$_('OS')">$_("OS")</span><!--
> +                  --><span class="column-version" data-placement="auto bottom" data-toggle="tooltip" title="$_('Version')">$_("Version")</span><!--
> +                  --><span class="column-processors" data-placement="auto bottom" data-toggle="tooltip" title="$_('Current CPUs')">$_("Current CPUs")</span><!--
> +                  --><span class="column-memory" data-placement="auto bottom" data-toggle="tooltip" title="$_('Memory')">$_("Memory")</span><!--
>                    --><span class="column-action" style="display:none"><span class="sr-only">$_("Actions")</span></span>
>                      </li>
>                      <li>
> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
> index 728ce6d..4b5a407 100644
> --- a/ui/pages/template-edit.html.tmpl
> +++ b/ui/pages/template-edit.html.tmpl
> @@ -218,13 +218,13 @@
>          <span class="template-storage-cell source" style="display:none">
>              <input class="template-storage-source" value={storageSource} type="text" style="display:none" />
>              <select id="source">
> -                <option value="pool">pool</option>
> -                <option value="path">path</option>
> +                <option value="pool">$_("pool")</option>
> +                <option value="path">$_("path")</option>
>              </select>
>          </span>
>          <span class="template-storage-cell storage-pool">
>              <input class="template-storage-name" value="{storageName}" type="text" style="display:none" />
> -            <select id="selectStorageName-{storageIndex}" class="selectStorageName"></select>
> +            <select id="selectStorageName-{storageIndex}" data-none-selected-text="$_('Nothing selected')" class="selectStorageName"></select>
>          </span>
>          <span class="template-storage-cell storage-path" style="display:none">
>              <input class="template-storage-path storage-path form-control" value="{storagePath}" type="text" />
> @@ -238,12 +238,12 @@
>          <span class="template-storage-cell format">
>              <input class="template-storage-disk-format" value={storageDiskFormat} type="text" style="display:none" />
>              <select id="diskFormat">
> -               <option value="qcow2">qcow2</option>
> -               <option value="raw">raw</option>
> -               <option value="qcow">qcow</option>
> -               <option value="qed">qed</option>
> -               <option value="vmdk">vmdk</option>
> -               <option value="vpc">vpc</option>
> +               <option value="qcow2">$_("qcow2")</option>
> +               <option value="raw">$_("raw")</option>
> +               <option value="qcow">$_("qcow")</option>
> +               <option value="qed">$_("qed")</option>
> +               <option value="vmdk">$_("vmdk")</option>
> +               <option value="vpc">$_("vpc")</option>
>              </select>
>          </span>
>          <span class="pull-right">
> @@ -254,7 +254,7 @@
>  <script id="template-interface-tmpl" type="text/html">
>      <div class="item" id={networkID}>
>          <span class="template-interface-cell network">
> -            <select></select>
> +            <select data-none-selected-text="$_('Nothing selected')"></select>
>          </span>
>          <span class="template-interface-cell type">
>              <input value={type} readonly=true class="form-control" type="text" />
> @@ -270,13 +270,13 @@
>              <select></select>
>          </span>
>          <span class="template-interface-cell network">
> -            <select></select>
> +            <select data-none-selected-text="$_('Nothing selected')"></select>
>          </span>
>          <span class="template-interface-cell mode">
> -            <span class="label-mode hide">None</span>
> +            <span class="label-mode hide">$_("None")</span>
>              <select>
> -                <option value="bridge">bridge</option>
> -                <option value="vepa">vepa</option>
> +                <option value="bridge">$_("bridge")</option>
> +                <option value="vepa">$_("vepa")</option>
>              </select>
>          </span>
>          <span class="pull-right">
>


-- 
Lucio Correia
Software Engineer
IBM LTC Brazil




More information about the Kimchi-devel mailing list