Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 17:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(forms): fix a form inputs template

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-07 15:39:07 +03:00
parent 26a4b3fea8
commit 990b3341f3
5 changed files with 75 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -3,42 +3,40 @@
<nga-card> <nga-card>
<nga-card-header>Default Inputs</nga-card-header> <nga-card-header>Default Inputs</nga-card-header>
<nga-card-body> <nga-card-body>
<div class="input-group input-group-lg"> <div class="input-group">
<input type="text" placeholder="Project" class="form-control" /> <input type="text" placeholder="Project" class="form-control" />
</div> </div>
<div class="row"> <div class="full-name-inputs">
<div class="col-md-6"> <div class="input-group">
<div class="input-group input-group-lg">
<input type="text" placeholder="Nick" class="form-control" /> <input type="text" placeholder="Nick" class="form-control" />
</div> </div>
</div> <div class="input-group">
<div class="col-md-6">
<div class="input-group input-group-lg">
<input type="text" placeholder="Last Name" class="form-control" /> <input type="text" placeholder="Last Name" class="form-control" />
</div> </div>
</div> </div>
</div> <div class="input-group">
<div class="input-group input-group-lg">
<input type="password" placeholder="Password" class="form-control" /> <input type="password" placeholder="Password" class="form-control" />
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group">
<span class="input-group-addon"></span> <span class="input-group-addon input-group-icon">
<i class="ion-ios-person-outline"></i>
</span>
<input type="text" placeholder="With Icon" class="form-control" /> <input type="text" placeholder="With Icon" class="form-control" />
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group input-group-rounded">
<input type="text" placeholder="Rounded border" class="form-control" /> <input type="text" placeholder="Rounded border" class="form-control" />
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" placeholder="Project" class="form-control" /> <input type="text" placeholder="Project" class="form-control" />
<small class="form-text text-muted">A block of help text that breaks into a new line and may extend beyond one line.</small> <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.</small>
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group">
<input type="text" placeholder="Disabled input" class="form-control" /> <input type="text" placeholder="Disabled input" class="form-control" disabled />
</div> </div>
<div class="input-group"> <div class="input-group">
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea> <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
</div> </div>
<div class="input-group"> <div class="input-group input-group-sm">
<input type="text" placeholder="Small Input" class="form-control" /> <input type="text" placeholder="Small Input" class="form-control" />
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group input-group-lg">
@ -50,12 +48,12 @@
<nga-card-header>Input Groups</nga-card-header> <nga-card-header>Input Groups</nga-card-header>
<nga-card-body> <nga-card-body>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon success">@</span>
<input type="text" class="form-control" placeholder="Username" /> <input type="text" class="form-control" placeholder="Username" />
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-primary"> <button class="btn btn-primary btn-icon">
<i class="ion-ios-email-outline"></i> <i class="ion-ios-email-outline"></i>
</button> </button>
</span> </span>
@ -121,13 +119,13 @@
<nga-card> <nga-card>
<nga-card-header>Input Styles</nga-card-header> <nga-card-header>Input Styles</nga-card-header>
<nga-card-body> <nga-card-body>
<div class="input-group input-group-lg"> <div class="input-group input-group-border-only">
<input type="text" placeholder="Border Only" class="form-control" /> <input type="text" placeholder="Border Only" class="form-control" />
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group">
<input type="text" placeholder="Default Input" class="form-control"> <input type="text" placeholder="Default Input" class="form-control">
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group input-group-fill-only">
<input type="text" placeholder="Fill Only" class="form-control"> <input type="text" placeholder="Fill Only" class="form-control">
</div> </div>
</nga-card-body> </nga-card-body>
@ -145,21 +143,9 @@
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger"> <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
</div> </div>
<div class="form-group validation-checkboxes"> <div class="form-group validation-checkboxes">
<label class="custom-control custom-checkbox"> <nga-checkbox status="success">Checkbox with Success</nga-checkbox>
<input type="checkbox" class="custom-control-input"> <nga-checkbox status="warning">Checkbox with Warning</nga-checkbox>
<span class="custom-control-indicator"></span> <nga-checkbox status="danger">Checkbox with Danger</nga-checkbox>
<span class="custom-control-description">Input with Success</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Input with Warning</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Input with Danger</span>
</label>
</div> </div>
<div class="form-group has-success"> <div class="form-group has-success">
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success"> <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
@ -177,21 +163,9 @@
<nga-card-body> <nga-card-body>
<div class="demo-checkboxes-radio"> <div class="demo-checkboxes-radio">
<div class="demo-checkboxes"> <div class="demo-checkboxes">
<label class="custom-control custom-checkbox"> <nga-checkbox>Checkbox 1</nga-checkbox>
<input type="checkbox" class="custom-control-input"> <nga-checkbox>Checkbox 2</nga-checkbox>
<span class="custom-control-indicator"></span> <nga-checkbox>Checkbox 3</nga-checkbox>
<span class="custom-control-description">Checkbox 1</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Checkbox 2</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Checkbox 3</span>
</label>
</div> </div>
<div class="demo-radio"> <div class="demo-radio">
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
@ -211,11 +185,7 @@
</label> </label>
</div> </div>
<div class="demo-disabled-checkbox-radio"> <div class="demo-disabled-checkbox-radio">
<label class="custom-control custom-checkbox"> <nga-checkbox>Disbaled Checkbox</nga-checkbox>
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Disabled Checkbox</span>
</label>
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
<input type="radio" class="custom-control-input"> <input type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span> <span class="custom-control-indicator"></span>
@ -227,22 +197,28 @@
</nga-card> </nga-card>
<nga-card> <nga-card>
<nga-card-body class="demo-rating"> <nga-card-body class="demo-rating">
<span>Rating</span> <span class="header">Rating</span>
<div> <div>
<ngb-rating [(rate)]="currentRate"> <ngb-rating [(rate)]="currentRate" max=5>
<ng-template let-fill="fill"> <ng-template let-fill="fill">
<span class="star" [class.filled]="fill === 100">&#9733;</span> <span class="star fill" [class.filled]="fill === 100">
<i class="ion-android-star" *ngIf="fill === 100"></i>
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
</span>
</ng-template> </ng-template>
</ngb-rating> </ngb-rating>
<span>{{ currentRate }}</span> <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
</div> </div>
<div> <div>
<ngb-rating [(rate)]="currentRate"> <ngb-rating [(rate)]="currentRate" max=5>
<ng-template let-fill="fill"> <ng-template let-fill="fill">
<span class="star" [class.filled]="fill === 100">&#9733;</span> <span class="star fill" [class.filled]="fill === 100">
<i class="ion-android-star" *ngIf="fill === 100"></i>
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
</span>
</ng-template> </ng-template>
</ngb-rating> </ngb-rating>
<span>{{ currentRate }}</span> <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
</div> </div>
</nga-card-body> </nga-card-body>
</nga-card> </nga-card>

