MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change contact-us base on new theme. Change modal buttons. Changle default color of loading with uk-text-primary

This commit is contained in:
Konstantinos Triantafyllou 2022-01-12 14:12:30 +02:00
parent 963c088bef
commit 52e04d7b48
6 changed files with 25 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
contact-us/contact-us.component.css
View File

@ -1,4 +0,0 @@
.uk-text-danger {
color: #b50000!important;
font-size: 12px;
}

57
contact-us/contact-us.component.html
View File

@ -1,82 +1,53 @@
<h3 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h3>
<ng-content select="[title]"></ng-content>
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
role="alert">{{errorMessage}}</div>
<div class="uk-margin-top" uk-grid [formGroup]="contactForm">
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">
*Required fields
</div>
<div *ngIf="contactForm.get('name')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Name <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<input class="uk-input" type="text" placeholder="Your name" formControlName="name"
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
<input class="uk-input" type="text" placeholder="Name *" formControlName="name"
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
</div>
<div *ngIf="contactForm.get('surname')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Surname <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<input class="uk-input" type="text" placeholder="Your surname" formControlName="surname"
<input class="uk-input" type="text" placeholder="Surname *" formControlName="surname"
[class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched">
</div>
<div *ngIf="contactForm.get('email')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Email <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<input class="uk-input" type="text" placeholder="Preferably your work email" formControlName="email"
<input class="uk-input" type="text" placeholder="Email *" formControlName="email"
[class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
</div>
<div *ngIf="contactForm.get('job')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Job Title <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<input class="uk-input" type="text" placeholder="Your job title" formControlName="job"
<input class="uk-input" type="text" placeholder="Job Title *" formControlName="job"
[class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched">
</div>
<div *ngIf="contactForm.get('affiliation')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<input class="uk-input" type="text" placeholder="Your affiliation" formControlName="affiliation"
<input class="uk-input" type="text" placeholder="Affiliation *" formControlName="affiliation"
[class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched">
</div>
<div *ngIf="contactForm.get('community')" class="uk-width-1-2@s uk-margin-medium-top">
<div class="uk-width-1-1">
<h6 class="uk-text-bold uk-margin-small-bottom uk-text-nowrap">Research Community or Infrastructure <span class="uk-text-danger uk-text-bold">*</span></h6>
</div>
<input class="uk-input uk-width-1" type="text" placeholder="Your community name" formControlName="community"
<input class="uk-input uk-width-1" type="text" placeholder="Research Community or Infrastructure *" formControlName="community"
[class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
</div>
<div *ngIf="contactForm.get('organization')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">Organization <span class="uk-text-danger uk-text-bold">*</span></h6>
<input class="uk-input uk-width-1-1" type="text" placeholder="Your organization" formControlName="organization"
<input class="uk-input uk-width-1-1" type="text" placeholder="Organization *" formControlName="organization"
[class.uk-form-danger]="contactForm.get('organization').invalid && contactForm.get('organization').touched">
</div>
<div *ngIf="contactForm.get('organizationType')" class="uk-width-1-2@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">Organization Type <span class="uk-text-danger uk-text-bold">*</span></h6>
<select class="uk-select uk-width-1-1" formControlName="organizationType">
<option [value]="''" hidden selected>Select your organization type</option>
<option [value]="''" hidden selected>Organization Type *</option>
<option *ngFor="let option of organizationTypes" [value]="option">{{option}}</option>
</select>
</div>
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">Subject <span class="uk-text-danger uk-text-bold">*</span></h6>
<input class="uk-input uk-width-1-1" type="text" placeholder="Your subject" formControlName="subject"
<input class="uk-input uk-width-1-1" type="text" placeholder="Subject *" formControlName="subject"
[class.uk-form-danger]="contactForm.get('subject').invalid && contactForm.get('subject').touched">
</div>
<div *ngIf="contactForm.get('message')" class="uk-width-1-1 uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Message <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<textarea rows="4" class="uk-textarea" placeholder="Your message" formControlName="message"
<textarea rows="4" class="uk-textarea" placeholder="Comments *" formControlName="message"
[class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
</textarea>
</div>
<div *ngIf="contactForm.get('description')" class="uk-width-1-1 uk-margin-medium-top">
<h6 class="uk-text-bold uk-margin-small-bottom">
Description <span class="uk-text-danger uk-text-bold">*</span>
</h6>
<textarea rows="4" class="uk-textarea" placeholder="Your description" formControlName="description"
<textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
</textarea>
</div>
@ -85,6 +56,6 @@
</re-captcha>
</div>
<div class="uk-margin-medium-top uk-width-1-1">
<button class="uk-button" [class.portal-button]="!buttonClass" [ngClass]="buttonClass" (click)="send()">Send</button>
<button class="uk-button" [class.uk-button-primary]="!buttonClass" [ngClass]="buttonClass" (click)="send()">Send</button>
</div>
</div>

3
contact-us/contact-us.component.ts
View File

@ -6,8 +6,7 @@ import {map, startWith} from "rxjs/operators";
@Component({
selector: 'contact-us',
templateUrl: './contact-us.component.html',
styleUrls: ['contact-us.component.css']
templateUrl: './contact-us.component.html'
})
export class ContactUsComponent {

3
contact-us/contact-us.module.ts
View File

@ -6,11 +6,12 @@ import {ContactUsComponent} from './contact-us.component';
import {ReactiveFormsModule} from "@angular/forms";
import {MatAutocompleteModule} from "@angular/material/autocomplete";
import {RecaptchaModule} from "ng-recaptcha";
import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module";
@NgModule({
imports: [
CommonModule, RouterModule,
ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule],
ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule],
declarations: [
ContactUsComponent
],

2
utils/loading/loading.component.ts
View File

@ -22,7 +22,7 @@ import {Component, Input, OnInit} from "@angular/core";
</ng-template>`
})
export class LoadingComponent implements OnInit {
@Input() color: string = 'portal-color';
@Input() color: string = 'uk-text-primary';
@Input() full: boolean = false;
@Input() top_margin: boolean = true;
@Input() size: "small" | "medium" | "large" = "large";

16
utils/modal/alert.ts
View File

@ -24,16 +24,14 @@ declare var UIkit: any;
<span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div class="uk-flex-right uk-grid uk-grid-small" [hidden]=!alertFooter uk-grid>
<span [hidden]=!okButton [class.uk-flex-last]="!okButtonLeft">
<button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
<button *ngIf="!okDisabled" [class.portal-button]="!isDashboard"
[class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard"
class="uk-button ignoreCommunityPanelBackground"
(click)="ok()">{{okButtonText}}</button>
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button" [class.uk-button-primary]="!isDashboard"
[class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span>
<span [hidden]=!cancelButton>
<button class="uk-button md-btn uk-button-default uk-margin-small-left"
<span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button>
</span>
</div>