Upgrade Guide

Version 4.0.0 to Version 4.1.0

  • Updated Bootstrap to latest version 5.3.2
  • Removed the scss file and also the folder src/assets/scss/custom/variables/_dark.scss
  • Removed the files and folder in the customizer folder and added two new files
    • src/assets/scss/customizer/root.scss
    • src/assets/scss/customizer/_variable.scss
  • Remove the Dark css link for the head
    • removed in /src/templates/components/partials/head.hbs file
    <link rel="stylesheet" href="../../../assets/css/dark.min.css?v=1.0.0"/>
  • Updated the Default Layout file in scss/src/templates/layouts/dashboard/default.hbs file
  • Before

     <html lang="en" dir="ltr">

    After

    <html lang="en" data-bs-theme="light" data-bs-theme-color="default" dir="ltr" >
  • Updated the Custom color options in scss/src/templates/components/widgets/setting-offcanvas.hbs file
  • Before

    <div class="collapse" id="custom-color">
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-primary-color">Primary</label>
    <input class="" name="theme_color" data-extra="primary" type="color"
    id="custom-primary-color" value="#3a57e8" data-setting="color">
    </div>
    <div class="form-group d-flex d-flex justify-content-between align-items-center">
    <label class="" for="custom-info-color">Secondary</label>
    <input class="" name="theme_color" data-extra="info" type="color"
    id="custom-info-color" value="#08B1BA" data-setting="color">
    </div>
    </div>

    After

    <div class="collapse" id="custom-color">
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-primary-color">Primary</label>
    <input class="" name="theme_color" data-extra="primary" type="color"
    id="custom-primary-color" value="#3a57e8" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-secondary-color">Secondary</label>
    <input class="" name="theme_color" data-extra="secondary" type="color"
    id="custom-secondary-color" value="#8a92a6" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-success-color">Success</label>
    <input class="" name="theme_color" data-extra="success" type="color"
    id="custom-success-color" value="#1aa053" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-danger-color">Danger</label>
    <input class="" name="theme_color" data-extra="danger" type="color"
    id="custom-danger-color" value="#c03221" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-warning-color">Warning</label>
    <input class="" name="theme_color" data-extra="warning" type="color"
    id="custom-warning-color" value="#f16a1b" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
    <label class="" for="custom-info-color">Info</label>
    <input class="" name="theme_color" data-extra="info" type="color"
    id="custom-info-color" value="#08B1BA" data-setting="color">
    </div>
    </div>
  • Setting.Js
    Updated in /assets/js/iqonic-script/setting.js file
  • Before

    theme_scheme: {
            target: "body",
            choices: ["light", "dark", "auto"],
            value: "light",
            },
    theme_color: {
        target: "body",
            choices: [
            "theme-color-blue",
            "theme-color-gray",
            "theme-color-red",
            "theme-color-yellow",
            "theme-color-pink",
            "theme-color-default",
            ],
    type: "variable",
    colors: {
        "--primary": "#3a57e8",
        "--info": "#08B1BA",
        },
    value: "theme-color-default",
        },

    After

    theme_scheme: {
            target: "html",
            choices: ["light", "dark", "auto"],
            value: "light",
        },
        
    theme_color: {
        target: "html",
        choices: [
            "default",
            "color-1",
            "color-2",
            "color-3",
            "color-4",
            "color-5",
        ],
    type: "variable",
    colors: {},
    value: "default",
        },

    Before

    IQSetting.prototype.theme_scheme = function (value) {
        if (typeof value !== typeof null) {
            this.__radioUpdate__("theme_scheme", value, () => {
                if (value == "auto") {
                    if (matchMedia("(prefers-color-scheme: light)").matches) {
                        document.querySelector("body").classList.add("light");
                    } else {
                        document.querySelector("body").classList.add("dark");
                    }
                }
                setTimeout(() => {
                    this.__updateThemeColor__("theme_color", null);
                }, 250);
            });
        }
    };
    
    // 4. theme_color function to the IQSetting prototype @params: value (string)
    IQSetting.prototype.theme_color = function (value) {
        if (typeof value !== typeof null) {
            if(value == 'custom') {
                this.__updateThemeColor__("theme_color");
            } else {
                this.__attributeUpdate__("theme_color", { prop: "data-bs-theme-color", value: value });
            }
        }
    };

    After

    IQSetting.prototype.theme_scheme = function(value) {
        if (typeof value !== typeof null) {
          this.__attributeUpdate__(
            "theme_scheme",
            { prop: "data-bs-theme", value: value },
            function(key, val) {
              document.querySelector("html").setAttribute("data-bs-theme", value);
              if (value == "auto") {
                if (matchMedia("(prefers-color-scheme: light)").matches) {
                  document.querySelector("html").setAttribute("data-bs-theme", "light");
                } else {
                  document.querySelector("html").setAttribute("data-bs-theme", "dark");
                }
              }
            }
          );
        }
      };
      
    // 4. theme_color function to the IQSetting prototype @params: value (string)
      IQSetting.prototype.theme_color = function(value) {
        if (typeof value !== typeof null) {
          this.__updateThemeColor__("theme_color", value);
        }
      };

