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
  • Updated the src/app/store/setting/reducer.ts file
  • Before

     <on(theme_scheme, (state: SettingState, { value }): SettingState => {
        const setting = cloneDeep(state.setting)
        setting.theme_scheme.value = value
        updateBodyClass(Choices.SchemeChoice, setting.theme_scheme.value)
        updateColorRootVar(setting.theme_scheme.value, setting.theme_color, Choices.ColorChoice)
        updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
        return returnState(state, setting)
    }),
    on(theme_color, (state: SettingState, { colors }): SettingState => {
        const setting = cloneDeep(state.setting)
        forEach(colors, (value, key) => {
            setting.theme_color.colors[key] = value
        })
        setting.theme_color.value = colors.value
        updateColorRootVar(state.setting.theme_scheme.value, setting.theme_color, Choices.ColorChoice)
        updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
        return returnState(state, setting)
    }),
    >

    After

    <  on(theme_scheme, (state: SettingState, { value }): SettingState => {
            const setting = cloneDeep(state.setting);
            setting.theme_scheme.value = value;
            updateHtmlAttr({prop: 'data-bs-theme', value: setting.theme_scheme.value});
            updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)));
            return returnState(state, setting);
        }),
        
        on(theme_color, (state: SettingState, { colors, value }): SettingState => {
            const setting = cloneDeep(state.setting);
            forEach(colors, (value, key) => {
                setting.theme_color.colors[key] = value;
            });
            setting.theme_color.value = value;
            
            if (value == 'custom') {
                updateColorRootVar(setting.theme_color);
                updateHtmlAttr({prop: 'data-bs-theme-color', value: 'custom'});
            } else {
                updateHtmlAttr({prop: 'data-bs-theme-color', value: setting.theme_color.value});
            }
            updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)));
            return returnState(state, setting);
        }), >
  • Updated the src/app/store/setting/state.ts file
  • Before

    export const initialState: SettingState = {
        "theme_color": {
        "colors": {
                "--primary": "#3a57e8",
                "--info": "#08B1BA"
        },
        "value": "theme-color-default"
        },
        }
        export const defaultState: SettingDefaultState = {
        theme_scheme: {
        target: "body",
        choices: ["light", "dark", "auto"],
        type: "layout_design",
        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: "default",
        colors: {
                "--primary": "#3a57e8",
                "--info": "#08B1BA",
        },
        value: "theme-color-default",
        },
        } 

    After

    export const initialState: SettingState = {
        "theme_color": {
        "colors": {},
        "value": "theme-color-default"
        },
        }
        export const defaultState: SettingDefaultState = {
        theme_scheme: {
                target: "html",
                choices: ["light", "dark", "auto"],
                type: "layout_design",
                value: "light",
        },
        theme_color: {
                target: "html",
                choices: [
                        "color-1",
                        "color-2",
                        "color-3",
                        "color-4",
                        "color-5",
        ],
        type: "default",
        colors: {},
        value: "theme-color-default",
        },
        }
  • Added the content in src/app/components/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts file
  • isCollapsed = true;
    primaryColor = '#3a57e8'
    secondaryColor = '#91969E'
    successColor = '#0D953E'
    dangerColor = '#E30000'
    warningColor = '#EC7D10'
    infoColor = '#07A2C7' 
  • Updated the function in src/app/components/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts file
  • Before

    changeThemeColor(object: any) {
        const themeColor = {
            colors: {
                '--primary': object.primary,
                '--info': object.info,
            },
            value: object.value
        }
        this.store.dispatch(SettingActions.theme_color(themeColor))
    }

    After

    changeThemeColor(object: any) {
        const themeColor: any = {
            colors: {},
            value: object.value
        }
        if(object.color){
            const key = '--'+object.name
            themeColor.colors[key] = object.color
        }
        this.store.dispatch(SettingActions.theme_color(themeColor))
    }
  • Updated the code in src/app/components/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.html 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" #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed">
      <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" type="color" id="custom-primary-color" (input)="
            changeThemeColor({
              color: primaryColor,
              name: 'primary',
              value: 'custom'
            })
          " [(ngModel)]="primaryColor" value="#3a57e8" />
      </div>
      <div class="form-group d-flex d-flex justify-content-between align-items-center">
        <label class="" for="custom-secondary-color">Secondary</label>
        <input class="" name="theme_color" type="color" id="custom-secondary-color" (input)="
            changeThemeColor({
              color: secondaryColor,
              name: 'secondary',
              value: 'custom'
            })
          " [(ngModel)]="secondaryColor" value="#08B1BA" />
      </div>
      <div class="form-group d-flex d-flex justify-content-between align-items-center">
        <label class="" for="custom-success-color">Success</label>
        <input class="" name="theme_color" type="color" id="custom-success-color" (input)="
            changeThemeColor({
              color: successColor,
              name: 'success',
              value: 'custom'
            })
          " [(ngModel)]="successColor" value="#08B1BA" />
      </div>
      <div class="form-group d-flex d-flex justify-content-between align-items-center">
        <label class="" for="custom-warning-color">Warning</label>
        <input class="" name="theme_color" type="color" id="custom-warning-color" (input)="
            changeThemeColor({
              color: warningColor,
              name: 'warning',
              value: 'custom'
            })
          " [(ngModel)]="warningColor" value="#08B1BA" />
      </div>
      <div class="form-group d-flex d-flex justify-content-between align-items-center">
        <label class="" for="custom-danger-color">Danger</label>
        <input class="" name="theme_color" type="color" id="custom-danger-color" (input)="
            changeThemeColor({
              color: dangerColor,
              name: 'danger',
              value: 'custom'
            })
          " [(ngModel)]="dangerColor" value="#08B1BA" />
      </div>
      <div class="form-group d-flex d-flex justify-content-between align-items-center">
        <label class="" for="custom-info-color">Info</label>
        <input class="" name="theme_color" type="color" id="custom-info-color" (input)="
            changeThemeColor({
              color: infoColor,
              name: 'info',
              value: 'custom'
            })
          " [(ngModel)]="infoColor" value="#08B1BA" />
      </div>
    </div>
    

    Before

    <input 
        type="radio" 
        value="theme-color-blue" 
        class="btn-check" 
        name="theme_color" 
        id="theme-color-1" 
        (change)="changeThemeColor({primary : '#00C3F9', info : '#573BFF', value: 'theme-color-blue'})"
    >
    

    After

    <input type="radio" value="color-1" class="btn-check" name="theme_color" id="color-1" (change)="changeThemeColor({ value: 'color-1' })" />
    

Version 3.0.0 to Version 4.0.0

  • Added new folder in src/app/views/landing-pages
    • Added landing pages components src/app/components/landing-pages
    • Added landing pages layouts src/app/layouts/landing-modules
    • Added landing pages src/app/views/landing-pages
  • Added landing pages all images in src/assets/landing-modules/images
  • Added landing pages all css in src/assets/landing-modules/scss

Version 1.1.0 to Version 2.0.0

  • 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%)
  • 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 is the sidebar