MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/pages/customization/customization.component.html
View File

@ -191,7 +191,7 @@
<mat-slide-toggle class="uk-margin-large-left" <mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.backgroundsIsCustom" [checked]="draftCustomizationOptions.backgroundsIsCustom"
(change)="draftCustomizationOptions.backgroundsIsCustom=!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\'>' + [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>'" (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" <mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.buttonsIsCustom" [checked]="draftCustomizationOptions.buttonsIsCustom"
(change)="draftCustomizationOptions.buttonsIsCustom=!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\'>' + [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>'" (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> </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'"> <ng-container *ngIf="buttonsSelected == 'dark'">
<customize-buttons <customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true" [buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"

37
src/app/pages/customization/customization.component.ts
View File

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