[Kimchi-devel] [PATCH 2/2] Eject cdrom: Update html and css for eject cdrom

[Hongliang Wang]

Seems it's better to add a loading icon when ejecting a CDROM.

On 06/05/2014 04:22 PM, lvroyce at linux.vnet.ibm.com wrote:
> From: Royce Lv <lvroyce at linux.vnet.ibm.com>
>
> Add new button for eject and add the eject button css.
>
> Signed-off-by: Royce Lv <lvroyce at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/guest-edit.css  | 40 ++++++++++++++++++++++++++++++++++++
>   ui/css/theme-default/guest-media.css |  2 +-
>   ui/pages/guest-cdrom-edit.html.tmpl  |  4 ++--
>   ui/pages/guest-media.html.tmpl       |  8 ++++++++
>   4 files changed, 51 insertions(+), 3 deletions(-)
>
> diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
> index 36f7f75..9db0ccd 100644
> --- a/ui/css/theme-default/guest-edit.css
> +++ b/ui/css/theme-default/guest-edit.css
> @@ -117,6 +117,26 @@
>       background-position: 0 -108px;
>   }
>
> +.guest-edit-cdrom-button.insert {
> +    background-position: -27px 0;
> +}
> +
> +.guest-edit-cdrom-button.insert:hover {
> +    background-position: -27px -27px;
> +}
> +
> +.guest-edit-cdrom-button.insert:focus {
> +    background-position: -27px -54px;
> +}
> +
> +.guest-edit-cdrom-button.insert:active {
> +    background-position: -27px -81px;
> +}
> +
> +.guest-edit-cdrom-button.insert[disabled] {
> +    background-position: -27px -108px;
> +}
> +
>   .guest-edit-cdrom-button.replace {
>       background-position: -27px 0;
>   }
> @@ -137,6 +157,26 @@
>       background-position: -27px -108px;
>   }
>
> +.guest-edit-cdrom-button.eject {
> +    background-position: -54px 0;
> +}
> +
> +.guest-edit-cdrom-button.eject:hover {
> +    background-position: -54px -27px;
> +}
> +
> +.guest-edit-cdrom-button.eject:focus {
> +    background-position: -54px -54px;
> +}
> +
> +.guest-edit-cdrom-button.eject:active {
> +    background-position: -54px -81px;
> +}
> +
> +.guest-edit-cdrom-button.eject[disabled] {
> +    background-position: -54px -108px;
> +}
> +
>   .guest-edit-cdrom-button.detach {
>       background-position: -54px 0;
>   }
> diff --git a/ui/css/theme-default/guest-media.css b/ui/css/theme-default/guest-media.css
> index 3aee8ca..9eabebc 100644
> --- a/ui/css/theme-default/guest-media.css
> +++ b/ui/css/theme-default/guest-media.css
> @@ -38,5 +38,5 @@
>   }
>
>   #form-guest-media .guest-edit-cdrom-row-container input[type="text"] {
> -    width: 437px;
> +    width: 400px;
>   }
> diff --git a/ui/pages/guest-cdrom-edit.html.tmpl b/ui/pages/guest-cdrom-edit.html.tmpl
> index b95119f..9b74c44 100644
> --- a/ui/pages/guest-cdrom-edit.html.tmpl
> +++ b/ui/pages/guest-cdrom-edit.html.tmpl
> @@ -23,7 +23,7 @@
>   #silent _t = t.gettext
>   <div id="guest-cdrom-edit-window" class="window">
>       <header>
> -        <h1 class="title">$_("Replace a CDROM of VM")</h1>
> +        <h1 class="title">$_("Insert/Replace a CDROM of VM")</h1>
>           <div class="close">X</div>
>       </header>
>       <div class="content">
> @@ -60,7 +60,7 @@
>       <footer>
>           <div class="btn-group">
>               <button id="vm-cdrom-button-edit" class="btn-normal" disabled="disabled">
> -                <span class="text">$_("Replace")</span>
> +                <span class="text">$_("Submit")</span>
>               </button>
>           </div>
>       </footer>
> diff --git a/ui/pages/guest-media.html.tmpl b/ui/pages/guest-media.html.tmpl
> index 83ad6ab..4d6d023 100644
> --- a/ui/pages/guest-media.html.tmpl
> +++ b/ui/pages/guest-media.html.tmpl
> @@ -44,10 +44,18 @@
>               <input id="cdrom-{dev}" name="cdrom" type="text"
>                   data-vm="{vm}" data-dev="{dev}"
>                   value="{path}" readonly="readonly" />
> +            <button class="guest-edit-cdrom-button eject"
> +                data-vm="{vm}" data-dev="{dev}"
> +                title="$_("Eject")">
> +            </button>
>               <button class="guest-edit-cdrom-button replace"
>                   data-vm="{vm}" data-dev="{dev}"
>                   title="$_("Replace")">
>               </button>
> +            <button class="guest-edit-cdrom-button insert"
> +                data-vm="{vm}" data-dev="{dev}"
> +                title="$_("Insert")">
> +            </button>
>           </div>
>       </div>
>   </script>