Documentation

Ctrl+K
Vue

Summary

File name:- /src/app/store/setting/state.ts
  1. saveLocal:
    - for storing changes of setting panel there are 3 choices given below: 
    "saveLocal": "sessionStorage"
  2. app_name
    - for app name any name can be given as shown below: 
    "app_name": "Hope UI"
  3. theme_scheme_direction
    - for direction of theme there are 2 choices given below: 
    "theme_scheme_direction": "ltr"
  4. theme_scheme
    - for theme there are 3 choices given below: 
    "theme_scheme": "light"
  5. theme_color
    - for colour customization . Colors are in array 
    "theme_color",
colors: {
    "--primary": "#3a57e8",
    "--info": "#08B1BA",
}
  6. theme_style_appearance
    - for card apperance there are 4 options given below. Values are in array. 
    "theme_style_appearance": " ["theme-default"]
  7. theme_transition
    - for transition effect there are 2 options given below: 
    "theme_transition": "null"
  8. theme_font_size
    - for theme font size there area 3 options given below: 
    "theme_font_size": "theme-fs-md"
  9. page_layout
    - for layout of page there are 2 options: 
    "page_layout": "container-fluid"
  10. header_navbar
    - for header navbar there are 4 options given below: 
    "header_navbar": "default"
  11. header_banner
    - for header banner there are 3 options given below: 
    "header_banner": "default"
  12. sidebar_color
    - for sidebar color there are 4 options given below: 
    "sidebar_color": "sidebar-white"
  13. sidebar_type
    - for sidebar type there are 3 options given below:. Values are in array. 
    "sidebar_type":'sidebar-boxed'
  14. sidebar_menu_style
    - for sidebar menu-style there are 5 options given below: 
    "sidebar_menu_style":'navs-rounded-all'
  15. footer
    - for footer there are 2 options given below: 
    "footer": "default"
  16. body_font_family
    - for font style of body 
    "body_font_family": "null"
  17. heading_font_family
    - for font style of heading 
    "heading_font_family": "null"
    18. File Name: gulp.config.json
    "options": {
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "app_name": {
            "value": "Hope UI"
        },
        "theme_scheme_direction": {
            "value": "ltr"
        },
        "theme_scheme": {
            "value": "light"
        },
        "theme_style_appearance": {
            "value": [
                "theme-default"
            ]
        },
        "theme_color": {
            "colors": {
                "--primary": "#3a57e8",
                "--info": "#08B1BA"
            },
            "value": "theme-color-default"
        },
        "theme_transition": {
            "value": "theme-with-animation"
        },
        "theme_font_size": {
            "value": "theme-fs-md"
        },
        "page_layout": {
            "value": "container-fluid"
        },
        "header_navbar": {
            "value": "default"
        },
        "header_banner": {
            "value": "default"
        },
        "sidebar_color": {
            "value": "sidebar-white"
        },
        "sidebar_type": {
            "value": []
        },
        "sidebar_menu_style": {
            "value": "left-bordered"
        },
        "footer": {
            "value": "default"
        },
        "body_font_family": {
            "value": null
        },
        "heading_font_family": {
            "value": null
        }
    }
},

Remove customizer

Remove the SettingOffcanvas Component from src/app/components/hope-ui/widgets/setting-offcanvas

  1. Remove following object from src/app/model/setting.model.ts 
                        
export interface SettingState {
    setting: {
         theme_scheme: SettingValueMap,
        theme_style_appearance: SettingArrValueMap,
        theme_color: {
            colors: ObjectMap,
            value: string,
        },
        theme_transition: SettingValueMap,
        header_navbar: SettingValueMap,
        header_banner: SettingValueMap,
        sidebar_show: SettingArrValueMap,
        navbar_show: SettingArrValueMap,
        footer: SettingValueMap,
        body_font_family: SettingValueMap,
        heading_font_family: SettingValueMap,
    }
}

export interface SettingDefaultState {
    setting: {
        theme_scheme: DefaultVStringMap,
        theme_style_appearance: DefaultVArrayMap,
        theme_color: {
            target: string | Element,
            choices: Array <String>,
            type: string,
            colors: ObjectMap,
            value: string,
        },
        theme_transition: DefaultVStringMap,
        header_navbar: DefaultVStringMap,
        header_banner: DefaultVStringMap,
        sidebar_show: DefaultVArrayMap,
        navbar_show: DefaultVArrayMap,
        footer: DefaultVStringMap,
        body_font_family: DefaultVStringMap,
        heading_font_family: DefaultVStringMap,
    }
}
  2. Remove following objects from src/app/store/setting/actions.ts 
                
