Re: [Kimchi-devel] [PATCH] Adjust Guest Edit Storage Tab Styles

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(a)linux.vnet.ibm.com&gt; > --- > 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">