Customization: more layout changes, apply fix to reset to default the background image

This commit is contained in:
argirok 2022-07-28 16:50:32 +03:00
parent 88de7310b5
commit dd37e12864
5 changed files with 13 additions and 12 deletions

View File

@ -28,7 +28,7 @@ declare var UIkit;
</div>
<div *ngIf="background.imageFile" class="uk-margin-top">
<div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-small-bottom uk-margin-large-top">position</div>
<div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="inner x-small" [(value)]="background.position"
<div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="flat x-small" [(value)]="background.position"
[options]="['top','center','bottom']" >
</div>

View File

@ -13,7 +13,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
</div>
<div class="input-box">
<div input inputClass="inner x-small" [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
<div input inputClass="flat x-small" [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
</div>
</div>
<div class="uk-margin-top">
@ -23,7 +23,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
(click)="width = widthPublished; borderChanged()"> <icon name="reset"></icon></a>
</div>
<div class="input-box">
<div input inputClass="inner x-small" [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
<div input inputClass="flat x-small" [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
</div>
</div>
<div class="uk-margin-top uk-width-1-1">
@ -32,7 +32,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
(click)="style = stylePublished;borderChanged()"> <icon name="reset"></icon></a>
</div>
<div class="uk-width-expand uk-padding-remove-left" input inputClass="inner x-small" type="select" [(value)]="style" (valueChange)="borderChanged()"
<div class="uk-width-expand uk-padding-remove-left" input inputClass="flat x-small" type="select" [(value)]="style" (valueChange)="borderChanged()"
[options]="['solid','dotted','dashed']" >
</div>
</div>

View File

@ -149,7 +149,7 @@
</div>
</div>
<ng-template #identityOptions>
<div class="functionalities-container">
<div class="functionalities-container uk-text-small">
<div class="uk-margin-top">
<div class="">
<span>Custom style</span>
@ -184,7 +184,7 @@
</div>
</ng-template>
<ng-template #backgroundOptions>
<div class="functionalities-container" >
<div class="functionalities-container uk-text-small" >
<div class="uk-margin-top">
<span>Custom style </span>
<span>
@ -241,7 +241,7 @@
</div>
</ng-template>
<ng-template #buttonOptions>
<div class="functionalities-container">
<div class="functionalities-container uk-text-small">
<div class="">
<div class="uk-margin-top uk-margin-large-bottom">
<span>Custom style </span>
@ -258,9 +258,9 @@
</div>
<ng-container *ngIf="draftCustomizationOptions.buttonsIsCustom">
<div class="uk-margin-top uk-margin-large-bottom uk-grid uk-flex uk-flex-middle">
<div class="uk-margin-top uk-margin-bottom uk-grid uk-flex uk-flex-middle">
<div class="uk-text-uppercase uk-text-bold uk-text-meta uk-margin-right">style on</div>
<div class="uk-width-expand uk-padding-remove-left " inputClass="inner x-small" input type="select"
<div class="uk-width-expand uk-padding-remove-left " inputClass="flat x-small" input type="select"
[(value)]="buttonsSelected"
[options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]">

View File

@ -259,6 +259,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
this.resetImageTo(backgrounds);
}
resetImageTo(backgrounds) {
@ -276,11 +277,11 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
}
resetButtonsToDefault(){
this.resetButtonsTo(this.publishedCustomizationOptions.buttons);
this.resetButtonsTo(this.defaultCustomizationOptions.buttons);
this.updateButtonsBasedOnIdentity();
}
resetBackgroundsToDefault(){
this.resetBackgroundsTo(this.publishedCustomizationOptions.backgrounds);
this.resetBackgroundsTo(this.defaultCustomizationOptions.backgrounds);
this.updateBackgroundsBasedOnIdentity();
}
resetButtonsTo(buttonsToRevert) {

View File

@ -23,7 +23,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
</div>
<div>
<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' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
<div [class]="'uk-padding-small uk-text-center uk-width-1-1 lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
[class.uk-height-small]="buttonView" >
<div *ngIf="!buttonView" class="uk-margin-small-bottom">
<h1 >Heading</h1>