Revision 60894
Added by Argiro Kokogiannaki almost 3 years ago
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 |
|
Also available in: Unified diff
[Admin tool | Branch new-UI]
-updates on Customization component