[Kimchi-devel] [PATCH V4] Issue#305: Redesign bridged network UI section
Sheldon
shaohef at linux.vnet.ibm.com
Thu Jun 5 07:41:04 UTC 2014
On 06/04/2014 08:41 AM, Aline Manera wrote:
>
> Hi Wen Wang!
> Thanks for the patch! The UI looks better now but I still have some
> suggestions to make:
>
>
>
>
> In the red are you can see those 2 fields are redundant.
> We can only have the input box to collect the VLAN ID from user. If
> the input box is empty
> (without any value) means the user does not want to set enable VLAN.
> Otherwise we get the value
> and set it as the VLAN ID.
>
> So the fields to create a "Bridged" network are "Destination" (a combo
> box) and "VLAN ID" (an input box).
I have checked this with Mark.
He is the original designer of this VLAN ID.
we think the check box is used to tell the user that he want to enable vlan.
the vlan is disabled by default.
check box is more explicitly to show enable/disable.
just one input, usually user do not know input can imply enable/disable
function.
>
> I'd like to see those 2 fields like below:
>
> Destination: |_____________________|
> VLAN ID: |_____________________|
>
> In the first column the labels and in the second one the fields.
>
> We also need to use the default kimchi style to the combo box and the
> input box.
> The image below is from the "Edit Template" dialog.
>
>
>
>
> We need to apply the same style to the network dialog.
>
> Does that make sense for you?
>
>
> On 05/16/2014 12:29 AM, Wen Wang wrote:
>> Finished align vlan fields. Redesigned the pattern of the label positions
>>
>> V3 -> V4:
>>
>> Address to Hongliang Wang: Assigned "for" attribute for label to associate it with text box accordingly
>>
>> V2 -> V3:
>>
>> Address to Hongliang Wang: Have the additional margin place removed.
>>
>> v1 -> v2:
>>
>> Address to Hongliang Wang: Have the unrelated lines removed & Have the display format changed from table to div.
>> Address to Yuxin Huo: Have the unused IDs removed.
>>
>> Signed-off-by: Wen Wang<wenwang at linux.vnet.ibm.com>
>> ---
>> ui/css/theme-default/network.css | 21 ++++++++++++++++-----
>> ui/js/src/kimchi.network.js | 8 ++++----
>> ui/pages/tabs/network.html.tmpl | 34 +++++++++++++++++++++-------------
>> 3 files changed, 41 insertions(+), 22 deletions(-)
>>
>> diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
>> index 67f2aa2..176b277 100644
>> --- a/ui/css/theme-default/network.css
>> +++ b/ui/css/theme-default/network.css
>> @@ -209,19 +209,30 @@
>> vertical-align: top;
>> }
>>
>> -.network-config .destination {
>> - margin-left: 28px;
>> +.bridge-option-column {
>> + display: inline-block;
>> + margin-left: 56px;
>> + vertical-align: middle;
>> +}
>> +
>> +.bridge-option-column > div {
>> + height: 25px;
>> + line-height: 25px;
>> }
>>
>> -.network-config .VLAN {
>> - margin-left: 28px;
>> +.bridge-option-column select {
>> + height: 26px;
>> }
>>
>> -.network-config .VLAN input[type="text"] {
>> +.bridge-option-column input[type="text"] {
>> height: 25px;
>> width: 60px;
>> }
>>
>> +#labelNetworkVlanID {
>> + margin-left: 26px;
>> +}
>> +
>> .network-config .input-hint-icon {
>> margin: -1px 1px 0 0;
>> display: inline-block;
>> diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
>> index 7a331be..ca6d29b 100644
>> --- a/ui/js/src/kimchi.network.js
>> +++ b/ui/js/src/kimchi.network.js
>> @@ -275,13 +275,14 @@ kimchi.enableBridgeOptions = function(enable) {
>> $("#networkVlanID").prop("disabled", true);
>> $("#networkVlanID").val("");
>> $("#networkInterface").val("");
>> - $("#bridge-options").slideUp(100);
>> + $("#bridgeOptions").slideUp(100);
>> } else if (!$("#networkInterface").val()){
>> $("#networkInterface").prop("selectedIndex", 0);
>> - $("#bridge-options").slideDown(100);
>> + $("#bridgeOptions").slideDown(100);
>> }
>> };
>>
>> +
>> kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>> $("#networkTypeBri").prop("checked", isInterfaceAvail);
>> $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
>> @@ -289,7 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>> if (!isInterfaceAvail) {
>> kimchi.enableBridgeOptions(false);
>> } else {
>> - $("#bridge-options").slideDown(100);
>> + $("#bridgeOptions").slideDown(100);
>> }
>> };
>>
>> @@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() {
>> $("#networkVlanID").prop("disabled", true);
>> $("#enableVlan").prop("checked", false);
>> };
>> -
>> kimchi.setupNetworkFormEvent = function() {
>> $("#networkName").on("keyup", function(event) {
>> $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[a-zA-Z0-9_]+$/));
>> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
>> index e49b257..aedf7e8 100644
>> --- a/ui/pages/tabs/network.html.tmpl
>> +++ b/ui/pages/tabs/network.html.tmpl
>> @@ -46,7 +46,7 @@
>> <div class="section-container">
>> <div class="section-header">1. $_("Network Name")</div>
>> <div class="section-content">
>> - <input type="text" id="networkName">
>> + <input type="text" id="networkName" />
>> <div class="input-hint">
>> <span class="ui-icon ui-icon-info input-hint-icon"></span>
>> <span class="input-hint-text">$_("Alphanumeric and '_' characters only.")</span>
>> @@ -57,27 +57,35 @@
>> <div class="section-header">2. $_("Network Type")</div>
>> <div class="section-content">
>> <div class="input-container">
>> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated">
>> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
>> <label for="networkTypeIso">$_("Isolated: no physical network connection")</label>
>> </div>
>> <div class="input-container">
>> - <input type="radio" id="networkTypeNat" name="networkType" value="nat">
>> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
>> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
>> </div>
>> <div class="input-container">
>> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
>> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
>> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
>> </div>
>> - <div id="bridge-options">
>> - <div class="destination">
>> - <label for="networkInterface">$_("Destination"): </label>
>> - <select id="networkInterface"></select>
>> + <div id="bridgeOptions">
>> + <div class="bridge-option-column">
>> + <div>
>> + <label for="networkInterface">$_("Destination"): </label>
>> + </div>
>> + <div>
>> + <select id="networkInterface"></select>
>> + </div>
>> </div>
>> - <div class="VLAN">
>> - <label for="enableVlan">$_("Enable VLAN"): </label>
>> - <input id="enableVlan" type="checkbox" value=""/>
>> - <label for="networkVlanID">$_("VLAN ID"): </label>
>> - <input type="text" id="networkVlanID" disabled>
>> + <div class="bridge-option-column">
>> + <div>
>> + <input id="enableVlan" type="checkbox" value="" />
>> + <label for="enableVlan">$_("Enable VLAN"): </label>
>> + </div>
>> + <div>
>> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
>> + <input type="text" id="networkVlanID" disabled />
>> + </div>
>> </div>
>> </div>
>> </div>
>
>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
--
Thanks and best regards!
Sheldon Feng(???)<shaohef at linux.vnet.ibm.com>
IBM Linux Technology Center
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140605/67ee57bf/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 8954 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140605/67ee57bf/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9440 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140605/67ee57bf/attachment-0001.png>
More information about the Kimchi-devel
mailing list