Advanced sections makeover

2025-03-16 22:50:10 +03:00 · 2018-05-16 16:27:51 +02:00 · 2018-05-16 16:27:51 +02:00 · cba51889eb
commit cba51889eb
parent cef55358b0
7 changed files with 78 additions and 33 deletions
--- a/src/sunstone/public/app/app.js
+++ b/src/sunstone/public/app/app.js
@ -85,8 +85,14 @@ define(function(require) {
    $(document).on("click", ".accordion_advanced_toggle", function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass("active");
+        if ($(this).hasClass("importation")) {
+          $(this).css("color", "").css("font-weight", "normal");
+        }
      } else {
        $(this).addClass("active");
+        if ($(this).hasClass("importation")) {
+          $(this).css("color", "#555").css("font-weight", "bold");
+        }
      }

      $(".content", $(this).closest(".accordion_advanced")).toggle();
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate.js
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate.js
@ -486,7 +486,8 @@ define(function(require) {
            $(".nicsContext"  + template_json.VMTEMPLATE.ID, context),
            { "forceIPv4": true,
              "securityGroups": Config.isFeatureEnabled("secgroups"),
-              "name": " "
+              "name": " ",
+              "fieldset": false
            });

          VMGroupSection.insert(template_json,
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs
@ -48,7 +48,7 @@
  <div class="row">
    <div class="medium-5 small-12 columns template_user_inputs{{element.ID}}"></div>
  </div>
-  {{#advancedSection (tr "Network") }}
+  {{#advancedImportationSection "<i class=\"fas fa-code-branch\"></i>" (tr "Network") }}
  {{#isFeatureEnabled "show_vnet_instantiate"}}
  <div class="row">
    <div class="small-12 columns nicsContext{{element.ID}}">
@ -57,15 +57,12 @@
    </div>
  </div>
  {{/isFeatureEnabled}}
-  {{/advancedSection}}
-  {{#advancedSection (tr "Instantiate as different user / group")}}
+  {{/advancedImportationSection}}
+  {{#advancedImportationSection "<i class=\"fas fa-user\"></i>" (tr "Instantiate as different User / Group")}}
  {{#isFeatureEnabled "show_as_uid_instantiate"}}
  <div class="row">
    <div class="small-12 columns usersContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-user"></i>
-        </legend>
        <div class="provision_uid_selector{{element.ID}}" data-tab-content>{{{usersDatatable}}}</div>
      </fieldset>
    </div>
@ -75,23 +72,17 @@
  <div class="row">
    <div class="small-12 columns groupContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-users"></i>
-        </legend>
        <div class="provision_gid_selector{{element.ID}}" data-tab-content>{{{groupDatatable}}}</div>
      </fieldset>
    </div>
  </div>
  {{/isFeatureEnabled}}
-  {{/advancedSection}}
-  {{#advancedSection (tr "Deploy VM in a specific Host") }}
+  {{/advancedImportationSection}}
+  {{#advancedImportationSection "<i class=\"fas fa-hdd\"></i>" (tr "Deploy VM in a specific Host") }}
  {{#isFeatureEnabled "show_host_instantiate"}}
  <div class="row">
    <div class="small-12 columns hostContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-hdd"></i>
-        </legend>
        <div class="provision_host_selector{{element.ID}}" data-tab-content>{{{hostsDatatable}}}</div>
        <div class="row">
            <div class="large-12 columns">
@ -106,15 +97,12 @@
    </div>
  </div>
  {{/isFeatureEnabled}}
-  {{/advancedSection}}
-  {{#advancedSection (tr "Deploy VM in a specific Datastore") }}
+  {{/advancedImportationSection}}
+  {{#advancedImportationSection "<i class=\"fas fa-folder-open\"></i>" (tr "Deploy VM in a specific Datastore") }}
  {{#isFeatureEnabled "show_ds_instantiate"}}
  <div class="row">
    <div class="small-12 columns dsContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-folder-open"></i>
-        </legend>
        <div class="provision_ds_selector{{element.ID}}" data-tab-content>{{{dsDatatable}}}</div>
        <div class="row">
            <div class="large-12 columns">
@ -129,27 +117,21 @@
    </div>
  </div>
  {{/isFeatureEnabled}}
-  {{/advancedSection}}
-  {{#advancedSection (tr "Schedule Actions for VM") }}
+  {{/advancedImportationSection}}
+  {{#advancedImportationSection "<i class=\"fas fa-calendar-alt\"></i>" (tr "Schedule Actions for VM") }}
  <div class="row">
    <div class="large-12 columns actionContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-calendar-alt"></i>
-        </legend>
        {{{table_sched_actions}}}
      </fieldset>
    </div>
  </div>
-  {{/advancedSection}}
-  {{#advancedSection (tr "Associate VM to a VM Group") }}
+  {{/advancedImportationSection}}
+  {{#advancedImportationSection "<i class=\"fas fa-folder-open\"></i>" (tr "Associate VM to a VM Group") }}
  {{#isFeatureEnabled "show_vmgroup_instantiate"}}
  <div class="row">
    <div class="small-12 columns vmgroupContext{{element.ID}}">
      <fieldset>
-        <legend>
-          <i class="fas fa-globe"></i>
-        </legend>
        <div>
          <a class="button small provision_add_vmgroup">
            <i class="fas fa-lg fa-plus-circle add_vmgroup"></i> {{tr "VM Group"}}
@ -161,7 +143,7 @@
    </div>
  </div>
  {{/isFeatureEnabled}}
-  {{/advancedSection}}
+  {{/advancedImportationSection}}
  <div class="row">
    <div class="medium-6 small-12 columns vcenterVMFolderContext{{element.ID}}">
      <div class="provision_vcenter_vm_folder_selector">
--- a/src/sunstone/public/app/templates/helpers/advancedImportationSection.js
+++ b/src/sunstone/public/app/templates/helpers/advancedImportationSection.js
@ -0,0 +1,44 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2018, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+define(function(require) {
+    var Handlebars = require('hbs/handlebars');
+
+    var id = 0;
+
+    var advancedImportationSection = function(icon, title, options) {
+      id += 1;
+
+      var html_id = "advanced_section_" + id;
+
+      return new Handlebars.SafeString(
+        '<div class="accordion_advanced">'+
+          '<a href="#'+html_id+'" class="accordion_advanced_toggle importation">'+
+              '<i class="fas fa-fw fa-chevron-down"/>'+
+              '<i class="fas fa-fw fa-chevron-up"/>'+
+              '&nbsp;'+ icon + '&nbsp;' + title+
+          '</a>'+
+          '<div id="'+html_id+'" class="content" hidden>'+
+            options.fn(this) +
+          '</div>'+
+        '</div>'
+      );
+    };
+
+    Handlebars.registerHelper('advancedImportationSection', advancedImportationSection);
+
+    return advancedImportationSection;
+  });
--- a/src/sunstone/public/app/utils/nics-section.js
+++ b/src/sunstone/public/app/utils/nics-section.js
@ -294,10 +294,16 @@ define(function(require) {
  function _generate_provision_network_accordion(context, options) {
    context.off();
    var name = "Network";
-    if (options.name)
+    if (options.name){
      name = options.name;
+    }
+    var fieldset = true;
+    if (options.fieldset !== undefined){
+      fieldset = options.fieldset;
+    }
    context.html(TemplateSection({
-      "name": Locale.tr(name)
+      "name": Locale.tr(name),
+      "fieldset": fieldset
    }));

    if (options.hide_add_button == true){
--- a/src/sunstone/public/app/utils/nics-section/html.hbs
+++ b/src/sunstone/public/app/utils/nics-section/html.hbs
@ -1,7 +1,9 @@
 <fieldset>
+  {{#if fieldset}}
  <legend>
    <i class="fas fa-globe"></i> {{name}}
  </legend>
+  {{/if}}
  <div>
    <dl class="accordion provision_nic_accordion" data-accordion data-allow-all-closed="true">
    </dl>
--- a/src/sunstone/public/scss/_advanced-section.scss
+++ b/src/sunstone/public/scss/_advanced-section.scss
@ -24,6 +24,10 @@
    }
  }

+  .importation {
+    font-size: 1.2rem !important;
+  }
+
  .content {
    margin-top: 0.5rem;
  }