export const theme_scheme_direction = createAction('[Setting] theme_scheme_direction', props<{ value: string }>());
export const theme_scheme = createAction('[Setting] theme_scheme',props<{ value: string }>());
export const theme_style_appearance = createAction('[Setting] theme_style_appearance',props<{ value: Array <String> }>());
export const theme_color = createAction('[Setting] theme_color', props<{colors: any, value: string}>());
export const theme_transition = createAction('[Setting] theme_transition', props<{ value: string}>());
export const header_banner = createAction('[Setting] header_banner',props<{ value: string}>());
export const footer = createAction('[Setting] footer', props<{ value: string}>());
export const body_font_family = createAction('[Setting] body_font_family', props<{ value: string}>());
export const heading_font_family = createAction('[Setting] heading_font_family', props<{ value: string}>());
  3. Remove following objects from src/app/store/setting/reducer.ts 
                
const Choices = {
    SchemeChoice: DefaultSetting.theme_scheme.choices,
    ColorChoice: DefaultSetting.theme_color.choices,
    StyleAppearanceChoice: DefaultSetting.theme_style_appearance.choices,
    Animation: DefaultSetting.theme_transition.choices,
}


export const SettingReducer = createReducer(
  on(theme_scheme_direction, (state: SettingState, { value }) => {
    const setting = cloneDeep(state.setting)
    setting.theme_scheme_direction.value = value
    updateHtmlAttr({prop: 'dir',  value: setting.theme_scheme_direction.value})
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  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_style_appearance, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    if(setting.theme_style_appearance.value.includes(value[0])) {
      setting.theme_style_appearance.value = [...setting.theme_style_appearance.value.filter(item => item !== value[0])]
    } else {
      setting.theme_style_appearance.value = [...setting.theme_style_appearance.value, value[0]]
    }
    updateBodyClass(Choices.StyleAppearanceChoice, setting.theme_style_appearance.value)
    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)
  }),
  on(theme_transition, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.theme_transition.value = value
    updateBodyClass(Choices.Animation, setting.theme_transition.value)
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(header_navbar, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.header_navbar.value = value
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(header_banner, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.header_banner.value = value
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(sidebar_type, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    if(setting.sidebar_type.value.includes(value[0])) {
      setting.sidebar_type.value = [...setting.sidebar_type.value.filter(item => item !== value[0])]
    } else {
      setting.sidebar_type.value = [...setting.sidebar_type.value, value[0]]
    }
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(sidebar_show, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    if(setting.sidebar_show.value.includes(value[0])) {
      setting.sidebar_show.value = [...setting.sidebar_show.value.filter(item => item !== value[0])]
    } else {
      setting.sidebar_show.value = [...setting.sidebar_show.value, value[0]]
    }
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(navbar_show, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    if(setting.navbar_show.value.includes(value[0])) {
      setting.navbar_show.value = [...setting.navbar_show.value.filter(item => item !== value[0])]
    } else {
      setting.navbar_show.value = [...setting.navbar_show.value, value[0]]
    }
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),

  on(sidebar_menu_style, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.sidebar_menu_style.value = value
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(footer, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.footer.value = value
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(body_font_family, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.body_font_family.value = value
    setFontFamily('body', state.setting.body_font_family.value)
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  }),
  on(heading_font_family, (state: SettingState, { value }): SettingState => {
    const setting = cloneDeep(state.setting)
    setting.heading_font_family.value = value
    setFontFamily('heading', state.setting.heading_font_family.value)
    updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
    return returnState(state, setting)
  })
);
  4. Remove following objecta from src/app/store/setting/selector.ts 
            
export const themeSchemeDirectionSelector = createSelector(
  (state: AppState) => state.settingObject.setting.theme_scheme_direction.value,
  (value) => value
);
export const themeSchemeSelector = createSelector(
  (state: AppState) => state.settingObject.setting.theme_scheme.value,
  (value) => value
);
export const themeStyleAppearanceSelector = createSelector(
  (state: AppState) => state.settingObject.setting.theme_style_appearance.value,
  (value) => value
);
export const themeColorSelector = createSelector(
  (state: AppState) => state.settingObject.setting.theme_color,
  (value) => value
);
export const themeTransitionSelector = createSelector(
  (state: AppState) => state.settingObject.setting.theme_transition.value,
  (value) => value
);
export const headerNavbarSelector = createSelector(
  (state: AppState) => state.settingObject.setting.header_navbar.value,
  (value) => value
);
export const headerBannerSelector = createSelector(
  (state: AppState) => state.settingObject.setting.header_banner.value,
  (value) => value
);
export const sidebarHideSelector = createSelector(
  (state: AppState) => state.settingObject.setting.sidebar_show.value,
  (value) => value
);
export const navbarHideSelector = createSelector(
  (state: AppState) => state.settingObject.setting.navbar_show.value,
  (value) => value
);

export const footerSelector = createSelector(
  (state: AppState) => state.settingObject.setting.footer.value,
  (value) => value
);
export const bodyFontFamilySelector = createSelector(
  (state: AppState) => state.settingObject.setting.body_font_family.value,
  (value) => value
);
export const headingFontFamilySelector = createSelector(
  (state: AppState) => state.settingObject.setting.heading_font_family.value,
  (value) => value
);
  5. Remove following objects from src/app/store/setting/state.ts 
                
 export const initialState: SettingState = {
    "theme_scheme": {
      "value": "light"
    },
    "theme_style_appearance": {
      "value": [
        "theme-default"
      ]
    },
    "theme_color": {
      "colors": {
        "--primary": "#3a57e8",
        "--info": "#08B1BA"
      },
      "value": "theme-color-default"
    },
    "theme_transition": {
      "value": 'theme-with-animation'
    },
    "header_navbar": {
      "value": "default"
    },
    "header_banner": {
      "value": "default"
    },
    "sidebar_show": {
      "value": []
    },
    "navbar_show": {
      "value": []
    },
    "footer": {
      "value": "default"
    },
    "body_font_family": {
      "value": 'Inter'
    },
    "heading_font_family": {
      "value": 'Inter'
    }
  }


// Default Setting State
export const defaultState: SettingDefaultState = {
    theme_scheme: {
      target: "body",
      choices: ["light", "dark", "auto"],
      type: "layout_design",
      value: "light",
    },
    theme_style_appearance: {
      target: "body",
      choices: [
        "theme-default",
        "theme-flat",
        "theme-bordered",
        "theme-sharp",
      ],
      type: "layout_design",
      value: ["theme-default"],
    },
    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",
    },
    theme_transition: {
      target: "body",
      choices: ["theme-without-animation", "theme-with-animation"],
      type: "layout_design",
      value: 'theme-with-animation',
    },
    header_navbar: {
      target: ".iq-navbar",
      choices: [
        "default",
        "fixed",
        "navs-sticky",
        "nav-glass",
        "navs-transparent",
        "boxed",
        "hidden",
      ],
      type: "layout_design",
      value: "default",
    },
    header_banner: {
      target: ".iq-banner",
      choices: ["default", "navs-bg-color", "hide"],
      type: "layout_design",
      value: "default",
    },
    sidebar_show: {
      target: '[data-toggle="main-sidebar"]',
      choices: ["sidebar-none"],
      type: "layout_design",
      value: [],
    },
    navbar_show: {
      target: '[data-toggle="main-sidebar"]',
      choices: ["sidebar-none"],
      type: "layout_design",
      value: [],
    },
  
    footer: {
      target: ".footer",
      choices: ["sticky", "default"],
      type: "layout_design",
      value: "default",
    },
    body_font_family: {
      target: "body",
      choices: [],
      type: "variable",
      value: "Inter",
    },
    heading_font_family: {
      target: "heading",
      choices: [],
      type: "variable",
      value: "Inter",
    },
  }

  1. Remove object from src/app/layouts/default/index/index.component.ts

    1. sidebarHideSelector$: Observable <any>
    2. this.sidebarHideSelector$ = store.pipe(select(sidebarHideSelector))

  2. Remove following object from src/app/components/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts

      
themeScheme$: Observable <String>
  themeSchemeDirection$: Observable <String>
  themeStyleAppearanceSelector$: Observable<any>
  themeColorSelector$: Observable<any>
  themeTransitionSelector$: Observable <String>
  pageLayoutSelector$: Observable <String>
  headerNavbarSelector$: Observable <String>
  headerBannerSelector$: Observable <String>
  sidebarColorSelector$: Observable <String>
  sidebarTypeSelector$: Observable<any>
  sidebarHideSelector$: Observable<any>
  navbarHideSelector$: Observable<any>
  sidebarMenuStyleSelector$: Observable <String>
  footerSelector$: Observable <String>
  bodyFontFamilySelector$: Observable <String>
  headingFontFamilySelector$: Observable <String>
  saveLocalSelectSelect$: Observable <String>
  offcanvasRef: TemplateRef<any> | undefined;
    this.themeScheme$ = store.pipe(select(SettingSelectors.themeSchemeSelector));
    this.themeSchemeDirection$ = store.pipe(select(SettingSelectors.themeSchemeDirectionSelector));
    this.themeStyleAppearanceSelector$ = store.pipe(select(SettingSelectors.themeStyleAppearanceSelector));
    this.themeColorSelector$ = store.pipe(select(SettingSelectors.themeColorSelector));
    this.themeTransitionSelector$ = store.pipe(select(SettingSelectors.themeTransitionSelector));
    this.pageLayoutSelector$ = store.pipe(select(SettingSelectors.pageLayoutSelector));
    this.headerNavbarSelector$ = store.pipe(select(SettingSelectors.headerNavbarSelector));
    this.headerBannerSelector$ = store.pipe(select(SettingSelectors.headerBannerSelector));
    this.sidebarColorSelector$ = store.pipe(select(SettingSelectors.sidebarColorSelector));
    this.sidebarTypeSelector$ = store.pipe(select(SettingSelectors.sidebarTypeSelector));
    this.sidebarHideSelector$ = store.pipe(select(SettingSelectors.sidebarHideSelector));
    this.navbarHideSelector$ = store.pipe(select(SettingSelectors.navbarHideSelector));
    this.sidebarMenuStyleSelector$ = store.pipe(select(SettingSelectors.sidebarMenuStyleSelector));
    this.footerSelector$ = store.pipe(select(SettingSelectors.footerSelector));
    this.bodyFontFamilySelector$ = store.pipe(select(SettingSelectors.bodyFontFamilySelector));
    this.headingFontFamilySelector$ = store.pipe(select(SettingSelectors.headingFontFamilySelector));
    this.saveLocalSelectSelect$ = store.pipe(select(SettingSelectors.saveLocalSelector))
    Offcanvas Config
     For Customizer on rtl change
    this.themeSchemeDirection$.subscribe(value => {
      this.offcanvasService.dismiss('On RTL')
      if (value === 'rtl') {
        config.position = 'start'
      } else {
        config.position = 'end'
      }
      if (this.offcanvasRef !== undefined) {
        setTimeout(() => {
          this.offcanvasService.open(this.offcanvasRef)
        }, 0);
      }
    })
    openEnd(content: TemplateRef<any>) {
    this.offcanvasRef = content
    this.offcanvasService.open(this.offcanvasRef);
  }
  changeThemeScheme(value: string) {
    this.store.dispatch(SettingActions.theme_scheme({value: value}))
  }
  changeThemeSchemeDirection(value: string) {
    this.store.dispatch(SettingActions.theme_scheme_direction({value: value}))
  }
  changeThemeStyleAppearance(value: Array <String>) {
    this.store.dispatch(SettingActions.theme_style_appearance({value: value}))
  }
  changeThemeColor(object: any) {
    const themeColor = {
      colors: {
        '--primary': object.primary,
        '--info': object.info,
      },
      value: object.value
    }
    this.store.dispatch(SettingActions.theme_color(themeColor))
   }
  changeThemeTransition(value: string) {
    this.store.dispatch(SettingActions.theme_transition({value: value}))
  }
  changeHeaderBanner(value: string) {
    this.store.dispatch(SettingActions.header_banner({value: value}))
  }
  changeFooter(value: string) {
    this.store.dispatch(SettingActions.footer({value: value}))
  }
  changeBodyFontFamily(value: string) {
    this.store.dispatch(SettingActions.body_font_family({value: value}))
  }
  changeHeadingFontFamily(value: string) {
    this.store.dispatch(SettingActions.heading_font_family({value: value}))
  }

  3. Remove following object from src/app/components/hope-ui/navbar/default-navbar/default-navbar.component.ts

    1. this.navbarHideSelector$ = store.pipe(select(navbarHideSelector));
File Structure Next