Project

General

Profile

« Previous | Next » 

Revision 60894

[Admin tool | Branch new-UI]

-updates on Customization component

View differences:

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