Looking for Vue, React, Angular, Laravel Version? Click here to Get 5 in 1 JS Bundle.
Upgrade Guide
Version 1.0.1 to Version 2.0.0
-
Updated Bootstrap to latest version 5.3.2
-
Removed the scss file and also the folder src/assets/scss/dark/_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
-
Updated the src/app/store/setting/state.ts file
-
Added the content in src/app/components/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts file
-
Updated the function in src/app/components/qompac-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts file
-
Updated the code in src/app/components/qompac-ui/widgets/setting-offcanvas/setting-offcanvas.component.html 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
oon(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
updateHtmlAttr({prop: 'data-bs-theme', value: setting.theme_scheme.value})
updateStorage(state.saveLocal, state.storeKey, createSettingObj(returnState(state, setting)))
return returnState(state, setting)
}),
Before
export const initialState: SettingState = {
"saveLocal": "sessionStorage",
"storeKey": "quisetting-angular",
"setting": {
"app_name": {
"value": "Qompac UI"
},
"theme_scheme_direction": {
"value": "ltr"
},
"theme_scheme": {
"value": "light"
},
"theme_color": {
"colors": {
"--primary": "#7016d0",
"--secondary": "#aca4bc",
"--tertiray": "#3FF0B9"
},
"value": "theme-color-default"
},
"theme_font_size": {
"value": "theme-fs-sm"
},
"page_layout": {
"value": "container"
},
"sidebar_color": {
"value": "sidebar-white"
},
"sidebar_type": {
"value": []
},
"sidebar_menu_style": {
"value": "sidebar-default navs-rounded-all"
}
}
}After
export const initialState: SettingState = {
"saveLocal": "sessionStorage",
"storeKey": "quisetting-angular",
"setting": {
"app_name": {
"value": "Qompac UI"
},
"theme_scheme_direction": {
"value": "ltr"
},
"theme_scheme": {
"value": "light"
},
"theme_color": {
"colors": {},
"value": "theme-color-default"
},
"theme_font_size": {
"value": "theme-fs-sm"
},
"page_layout": {
"value": "container"
},
"sidebar_color": {
"value": "sidebar-white"
},
"sidebar_type": {
"value": []
},
"sidebar_menu_style": {
"value": "sidebar-default navs-rounded-all"
}
}
}
isCollapsed = true;
primaryColor = '#3a57e8'
secondaryColor = '#91969E'
successColor = '#0D953E'
dangerColor = '#E30000'
warningColor = '#EC7D10'
infoColor = '#07A2C7' Before
changeThemeColor(object: any) {
const themeColor = {
colors: {
'--primary': object.primary,
'--secondary': object.secondary,
// '--tertiray': object.tertiray,
},
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))
}
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="#7016d0" data-setting="color">
</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" data-extra="secondary" type="color" id="custom-secondary-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 : '#2185F4', secondary: '#B1BBC6', 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' })"/>