Upgrade to font awesome 5 (free)
This commit is contained in:
parent
faeea3b3a5
commit
1407718999
10 changed files with 87 additions and 44 deletions
24
package-lock.json
generated
24
package-lock.json
generated
|
@ -100,6 +100,30 @@
|
|||
"loader-utils": "1.1.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.0.tgz",
|
||||
"integrity": "sha512-HitzVVotHB70QGYaoKvkvaGqKL2P/xdpeg1KK1ESEyI5qBcZdRTWpH9W5XVB72Ev02V4Qo/Ldxjf4UL+kakWdw==",
|
||||
"dev": true
|
||||
},
|
||||
"@fortawesome/fontawesome-free-brands": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.2.tgz",
|
||||
"integrity": "sha512-J7SyvuBFxx3/4VcuSkVlsWxDLCj34Pc1zkOkxQkBDIvmbv6uXC3IUqkhZjyV7AHSM9iDoDeI9CczLk0sJwW25g==",
|
||||
"dev": true
|
||||
},
|
||||
"@fortawesome/fontawesome-free-regular": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.2.tgz",
|
||||
"integrity": "sha512-E4mG2ab0SH9+uEuPvPoDWnIshBGMD3LKih73pR2Kn+qPHujJw/UQXy1D2ousaSD7oLPBO1g0c3dx3laX2i/Neg==",
|
||||
"dev": true
|
||||
},
|
||||
"@fortawesome/fontawesome-free-solid": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.2.tgz",
|
||||
"integrity": "sha512-By7V/yO2XyMonzTmo6KxPcw0OLqycozNDJaASAcky+YZkIL7p1hJ8Ki5OlF4X2z1fMQfpXbbBVfeU6atr1rlUQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@ng-bootstrap/ng-bootstrap": {
|
||||
"version": "1.0.0-beta.7",
|
||||
"resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.7.tgz",
|
||||
|
|
|
@ -55,6 +55,10 @@
|
|||
"@angular/router": "^5.0.0",
|
||||
"@angularclass/hmr": "^2.1.0",
|
||||
"@angularclass/hmr-loader": "^3.0.2",
|
||||
"@fortawesome/fontawesome": "^1.1.0",
|
||||
"@fortawesome/fontawesome-free-brands": "^5.0.2",
|
||||
"@fortawesome/fontawesome-free-regular": "^5.0.2",
|
||||
"@fortawesome/fontawesome-free-solid": "^5.0.2",
|
||||
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
|
||||
"@types/jquery": "^3.2.16",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
|
|
|
@ -20,7 +20,10 @@
|
|||
<my-spinner></my-spinner>
|
||||
</div>
|
||||
<div *ngIf="!isLoading">
|
||||
<my-ibox title="Add {{ defaultName }}" [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
|
||||
<my-ibox [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
|
||||
<h5 class="my-ibox-title">
|
||||
<i class="far fa-plus-square"></i> Add {{ defaultName }}
|
||||
</h5>
|
||||
<div class="my-ibox-content">
|
||||
<form (submit)="addWidget()" novalidate name="addForm">
|
||||
<ng-container *ngTemplateOutlet="widgetParams;context:{widget:newWidget}"></ng-container>
|
||||
|
@ -34,19 +37,20 @@
|
|||
</div>
|
||||
</my-ibox>
|
||||
|
||||
<my-ibox *ngFor="let widget of widgets trackById"
|
||||
[isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId"
|
||||
title="{{ widget.name || widget.url || defaultName }}">
|
||||
<my-ibox *ngFor="let widget of widgets trackById" [isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId">
|
||||
<h5 class="my-ibox-title">
|
||||
<i class="far fa-edit"></i> {{ widget.name || widget.url || defaultName }}
|
||||
</h5>
|
||||
<div class="my-ibox-content">
|
||||
<form (submit)="saveWidget(widget)" novalidate name="editForm">
|
||||
<ng-container *ngTemplateOutlet="widgetParams;context:{widget:widget}"></ng-container>
|
||||
|
||||
<div style="margin-top: 25px">
|
||||
<button type="submit" class="btn btn-sm btn-primary" [disabled]="isUpdating">
|
||||
<i class="fa fa-save"></i> Save Widget
|
||||
<i class="far fa-save"></i> Save Widget
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating" (click)="removeWidget(widget)">
|
||||
<i class="fa fa-times"></i> Remove Widget
|
||||
<i class="far fa-trash-alt"></i> Remove Widget
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
<div class="ibox">
|
||||
<div class="ibox-title" (click)="collapsed = !collapsed" [ngClass]="[isCollapsible ? 'ibox-title-collapsible' : '']">
|
||||
<h5>{{ title }}</h5>
|
||||
<div class="ibox-title" (click)="collapsed = !collapsed"
|
||||
[ngClass]="[isCollapsible ? 'ibox-title-collapsible' : '']">
|
||||
<h5 *ngIf="title">
|
||||
{{ title }}
|
||||
</h5>
|
||||
<ng-content select=".my-ibox-title" *ngIf="!title"></ng-content>
|
||||
<ng-content select=".my-ibox-addl-title"></ng-content>
|
||||
<i class="ibox-icon fa" *ngIf="isCollapsible"
|
||||
[ngClass]="[collapsed ? 'fa-chevron-right' : 'fa-chevron-down']"></i>
|
||||
|
|
|
@ -1,32 +1 @@
|
|||
.ibox {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ibox .ibox-title {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 2px solid #e7eaec;
|
||||
}
|
||||
|
||||
.ibox .ibox-title h5 {
|
||||
display: inline;
|
||||
font-size: 1.1em;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ibox .ibox-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ibox .ibox-title .ibox-icon {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ibox .ibox-title.ibox-title-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
// The styles for iboxes are applied at an app level
|
|
@ -1 +1 @@
|
|||
<i class="fa fa-times-circle-o scalarClose" (click)="closeScalar()"></i>
|
||||
<i class="far fa-times-circle scalarClose" (click)="closeScalar()"></i>
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<base href="/">
|
||||
</head>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// styles in src/style directory are applied to the whole page
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
|
||||
@import '../../node_modules/angular2-toaster/toaster';
|
||||
@import "components/ibox";
|
||||
@import "riot";
|
||||
|
||||
body {
|
||||
|
@ -8,7 +9,7 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
}
|
||||
|
||||
// HACK: Work around dialog not showing up
|
||||
|
|
32
web/style/components/ibox.scss
Normal file
32
web/style/components/ibox.scss
Normal file
|
@ -0,0 +1,32 @@
|
|||
.ibox {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ibox .ibox-title {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 2px solid #e7eaec;
|
||||
}
|
||||
|
||||
.ibox .ibox-title h5 {
|
||||
display: inline;
|
||||
font-size: 1.1em;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ibox .ibox-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ibox .ibox-title .ibox-icon {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ibox .ibox-title.ibox-title-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
|
@ -5,4 +5,10 @@ import "@angular/common";
|
|||
import "@angular/http";
|
||||
import "@angular/router";
|
||||
import "rxjs";
|
||||
import "@angularclass/hmr";
|
||||
import "@angularclass/hmr";
|
||||
import fontawesome from '@fortawesome/fontawesome';
|
||||
import solid from '@fortawesome/fontawesome-free-solid';
|
||||
import regular from '@fortawesome/fontawesome-free-regular';
|
||||
import brands from '@fortawesome/fontawesome-free-brands';
|
||||
|
||||
fontawesome.library.add(regular, solid, brands);
|
Loading…
Reference in a new issue