Modifications Client
Passage à Ionic 8
Pour le passage à Ionic 8 de nouvelles dépendances ont été installées. Pensez donc à mettre à jour vos paquets :
...
| Bloc de code |
|---|
| firstline | 216 |
|---|
| title | dev/user-frontend-ionic/angular.json |
|---|
|
},
"app-update": {
"projectType": "library",
"root": "projects/app-update",
"sourceRoot": "projects/app-update/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/app-update/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/app-update/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/app-update/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/app-update/src/test.ts",
"tsConfig": "projects/app-update/tsconfig.spec.json",
"karmaConfig": "projects/app-update/karma.conf.js"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"projects/auth/**/*.ts",
"projects/auth/**/*.html"
]
}
}
}
}, |
Reconstruction des modules Angular
Pour prendre en compte le nouveau module app-update, mais également les options d'affichage dans les widgets calendar et schedule, il est nécessaire de relancer le build des modules concernés :
| Bloc de code |
|---|
$> npm run module:build-all |
Modifications à prendre en compte dans les fichiers environment*.ts
...
Dans le fichier widget-external-feature.component.scss, ajoutez le bloc suivant au sein du bloc .feature-title :
| Bloc de code |
|---|
| firstline | 63 |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme/styles/features/widget-external-feature.component.scss |
|---|
| linenumbers | true |
|---|
|
app-custom-icon {
vertical-align: text-top;
} |
...
| Bloc de code |
|---|
| language | css |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme/styles/calendar/calendar.component.scss |
|---|
| linenumbers | true |
|---|
|
ndar.calendar-list-style {
display: block;
.ion-padding {
padding-top: 5px !important;
}
.events-container {
padding: 0;
}
.event {
align-items: center;
padding: 0.5rem 0;
}
hr {
border-top: 2px dashed var(--ion-color-primary-contrast);
margin: 0;
}
.event-part ion-text {
display: block
}
.event-part-date {
flex-grow: 1;
text-align: center;
border-right: 5px solid var(--ion-color-primary-contrast);
margin-right: 5px;
}
.event-part-info {
flex-grow: 3;
}
.light-font-color{
color: var(--app-font-color-for-dark-background-from-cms) !important;
hr {
border-top: 2px dashed var(--app-font-color-for-dark-background-from-cms);
margin: 0;
}
.event-part-date {
border-right: 5px solid var(--app-font-color-for-dark-background-from-cms);
}
}
.dark-font-color{
color: var(--app-font-color-for-light-background-from-cms) !important;
hr {
border-top: 2px dashed var(--app-font-color-for-light-background-from-cms);
}
.event-part-date {
border-right: 5px solid var(--app-font-color-for-light-background-from-cms);
}
}
}
.calendar-slider-style {
display: block;
ion-card {
scroll-snap-align: center;
}
ion-card.slider-theme-color {
box-shadow: var(--app-border-no-box-shadow);
//border: var(--app-border-width-7) solid var(--app-border-color-primary);
background-color: var(--ion-color-tertiary);
}
ion-card-content {
padding: 0.7rem 0;
height: 100%;
display: flex;
flex-direction: column;
}
.events-container {
padding: .5rem 0 0;
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-template-columns: 10px;
grid-auto-columns: 85%;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
&::-webkit-scrollbar {
display: none;
}
&::before,
&::after {
content: '';
width: 10px;
}
.event-day-hour {
display: flex;
flex-direction: row;
border-left-width: 4px;
border-left-style: solid;
align-items: center;
flex-wrap: nowrap;
border-color: var(--ion-color-secondary);
.hour {
padding-left: 1rem;
display: block;
}
.day {
padding-left: 1rem;
display: block;
ion-text {
display: block;
}
}
}
}
.card-labels {
margin-right: 0.6rem;
}
.card-labels-icons {
margin-right: 0.3rem;
}
.event-label {
padding: 1rem 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-additional {
display: flex;
padding: 0.7rem 0.5rem 0;
justify-content: space-evenly;
flex-wrap: wrap;
flex-grow: 2;
align-items: center;
ion-row:last-child {
margin-right: 0;
}
}
.slider-font-color{
color: var(--app-font-fix-light-color) !important;
}
.light-font-color{
color: var(--app-font-color-for-dark-background-from-cms) !important;
}
.dark-font-color{
color: var(--app-font-color-for-light-background-from-cms) !important;
}
} |
...
| Bloc de code |
|---|
| language | css |
|---|
| firstline | 40 |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme/styles/schedule/select-user.component.scss |
|---|
| linenumbers | true |
|---|
|
ion-input {
--highlight-color: var(--app-font-color-primary);
} |
dev/user-frontend-ionic/src/theme/app-theme-dist/styles/static-pages/static-pages-widget.component.scss
Un nouveau bloc app-custom-icon a été ajouté
...