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

Customization: updates for buttons customization 

add property connectportalUrl - use it for preview and build css methods
This commit is contained in:
argirok 2022-08-01 12:18:47 +03:00
parent dd37e12864
commit 9379c91e7e
9 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
<div input inputClass="flat x-small" [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-margin-small-top">
<div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-xsmall-bottom"> Border width (px)
<a *ngIf="width != widthPublished" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
@ -26,7 +26,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
<div input inputClass="flat x-small" [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
</div>
</div>
<div class="uk-margin-top uk-width-1-1">
<!--<div class="uk-margin-top uk-width-1-1">
<div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-xsmall-bottom"> Border style
<a *ngIf="style != stylePublished" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
@ -35,7 +35,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
<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>
</div>-->
</div>
`
})

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

@ -257,7 +257,10 @@
</span>
</div>
<ng-container *ngIf="draftCustomizationOptions.buttonsIsCustom">
<customize-buttons
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
[buttonsPublished]="publishedCustomizationOptions.buttons.lightBackground" [onlyBorder]="true"
></customize-buttons>
<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="flat x-small" input type="select"

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

@ -176,7 +176,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.publishedLayout.date.valueOf(), this.publishedLayout.layoutOptions).subscribe(data => {
this.subscriptions.push(this.layoutService.createCSS(this.communityId,this.properties.connectPortalUrl, this.publishedLayout.date.valueOf(), this.publishedLayout.layoutOptions).subscribe(data => {
console.log(data)
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
this.deleteOldImages();
@ -236,7 +236,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
let d = new Date();
let prefix = "-preview-" + d.valueOf();
this.subscriptions.push(this.layoutService.createCSS(this.communityId, prefix, this.appliedCustomizationOptions).subscribe(data => {
this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.properties.connectPortalUrl, prefix, this.appliedCustomizationOptions).subscribe(data => {
this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix);
}, error => {
@ -322,7 +322,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
getCommunityUrl(prefix) {
if(this.properties.environment == 'production' || this.properties.environment == 'beta')
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu' + (prefix?("?previewLayout=" + prefix):"");
return "http://scoobydoo.di.uoa.gr:4200" + (prefix?("?previewLayout=" + prefix):"");
return this.properties.connectPortalUrl + (prefix?("?previewLayout=" + prefix):"");
}

25
src/app/pages/customization/customize-buttons.component.ts
View File

@ -7,17 +7,19 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
template: `
<div class="">
<border [style]="buttons.borderStyle" [width]=
"buttons.borderWidth" [radius]=
"buttons.borderRadius" (borderChange)=
" buttons.borderStyle = $event.style;
buttons.borderRadius = $event.radius;
buttons.borderWidth = $event.width; "
[stylePublished]="buttonsPublished.borderStyle"
[widthPublished]="buttonsPublished.borderWidth"
[radiusPublished]="buttonsPublished.borderRadius"
></border>
<div class="uk-grid uk-margin-top" >
<div *ngIf="onlyBorder" class="uk-margin-medium-bottom" >
<border [style]="buttons.borderStyle" [width]=
"buttons.borderWidth" [radius]=
"buttons.borderRadius" (borderChange)=
" buttons.borderStyle = $event.style;
buttons.borderRadius = $event.radius;
buttons.borderWidth = $event.width; "
[stylePublished]="buttonsPublished.borderStyle"
[widthPublished]="buttonsPublished.borderWidth"
[radiusPublished]="buttonsPublished.borderRadius"
></border>
</div>
<div *ngIf="!onlyBorder" class="uk-grid uk-margin-top" >
<div class="">
<div class=" uk-margin-xsmall-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors
<a *ngIf="buttons.color !=buttonsPublished.color || buttons.backgroundColor != buttonsPublished.backgroundColor || buttons.borderColor !=buttonsPublished.borderColor " class="uk-margin-small-left"
@ -70,6 +72,7 @@ export class CustomizeButtonsComponent {
@Input() buttons:ButtonsCustomization;
@Input() buttonsPublished:ButtonsCustomization;
@Input() light:boolean;
@Input() onlyBorder:boolean = false;
constructor() {
}
hasChanges(object1,object2):boolean{

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

@ -7,20 +7,6 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
selector: 'quick-look-backgrounds',
template: `
<div class="uk-grid uk-child-width-1-2" >
<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' + (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>
<div class="uk-margin-small-bottom">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>
<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 lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
@ -32,7 +18,21 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
<br>
</div>
<quick-look-buttons
[buttons]="buttonsOnLight" ></quick-look-buttons>
[buttons]="buttonsOnLight" [border]="buttonsOnLight" ></quick-look-buttons>
</div>
</div>
<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' + (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>
<div class="uk-margin-small-bottom">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" [border]="buttonsOnLight"
></quick-look-buttons>
</div>
</div>
</div>

9
src/app/pages/customization/quickLook-buttons.component.ts
View File

@ -18,7 +18,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
color: var(--color);
background-color: var(--background-color);
border-color: var(--border-color);
border-style: var(--border-style);
border-style: solid;
border-width: var(--border-width);
border-radius: var(--border-radius);
}
@ -35,6 +35,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
export class QuickLookButtonsComponent {
@Input() buttons:ButtonsCustomization;
@Input() border:ButtonsCustomization;
@HostBinding("attr.style")
public get valueAsStyle(): any {
@ -42,9 +43,9 @@ export class QuickLookButtonsComponent {
--color: ${this.buttons.color};
--background-color: ${this.buttons.backgroundColor};
--border-color: ${this.buttons.borderColor};
--border-style: ${this.buttons.borderStyle};
--border-width: ${this.buttons.borderWidth + 'px'};
--border-radius: ${this.buttons.borderRadius + 'px'};
--border-style: ${this.border.borderStyle};
--border-width: ${this.border.borderWidth + 'px'};
--border-radius: ${this.border.borderRadius + 'px'};
--color-hover: ${this.buttons.onHover.color};
--background-color-hover: ${this.buttons.onHover.backgroundColor};
--border-color-hover: ${this.buttons.onHover.borderColor};

3
src/environments/environment.beta.ts
View File

@ -86,5 +86,6 @@ export let properties: EnvProperties = {
indexInfoAPI: "https://beta.services.openaire.eu/openaire/info/",
admins: ["rcd@openaire.eu"],
adminPortalURL: "https://beta.admin.connect.openaire.eu",
errorLink: '/error'
errorLink: '/error',
connectPortalUrl: 'https://beta.connect.openaire.eu'
};

3
src/environments/environment.prod.ts
View File

@ -86,5 +86,6 @@ export let properties: EnvProperties = {
indexInfoAPI: "https://services.openaire.eu/openaire/info/",
admins: ["rcd@openaire.eu"],
adminPortalURL: "https://admin.connect.openaire.eu",
errorLink: '/error'
errorLink: '/error',
connectPortalUrl: 'https://connect.openaire.eu'
};

3
src/environments/environment.ts
View File

@ -91,5 +91,6 @@ export let properties: EnvProperties = {
indexInfoAPI: 'http://beta.services.openaire.eu/openaire/info/',
admins: ['kostis30fylloy@gmail.com'],
adminPortalURL: 'https://beta.admin.connect.openaire.eu',
errorLink: '/error'
errorLink: '/error',
connectPortalUrl: 'http://scoobydoo.di.uoa.gr:4200'
};