Customization: initial implementation of the new design
This commit is contained in:
argirok
parent
58a3fdc40b
commit
f900fe32d8
|
|
@ -8,14 +8,23 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
|
|||
<div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker uk-flex uk-flex-middle'">
|
||||
<div class=" uk-flex">
|
||||
<div class="">
|
||||
<input class="uk-margin-small-left uk-width-small" color-picker [colorPicker]="color" [style.background]="color"
|
||||
<input class="uk-margin-small-left color-input" color-picker [colorPicker]="color" [style.background]="color"
|
||||
(colorPickerChange)="color=$event; colorChanged();"/>
|
||||
</div>
|
||||
<div class="uk-margin-small-left"> {{label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-text-warning uk-text-small 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" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</div>
|
||||
`,
|
||||
styles:[
|
||||
`
|
||||
.color-input{
|
||||
width:15px;
|
||||
height:8px;
|
||||
border-radius:3px;
|
||||
border:0.10000000149011612px solid #707070;
|
||||
}`
|
||||
]
|
||||
})
|
||||
|
||||
export class ColorComponent implements OnInit {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="background.imageFile" class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Image position</div>
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom uk-margin-large-top">Image position</div>
|
||||
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
||||
<div class="input-box ">
|
||||
<mat-form-field class="uk-width-1-1">
|
||||
|
|
|
|||
|
|
@ -1,99 +1,112 @@
|
|||
<ng-template #applyResetButtons>
|
||||
<!-- <div class="uk-margin-small">-->
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
(click)="resetLayout()">
|
||||
|
||||
<span>Reset all</span>
|
||||
</button>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary "
|
||||
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
|
||||
(click)="saveLayout()">
|
||||
Publish
|
||||
</button>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
(click)="resetLayout()">
|
||||
|
||||
<span>Reset all</span>
|
||||
</button>
|
||||
|
||||
</ng-template>
|
||||
|
||||
<div page-content class="admin-pages">
|
||||
<!--<div page-content class="admin-pages">
|
||||
<div header>
|
||||
</div>
|
||||
<div inner>
|
||||
<div class="" >
|
||||
<div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card">
|
||||
<div class = "uk-card-header" style="z-index: 2" uk-sticky="offset:100">
|
||||
<div class = " uk-margin-small-top uk-margin-small-bottom">
|
||||
<div inner>-->
|
||||
<!--(cancelEmitter)="toggleAction()"-->
|
||||
<div class="uk-modal-full uk-open" style = " display: block" uk-modal>
|
||||
<div class="uk-modal-dialog">
|
||||
<!--<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>-->
|
||||
<div class="uk-grid ">
|
||||
<div class="uk-width-medium">
|
||||
<div class=" uk-margin-left uk-margin-top">
|
||||
|
||||
<div class="uk-text-large" ><button class=" uk-close-large uk-margin-right" type="button" uk-close
|
||||
(click)="close()"
|
||||
></button> Customization
|
||||
<span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
|
||||
|
||||
<ng-container
|
||||
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
||||
<div>Customization <span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-padding">
|
||||
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
|
||||
<li [class.uk-active]="menuSelected === 'identity'"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
|
||||
><a
|
||||
(click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
|
||||
<li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
|
||||
class="title">Backgrounds & buttons
|
||||
</span></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-2-3@m uk-width-1-1@s">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h4"> Quick look
|
||||
<!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
|
||||
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
|
||||
</span>-->
|
||||
<!-- Options-->
|
||||
<div class="uk-margin-large-top">
|
||||
<!-- identity -->
|
||||
<div [class.active]="menuSelected == 'identity'"
|
||||
(click)="changeMenu('identity')">Identity
|
||||
<span *ngIf="menuSelected == 'identity'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'identity'" uk-icon="triangle-down"></span>
|
||||
</div>
|
||||
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
|
||||
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
|
||||
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
|
||||
[primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
|
||||
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
<div *ngIf="menuSelected == 'identity'" class="functionalities-panel">
|
||||
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
!draftCustomizationOptions.identityIsCustom;
|
||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">
|
||||
Colors
|
||||
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
||||
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Primary"></color>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div [class.active]="menuSelected == 'backgrounds'"
|
||||
(click)="changeMenu('backgrounds')">Background
|
||||
<span *ngIf="menuSelected == 'backgrounds'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'backgrounds'" uk-icon="triangle-down"></span>
|
||||
</div>
|
||||
<div class="uk-width-1-3@m uk-width-1-1@s">
|
||||
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" >Backgrounds & Buttons
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'backgrounds'" class="functionalities-panel">
|
||||
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<span>Custom style </span>
|
||||
<span >
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
|
||||
<!-- <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Backgrounds and buttons are set in the default values.
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-h5">Backgrounds</div>
|
||||
<div class="uk-margin-small-bottom uk-text-bold">Colors</div>
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="">
|
||||
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">Colors
|
||||
<!-- TODO reset only background colors-->
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
|
||||
[light]="false"></background>
|
||||
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
|
||||
|
|
@ -101,118 +114,273 @@
|
|||
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[light]="true"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
|
||||
<div class="uk-margin-medium-top uk-margin-small-bottom uk-text-bold">Form background image</div>
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
|
||||
Image
|
||||
<!-- TODO reset only image-->
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
|
||||
<div class="uk-margin-xlarge-top uk-text-uppercase uk-h5">Buttons </div>
|
||||
<ul class="uk-tab uk-margin-medium-top" uk-switcher>
|
||||
<li><a href="#">On dark background</a></li>
|
||||
<li><a href="#">On light background</a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-medium-top uk-margin">
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
</ul>
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div [class.active]="menuSelected == 'buttons'"
|
||||
(click)="changeMenu('buttons')">Buttons
|
||||
<span *ngIf="menuSelected == 'buttons'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'buttons'" uk-icon="triangle-down"></span>
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'buttons'" class="functionalities-panel">
|
||||
<!--<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">Buttons </div>-->
|
||||
<!-- TODO dropdown -->
|
||||
<ul class="uk-tab uk-margin-medium-top" uk-switcher>
|
||||
<li><a href="#">On dark background</a></li>
|
||||
<li><a href="#">On light background</a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-medium-top uk-margin">
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
|
||||
<div class=" customizationMenuItems uk-margin-small">
|
||||
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-2-3@m uk-width-1-1@s">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h4">Quick look
|
||||
</div>
|
||||
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
|
||||
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions" class="uk-width-expand">
|
||||
<div >
|
||||
<div class = " uk-padding">
|
||||
|
||||
<ng-container
|
||||
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
||||
|
||||
</div>
|
||||
<div class="uk-width-1-3@m uk-width-1-1@s">
|
||||
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" > Identity
|
||||
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
||||
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a></div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
!draftCustomizationOptions.identityIsCustom;
|
||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="uk-padding">
|
||||
<!--<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
|
||||
<li [class.uk-active]="menuSelected === 'identity'"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
|
||||
><a
|
||||
(click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
|
||||
<li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
|
||||
class="title">Backgrounds & buttons
|
||||
</span></a></li>
|
||||
|
||||
</ul>-->
|
||||
|
||||
<div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Backgrounds</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the visualisation of a background.</div>
|
||||
<!-- <div class="uk-grid">-->
|
||||
<!-- <div class="uk-width-2-3@m uk-width-1-1@s">-->
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||
<!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
|
||||
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
|
||||
</span>-->
|
||||
</div>
|
||||
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
|
||||
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
|
||||
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
|
||||
[primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
|
||||
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Identity is set in the default values.
|
||||
<!-- <div class="uk-width-1-3@m uk-width-1-1@s">
|
||||
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" >Backgrounds & Buttons
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<span>Custom style </span>
|
||||
<span >
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Backgrounds and buttons are set in the default values.
|
||||
</div>
|
||||
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-h5">Backgrounds</div>
|
||||
<div class="uk-margin-small-bottom uk-text-bold">Colors</div>
|
||||
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
|
||||
[light]="false"></background>
|
||||
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
|
||||
[light]="true"></background>
|
||||
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[light]="true"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
|
||||
<div class="uk-margin-medium-top uk-margin-small-bottom uk-text-bold">Form background image</div>
|
||||
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
|
||||
<div class="uk-margin-xlarge-top uk-text-uppercase uk-h5">Buttons </div>
|
||||
<ul class="uk-tab uk-margin-medium-top" uk-switcher>
|
||||
<li><a href="#">On dark background</a></li>
|
||||
<li><a href="#">On light background</a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-medium-top uk-margin">
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-h5">Colors</div>
|
||||
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Primary"></color>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'buttons'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Buttons</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the visualisation of a background.</div>
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||
|
||||
</div>
|
||||
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
|
||||
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
|
||||
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
|
||||
[primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
|
||||
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
[buttonView]="true"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" uk-padding-small ">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>
|
||||
<div
|
||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
|
||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
||||
class=" uk-width-1-1 refresh-indicator" >
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
||||
(click)="applyLayout()">
|
||||
<div>
|
||||
<icon name="refresh" ratio="2.5"></icon>
|
||||
|
||||
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
|
||||
<div class=" customizationMenuItems uk-margin-small">
|
||||
|
||||
<div class="uk-h4">Identity</div>
|
||||
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
|
||||
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
|
||||
<!--<div class="uk-grid">
|
||||
<div class="uk-width-2-3@m uk-width-1-1@s">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h4">Quick look
|
||||
</div>
|
||||
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
|
||||
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@m uk-width-1-1@s">
|
||||
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" > Identity
|
||||
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
||||
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a></div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
!draftCustomizationOptions.identityIsCustom;
|
||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Identity is set in the default values.
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-h5">Colors</div>
|
||||
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Primary"></color>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" uk-padding-small ">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
||||
<div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
|
||||
<div id="iframecontainer" class="">
|
||||
<div
|
||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
|
||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
||||
class=" uk-width-1-1 refresh-indicator" >
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
||||
(click)="applyLayout()">
|
||||
<div>
|
||||
<icon name="refresh" ratio="2.5"></icon>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">Style has been changed.</div>
|
||||
<div class="uk-margin-top"> Click to refresh the view.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 " style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;"
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">Style has been changed.</div>
|
||||
<div class="uk-margin-top"> Click to refresh the view.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div>-->
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, ElementRef, OnInit} from '@angular/core';
|
||||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
|
||||
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
||||
|
|
@ -12,6 +12,7 @@ import {LayoutService} from '../../openaireLibrary/services/layout.service';
|
|||
import {properties} from '../../../environments/environment';
|
||||
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -19,6 +20,12 @@ declare var UIkit;
|
|||
selector: 'customization',
|
||||
templateUrl: './customization.component.html',
|
||||
styles:[`
|
||||
|
||||
.functionalities-panel{
|
||||
border-left: 1px solid #EAEAEA;
|
||||
padding: 5px 10px;
|
||||
margin: 25px 0px;
|
||||
}
|
||||
.refresh-indicator {
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
border-radius: 4px;
|
||||
|
|
@ -26,14 +33,25 @@ declare var UIkit;
|
|||
color: white;
|
||||
}
|
||||
iframe, .refresh-indicator{
|
||||
height:900px;
|
||||
height:100%
|
||||
}
|
||||
#ipadcontainer{
|
||||
background-image: url('/assets/iPad Pro.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 900px;
|
||||
|
||||
}
|
||||
#iframecontainer{
|
||||
height: 64%;
|
||||
width: 73%;
|
||||
}
|
||||
`]
|
||||
})
|
||||
|
||||
export class CustomizationComponent implements OnInit {
|
||||
|
||||
menuSelected = 'identity';
|
||||
menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home';
|
||||
color = 'white';
|
||||
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
|
||||
publishedLayout: Layout = null;
|
||||
|
|
@ -42,17 +60,12 @@ export class CustomizationComponent implements OnInit {
|
|||
appliedCustomizationOptions: CustomizationOptions = null;
|
||||
previewUrl = null;
|
||||
previewCustomization = null;
|
||||
|
||||
|
||||
public showLoading = true;
|
||||
|
||||
|
||||
public communityId = null;
|
||||
|
||||
public properties: EnvProperties = null;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
public enabled = true;
|
||||
// @ViewChild('fsModal', { static: true }) fullscreen: FullScreenModalComponent;
|
||||
|
||||
constructor(private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -75,6 +88,13 @@ export class CustomizationComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
ngOnInit() {
|
||||
/* console.log(" open")
|
||||
|
||||
this.fullscreen.title = "Search and Add Projects";
|
||||
this.fullscreen.okButtonText = "Done";
|
||||
this.fullscreen.okButton = true;
|
||||
this.fullscreen.open();
|
||||
console.log(this.fullscreen)*/
|
||||
this.properties = properties;
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
|
|
@ -232,5 +252,11 @@ export class CustomizationComponent implements OnInit {
|
|||
copyObject(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
|
||||
|
||||
changeMenu( menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'){
|
||||
this.menuSelected = (this.menuSelected == menuSelected)?'home':menuSelected;
|
||||
}
|
||||
close(){
|
||||
this._router.navigate(["../info/profile"], {relativeTo:this.route});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,11 @@ import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
|
|||
import {BackgroundComponent} from './background.component';
|
||||
import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
|
||||
import {BackgroundUploadComponent} from "./background-upload.component";
|
||||
import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule
|
||||
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule, FullScreenModalModule
|
||||
],
|
||||
declarations: [
|
||||
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
|
||||
|
|
|
|||
|
|
@ -6,60 +6,52 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
@Component({
|
||||
selector: 'quick-look-backgrounds',
|
||||
template: `
|
||||
<!-- <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Search background</div>
|
||||
|
||||
<div class="uk-padding-small uk-text-center searchForm uk-height-medium uk-flex uk-flex-center uk-flex-middle" >
|
||||
<div>
|
||||
<h1 >Heading</h1>
|
||||
<input placeholder="Search for...">
|
||||
<quick-look-buttons
|
||||
[buttons]="buttonsOnLight"
|
||||
></quick-look-buttons>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
|
||||
|
||||
<div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" >
|
||||
<div>
|
||||
<h1 >Heading</h1>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
|
||||
<a class="">Link</a>
|
||||
<div class="uk-grid" [class.uk-child-width-1-2]="buttonView">
|
||||
<div>
|
||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Dark background</div>
|
||||
|
||||
<div class="uk-padding-small uk-text-center darkBackground uk-light uk-flex uk-flex-center uk-flex-middle"
|
||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||
<div *ngIf="!buttonView">
|
||||
<h1 >Heading</h1>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
|
||||
<a class="">Link</a>
|
||||
</div>
|
||||
<quick-look-buttons
|
||||
[buttons]="buttonsOnDark"
|
||||
></quick-look-buttons>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Light background</div>
|
||||
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle" >
|
||||
<div>
|
||||
<div [class.uk-margin-top]="!buttonView">
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div>
|
||||
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle"
|
||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||
<div *ngIf="!buttonView">
|
||||
<h1 >Heading</h1>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
|
||||
<a class="portal-link">Link</a>
|
||||
<br>
|
||||
<quick-look-buttons
|
||||
[buttons]="buttonsOnLight" ></quick-look-buttons>
|
||||
</div>
|
||||
|
||||
<quick-look-buttons
|
||||
[buttons]="buttonsOnLight" ></quick-look-buttons>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles:[`
|
||||
.darkBackground{
|
||||
background-color: var(--background-dark-color);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.lightBackground{
|
||||
background-color: var(--background-low-color);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.searchForm {
|
||||
background: var(--svgURL) transparent no-repeat center bottom;
|
||||
|
||||
|
||||
background-size: auto;
|
||||
background-size: cover !important;
|
||||
height: inherit;
|
||||
}
|
||||
`]
|
||||
|
||||
})
|
||||
|
|
@ -72,6 +64,7 @@ export class QuickLookBackgroundsComponent {
|
|||
@Input() formBackgroundColor;
|
||||
@Input() buttonsOnDark:ButtonsCustomization;
|
||||
@Input() buttonsOnLight:ButtonsCustomization;
|
||||
@Input() buttonView: boolean = false;
|
||||
constructor( private sanitizer: DomSanitizer) {
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue