Customization: apply minor css changes in sidebar, reset to published for background, separate to buttons

This commit is contained in:
argirok 2022-07-28 15:51:11 +03:00
parent dd48ee6bb5
commit 88de7310b5
2 changed files with 29 additions and 14 deletions

View File

@ -191,7 +191,7 @@
<mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.backgroundsIsCustom"
(change)="draftCustomizationOptions.backgroundsIsCustom=!draftCustomizationOptions.backgroundsIsCustom;
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsToDefault(); "
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
(draftCustomizationOptions.backgroundsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
>
@ -249,7 +249,7 @@
<mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.buttonsIsCustom"
(change)="draftCustomizationOptions.buttonsIsCustom=!draftCustomizationOptions.buttonsIsCustom;
draftCustomizationOptions.buttonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
draftCustomizationOptions.buttonsIsCustom?'':this.resetButtonsToDefault(); "
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
(draftCustomizationOptions.buttonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
>
@ -266,7 +266,7 @@
</div>
</div>
<div class="functionalities-border uk-overflow-auto uk-margin-medium-bottom">
<div class="functionalities-border uk-margin-medium-bottom">
<ng-container *ngIf="buttonsSelected == 'dark'">
<customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"

View File

@ -25,6 +25,7 @@ declare var UIkit;
styles:[`
.functionalities-container{
padding-left:15px;
padding-right:15px;
}
.functionalities-border{
border-left: 1px solid #EAEAEA;
@ -63,7 +64,13 @@ declare var UIkit;
border-radius:20px;
background-color: white;
}
.menu_section.uk-overflow-auto{
overflow: hidden;
}
.menu_section.uk-overflow-auto:hover {
overflow-y: scroll;
}
`]
})
@ -268,11 +275,14 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
resetBackgroundsAndButtonsToPublished(){
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
}
resetBackgroundsAndButtonsToDefault(){
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
this.updateBackgroundsAndButtonsBasedOnIdentity();
resetButtonsToDefault(){
this.resetButtonsTo(this.publishedCustomizationOptions.buttons);
this.updateButtonsBasedOnIdentity();
}
resetBackgroundsToDefault(){
this.resetBackgroundsTo(this.publishedCustomizationOptions.backgrounds);
this.updateBackgroundsBasedOnIdentity();
}
resetButtonsTo(buttonsToRevert) {
this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
}
@ -283,22 +293,27 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
}
resetIdentityToPublished() {
this.resetIdentityTo( this.publishedCustomizationOptions);
this.updateBackgroundsAndButtonsBasedOnIdentity()
this.updateButtonsBasedOnIdentity();
this.updateBackgroundsBasedOnIdentity();
}
resetIdentityToDefault() {
this.resetIdentityTo( this.defaultCustomizationOptions);
this.draftCustomizationOptions.identityIsCustom = false;
this.updateBackgroundsAndButtonsBasedOnIdentity()
this.updateButtonsBasedOnIdentity();
this.updateBackgroundsBasedOnIdentity();
}
updateBackgroundsAndButtonsBasedOnIdentity(){
updateButtonsBasedOnIdentity(){
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
if(!this.draftCustomizationOptions.buttonsIsCustom) {
this.resetButtonsTo(tmp.buttons);
}
}
updateBackgroundsBasedOnIdentity(){
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
if(!this.draftCustomizationOptions.backgroundsIsCustom) {
this.resetBackgroundsTo(tmp.backgrounds);
}
if(!this.draftCustomizationOptions.buttonsIsCustom) {
this.resetButtonsTo(tmp.buttons);
}
}
getCommunityUrlSatinized(prefix: string) {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrl(prefix));