Revision 60894
Added by Argiro Kokogiannaki almost 3 years ago
modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.module.ts | ||
---|---|---|
18 | 18 |
import {QuickLookButtonsComponent} from './quickLook-buttons.component'; |
19 | 19 |
import {MatFormFieldModule, MatSelectModule, MatSlideToggleModule} from '@angular/material'; |
20 | 20 |
import {CustomizeButtonsComponent} from './customize-buttons.component'; |
21 |
import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module'; |
|
22 |
import {IconsService} from '../../openaireLibrary/utils/icons/icons.service'; |
|
23 |
import {refresh, reset} from '../../openaireLibrary/utils/icons/icons'; |
|
21 | 24 |
|
22 | 25 |
@NgModule({ |
23 | 26 |
imports: [ |
24 |
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule |
|
27 |
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule
|
|
25 | 28 |
], |
26 | 29 |
declarations: [ |
27 | 30 |
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent |
... | ... | |
34 | 37 |
] |
35 | 38 |
}) |
36 | 39 |
export class CustomizationModule { |
40 |
constructor(private iconsService: IconsService) { |
|
41 |
this.iconsService.registerIcons([reset, refresh]); |
|
42 |
} |
|
37 | 43 |
} |
modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/Border.component.ts | ||
---|---|---|
4 | 4 |
@Component({ |
5 | 5 |
selector: 'border', |
6 | 6 |
template: ` |
7 |
<div class="uk-grid uk-margin-remove"> |
|
8 |
<div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Radius (px):</div> |
|
9 |
<div class="uk-width-small uk-padding-remove-left"> |
|
10 |
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0" /> |
|
7 |
<div class="uk-grid uk-child-width-1-2" > |
|
8 |
<div class="uk-margin-remove"> |
|
9 |
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div> |
|
10 |
<!-- <div class="uk-margin-bottom uk-form-hint ">hint</div>--> |
|
11 |
<div class="input-box"> |
|
12 |
<input class="uk-input " [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0" /> |
|
13 |
</div> |
|
11 | 14 |
</div> |
12 |
</div> |
|
13 |
<div class="uk-grid uk-margin-remove"> |
|
14 |
<div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Width (px):</div> |
|
15 |
<div class="uk-width-small uk-padding-remove-left"> |
|
16 |
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" /> |
|
15 |
<div class="uk-margin-remove"> |
|
16 |
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Button width (px)</div> |
|
17 |
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>--> |
|
18 |
<div class="input-box"> |
|
19 |
<input class="uk-input " [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" /> |
|
20 |
</div> |
|
17 | 21 |
</div> |
18 |
</div> |
|
19 |
<div class="uk-grid uk-margin-small-top"> |
|
20 |
<!-- <div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Style:</div>--> |
|
21 |
<!-- <div class="uk-width-small uk-padding-remove-left">--> |
|
22 |
<!--<!– <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="style" (ngModelChange)="borderChanged()"/>–>--> |
|
22 |
<div class="uk-margin-small-top"> |
|
23 |
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div> |
|
24 |
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>--> |
|
25 |
<div class="input-box "> |
|
26 |
<mat-form-field class="uk-width-1-1"> |
|
27 |
<mat-select class="" [(ngModel)]="style" name="{{'select_type_'}}" |
|
28 |
(ngModelChange)="borderChanged()" |
|
29 |
[disableOptionCentering]="true" |
|
30 |
panelClass=""> |
|
31 |
<mat-option [value]="'solid'" >solid</mat-option> |
|
32 |
<mat-option [value]="'dotted'" >dotted</mat-option> |
|
33 |
<mat-option [value]="'dashed'" >dashed</mat-option> |
|
23 | 34 |
|
24 |
<!-- <select [(ngModel)]="style" name="{{'select_type_'}}"--> |
|
25 |
<!-- class="uk-select uk-width-small" (ngModelChange)="borderChanged()">--> |
|
26 |
<!-- <option [value]="'solid'" >solid</option>--> |
|
27 |
<!-- <option [value]="'dotted'" >dotted</option>--> |
|
28 |
<!-- <option [value]="'dashed'" >dashed</option>--> |
|
29 |
<!-- </select>--> |
|
30 |
|
|
31 |
<!-- </div>--> |
|
32 |
<mat-form-field class="matSelectionFormField uk-width-1-1"> |
|
33 |
<mat-label>Style</mat-label> |
|
34 |
<mat-select class="matSelection" [(ngModel)]="style" name="{{'select_type_'}}" |
|
35 |
(ngModelChange)="borderChanged()" |
|
36 |
[disableOptionCentering]="true" |
|
37 |
panelClass="matSelectionPanel"> |
|
38 |
<mat-option [value]="'solid'" >solid</mat-option> |
|
39 |
<mat-option [value]="'dotted'" >dotted</mat-option> |
|
40 |
<mat-option [value]="'dashed'" >dashed</mat-option> |
|
41 |
|
|
42 |
</mat-select> |
|
43 |
</mat-form-field> |
|
35 |
</mat-select> |
|
36 |
</mat-form-field> |
|
37 |
</div> |
|
38 |
</div> |
|
44 | 39 |
</div> |
40 |
|
|
41 |
|
|
45 | 42 |
` |
46 | 43 |
}) |
47 | 44 |
|
modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customize-buttons.component.ts | ||
---|---|---|
6 | 6 |
selector: 'customize-buttons', |
7 | 7 |
template: ` |
8 | 8 |
|
9 |
<div class="uk-width-1-2@m uk-width-1-1@s">
|
|
9 |
<div class=""> |
|
10 | 10 |
<border [style]="buttons.borderStyle" [width]= |
11 | 11 |
"buttons.borderWidth" [radius]= |
12 | 12 |
"buttons.borderRadius" (borderChange)= |
13 | 13 |
" buttons.borderStyle = $event.style; |
14 | 14 |
buttons.borderRadius = $event.radius; |
15 | 15 |
buttons.borderWidth = $event.width; "></border> |
16 |
<color [color]="buttons.color" (colorChange)= |
|
17 |
" buttons.color = $event; " |
|
18 |
label="Fonts Color" |
|
19 |
[addMargin]="true"></color> |
|
20 |
<color [color]="buttons.backgroundColor" (colorChange)= |
|
21 |
" buttons.backgroundColor = $event; " |
|
22 |
label="Background Color" [addMargin]="true"></color> |
|
23 |
<color [color]="buttons.borderColor" (colorChange)= |
|
24 |
" buttons.borderColor = $event; " |
|
25 |
label="Border Color" |
|
26 |
[addMargin]="true" |
|
27 |
></color> |
|
28 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div> |
|
29 |
<color [color]="buttons.onHover.color" (colorChange)= |
|
30 |
" buttons.onHover.color = $event;" label="Fonts Color" |
|
31 |
></color> |
|
32 |
<color [color]="buttons.onHover.backgroundColor" |
|
33 |
(colorChange)= |
|
34 |
" buttons.onHover.backgroundColor = $event;" |
|
35 |
label="Background Color" [addMargin]="true"></color> |
|
36 |
<color [color]="buttons.onHover.borderColor" (colorChange)= |
|
37 |
" buttons.onHover.borderColor = $event;" |
|
38 |
label="Border Color" [addMargin]="true"></color> |
|
16 |
<div class="uk-grid uk-child-width-1-2 uk-margin-top" > |
|
17 |
<div class=""> |
|
18 |
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div> |
|
19 |
<color [color]="buttons.color" (colorChange)= |
|
20 |
" buttons.color = $event; " |
|
21 |
label="Fonts" |
|
22 |
></color> |
|
23 |
<color [color]="buttons.backgroundColor" (colorChange)= |
|
24 |
" buttons.backgroundColor = $event; " |
|
25 |
label="Background" ></color> |
|
26 |
<color [color]="buttons.borderColor" (colorChange)= |
|
27 |
" buttons.borderColor = $event; " |
|
28 |
label="Border" |
|
29 |
|
|
30 |
></color> |
|
31 |
</div> |
|
32 |
<div> |
|
33 |
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div> |
|
34 |
<div class=""> |
|
35 |
<color [color]="buttons.onHover.color" (colorChange)= |
|
36 |
" buttons.onHover.color = $event;" label="Fonts" |
|
37 |
></color> |
|
38 |
<color [color]="buttons.onHover.backgroundColor" |
|
39 |
(colorChange)= |
|
40 |
" buttons.onHover.backgroundColor = $event;" |
|
41 |
label="Background" ></color> |
|
42 |
<color [color]="buttons.onHover.borderColor" (colorChange)= |
|
43 |
" buttons.onHover.borderColor = $event;" |
|
44 |
label="Border" ></color> |
|
45 |
</div> |
|
46 |
</div> |
|
47 |
</div> |
|
39 | 48 |
</div> |
40 | 49 |
|
41 | 50 |
|
modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.html | ||
---|---|---|
18 | 18 |
<div header> |
19 | 19 |
</div> |
20 | 20 |
<div inner> |
21 |
<div class=""> |
|
21 |
<div class="" >
|
|
22 | 22 |
<div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card"> |
23 |
<div class = "uk-card-header"> |
|
23 |
<div class = "uk-card-header" style="z-index: 2" uk-sticky="offset:100">
|
|
24 | 24 |
<div class = " uk-margin-small-top uk-margin-small-bottom"> |
25 | 25 |
|
26 | 26 |
<ng-container |
... | ... | |
29 | 29 |
</div> |
30 | 30 |
</div> |
31 | 31 |
<div class="uk-padding"> |
32 |
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab> |
|
32 |
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
|
|
33 | 33 |
<li [class.uk-active]="menuSelected === 'identity'" |
34 | 34 |
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>" |
35 | 35 |
><a |
36 | 36 |
(click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li> |
37 | 37 |
<li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span |
38 |
class="title">Backgrounds & Buttons
|
|
38 |
class="title">Backgrounds & buttons
|
|
39 | 39 |
</span></a></li> |
40 | 40 |
|
41 | 41 |
</ul> |
... | ... | |
43 | 43 |
<div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small "> |
44 | 44 |
<div class="customizationMenuItems uk-margin-small"> |
45 | 45 |
<div class="uk-grid"> |
46 |
<div class="uk-width-1-2@m uk-width-1-1@s">
|
|
47 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> QUICK LOOK
|
|
46 |
<div class="uk-width-2-3@m uk-width-1-1@s">
|
|
47 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look
|
|
48 | 48 |
<!--<span class="uk-icon uk-link " (click)="resetBackgrounds()"> |
49 | 49 |
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" |
50 | 50 |
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1" |
... | ... | |
61 | 61 |
></quick-look-backgrounds> |
62 | 62 |
|
63 | 63 |
</div> |
64 |
<div class="uk-width-1-2@m uk-width-1-1@s">
|
|
64 |
<div class="uk-width-1-3@m uk-width-1-1@s">
|
|
65 | 65 |
|
66 | 66 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons |
67 | 67 |
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds) |
68 | 68 |
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) ) |
69 | 69 |
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom" |
70 |
(click)="resetBackgroundsAndButtonsToPublished();" |
|
70 |
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
|
71 | 71 |
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>" |
72 |
> <span uk-icon = "refresh"></span></a>
|
|
72 |
> <icon name="reset"></icon></a>
|
|
73 | 73 |
</div> |
74 | 74 |
|
75 |
<div > |
|
75 |
<div class="uk-margin-top">
|
|
76 | 76 |
<span>Custom style </span> |
77 | 77 |
<span > |
78 | 78 |
<mat-slide-toggle class="uk-margin-large-left" |
... | ... | |
87 | 87 |
</div> |
88 | 88 |
<div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small" |
89 | 89 |
style="font-style: italic"> |
90 |
Backgrounds and buttons colors are set in the default values.
|
|
90 |
Backgrounds and buttons are set in the default values. |
|
91 | 91 |
</div> |
92 | 92 |
|
93 |
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-top"> |
|
94 |
|
|
93 |
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
|
|
94 |
<div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div> |
|
95 | 95 |
<color [color]="draftCustomizationOptions.backgrounds.dark.color" |
96 |
label="Dark background color"
|
|
96 |
label="Dark" |
|
97 | 97 |
(colorChange)= |
98 | 98 |
" draftCustomizationOptions.backgrounds.dark.color = $event;"></color> |
99 | 99 |
<span *ngIf="!isForLightBackground(draftCustomizationOptions.backgrounds.dark.color)">The selected color may has lower contrast.</span> |
100 | 100 |
<color [color]="draftCustomizationOptions.backgrounds.light.color" |
101 |
label="Light background color"
|
|
101 |
label="Light" |
|
102 | 102 |
(colorChange)= |
103 | 103 |
" draftCustomizationOptions.backgrounds.light.color = $event;"></color> |
104 | 104 |
<span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.light.color)">The selected color may has lower contrast.</span> |
105 | 105 |
<color [color]="draftCustomizationOptions.backgrounds.form.color" |
106 |
label="Form background color"
|
|
106 |
label="Form" |
|
107 | 107 |
(colorChange)= |
108 | 108 |
" draftCustomizationOptions.backgrounds.form.color = $event;"></color> |
109 | 109 |
<span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.form.color)">The selected color |
110 | 110 |
may has lower contrast.</span> |
111 |
|
|
111 |
<div class="uk-margin-large-top uk-text-uppercase">Buttons </div> |
|
112 | 112 |
<ul class="uk-tab" uk-switcher> |
113 |
<li><a href="#">On dark <br>background</a></li>
|
|
114 |
<li><a href="#">On light <br>background</a></li>
|
|
113 |
<li><a href="#">On dark background</a></li> |
|
114 |
<li><a href="#">On light background</a></li> |
|
115 | 115 |
</ul> |
116 | 116 |
<ul class="uk-switcher uk-margin"> |
117 | 117 |
<li> |
... | ... | |
136 | 136 |
|
137 | 137 |
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small "> |
138 | 138 |
<div class=" customizationMenuItems uk-margin-small"> |
139 |
|
|
139 | 140 |
<div class="uk-grid"> |
140 | 141 |
<div class="uk-width-2-3@m uk-width-1-1@s"> |
141 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK |
|
142 |
<!--<span class="uk-icon uk-link " (click)="resetIdentityToPublished(); "> |
|
143 |
<span uk-icon = "refresh"></span> |
|
144 |
</span>--> |
|
142 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look |
|
145 | 143 |
</div> |
146 | 144 |
<div style="border-radius: 6px;" class="uk-alert uk-padding-small"> |
147 | 145 |
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor" |
... | ... | |
150 | 148 |
</div> |
151 | 149 |
<div class="uk-width-1-3@m uk-width-1-1@s"> |
152 | 150 |
|
153 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity Colors
|
|
151 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity |
|
154 | 152 |
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) && |
155 |
draftCustomizationOptions.identityIsCustom" |
|
153 |
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
|
|
156 | 154 |
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>" |
157 |
(click)="resetIdentityToPublished();"> <span uk-icon = "refresh"></span></a></div>
|
|
155 |
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a></div>
|
|
158 | 156 |
|
159 |
<div class="uk-form-controls">
|
|
160 |
<div> |
|
157 |
<div class="uk-margin-top">
|
|
158 |
<div class="">
|
|
161 | 159 |
<span>Custom style</span> |
162 | 160 |
<mat-slide-toggle class="uk-margin-large-left" |
163 | 161 |
[checked]="draftCustomizationOptions.identityIsCustom" |
... | ... | |
171 | 169 |
</div> |
172 | 170 |
<div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small" |
173 | 171 |
style="font-style: italic"> |
174 |
Identity colors are set in the default values.
|
|
172 |
Identity is set in the default values.
|
|
175 | 173 |
</div> |
176 | 174 |
</div> |
177 |
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-top"> |
|
178 |
<!-- <div>Primary color</div>-->
|
|
175 |
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
|
176 |
<div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>
|
|
179 | 177 |
<color [color]="draftCustomizationOptions.identity.mainColor" (colorChange)= |
180 | 178 |
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" |
181 |
label="Primary color"></color> |
|
182 |
<!-- <div class="uk-margin-small-top">Secondary color</div>--> |
|
179 |
label="Primary"></color> |
|
183 | 180 |
<color [color]="draftCustomizationOptions.identity.secondaryColor" (colorChange)= |
184 |
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary color"></color>
|
|
181 |
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color> |
|
185 | 182 |
</div> |
186 | 183 |
|
187 | 184 |
</div> |
... | ... | |
194 | 191 |
|
195 | 192 |
<div class=" uk-padding-small "> |
196 | 193 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div> |
197 |
<button class="uk-button uk-button-small uk-button-primary uk-float-right" |
|
198 |
[disabled]="!hasChanges(draftCustomizationOptions, appliedCustomizationOptions)" |
|
199 |
[title]="(hasChanges(draftCustomizationOptions, appliedCustomizationOptions)?'Apply changes to preview on the right':'No changes to apply')" |
|
200 |
(click)="applyLayout();">Apply |
|
201 |
</button> |
|
202 |
<div class="uk-padding-remove-left uk-width-1-1"> |
|
203 |
<!-- sandbox="allow-scripts allow-same-origin" --> |
|
204 |
<iframe *ngIf="previewUrl" [src]="previewUrl" class="" width="100%" height="700px" |
|
205 |
sandbox="allow-scripts allow-same-origin" ></iframe> |
|
194 |
<div |
|
195 |
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center"> |
|
196 |
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)" |
|
197 |
class=" uk-width-1-1 refresh-indicator" > |
|
198 |
<div class="uk-position-relative uk-height-1-1"> |
|
199 |
<div class="uk-position-center uk-text-center clickable" |
|
200 |
(click)="applyLayout()"> |
|
201 |
<div> |
|
202 |
<icon name="refresh"></icon> |
|
203 |
</div> |
|
204 |
<span>Style has been changed. Click to refresh the view.</span> |
|
205 |
</div> |
|
206 |
</div> |
|
207 |
</div> |
|
208 |
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 " |
|
209 |
></iframe> |
|
210 |
|
|
206 | 211 |
</div> |
212 |
|
|
207 | 213 |
</div> |
208 | 214 |
</div> |
209 | 215 |
</div> |
... | ... | |
211 | 217 |
</div> |
212 | 218 |
</div> |
213 | 219 |
</div> |
220 |
<!-- |
|
214 | 221 |
<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()"> |
215 | 222 |
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div> |
216 | 223 |
<div> Are you sure that you want to proceed?</div> |
... | ... | |
220 | 227 |
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div> |
221 | 228 |
<div> Are you sure that you want to proceed?</div> |
222 | 229 |
</modal-alert> |
230 |
--> |
|
223 | 231 |
|
modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.ts | ||
---|---|---|
16 | 16 |
@Component({ |
17 | 17 |
selector: 'customization', |
18 | 18 |
templateUrl: './customization.component.html', |
19 |
styles:[` |
|
20 |
.refresh-indicator { |
|
21 |
background-color: rgba(0, 0, 0, 0.50); |
|
22 |
border-radius: 4px; |
|
23 |
position: absolute; |
|
24 |
color: white; |
|
25 |
} |
|
26 |
iframe, .refresh-indicator{ |
|
27 |
height:900px; |
|
28 |
} |
|
29 |
`] |
|
19 | 30 |
}) |
20 | 31 |
|
21 | 32 |
export class CustomizationComponent implements OnInit { |
... | ... | |
39 | 50 |
public properties: EnvProperties = null; |
40 | 51 |
|
41 | 52 |
public enabled = true; |
42 |
@ViewChild('backAlert') backAlert: AlertModal; |
|
43 |
@ViewChild('exitAlert') exitAlert: AlertModal; |
|
53 |
/* @ViewChild('backAlert') backAlert: AlertModal;
|
|
54 |
@ViewChild('exitAlert') exitAlert: AlertModal;*/
|
|
44 | 55 |
|
45 | 56 |
constructor(private element: ElementRef, |
46 | 57 |
private route: ActivatedRoute, |
... | ... | |
178 | 189 |
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout)); |
179 | 190 |
} |
180 | 191 |
getCommunityUrl() { |
181 |
return 'http://spitoo.di.uoa.gr:4200';
|
|
182 |
// return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
|
|
192 |
// return 'http://spitoo.di.uoa.gr:4000';
|
|
193 |
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu'; |
|
183 | 194 |
} |
184 | 195 |
|
185 | 196 |
getCommunityUrlNewLayout(layout: string) { |
... | ... | |
191 | 202 |
return JSON.parse(JSON.stringify(obj)); |
192 | 203 |
} |
193 | 204 |
|
194 |
back() { |
|
205 |
/*back() {
|
|
195 | 206 |
if (JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions) || |
196 | 207 |
JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.appliedCustomizationOptions)) { |
197 | 208 |
this.menuSelected = 'main'; |
... | ... | |
313 | 324 |
xhr.send(formData); |
314 | 325 |
}); |
315 | 326 |
} |
316 |
|
|
327 |
*/ |
|
317 | 328 |
public isForLightBackground(color:string){ |
318 | 329 |
return CustomizationOptions.isForLightBackground(color); |
319 | 330 |
} |
Also available in: Unified diff
[Admin tool | Branch new-UI]
-updates on Customization component