Project

General

Profile

1
<ng-template #applyResetButtons>
2
<!--  <div class="uk-margin-small">-->
3
  <button class="uk-float-right uk-button uk-margin-left uk-button-secondary "
4
          [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
5
          [title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
6
          (click)="saveLayout()">
7
    Publish
8
  </button>
9
    <button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
10
            (click)="resetLayout()">
11

    
12
      <span>Reset all</span>
13
    </button>
14

    
15
</ng-template>
16

    
17
<div page-content class="admin-pages">
18
  <div header>
19
  </div>
20
  <div inner>
21
<div class="" >
22
  <div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card">
23
    <div class = "uk-card-header" style="z-index: 2"  uk-sticky="offset:100">
24
      <div class = " uk-margin-small-top uk-margin-small-bottom">
25

    
26
        <ng-container
27
          *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
28
        <div>Customization <span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
29
      </div>
30
    </div>
31
    <div class="uk-padding">
32
    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
33
      <li [class.uk-active]="menuSelected === 'identity'"
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
      ><a
36
        (click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
37
      <li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
38
        class="title">Backgrounds & buttons
39
      </span></a></li>
40

    
41
    </ul>
42

    
43
    <div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
44
      <div class="customizationMenuItems uk-margin-small">
45
        <div class="uk-grid">
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
              <!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
49
              <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
50
                   data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
51
                                            d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
52
                fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
53
            </span>-->
54
            </div>
55
            <quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
56
                                    [lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
57
                                    [primaryColor]="draftCustomizationOptions.identity.mainColor"
58
                                    [secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
59
                                    [buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
60
                                    [buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
61
            ></quick-look-backgrounds>
62

    
63
          </div>
64
          <div class="uk-width-1-3@m uk-width-1-1@s">
65

    
66
            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons
67
              <a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
68
              || hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
69
              && draftCustomizationOptions.backgroundsAndButtonsIsCustom"
70
                 (click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
71
                 uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
72
                 >  <icon name="reset"></icon></a>
73
            </div>
74

    
75
            <div class="uk-margin-top">
76
              <span>Custom style </span>
77
              <span >
78
              <mat-slide-toggle class="uk-margin-large-left"
79
                                [checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
80
                                (change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
81
                                draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault();  "
82
                                [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
83
                    (draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
84
              >
85
              </mat-slide-toggle>
86
              </span>
87
            </div>
88
            <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
89
                 style="font-style: italic">
90
              Backgrounds and buttons are set in the default values.
91
            </div>
92

    
93
            <div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
94
              <div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>
95
              <color [color]="draftCustomizationOptions.backgrounds.dark.color"
96
                     label="Dark"
97
                     (colorChange)=
98
                       " draftCustomizationOptions.backgrounds.dark.color = $event;"></color>
99
                      <span *ngIf="!isForLightBackground(draftCustomizationOptions.backgrounds.dark.color)">The selected color may has lower contrast.</span>
100
              <color [color]="draftCustomizationOptions.backgrounds.light.color"
101
                     label="Light"
102
                     (colorChange)=
103
                       " draftCustomizationOptions.backgrounds.light.color = $event;"></color>
104
              <span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.light.color)">The selected color may has lower contrast.</span>
105
              <color [color]="draftCustomizationOptions.backgrounds.form.color"
106
                     label="Form"
107
                     (colorChange)=
108
                       " draftCustomizationOptions.backgrounds.form.color = $event;"></color>
109
              <span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.form.color)">The selected color
110
                may has lower contrast.</span>
111
              <div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
112
              <ul   class="uk-tab" uk-switcher>
113
                <li><a href="#">On dark background</a></li>
114
                <li><a href="#">On light background</a></li>
115
              </ul>
116
              <ul class="uk-switcher uk-margin">
117
                <li>
118
                  <customize-buttons
119
                    [buttons]="draftCustomizationOptions.buttons.darkBackground"
120
                  ></customize-buttons>
121
                </li>
122
                <li>
123
                  <customize-buttons
124
                    [buttons]="draftCustomizationOptions.buttons.lightBackground"
125
                  ></customize-buttons>
126
                </li>
127
              </ul>
128
            </div>
129
          </div>
130

    
131

    
132
        </div>
133
      </div>
134
    </div>
135

    
136

    
137
    <div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
138
      <div class=" customizationMenuItems uk-margin-small">
139

    
140
        <div class="uk-grid">
141
          <div class="uk-width-2-3@m uk-width-1-1@s">
142
            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look
143
            </div>
144
            <div style="border-radius: 6px;" class="uk-alert uk-padding-small">
145
              <quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
146
                          [secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
147
            </div>
148
          </div>
149
          <div class="uk-width-1-3@m uk-width-1-1@s">
150

    
151
            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity
152
              <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
153
              draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
154
                 uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
155
               (click)="resetIdentityToPublished();">  <icon name="reset"></icon></a></div>
156

    
157
            <div class="uk-margin-top">
158
              <div class="">
159
                <span>Custom style</span>
160
                <mat-slide-toggle class="uk-margin-large-left"
161
                                  [checked]="draftCustomizationOptions.identityIsCustom"
162
                                  (change)="draftCustomizationOptions.identityIsCustom =
163
                                  !draftCustomizationOptions.identityIsCustom;
164
                                  draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
165
                                  [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
166
                  (draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
167
                                  >
168
                </mat-slide-toggle>
169
              </div>
170
              <div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
171
                   style="font-style: italic">
172
                Identity is set in the default values.
173
              </div>
174
            </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>
177
              <color [color]="draftCustomizationOptions.identity.mainColor" (colorChange)=
178
                " draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
179
                     label="Primary"></color>
180
              <color [color]="draftCustomizationOptions.identity.secondaryColor" (colorChange)=
181
                " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
182
            </div>
183

    
184
          </div>
185

    
186
      </div>
187

    
188

    
189
      </div>
190
    </div>
191

    
192
    <div class=" uk-padding-small ">
193
      <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>
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

    
211
      </div>
212

    
213
    </div>
214
    </div>
215
  </div>
216

    
217
</div>
218
  </div>
219
</div>
220
<!--
221
<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()">
222
  <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
223
  <div> Are you sure that you want to proceed?</div>
224
</modal-alert>
225

    
226
<modal-alert #exitAlert (alertOutput)="exitCustomization()">
227
  <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
228
  <div> Are you sure that you want to proceed?</div>
229
</modal-alert>
230
-->
231

    
(5-5/11)