[Kimchi-devel] [PATCH] Adjust Guest Edit Storage Tab Styles
Hongliang Wang
hlwang at linux.vnet.ibm.com
Wed May 7 02:33:12 UTC 2014
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.
>
>
> 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