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
-
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/hope-ui/widgets/setting-offcanvas/setting-offcanvas.component.ts file
-
Updated the code in src/app/components/hope-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
< 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);
}), >
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",
},
}
isCollapsed = true;
primaryColor = '#3a57e8'
secondaryColor = '#91969E'
successColor = '#0D953E'
dangerColor = '#E30000'
warningColor = '#EC7D10'
infoColor = '#07A2C7'
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))
}
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
-
Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
-
"sidebar-default" provide the background color to the selected option is the sidebar
Before
<aside class="sidebar sidebar-default"></aside>
After
<aside class="sidebar sidebar-base"></aside>
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", },
-