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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@ declare var UIkit;
</div> </div>
<div *ngIf="background.imageFile" class="uk-margin-top"> <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-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']" > [options]="['top','center','bottom']" >
</div> </div>

6
src/app/pages/customization/border.component.ts
View File

@ -13,7 +13,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
</div> </div>
<div class="input-box"> <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> </div>
<div class="uk-margin-top"> <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> (click)="width = widthPublished; borderChanged()"> <icon name="reset"></icon></a>
</div> </div>
<div class="input-box"> <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> </div>
<div class="uk-margin-top uk-width-1-1"> <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>" 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> (click)="style = stylePublished;borderChanged()"> <icon name="reset"></icon></a>
</div> </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']" > [options]="['solid','dotted','dashed']" >
</div> </div>
</div> </div>

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

@ -149,7 +149,7 @@
</div> </div>
</div> </div>
<ng-template #identityOptions> <ng-template #identityOptions>
<div class="functionalities-container"> <div class="functionalities-container uk-text-small">
<div class="uk-margin-top"> <div class="uk-margin-top">
<div class=""> <div class="">
<span>Custom style</span> <span>Custom style</span>
@ -184,7 +184,7 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #backgroundOptions> <ng-template #backgroundOptions>
<div class="functionalities-container" > <div class="functionalities-container uk-text-small" >
<div class="uk-margin-top"> <div class="uk-margin-top">
<span>Custom style </span> <span>Custom style </span>
<span> <span>
@ -241,7 +241,7 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #buttonOptions> <ng-template #buttonOptions>
<div class="functionalities-container"> <div class="functionalities-container uk-text-small">
<div class=""> <div class="">
<div class="uk-margin-top uk-margin-large-bottom"> <div class="uk-margin-top uk-margin-large-bottom">
<span>Custom style </span> <span>Custom style </span>
@ -258,9 +258,9 @@
</div> </div>
<ng-container *ngIf="draftCustomizationOptions.buttonsIsCustom"> <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-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" [(value)]="buttonsSelected"
[options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]"> [options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]">

5
src/app/pages/customization/customization.component.ts
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.dark.color = backgrounds.dark.color;
this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color; this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color; this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
this.resetImageTo(backgrounds);
} }
resetImageTo(backgrounds) { resetImageTo(backgrounds) {
@ -276,11 +277,11 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions); this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
} }
resetButtonsToDefault(){ resetButtonsToDefault(){
this.resetButtonsTo(this.publishedCustomizationOptions.buttons); this.resetButtonsTo(this.defaultCustomizationOptions.buttons);
this.updateButtonsBasedOnIdentity(); this.updateButtonsBasedOnIdentity();
} }
resetBackgroundsToDefault(){ resetBackgroundsToDefault(){
this.resetBackgroundsTo(this.publishedCustomizationOptions.backgrounds); this.resetBackgroundsTo(this.defaultCustomizationOptions.backgrounds);
this.updateBackgroundsBasedOnIdentity(); this.updateBackgroundsBasedOnIdentity();
} }
resetButtonsTo(buttonsToRevert) { resetButtonsTo(buttonsToRevert) {

2
src/app/pages/customization/quickLook-backgrounds.component.ts
View File

@ -23,7 +23,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
</div> </div>
<div> <div>
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</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" > [class.uk-height-small]="buttonView" >
<div *ngIf="!buttonView" class="uk-margin-small-bottom"> <div *ngIf="!buttonView" class="uk-margin-small-bottom">
<h1 >Heading</h1> <h1 >Heading</h1>