[Kimchi-devel] [PATCH] Adjust Guest Edit Storage Tab Styles
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Jun 5 12:45:03 UTC 2014
On 05/06/2014 11:33 PM, Hongliang Wang wrote:
>
> On 05/07/2014 01:06 AM, Aline Manera wrote:
>>
>> 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?
> ACK.
Hongliang, have you already sent the final patch set?
I want to merge it as soon as possible for 1.2.1 release.
>>
>>
>> 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