[Library | Trunk]: Add new icons. Add outlined buttons on theme page
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59623 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
fb309462eb
commit
7f20cb1044
|
|
@ -18,17 +18,17 @@ export interface Option {
|
|||
<div *ngIf="label"
|
||||
class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
|
||||
<div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
|
||||
<ng-content></ng-content>
|
||||
<div class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
|
||||
<div [class.uk-hidden]="hideControl" class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
|
||||
<ng-template [ngIf]="type === 'text'">
|
||||
<input class="uk-input input-box uk-text-small" [placeholder]="placeholder" [formControl]="formControl"
|
||||
[class.uk-form-danger]="formControl.invalid && formControl.touched">
|
||||
</ng-template>
|
||||
<ng-template [ngIf]="type === 'textarea'">
|
||||
<textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
|
||||
[formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
|
||||
</textarea>
|
||||
<textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
|
||||
[formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
|
||||
</textarea>
|
||||
</ng-template>
|
||||
<ng-template [ngIf]="type === 'select'">
|
||||
<div class="input-box clickable" [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
|
||||
|
|
@ -58,6 +58,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
|||
@Input('placeholder') placeholder = '';
|
||||
@ViewChild('select') select: MatSelect;
|
||||
@Input() extraLeft: boolean = true;
|
||||
@Input() hideControl: boolean = false;
|
||||
public required: boolean = false;
|
||||
private initValue: any;
|
||||
private subscriptions: any[] = [];
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {IconsService} from "./icons.service";
|
|||
@Component({
|
||||
selector: 'icon',
|
||||
template: `
|
||||
<span *ngIf="svg" class="uk-icon" [class.uk-display-inline-block]="!flex" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
|
||||
<span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
|
||||
`
|
||||
})
|
||||
export class IconsComponent implements OnInit{
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ export interface Icon {
|
|||
data: string
|
||||
}
|
||||
|
||||
export const arrow_left: Icon = {
|
||||
name: 'arrow_left',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M20 11H6.83l2.88-2.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L3.71 11.3c-.39.39-.39 1.02 0 1.41L8.3 17.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L6.83 13H20c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>'
|
||||
}
|
||||
|
||||
export const arrow_right: Icon = {
|
||||
name: 'arrow_right',
|
||||
data: '<svg height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z" transform="translate(7.071 19.799) rotate(-135)"></path></svg>'
|
||||
|
|
@ -37,3 +42,14 @@ export const earth: Icon = {
|
|||
name: 'earth',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30 30"><path id="earth" d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"/></svg>'
|
||||
}
|
||||
|
||||
export const edit: Icon = {
|
||||
name: 'edit',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'
|
||||
}
|
||||
|
||||
export const remove: Icon = {
|
||||
name: 'remove',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,14 @@
|
|||
<button class="uk-button uk-button-default" disabled="">Disabled</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
|
||||
<div>
|
||||
<button class="uk-button uk-button-primary outlined">Outlined Primary</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="uk-button uk-button-secondary outlined">Outlined Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="uk-margin-medium">
|
||||
|
||||
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
|
||||
|
|
@ -148,8 +155,8 @@
|
|||
<li><span class="uk-label uk-label-danger">Danger</span></li>
|
||||
<li><a class="uk-badge" href="#">1</a></li>
|
||||
<li>
|
||||
<a class="uk-icon-button uk-icon" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
|
||||
<a class="uk-icon-button uk-icon" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
|
||||
<a class="uk-icon-button uk-icon uk-margin-small-right" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
|
||||
<a class="uk-icon-button small uk-icon uk-margin-small-right" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
|
||||
<a class="uk-icon-link uk-icon" href="#" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue