From alinefm at linux.vnet.ibm.com Fri Mar 20 09:18:47 2015
Content-Type: multipart/mixed; boundary="===============6006223483821118148=="
MIME-Version: 1.0
From: Aline Manera <alinefm at linux.vnet.ibm.com>
To: kimchi-devel at ovirt.org
Subject: Re: [Kimchi-devel] [PATCH] Assign HTML labels to their corresponding
 elements
Date: Fri, 20 Mar 2015 10:18:35 -0300
Message-ID: <550C1E2B.9060504@linux.vnet.ibm.com>
In-Reply-To: 1426256791-31884-1-git-send-email-vianac@linux.vnet.ibm.com

--===============6006223483821118148==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable


Reviewed-by: Aline Manera <alinefm(a)linux.vnet.ibm.com>

On 13/03/2015 11:26, Cr=C3=ADstian Viana wrote:
> Somea UI form fields have labels which aren't assigned to those fields,
> which makes it more difficult to click and interact with them.
>
> Assign the labels to their corresponding elements, so when the user
> clicks on a label, the element also receives the click event. Also, some
> indentation levels have been changed.
>
> The elements which have their labels assigned to are:
>
> - The text box where the user types the file path in "New Template" >
> "Local image file";
> - All form elements in "Templates" > "Actions" > "Edit", tab
> "Processor";
> - The checkbox used to select a device in "Storage pools" > "Actions" >
> "Extend";
>
> Signed-off-by: Cr=C3=ADstian Viana <vianac(a)linux.vnet.ibm.com>
> ---
>   ui/pages/tabs/storage.html.tmpl  |  2 +-
>   ui/pages/template-add.html.tmpl  |  4 +++-
>   ui/pages/template-edit.html.tmpl | 20 ++++++++++++++++----
>   3 files changed, 20 insertions(+), 6 deletions(-)
>
> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html=
.tmpl
> index dbbaef9..6af7327 100644
> --- a/ui/pages/tabs/storage.html.tmpl
> +++ b/ui/pages/tabs/storage.html.tmpl
> @@ -128,7 +128,7 @@
>   </script>
>   <script id=3D"logicalPoolExtendTmpl" type=3D"html/text">
>       <div>
> -        <input type=3D"checkbox" value=3D"{path}" name=3D"devices">
> +        <input type=3D"checkbox" value=3D"{path}" name=3D"devices" id=3D=
"{name}">
>           <label for=3D"{name}">{path}</label>
>       </div>
>   </script>
> diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html=
.tmpl
> index eaafaa7..3b82c6c 100644
> --- a/ui/pages/template-add.html.tmpl
> +++ b/ui/pages/template-add.html.tmpl
> @@ -130,7 +130,9 @@
>                       <h2 class=3D"step-title">$_("Local Image File")</h2>
>                   </header>
>                   <div class=3D"body">
> -                    <span>File Path:</span><input type=3D"text"><button =
class=3D"ui-button-primary">$_("Create")</button>
> +                    <label for=3D"vm-image-local-text">File Path:</label>
> +                    <input type=3D"text" id=3D"vm-image-local-text" />
> +                    <button class=3D"ui-button-primary">$_("Create")</bu=
tton>
>                   </div>
>               </div>
>   =

> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.ht=
ml.tmpl
> index 7177bf0..3a84870 100644
> --- a/ui/pages/template-edit.html.tmpl
> +++ b/ui/pages/template-edit.html.tmpl
> @@ -118,11 +118,23 @@
>                   <div class=3D"template-tab-body"></div>
>               </form>
>               <form id=3D"form-template-processor">
> -                <div>$_("CPU Number"):<input type=3D"text" value=3D"1" i=
d=3D"cpus"></div>
> -                <div class=3D"manual"><input type=3D"checkbox">$_("Manua=
lly set CPU topology")</div>
> +                <div>
> +                    <label for=3D"cpus">$_("CPU Number"):</label>
> +                    <input type=3D"text" value=3D"1" id=3D"cpus" />
> +                </div>
> +                <div class=3D"manual">
> +                    <input type=3D"checkbox" id=3D"cpus-check" />
> +                    <label for=3D"cpus-check">$_("Manually set CPU topol=
ogy")</label>
> +                </div>
>                   <div class=3D"topology hide">
> -                    <div>$_("Cores"):<input type=3D"text" value=3D"1"  i=
d=3D"cores"></div>
> -                    <div>$_("Threads"):<select id=3D"threads"></select><=
/div>
> +                    <div>
> +                        <label for=3D"cores">$_("Cores"):</label>
> +                        <input type=3D"text" value=3D"1" id=3D"cores" />
> +                    </div>
> +                    <div>
> +                        <label for=3D"threads">$_("Threads"):</label>
> +                        <select id=3D"threads"></select>
> +                    </div>
>                   </div>
>               </form>
>           </div>


--===============6006223483821118148==--