[Kimchi-devel] [PATCH] Adjust Guest Edit Storage Tab Styles
Hongliang Wang
hlwang at linux.vnet.ibm.com
Fri Jun 6 02:04:23 UTC 2014
On 06/05/2014 08:45 PM, Aline Manera wrote:
> 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.
Oh sorry, have some delay on this. I'll send it today.
>
>>>
>>>
>>> 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