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

[Connect Admin | new-theme]: Redesign of community profile form. 

1. profile.component.ts: Added sticky header and removed uk-card from form according to redesign mocks.
2. edit-community.component.ts: Updated inputs of form | Updated styling and structure of form according to redesign mocks.
This commit is contained in:
Konstantina Galouni 2022-06-29 13:19:29 +03:00
parent 82c8c7f5ea
commit 58a3fdc40b
2 changed files with 74 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/app/pages/community-info/profile/edit-community/edit-community.component.ts
View File

@ -16,45 +16,37 @@ declare var UIkit;
@Component({ @Component({
selector: 'edit-community', selector: 'edit-community',
template: ` template: `
<div [ngStyle]="{'max-height': maxHeight}"
[class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
class="uk-overflow-auto uk-padding-remove-bottom">
<form *ngIf="communityFb" [formGroup]="communityFb">
<div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge"
[class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('name')" label="Name"
placeholder="Write a name..."
hint="Name of the community profile."></div>
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('shortName')"
hint="Short name of the community."
label="Short Name" placeholder="Write an acronym..."></div>
<!-- <div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."-->
<!-- hint="The description of the community."-->
<!-- [rows]="4" [formInput]="communityFb.get('description')" label="Description"></div>-->
<div class="uk-width-1-1"> <form *ngIf="communityFb" [formGroup]="communityFb" class="uk-margin-xlarge-bottom">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div> <div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-margin-bottom uk-form-hint">The description of the community</div> <div class="uk-width-1-2@m">
<ckeditor [readonly]="false" <div input id="name" [formInput]="communityFb.get('name')"
debounce="500" placeholder="Name of the community profile."></div>
[formControl]="communityFb.get('description')" </div>
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', <div class="uk-width-1-2@m">
<div input [formInput]="communityFb.get('shortName')"
placeholder="Short name of the community."></div>
</div>
<div class="uk-width-1-1">
<div class="uk-text-bold uk-margin-bottom uk-form-hint">Description of the community</div>
<ckeditor [readonly]="false"
debounce="500"
[formControl]="communityFb.get('description')"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' + removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' + 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
'CreateDiv,Flash,PageBreak,' + 'CreateDiv,Flash,PageBreak,' +
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language', 'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
extraPlugins: 'divarea'}"> extraPlugins: 'divarea'}">
</ckeditor> </ckeditor>
</div> </div>
<div class="uk-width-1-1">
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/> <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div dashboard-input class="uk-width-1-1" type="logoURL" [hideControl]="communityFb.get('isUpload').value" flex="top" <div *ngIf="!communityFb.get('isUpload').value" class="uk-grid uk-grid-column-large" uk-grid>
hint="Upload or link the logo of the community." [placeholder]="'Write link to the logo'" <div class="uk-margin-top uk-width-auto@l uk-width-1-1">
[formInput]="communityFb.get('logoUrl')" label="Logo"> <div class="uk-grid uk-grid-column-large uk-flex-middle" uk-grid>
<div *ngIf="!communityFb.get('isUpload').value" class="uk-width-2-5@l uk-width-1-1" style="margin-top: 7px;"> <div class="uk-width-auto@l uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid> <button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-flex-wrap"
<div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()"> (click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon> <icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span> <span class="uk-margin-small-left">Upload a file</span>
@ -65,36 +57,37 @@ declare var UIkit;
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="communityFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle"> <div input class="uk-width-expand" type="logoURL" [placeholder]="'Link to the logo'" [formInput]="communityFb.get('logoUrl')"></div>
<div class="uk-card uk-card-default uk-text-center uk-border-circle"> </div>
<img class="uk-position-center" [src]="photo"> <div *ngIf="communityFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
</div> <div class="uk-card uk-card-default uk-text-center uk-border-circle">
<div class="uk-margin-left"> <img class="uk-position-center uk-blend-multiply" [src]="photo">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button"> </div>
<icon name="remove"></icon> <div class="uk-margin-left">
</button> <button (click)="remove()" class="uk-button-default uk-icon-button">
</div> <icon name="delete"></icon>
<div class="uk-margin-small-left"> </button>
<button class="uk-button-secondary uk-icon-button" (click)="file.click()"> </div>
<icon name="edit"></icon> <div class="uk-margin-small-left">
</button> <button class="uk-button-default uk-icon-button" (click)="file.click()">
</div> <icon name="edit"></icon>
</button>
</div> </div>
</div> </div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div> <!-- Full width error message -->
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('status')" <div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top uk-width-1-1">{{uploadError}}</div>
hint="Set the visibility status for your community's profile." type="select" [options]="statuses"
label="Status" placeholder="Choose a status"></div>
</div> </div>
</form> <div class="uk-width-1-2@m">
</div>`, <div input [formInput]="communityFb.get('status')"
placeholder="Visibility status for your community's profile."
[options]="statuses" type="select"></div>
</div>
</div>
</form>
`,
styleUrls: ['edit-community.component.css'] styleUrls: ['edit-community.component.css']
}) })
export class EditCommunityComponent { export class EditCommunityComponent {
@Input()
public maxHeight = 'none';
@Input()
public paddingLarge: boolean = false;
public communityFb: FormGroup; public communityFb: FormGroup;
public statuses: Option[] = [ public statuses: Option[] = [
{label: 'Visible', value: 'all'}, {label: 'Visible', value: 'all'},

49
src/app/pages/community-info/profile/profile.component.ts
View File

@ -10,40 +10,37 @@ import {Subscription} from "rxjs";
@Component({ @Component({
selector: 'community-profile', selector: 'community-profile',
template: ` template: `
<div page-content> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Community Profile</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div>
</div>
<community-info tab="profile"></community-info> <community-info tab="profile"></community-info>
</div> </div>
<div inner> <div inner>
<div class="uk-card-header"> <div class="uk-container">
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid> <div class="uk-flex uk-flex-right uk-margin-medium-top uk-margin-medium-bottom">
<div> <div class="uk-width-auto uk-text-right@m uk-text-center">
<div class="uk-text-small title"> <button class="uk-button uk-button-default uk-margin-right"
Manage Community Profile (click)="reset()" [class.uk-disabled]="loading || !editCommunityComponent.dirty"
</div>
<div>
<span *ngIf="community" class="uk-text-bold">{{community.shortTitle}}</span>
<span *ngIf="editCommunityComponent.dirty && !loading"> (unsaved changes)</span>
</div>
</div>
<div class="uk-text-right@m uk-text-center">
<button class="uk-button uk-button-secondary outlined uk-margin-right"
(click)="reset()"
[disabled]="loading || !editCommunityComponent.dirty">Reset [disabled]="loading || !editCommunityComponent.dirty">Reset
</button> </button>
<button class="uk-button uk-button-secondary" <button class="uk-button uk-button-primary"
(click)="save()" [class.uk-disabled]="loading || editCommunityComponent.disabled"
[disabled]="loading || editCommunityComponent.disabled">Save (click)="save()" [disabled]="loading || editCommunityComponent.disabled">Save
</button> </button>
</div> </div>
</div> </div>
</div> <div class="uk-position-relative" style="min-height: 60vh">
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh"> <div [class.hidden]="loading">
<div [class.hidden]="loading"> <edit-community #editCommunityComponent></edit-community>
<edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community> </div>
</div> <div *ngIf="loading" class="uk-position-center">
<div *ngIf="loading" class="uk-position-center"> <loading></loading>
<loading></loading> </div>
</div> </div>
</div> </div>
</div> </div>
@ -58,6 +55,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent; @ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent;
public stickyPageHeader: boolean = false;
constructor(private communityService: CommunityService, constructor(private communityService: CommunityService,
private title: Title) { private title: Title) {
} }