Version 2.2.0 to Version 2.2.1

  • Updated bootstrap to latest version 5.2.3
    • Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar.scss file
    • Updated src/assets/scss/dark/layout-style/menu_style/_default_style.scss file
    • Updated src/assets/scss/dark/layout-style/menu_style/_default-sidebar.scss file
    • Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar_responsive.scss file
    • Updated src/assets/scss/customizer/components/dropdown/_dropdown.scss file
    • Replace src/assets/scss/bootstrap folder
  • We have added new Variable in the dark mode src/assets/scss/dark/_dark.scss

    New Variable Add

    $menu-color:#d7dbdf;
  • We have added new classes in the header

    • "header-hover-menu left-border" which are used by-default
    • Before

      <nav class="nav navbar navbar-expand-xl navbar-light iq-navbar">

      After

      <nav class="nav navbar navbar-expand-xl navbar-light iq-navbar header-hover-menu left-border">
  • We have upgrade old dropdown menu variable src/assets/scss/hope-ui-design-system/_variable.scss

    • "Dropdown Variable"
    • Before

      $dropdown-padding-x: 0 !default;
      $dropdown-box-shadow: 0 0.625rem 1.875rem rgba($black, .1) !default;

      After

      $dropdown-padding-x: .5rem !default
      $dropdown-box-shadow: 0 10px 15px -3px rgba($black, 10%), 0 4px 6px -2px rgba($black, 5%)

Version 1.1.3 to Version 2.0.0

  • Updated bootstrap to latest version 5.2.0
  • Removed all the mixin base scss of the sidebar and converted that into a simple way.
    • In src\assets\scss\hope-ui-design-system\layout-style\ file path has all the new sidebar scss.
    • In src\assets\scss\dark\layout-style\ file path all the dark mode new sidebar scss is given.
    • In src\assets\scss\rtl\components\menu-style\ file path all the RTL mode new sidebar scss is given.
    • Updated src\assets\scss\hope-ui-design-system\layout-style\ folder.
  • Removed all the mixin base sidebar scss code which is given bellow :

    • In src\assets\scss\hope-ui-design-system\components\menu-style folder has been removed where all the sidebar style was given
    • In src\assets\scss\hope-ui-design-system\helper\mixins\ siderbar mixin has been removed
      • _sidebar-nav-item-varient.scss (deleted)
      • _sidebar-varients.scss (deleted)
    • In src\assets\scss\dark\components\menu-style\ folder has been deleted.
  • We have added new classes in the sidebar which are

    • "sidebar sidebar-base" which are used by-default
    • Before

      <aside class="sidebar sidebar-default"></aside>

      After

      <aside class="sidebar sidebar-base"></aside>
    • Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
    • Before

      sidebar_menu_style: {
          target: '[data-toggle="main-sidebar"]',
          choices: [
          "navs-rounded",
          "navs-rounded-all",
          "navs-pill",
          "navs-pill-all",
          "left-bordered",
          "navs-full-width",
          ],
          value: "left-bordered",
      },

      After

      sidebar_menu_style: {
          target: '[data-toggle="main-sidebar"]',
          choices: [
          "sidebar-default navs-rounded",
          "sidebar-default navs-rounded-all",
          "sidebar-default navs-pill",
          "sidebar-default navs-pill-all",
          "left-bordered",
          "sidebar-default navs-full-width",
          ],
          value: "left-bordered",
      },
    • "sidebar-default" provide the background color to the selected option in the sidebar