33
src/app/pages/forms/forms.component.scss → src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -1,4 +1,6 @@
:host /deep/ { @import '../../../@theme/styles/variables';
@include nga-install-component() {
.input-group { .input-group {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -6,6 +8,10 @@
.validation-checkboxes { .validation-checkboxes {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.custom-control {
margin-left: 1rem;
}
} }
.demo-checkboxes { .demo-checkboxes {
@ -35,10 +41,31 @@
.star { .star {
font-size: 1.5rem; font-size: 1.5rem;
color: #b0c4de; color: nga-theme(color-fg);
} }
.filled { .filled {
color: #1e90ff; color: nga-theme(color-fg);
}
.header {
line-height: 2rem;
font-size: 1.25rem;
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder);
}
.current-rate {
font-size: 1.5rem;
padding-left: 1rem;
color: nga-theme(color-fg-heading);
}
.full-name-inputs {
display: flex;
.input-group:not(:last-child) {
margin-right: 1rem;
}
} }
} }

3
src/app/pages/forms/form-inputs/form-inputs.component.ts
View file

@ -2,8 +2,9 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-form-inputs', selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html', templateUrl: './form-inputs.component.html',
}) })
export class FormInputsComponent { export class FormInputsComponent {
currentRate: number = 6; currentRate: number = 3;
} }

1
src/app/pages/forms/forms.component.ts
View file

@ -2,7 +2,6 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-form-elements', selector: 'ngx-form-elements',
styleUrls: ['./forms.component.scss'],
template: ` template: `
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,

2
src/app/pages/forms/forms.module.ts
View file

@ -1,5 +1,6 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgaCheckboxModule } from '@akveo/nga-theme';
import { SharedModule } from '../../shared.module'; import { SharedModule } from '../../shared.module';
@ -10,6 +11,7 @@ import { FormsRoutingModule, routedComponents } from './forms-routing.module';
SharedModule, SharedModule,
FormsRoutingModule, FormsRoutingModule,
NgbModule, NgbModule,
NgaCheckboxModule,
], ],
declarations: [ declarations: [
...routedComponents, ...routedComponents,