11:17 p.m.
Hi Aline,
You need to add fontello into the code since we are using their icons
On 3/5/2015 12:50 AM, Aline Manera wrote:
I don't think it is working correctly.
I can not see the check boxes in the Template Edit dialog or in the
Network creation dialog - only the label is shown.
On 04/03/2015 07:07, Wen Wang wrote:
> Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
> ---
> ui/css/theme-default/network.css | 9 +++++++++
> ui/js/src/kimchi.network.js | 18 +++++++++++++++++-
> ui/pages/tabs/network.html.tmpl | 14 +++++++++-----
> 3 files changed, 35 insertions(+), 6 deletions(-)
>
> diff --git a/ui/css/theme-default/network.css
> b/ui/css/theme-default/network.css
> index e5a8e47..00e71c2 100644
> --- a/ui/css/theme-default/network.css
> +++ b/ui/css/theme-default/network.css
> @@ -264,4 +264,13 @@
>
> #networkConfig {
> padding-left: 30px;
> +}
> +
> +.vlan-check-section {
> + height: 18px;
> + line-height: 18px;
> +}
> +
> +.vlan-check-section label {
> + vertical-align: middle;
> }
> \ No newline at end of file
> diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
> index 81d5dd0..3284231 100644
> --- a/ui/js/src/kimchi.network.js
> +++ b/ui/js/src/kimchi.network.js
> @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() {
> data.connection = "bridge";
> data.interface = network.interface;
> if ($("#enableVlan").prop("checked")) {
> + $("#enableVlanIcon").removeClass("icon-check-empty-1");
> + $("#enableVlanIcon").addClass("icon-ok-squared");
> data.vlan_id = network.vlan_id;
> if (!(data.vlan_id >=1 && data.vlan_id <= 4094))
{
> kimchi.message.error.code('KCHNET6001E');
> @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() {
> "border-radius": "0",
> "opacity": "1"
> });
> + $("input:radio[name=networkType]").on("change", function()
{
> + $(".input-container
> label[name=networkTypeIcon]").removeClass("icon-dot-circled");
> + $(".input-container
> label[name=networkTypeIcon]").addClass("icon-circle-empty");
> + var networkChecked =
> $("input:radio[name=networkType]:checked").attr("id");
> + $("#" + networkChecked +
> "Icon").removeClass("icon-circle-empty");
> + $("#" + networkChecked +
"Icon").addClass("icon-dot-circled");
> + });
> kimchi.setupNetworkFormEvent();
> };
>
> @@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) {
> $("#networkFormOk span").text(i18n.KCHAPI6008M);
> okCallback();
> });
> - $("#enableVlan").on("click", function() {
> + $("#enableVlan").on("change", function() {
> $("#networkVlanID").prop("disabled", !this.checked);
> if (!this.checked) {
> + $("#enableVlanIcon").removeClass("icon-ok-squared");
> + $("#enableVlanIcon").addClass("icon-check-empty-1");
> $("#networkVlanID").slideUp(100);
> $("#labelNetworkVlanID").slideUp(100);
> $("#networkVlanID").val("");
> }
> else {
> + $("#enableVlanIcon").removeClass("icon-check-empty-1");
> + $("#enableVlanIcon").addClass("icon-ok-squared");
> $("#networkVlanID").slideDown(100);
> $("#labelNetworkVlanID").slideDown(100);
> }
> @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType =
> function(isInterfaceAvail) {
> $("#networkTypeBri").prop("checked", isInterfaceAvail);
> $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
> $("#networkTypeNat").prop("checked", !isInterfaceAvail);
> + var networkChecked =
> $("input:radio[name=networkType]:checked").attr("id");
> + $("#" + networkChecked +
"Icon").removeClass("icon-circle-empty");
> + $("#" + networkChecked +
"Icon").addClass("icon-dot-circled");
> if (!isInterfaceAvail) {
> kimchi.enableBridgeOptions(false);
> $("#networkBriDisabledLabel").show();
> diff --git a/ui/pages/tabs/network.html.tmpl
> b/ui/pages/tabs/network.html.tmpl
> index e2b1639..727f35d 100644
> --- a/ui/pages/tabs/network.html.tmpl
> +++ b/ui/pages/tabs/network.html.tmpl
> @@ -58,16 +58,19 @@
> <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" hidden />
> + <label id="networkTypeIsoIcon"
> class="icon-circle-empty" for="networkTypeIso"
> name="networkTypeIcon"></label>
> <label for="networkTypeIso">$_("Isolated:
no
> external 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" hidden />
> + <label id="networkTypeNatIcon"
> class="icon-circle-empty" for="networkTypeNat"
> name="networkTypeIcon"></label>
> <label for="networkTypeNat">$_("NAT:
outbound
> physical network connection only")</label>
> </div>
> <div class="input-container">
> <div class="bridged-inline">
> - <input type="radio"
id="networkTypeBri"
> name="networkType" value="bridged" />
> + <input type="radio"
id="networkTypeBri"
> name="networkType" value="bridged" hidden />
> + <label id="networkTypeBriIcon"
> class="icon-circle-empty" for="networkTypeBri"
> name="networkTypeIcon"></label>
> </div>
> <div class="bridged-inline">
> <label
for="networkTypeBri">$_("Bridged:
> Virtual machines are connected to physical network
> directly")</label><br />
> @@ -91,8 +94,9 @@
> </div>
> </div>
> </div>
> - <div>
> - <input id="enableVlan"
type="checkbox"
> value="" />
> + <div class="vlan-check-section">
> + <input id="enableVlan"
type="checkbox"
> value="" hidden />
> + <label id="enableVlanIcon"
> class="icon-check-empty-1" for="enableVlan"></label>
> <label for="enableVlan"
> id="labelEnableVlan">$_("Enable VLAN") </label>
> </div>
> <label for="networkVlanID"
> id="labelNetworkVlanID">$_("VLAN ID"): </label>