2019-10-07 16:36:53 +02:00
< ng-template # applyResetButtons >
< div class = "uk-margin-small" >
< button class = "uk-button uk-button-small uk-button-primary"
2019-10-10 17:17:43 +02:00
(click)="resetLayout()">
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 > < / span >
< span > Reset< / span >
< / button >
< button class = "uk-button uk-button-small uk-button-primary uk-float-right"
2019-10-10 17:17:43 +02:00
(click)="applyLayout();">Apply
2019-10-07 16:36:53 +02:00
< / button >
< / div >
< / ng-template >
2019-10-10 17:17:43 +02:00
< div class = "uk-grid uk-height-1-1" >
< div class = "uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small " >
2019-10-07 16:36:53 +02:00
< div * ngIf = "menuSelected == 'main'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " exit ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="close">< path fill = "none" stroke = "#000" stroke-width = "1.06"
d="M16,16 L4,4">< / path > < path fill = "none" stroke = "#000"
stroke-width="1.06"
d="M16,4 L4,16">< / path > < / svg > < / span >
< / a >
< span > Customization< / span >
< / div >
< div class = "" >
< div class = "uk-h5 uk-margin-small-top" >
Style
< / div >
< div class = "uk-padding-small customizationMenuItems" >
< ul class = "uk-list uk-list-divider" >
< li > < a ( click ) = " menuSelected = 'backgrounds' " > Backgrounds< / a > < / li >
< li > < a ( click ) = " menuSelected = 'fonts' " > Fonts< / a > < / li >
< li > < a ( click ) = " menuSelected = 'elements' " > Elements< / a > < / li >
< li > < a ( click ) = " menuSelected = 'identity' " > Identity< / a > < / li >
< li > < a ( click ) = " menuSelected = 'buttons' " > Buttons< / a > < / li >
< / ul >
< / div >
< div class = "uk-h5 uk-margin-small-top" >
View
< / div >
< div class = "uk-padding-small customizationMenuItems" >
2019-10-10 17:17:43 +02:00
< a [ href ] = " previewUrl " target = "_blank" > Preview page< / a >
2019-10-07 16:36:53 +02:00
< / div >
< div class = "uk-h5 uk-margin-small-top" >
Go to
< / div >
< div class = "uk-padding-small customizationMenuItems" >
< a [ href ] = " communityUrl " target = "_blank" > Community Page< / a >
< / div >
< / div >
< / div >
< div * ngIf = "menuSelected == 'backgrounds'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " back ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="arrow-left">< polyline fill = "none" stroke = "#000"
points="10 14 5 9.5 10 5">< / polyline > < line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52">< / line > < / svg > < / span >
< / a >
< span > Backgrounds< / span >
< / div >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
< div class = "uk-alert uk-alert-primary uk-text-small uk-padding-small" > Tooltip ....< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li class = "uk-open" >
< a class = "uk-accordion-title" href = "#" > Banners < / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
<!-- <div>Appereance</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . panel . background . color " label = "Background color"
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.panel.background.color = $event;">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > BUTTONS & LINKS< / div >
< div class = " uk-grid-small uk-child-width-auto uk-grid" >
< label > < input [ value ] = " true "
2019-10-10 17:17:43 +02:00
[(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="true"
2019-10-07 16:36:53 +02:00
type="radio"/>
for dark background< / label >
< label > < input [ value ] = " false "
2019-10-10 17:17:43 +02:00
[(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="false"
2019-10-07 16:36:53 +02:00
type="radio"/> for light background< / label >
< / div >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetButtons ( ) " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.background.color">
< div [ style . color ] = " draftCustomizationOptions . panel . title . color "
[style.font-family]="draftCustomizationOptions.panel.title.family"
[style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
2019-10-07 16:36:53 +02:00
< / div >
2019-10-10 17:17:43 +02:00
< div [ style . color ] = " draftCustomizationOptions . panel . fonts . color "
[style.font-family]="draftCustomizationOptions.panel.fonts.family"
[style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
2019-10-07 16:36:53 +02:00
< / div >
2019-10-10 17:17:43 +02:00
< div * ngIf = "draftCustomizationOptions.panel.onDarkBackground" >
2019-10-07 16:36:53 +02:00
< a class = "" [ style ] = " linkDarkBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
(mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link< / a >
2019-10-07 16:36:53 +02:00
< br >
< a class = "uk-button" [ style ] = " buttonDarkBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
(mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button< / a >
2019-10-07 16:36:53 +02:00
< / div >
2019-10-10 17:17:43 +02:00
< div * ngIf = "!draftCustomizationOptions.panel.onDarkBackground" >
2019-10-07 16:36:53 +02:00
< a class = "" [ style ] = " linkLightBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
draftCustomizationOptions.links.lightBackground.onHover.color);"
(mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link< / a >
2019-10-07 16:36:53 +02:00
< br >
< a class = "uk-button" [ style ] = " buttonLightBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
(mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
2019-10-07 16:36:53 +02:00
Button< / a >
< / div >
< / div >
< / div >
< / li >
< / ul >
< / div >
< / div >
< div * ngIf = "menuSelected == 'fonts'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " back ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="arrow-left">< polyline fill = "none" stroke = "#000"
points="10 14 5 9.5 10 5">< / polyline > < line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52">< / line > < / svg > < / span >
< / a >
< span > Fonts< / span >
< / div >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
< div class = "uk-alert uk-alert-primary uk-text-small uk-padding-small" > Tooltip ....< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li class = "uk-open" >
< a class = "uk-accordion-title" href = "#" > Banner Big Text< / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
2019-10-10 17:17:43 +02:00
< font-size [ font ] = " draftCustomizationOptions . panel . title . family "
[size]="draftCustomizationOptions.panel.title.size"
[weight]="draftCustomizationOptions.panel.title.weight"
(fontChange)="draftCustomizationOptions.panel.title.family=$event.font;
draftCustomizationOptions.panel.title.size=$event.size;
draftCustomizationOptions.panel.title.weight=$event.weight">< / font-size >
< color [ color ] = " draftCustomizationOptions . panel . title . color "
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " draftCustomizationOptions . panel . title =
copyObject(publishedCustomizationOptions.panel.title);">
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.background.color">
< div [ style . color ] = " draftCustomizationOptions . panel . title . color "
[style.font-family]="draftCustomizationOptions.panel.title.family"
[style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
2019-10-07 16:36:53 +02:00
< / div >
< / div >
< / div >
< / li >
< / ul >
< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li >
< a class = "uk-accordion-title" href = "#" > Banner Small Text< / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
2019-10-10 17:17:43 +02:00
< font-size [ font ] = " draftCustomizationOptions . panel . fonts . family "
[size]="draftCustomizationOptions.panel.fonts.size"
[weight]="draftCustomizationOptions.panel.fonts.weight"
(fontChange)="draftCustomizationOptions.panel.fonts.family=$event.font;
draftCustomizationOptions.panel.fonts.size=$event.size;
draftCustomizationOptions.panel.fonts.weight=$event.weight"
2019-10-07 16:36:53 +02:00
>< / font-size >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . panel . fonts . color "
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.panel.fonts.color = $event;" [addMargin]="true">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetFontsSmall ( ) " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.background.color">
< div [ style . color ] = " draftCustomizationOptions . panel . fonts . color "
[style.font-family]="draftCustomizationOptions.panel.fonts.family"
[style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
2019-10-07 16:36:53 +02:00
< / div >
< / div >
< / div >
< / li >
< / ul >
< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li >
< a class = "uk-accordion-title" href = "#" > Links< / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
< ul class = "uk-tab" uk-switcher >
< li > < a href = "#" > On dark < br > background< / a > < / li >
< li > < a href = "#" > On light < br > background< / a > < / li >
< / ul >
< ul class = "uk-switcher uk-margin" >
< li >
2019-10-10 17:17:43 +02:00
< font-size [ font ] = " draftCustomizationOptions . links . darkBackground . family "
[size]="draftCustomizationOptions.links.darkBackground.size"
[weight]="draftCustomizationOptions.links.darkBackground.weight"
(fontChange)="draftCustomizationOptions.links.darkBackground.family=$event.font;
draftCustomizationOptions.links.darkBackground.size=$event.size;
draftCustomizationOptions.links.darkBackground.weight=$event.weight; linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);"
2019-10-07 16:36:53 +02:00
>< / font-size >
<!-- <div>Appereance</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . links . darkBackground . color " ( colorChange ) =
" draftCustomizationOptions.links.darkBackground.color = $event; linkDarkBackgroundPreview =
changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color)">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > ON HOVER< / div >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . links . darkBackground . onHover . color " ( colorChange ) =
" draftCustomizationOptions.links.darkBackground.onHover.color = $event;">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetFontsLinksDark ( ) ; " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center uk-background-primary " >
< a class = "" [ style ] = " linkDarkBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
(mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link< / a >
2019-10-07 16:36:53 +02:00
< / div >
< / li >
< li >
<!-- <div>Appereance</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . links . lightBackground . color " ( colorChange ) =
" draftCustomizationOptions.links.lightBackground.color = $event; linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > ON HOVER< / div >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . links . lightBackground . onHover . color " ( colorChange ) =
" draftCustomizationOptions.links.lightBackground.onHover.color = $event;">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetFontsLinksLight ( ) ; " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center " >
< a class = "" [ style ] = " linkLightBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
draftCustomizationOptions.links.lightBackground.onHover.color);"
(mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link< / a >
2019-10-07 16:36:53 +02:00
< / div >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / div >
< / div >
< div * ngIf = "menuSelected == 'elements'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " back ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="arrow-left">< polyline fill = "none" stroke = "#000"
points="10 14 5 9.5 10 5">< / polyline > < line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52">< / line > < / svg > < / span > < / a >
< span > Elements< / span >
< / div >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
< div class = "uk-alert uk-alert-primary uk-text-small uk-padding-small" > Tooltip ....< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li class = "uk-open" >
< a class = "uk-accordion-title" href = "#" > Subject tags & Statistics cubes< / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
<!-- <div>Appereance</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . panel . panelElements . backgroundColor " ( colorChange ) =
" draftCustomizationOptions.panel.panelElements.backgroundColor= $event;"
2019-10-07 16:36:53 +02:00
label="Background Color">< / color >
< div class = "uk-margin-small-top" > FONTS< / div >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . panel . panelElements . color " ( colorChange ) =
" draftCustomizationOptions.panel.panelElements.color= $event;">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetElements ( ) " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-padding-small uk-text-center"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.background.color">
2019-10-07 16:36:53 +02:00
< div class = "uk-card uk-padding-small uk-margin-auto" style = "width:100px; height:100px"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
[style.color]="draftCustomizationOptions.panel.panelElements.color">Statistics cube
2019-10-07 16:36:53 +02:00
< / div >
< div class = "uk-label uk-margin-top"
2019-10-10 17:17:43 +02:00
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
[style.color]="draftCustomizationOptions.panel.panelElements.color">Subject tag
2019-10-07 16:36:53 +02:00
< / div >
< / div >
< / div >
< / li >
< / ul >
< / div >
< / div >
< div * ngIf = "menuSelected == 'identity'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " back ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="arrow-left">< polyline fill = "none" stroke = "#000"
points="10 14 5 9.5 10 5">< / polyline > < line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52">< / line > < / svg > < / span > < / a >
< span > Identity< / span >
< / div >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
2019-10-10 17:17:43 +02:00
< div class = "uk-alert uk-alert-primary uk-text-small uk-padding-small" > Identity colors are used in several
points (e.g paging, accordions, tabs, etc) in your community RCD.< br > Hint: it can't be white!
< / div >
2019-10-07 16:36:53 +02:00
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li class = "uk-open" >
2019-10-10 17:17:43 +02:00
< a class = "uk-accordion-title" href = "#" > Identity Colors< / a >
2019-10-07 16:36:53 +02:00
< div class = "uk-accordion-content uk-margin-remove-top" >
<!-- <div>Primary color</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . mainColor " ( colorChange ) =
" draftCustomizationOptions.mainColor= $event;" label="Primary color">< / color >
2019-10-07 16:36:53 +02:00
<!-- <div class="uk - margin - small - top">Secondary color</div> -->
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . secondaryColor " ( colorChange ) =
" draftCustomizationOptions.secondaryColor= $event;" label="Secondary color">< / color >
2019-10-07 16:36:53 +02:00
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetIdentity ( ) ; " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
2019-10-10 17:17:43 +02:00
< div style = "border-style: solid; border-width: 2px; border-radius: 6px;" class = "uk-padding-small"
[style.border-color]="draftCustomizationOptions.mainColor">
< ul class = "uk-pagination uk-flex-center" uk-margin = "" >
< li class = "uk-first-column" > < a > < span class = "uk-icon uk-pagination-previous"
uk-pagination-previous="">
< svg [ style . color ] = " draftCustomizationOptions . mainColor " data-svg = "pagination-previous" height = "12"
viewBox="0 0 7 12" width="7"
xmlns="http://www.w3.org/2000/svg">< polyline fill = "none" points = "6 1 1 6 6 11" stroke = "#000"
stroke-width="1.2">< / polyline > < / svg > < / span > < / a > < / li >
< li > < a [ style . color ] = " ( hoveredText = =
'page-1'?draftCustomizationOptions.mainColor:'inherit')"
(mouseover)="hoveredText ='page-1'" (mouseout)="hoveredText =''">1< / a > < / li >
< li > < a class = "uk-active" [ style . background-color ] = " draftCustomizationOptions . mainColor "
[style.color]="'white'">2< / a > < / li >
< li > < a [ style . color ] = " ( hoveredText = =
'page-3'?draftCustomizationOptions.mainColor:'inherit')"
(mouseover)="hoveredText ='page-3'" (mouseout)="hoveredText =''">3< / a > < / li >
< li > < a > < span
class="uk-icon uk-pagination-next" uk-pagination-next="">< svg
[style.color]="draftCustomizationOptions.mainColor"
data-svg="pagination-next" height="12" viewBox="0 0 7 12" width="7"
xmlns="http://www.w3.org/2000/svg">< polyline fill = "none" points = "1 1 6 6 1 11" stroke = "#000"
stroke-width="1.2">< / polyline > < / svg > < / span > < / a > < / li >
< / ul >
< hr [ style . border-color ] = " draftCustomizationOptions . mainColor " >
< ul class = "uk-accordion" uk-accordion = "" >
< li class = "" > < a class = "uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor"
[style.color]="(hoveredText ==
'accordion-1'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-1'" (mouseout)="hoveredText =''">Item
1< / a >
< div aria-hidden = "true" class = "uk-accordion-content" hidden = "" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.< / p >
< / div >
< / li >
< li > < a class = "uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
'accordion-2'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-2'" (mouseout)="hoveredText =''">Item
2< / a >
< div aria-hidden = "false" class = "uk-accordion-content" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.< / p >
< / div >
< / li >
< li > < a class = "uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
'accordion-3'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-3'" (mouseout)="hoveredText =''">Item 3< / a >
< div aria-hidden = "true" class = "uk-accordion-content" hidden = "" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.< / p >
< / div >
< / li >
< / ul >
< hr [ style . border-color ] = " draftCustomizationOptions . mainColor " >
< ul class = "uk-tab" >
< li class = "uk-active" > < a [ style . border-color ] = " draftCustomizationOptions . mainColor "
[style.color]="draftCustomizationOptions.mainColor">Active< / a > < / li >
< li > < a [ style . border-color ] = " ( hoveredText = =
'tab-2'?draftCustomizationOptions.secondaryColor:'')"
[style.color]="(hoveredText ==
'tab-2'?draftCustomizationOptions.secondaryColor:'inherit')"
(mouseover)="hoveredText ='tab-2'" (mouseout)="hoveredText =''">Item< / a > < / li >
< / ul >
< div [ style . color ] = " draftCustomizationOptions . mainColor " > Text in primary
color
< / div >
< div [ style . color ] = " draftCustomizationOptions . secondaryColor " > Text in secondary
color
< / div >
< / div >
2019-10-07 16:36:53 +02:00
< / div >
< / li >
< / ul >
< / div >
< / div >
< div * ngIf = "menuSelected == 'buttons'" class = " " >
< div class = "uk-background-primary uk-padding-small uk-light" >
2019-10-10 17:17:43 +02:00
< a class = "uk-margin-right uk-link " ( click ) = " back ( ) ; " >
2019-10-07 16:36:53 +02:00
< span class = "uk-icon" > < svg width = "20" height = "20" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
data-svg="arrow-left">< polyline fill = "none" stroke = "#000"
points="10 14 5 9.5 10 5">< / polyline > < line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52">< / line > < / svg > < / span > < / a >
< span > Buttons< / span >
< / div >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
< div class = "uk-alert uk-alert-primary uk-text-small uk-padding-small" > Tooltip ....< / div >
< div class = "uk-padding-small customizationMenuItems uk-margin-small" >
< ul uk-accordion >
< li class = "uk-open" >
< a class = "uk-accordion-title" href = "#" > Buttons< / a >
< div class = "uk-accordion-content uk-margin-remove-top" >
< ul class = "uk-tab" uk-switcher >
< li > < a href = "#" > On dark < br > background< / a > < / li >
< li > < a href = "#" > On light < br > background< / a > < / li >
< / ul >
< ul class = "uk-switcher uk-margin" >
< li >
2019-10-10 17:17:43 +02:00
< border [ style ] = " draftCustomizationOptions . buttons . darkBackground . borderStyle " [ width ] =
"draftCustomizationOptions.buttons.darkBackground.borderWidth" [radius]=
"draftCustomizationOptions.buttons.darkBackground.borderRadius" (borderChange)=
" draftCustomizationOptions.buttons.darkBackground.borderStyle = $event.style;
draftCustomizationOptions.buttons.darkBackground.borderRadius = $event.radius;
draftCustomizationOptions.buttons.darkBackground.borderWidth = $event.width; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">< / border >
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . color " ( colorChange ) =
" draftCustomizationOptions.buttons.darkBackground.color = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
2019-10-07 16:36:53 +02:00
label="Fonts Color"
[addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . backgroundColor " ( colorChange ) =
" draftCustomizationOptions.buttons.darkBackground.backgroundColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
2019-10-07 16:36:53 +02:00
label="Background Color" [addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . borderColor " ( colorChange ) =
" draftCustomizationOptions.buttons.darkBackground.borderColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
2019-10-07 16:36:53 +02:00
label="Border Color"
[addMargin]="true"
>< / color >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > ON HOVER< / div >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . onHover . color " ( colorChange ) =
" draftCustomizationOptions.buttons.darkBackground.onHover.color = $event;" label="Fonts Color"
2019-10-07 16:36:53 +02:00
>< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . onHover . backgroundColor "
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.buttons.darkBackground.onHover.backgroundColor = $event;"
2019-10-07 16:36:53 +02:00
label="Background Color" [addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . darkBackground . onHover . borderColor " ( colorChange ) =
" draftCustomizationOptions.buttons.darkBackground.onHover.borderColor = $event;"
2019-10-07 16:36:53 +02:00
label="Border Color" [addMargin]="true">< / color >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetButtonsDark ( ) ; " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = "uk-background-primary uk-padding-small uk-text-center" >
< a class = "uk-button" [ style ] = " buttonDarkBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
(mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button< / a >
2019-10-07 16:36:53 +02:00
< / div >
<!-- style="{color:green;} :hover { color: red; }" -->
< / li >
< li >
2019-10-10 17:17:43 +02:00
< border [ style ] = " draftCustomizationOptions . buttons . lightBackground . borderStyle " [ width ] =
"draftCustomizationOptions.buttons.lightBackground.borderWidth" [radius]=
"draftCustomizationOptions.buttons.lightBackground.borderRadius" (borderChange)=
" draftCustomizationOptions.buttons.lightBackground.borderStyle = $event.style;
draftCustomizationOptions.buttons.lightBackground.borderRadius = $event.radius;
draftCustomizationOptions.buttons.lightBackground.borderWidth = $event.width;
buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground); ">< / border >
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . color " ( colorChange ) =
" draftCustomizationOptions.buttons.lightBackground.color = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
2019-10-07 16:36:53 +02:00
label="Fonts Color"
[addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . backgroundColor " ( colorChange ) =
" draftCustomizationOptions.buttons.lightBackground.backgroundColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
2019-10-07 16:36:53 +02:00
label="Background Color" [addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . borderColor " ( colorChange ) =
" draftCustomizationOptions.buttons.lightBackground.borderColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
2019-10-07 16:36:53 +02:00
label="Border Color"
[addMargin]="true"
>< / color >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > ON HOVER< / div >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . onHover . color " ( colorChange ) =
" draftCustomizationOptions.buttons.lightBackground.onHover.color = $event; " label="Fonts Color"
2019-10-07 16:36:53 +02:00
>< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . onHover . backgroundColor "
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.buttons.lightBackground.onHover.backgroundColor = $event;"
2019-10-07 16:36:53 +02:00
label="Background Color" [addMargin]="true">< / color >
2019-10-10 17:17:43 +02:00
< color [ color ] = " draftCustomizationOptions . buttons . lightBackground . onHover . borderColor "
2019-10-07 16:36:53 +02:00
(colorChange)=
2019-10-10 17:17:43 +02:00
" draftCustomizationOptions.buttons.lightBackground.onHover.borderColor = $event;"
2019-10-07 16:36:53 +02:00
label="Border Color" [addMargin]="true">< / color >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > QUICK LOOK
2019-10-10 17:17:43 +02:00
< span class = "uk-icon uk-link " ( click ) = " resetButtonsLight ( ) ; " >
2019-10-07 16:36:53 +02:00
< svg width = "16" height = "16" viewBox = "0 0 20 20" xmlns = "http://www.w3.org/2000/svg"
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 >
< / span >
< / div >
< div class = " uk-padding-small uk-text-center" >
< a class = "uk-button" [ style ] = " buttonLightBackgroundPreview "
2019-10-10 17:17:43 +02:00
(mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
(mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
2019-10-07 16:36:53 +02:00
Button< / a >
< / div >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / div >
< / div >
< button class = "uk-button uk-margin uk-button-primary uk-button-small uk-align-right"
2019-10-08 16:18:38 +02:00
(click)="saveLayout()">
2019-10-07 16:36:53 +02:00
Publish
< / button >
< / div >
2019-10-10 17:17:43 +02:00
< div class = "uk-width-4-5 uk-padding-remove-left" >
< iframe [ src ] = " previewUrl " class = "" width = "100%" height = "100%" > < / iframe >
2019-10-07 16:36:53 +02:00
< / div >
< / div >
2019-10-10 17:17:43 +02:00
< modal-alert # backAlert ( alertOutput ) = " resetToAppliedOptions ( ) " >
< div class = "uk-text-bold uk-h5" > If you leave that Page without applying or publishing, changes will be lost.< / div >
< div > Are you sure that you want to proceed?< / div >
< / modal-alert >
< modal-alert # exitAlert ( alertOutput ) = " exitCustomization ( ) " >
< div class = "uk-text-bold uk-h5" > If you leave that Page without applying or publishing, changes will be lost.< / div >
< div > Are you sure that you want to proceed?< / div >
< / modal-alert >