[Kimchi-devel] [PATCH] Adjust Guest Edit Storage Tab Styles
Aline Manera
alinefm at linux.vnet.ibm.com
Tue May 6 17:06:52 UTC 2014
Thanks for the quick patch.
Just a comment:
While editing a CDROM path, we should be able to do that in current
window (instead of opening a new pop-up)
Yu Xing has did that way to network tab
- Select edit button
- the edit button becomes a save button
- the path label becomes a text input
- Select save button
- the save button becomes edit button
- the path text input becomes label
Does that make sense for you?
On 05/05/2014 11:35 PM, Hongliang Wang wrote:
> Keep consistent with interface setup tab.
>
> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
> ---
> ui/css/theme-default/guest-edit.css | 92 ++++++++++---------------------------
> ui/js/src/kimchi.guest_edit_main.js | 23 ++++++++--
> ui/pages/guest-edit.html.tmpl | 39 ++++++++--------
> 3 files changed, 63 insertions(+), 91 deletions(-)
>
> diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
> index 36f7f75..52c53eb 100644
> --- a/ui/css/theme-default/guest-edit.css
> +++ b/ui/css/theme-default/guest-edit.css
> @@ -89,74 +89,7 @@
> width: 400px;
> }
>
> -.guest-edit-cdrom-button {
> - background: url("../images/theme-default/guest-icon-sprite.png") no-repeat left top transparent;
> - border: none;
> - height: 25px;
> - vertical-align: middle;
> - width: 25px;
> -}
> -
> -.guest-edit-cdrom-button.attach {
> - margin: 15px 0 0 521px;
> -}
> -
> -.guest-edit-cdrom-button.attach:hover {
> - background-position: 0 -27px;
> -}
> -
> -.guest-edit-cdrom-button.attach:focus {
> - background-position: 0 -54px;
> -}
> -
> -.guest-edit-cdrom-button.attach:active {
> - background-position: 0 -81px;
> -}
> -
> -.guest-edit-cdrom-button.attach[disabled] {
> - background-position: 0 -108px;
> -}
> -
> -.guest-edit-cdrom-button.replace {
> - background-position: -27px 0;
> -}
> -
> -.guest-edit-cdrom-button.replace:hover {
> - background-position: -27px -27px;
> -}
> -
> -.guest-edit-cdrom-button.replace:focus {
> - background-position: -27px -54px;
> -}
> -
> -.guest-edit-cdrom-button.replace:active {
> - background-position: -27px -81px;
> -}
> -
> -.guest-edit-cdrom-button.replace[disabled] {
> - background-position: -27px -108px;
> -}
> -
> -.guest-edit-cdrom-button.detach {
> - background-position: -54px 0;
> -}
> -
> -.guest-edit-cdrom-button.detach:hover {
> - background-position: -54px -27px;
> -}
> -
> -.guest-edit-cdrom-button.detach:focus {
> - background-position: -54px -54px;
> -}
> -
> -.guest-edit-cdrom-button.detach:active {
> - background-position: -54px -81px;
> -}
> -
> -.guest-edit-cdrom-button.detach[disabled] {
> - background-position: -54px -108px;
> -}
> -
> +#form-guest-edit-storage .header,
> .guest-edit-interface .header {
> margin-bottom: 8px;
> padding-bottom: 2px;
> @@ -165,33 +98,56 @@
> overflow: hidden;
> }
>
> +#form-guest-edit-storage .body .item,
> .guest-edit-interface .body .item {
> margin: 5px 0;
> }
>
> +#form-guest-edit-storage .cell,
> .guest-edit-interface .cell {
> display: inline-block;
> width: 250px;
> }
>
> +#form-guest-edit-storage .cell.dev {
> + width: 60px;
> +}
> +
> +#form-guest-edit-storage .cell.path {
> + width: 440px;
> +}
> +
> +#form-guest-edit-storage .cell.path input {
> + box-sizing: border-box;
> + width: 100%;
> +}
> +
> .guest-edit-interface .body select {
> width: 180px;
> padding: 0px;
> }
>
> +#form-guest-edit-storage .action-area,
> .guest-edit-interface .action-area {
> float: right;
> }
>
> +#form-guest-edit-storage .action-area {
> + line-height: 24px;
> +}
> +
> +#form-guest-edit-storage button,
> .guest-edit-interface button {
> width: 20px;
> height: 20px;
> }
>
> +#form-guest-edit-storage .header button,
> .guest-edit-interface .header button {
> margin-bottom: 1px;
> }
>
> +#form-guest-edit-storage .body button:not(:last-child),
> .guest-edit-interface .body button:not(:last-child) {
> margin-right: 2px;
> }
> diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
> index 0236e2d..ba5fef5 100644
> --- a/ui/js/src/kimchi.guest_edit_main.js
> +++ b/ui/js/src/kimchi.guest_edit_main.js
> @@ -36,7 +36,7 @@ kimchi.guest_edit_main = function() {
> kimchi.listVMStorages({
> vm: kimchi.selectedGuest
> }, function(storages) {
> - var container = $('#guest-edit-cdrom-row-container');
> + var container = $('#form-guest-edit-storage .body');
> $(container).empty();
>
> $.each(storages, function(index, storage) {
> @@ -53,9 +53,19 @@ kimchi.guest_edit_main = function() {
> };
>
> $('input[type="text"][name="cdrom"]', container).on('click', replaceCDROM);
> - $('.replace', container).on('click', replaceCDROM);
> + $('.replace', container).button({
> + icons: {
> + primary: 'ui-icon-pencil'
> + },
> + text: false
> + }).click(replaceCDROM);
>
> - $('.detach', container).on('click', function(e) {
> + $('.detach', container).button({
> + icons: {
> + primary: 'ui-icon-trash'
> + },
> + text: false
> + }).click(function(e) {
> e.preventDefault();
> var settings = {
> title : i18n['KCHAPI6004M'],
> @@ -172,7 +182,12 @@ kimchi.guest_edit_main = function() {
>
> refreshCDROMs();
>
> - $('#guest-edit-attach-cdrom-button').on('click', function(event) {
> + $('#guest-edit-attach-cdrom-button').button({
> + icons: {
> + primary: "ui-icon-plusthick"
> + },
> + text: false
> + }).click(function(event) {
> event.preventDefault();
> kimchi.window.open("guest-storage-add.html");
> });
> diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
> index 96d907e..3b7291a 100644
> --- a/ui/pages/guest-edit.html.tmpl
> +++ b/ui/pages/guest-edit.html.tmpl
> @@ -94,15 +94,12 @@
> </fieldset>
> </form>
> <form id="form-guest-edit-storage">
> - <fieldset class="guest-edit-fieldset">
> - <div id="guest-edit-cdrom-row-container" class="guest-edit-cdrom-row-container"></div>
> - <div>
> - <button id="guest-edit-attach-cdrom-button"
> - class="guest-edit-cdrom-button attach"
> - title='$_("Attach")'>
> - </button>
> - </div>
> - </fieldset>
> + <div class="header">
> + <span class="cell">$_("Device")</span>
> + <span class="cell">$_("Path")</span>
> + <button id="guest-edit-attach-cdrom-button" class="action-area attach"></button>
> + </div>
> + <div class="body"></div>
> </form>
> <form id="form-guest-edit-interface" class="guest-edit-interface">
> <div class="header">
> @@ -123,14 +120,16 @@
> </footer>
> </div>
> <script id="cdrom-row-tmpl" type="text/html">
> - <div>
> - <div class="guest-edit-wrapper-label">
> + <div class="item" id="cdrom-{dev}">
> + <span class="cell dev">
> <label for="cdrom-{dev}">{dev}</label>
> - </div>
> - <div class="guest-edit-wrapper-controls">
> + </span>
> + <span class="cell path">
> <input id="cdrom-{dev}" name="cdrom" type="text"
> data-vm="{vm}" data-dev="{dev}"
> value="{path}" readonly="readonly" />
> + </span>
> + <span class="action-area">
> <button class="guest-edit-cdrom-button replace"
> data-vm="{vm}" data-dev="{dev}"
> title='$_("Replace")'>
> @@ -139,7 +138,7 @@
> data-vm="{vm}" data-dev="{dev}"
> title='$_("Detach")'>
> </button>
> - </div>
> + </span>
> </div>
> </script>
> <script id="interface-tmpl" type="text/html">
> @@ -160,19 +159,21 @@
> <div>
> </script>
> <script id="disk-row-tmpl" type="text/html">
> - <div>
> - <div class="guest-edit-wrapper-label">
> + <div class="item" id="cdrom-{dev}">
> + <span class="cell dev">
> <label for="disk-{dev}">{dev}</label>
> - </div>
> - <div class="guest-edit-wrapper-controls">
> + </span>
> + <span class="cell path">
> <input id="disk-{dev}" name="disk" type="text"
> data-vm="{vm}" data-dev="{dev}"
> value="{path}" readonly="readonly" />
> + </span>
> + <span class="action-area">
> <button class="guest-edit-cdrom-button detach"
> data-vm="{vm}" data-dev="{dev}"
> title="$_("Detach")">
> </button>
> - </div>
> + </span>
> </div>
> </script>
> <script type="text/javascript">
More information about the Kimchi-devel
mailing list