MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 Wiki Activity

Customization configuration: add fontsDarkMode attribute for hero section

This commit is contained in:
argirok 2023-06-09 13:58:35 +03:00
parent b0b277278e
commit 1320fb7a75
3 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/pages/customization/background-upload.component.ts
View File

@ -26,6 +26,7 @@ declare var UIkit;
class="uk-float-right uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link">
<icon name="delete" [defaultSize]="true" [flex]="true"></icon>
</a>
<div class="uk-text-small uk-margin-large-top uk-text-center" [class.uk-light]="!light">Lorem ipsum dolor sit amet...</div>
</div>
</div>
<div *ngIf="background.imageFile" class="uk-margin-top">
@ -51,7 +52,7 @@ export class BackgroundUploadComponent implements OnInit {
@Input() oldBackground;
// @Input() light:boolean;
@Input() communityId: string = "";
@Input() light:boolean; //fonts mode
public file: File;
// public photo: string | ArrayBuffer;
private maxsize: number = 2000 * 1024;

2
src/app/pages/customization/color.component.ts
View File

@ -17,7 +17,7 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
</div>
</div>
<div class="uk-text-warning uk-text-xsmall uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</div>
<div class="uk-text-warning uk-text-xsmall uk-margin-small-left" [class.uk-invisible]="!warningForContrast(color)">Contrast ratio may be too low.</div>
`,
styles:[
`

32
src/app/pages/customization/customization.component.html
View File

@ -207,11 +207,35 @@
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background>
<background label="Hero section" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true"
[light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId" description="The area under menu"></background>
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle">
Hero section image
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle uk-heading-divider">
Hero section
</div>
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
Fonts
<a *ngIf="( publishedCustomizationOptions.backgrounds.form.fontsDarkMode != draftCustomizationOptions.backgrounds.form.fontsDarkMode )
&& draftCustomizationOptions.backgroundsIsCustom"
(click)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=publishedCustomizationOptions.backgrounds.form.fontsDarkMode;" class="uk-margin-small-left uk-button-link"
uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>">
<icon name="settings_backup_restore" flex="true"></icon>
</a>
</div>
<div class="uk-margin-small-top">
<span>Dark mode </span>
<span>
<mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
(change)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=!draftCustomizationOptions.backgrounds.form.fontsDarkMode;"
[attr.uk-tooltip]="'title:<div class=\'uk-width-large\'>' +
(draftCustomizationOptions.backgrounds.form.fontsDarkMode?'Change to light color mode if the hero section background is dark':'Change to dark mode if the hero section background is light')+'</div>'"
>
</mat-slide-toggle>
</span>
</div>
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
Image
<a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) )
&& draftCustomizationOptions.backgroundsIsCustom"
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left uk-button-link"
@ -222,7 +246,7 @@
<div class="uk-margin-medium-bottom">
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId"></background-upload>
[communityId]="communityId" [light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode" ></background-upload>
</div>
</div>
</div>