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

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

@ -10,40 +10,37 @@ import {Subscription} from "rxjs";
@Component({
selector: 'community-profile',
template: `
<div page-content>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<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>
</div>
<div inner>
<div class="uk-card-header">
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
<div>
<div class="uk-text-small title">
Manage Community Profile
</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()"
<div class="uk-container">
<div class="uk-flex uk-flex-right uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="loading || !editCommunityComponent.dirty"
[disabled]="loading || !editCommunityComponent.dirty">Reset
</button>
<button class="uk-button uk-button-secondary"
(click)="save()"
[disabled]="loading || editCommunityComponent.disabled">Save
<button class="uk-button uk-button-primary"
[class.uk-disabled]="loading || editCommunityComponent.disabled"
(click)="save()" [disabled]="loading || editCommunityComponent.disabled">Save
</button>
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading">
<edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community>
</div>
<div *ngIf="loading" class="uk-position-center">
<loading></loading>
<div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading">
<edit-community #editCommunityComponent></edit-community>
</div>
<div *ngIf="loading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div>
</div>
@ -57,7 +54,9 @@ export class ProfileComponent implements OnInit, OnDestroy {
public loading: boolean = false;
private subscriptions: any[] = [];
@ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent;
public stickyPageHeader: boolean = false;
constructor(private communityService: CommunityService,
private title: Title) {
}