D-Net

<ng-template #applyResetButtons>

  <button class="uk-float-right uk-button uk-margin-left uk-button-secondary "

          [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"

          [title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"

          (click)="saveLayout()">

    Publish

  </button>

    <button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"

      <span>Reset all</span>

  <div header>

  </div>

  <div inner>

          *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>

        <div>Customization <span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>

      </div>

    </div>

          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>"

      ><a

      <li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span

    </ul>

      <div class="customizationMenuItems uk-margin-small">

            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look

                   data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"

                                            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

                fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>

                                    [lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "

                                    [primaryColor]="draftCustomizationOptions.identity.mainColor"

                                    [secondaryColor]="draftCustomizationOptions.identity.secondaryColor"

                                    [buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"

                                    [buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"

            ></quick-look-backgrounds>

              <a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)

              || hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )

              && draftCustomizationOptions.backgroundsAndButtonsIsCustom"

              <span >

              <mat-slide-toggle class="uk-margin-large-left"

                                [checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"

                                (change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;

                                draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault();  "

                                [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +

                    (draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"

              >

              </mat-slide-toggle>

              </span>

                 style="font-style: italic">

              <div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>

                       " draftCustomizationOptions.backgrounds.dark.color = $event;"></color>

                       " draftCustomizationOptions.backgrounds.light.color = $event;"></color>

                       " draftCustomizationOptions.backgrounds.form.color = $event;"></color>

              <span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.form.color)">The selected color

                may has lower contrast.</span>

                <li><a href="#">On light background</a></li>

              <ul class="uk-switcher uk-margin">

                <li>

                  <customize-buttons

                    [buttons]="draftCustomizationOptions.buttons.darkBackground"

                  ></customize-buttons>

                </li>

                <li>

                  <customize-buttons

                    [buttons]="draftCustomizationOptions.buttons.lightBackground"

                  ></customize-buttons>

                </li>

              </ul>

      <div class=" customizationMenuItems uk-margin-small">

            <div style="border-radius: 6px;" class="uk-alert uk-padding-small">

              <quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"

                          [secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>

            </div>

          </div>

          <div class="uk-width-1-3@m uk-width-1-1@s">

              <div class="">

                <mat-slide-toggle class="uk-margin-large-left"

                                  [checked]="draftCustomizationOptions.identityIsCustom"

                                  (change)="draftCustomizationOptions.identityIsCustom =

                                  !draftCustomizationOptions.identityIsCustom;

                                  draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"

                                  [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +

                  (draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"

                                  >

                </mat-slide-toggle>

                   style="font-style: italic">

              <div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>

      <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>

           class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">

        <div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"

             class="  uk-width-1-1  refresh-indicator"  >

          <div class="uk-position-relative uk-height-1-1">

            <div class="uk-position-center uk-text-center clickable"

                 (click)="applyLayout()">

              <div>

                <icon name="refresh"></icon>

              </div>

              <span>Style has been changed. Click to refresh the view.</span>

            </div>

          </div>

        </div>

        <iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "

        ></iframe>

    </div>

</div>

  <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>

</modal-alert>

  <div> Are you sure that you want to proceed?</div>

</modal-alert>