fix ionicons with electron integration

This commit is contained in:
Nicolas Constant 2018-09-23 13:40:29 -04:00
parent 89f4483bc2
commit 418ac5df03
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 18 additions and 14 deletions

View File

@ -21,7 +21,6 @@
"src/favicon.ico" "src/favicon.ico"
], ],
"styles": [ "styles": [
"./node_modules/ionicons/dist/scss/ionicons.scss",
"src/sass/styles.scss" "src/sass/styles.scss"
], ],
"stylePreprocessorOptions": { "stylePreprocessorOptions": {

View File

@ -2,7 +2,7 @@ import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http"; import { HttpModule } from "@angular/http";
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { NgModule, APP_INITIALIZER } from "@angular/core"; import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { RouterModule, Routes } from "@angular/router"; import { RouterModule, Routes } from "@angular/router";
import { NgxElectronModule } from "ngx-electron"; import { NgxElectronModule } from "ngx-electron";
@ -74,6 +74,7 @@ const routes: Routes = [
NgxsStoragePluginModule.forRoot() NgxsStoragePluginModule.forRoot()
], ],
providers: [AuthService, NavigationService, MastodonService, StreamingService], providers: [AuthService, NavigationService, MastodonService, StreamingService],
bootstrap: [AppComponent] bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}) })
export class AppModule { } export class AppModule { }

View File

@ -1,23 +1,21 @@
<div class="left-bar"> <div class="left-bar">
<a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()"> <a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()">
<span class="ion ion-md-send" style="font-size: 32px;"></span> <ion-icon name="md-send"></ion-icon>
</a> </a>
<a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()"> <a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()">
<span class="ion ion-md-search" style="font-size: 32px;"></span> <ion-icon name="md-search"></ion-icon>
</a> </a>
<div *ngFor="let account of accounts"> <div *ngFor="let account of accounts">
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)" (openMenuNotify)="onOpenMenuNotify($event)"> <app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)" (openMenuNotify)="onOpenMenuNotify($event)">
</app-account-icon> </app-account-icon>
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
</div> </div>
<a class="left-bar-button left-bar-button--add left-bar-link" href title="add new account" (click)="addNewAccount()"> <a class="left-bar-button left-bar-button--add left-bar-link" href title="add new account" (click)="addNewAccount()">
<span class="ion ion-md-add" style="font-size:26px;"></span> <ion-icon name="md-add"></ion-icon>
</a> </a>
<a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()"> <a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()">
<span class="ion ion-md-cog" style="font-size: 32px;"></span> <ion-icon name="md-cog"></ion-icon>
</a> </a>
</div> </div>

View File

@ -17,24 +17,26 @@ $height-button: 40px;
} }
.left-bar-button { .left-bar-button {
font-size: 32px;
display: block; display: block;
width: $width-button; width: $width-button;
height: $height-button; height: $height-button;
transition: all .2s; transition: all .2s;
// outline: 1px dotted greenyellow; // outline: 1px dotted greenyellow;
&--status { &--status {
padding: 5px 0 0 12px; padding: 5px 0 0 10px;
} }
&--search { &--search {
padding: 2px 0 0 12px; padding: 0 0 0 9px;
} }
&--add { &--add {
padding: 0 0 0 16px; padding: 0 0 0 12px;
font-size: 26px;
} }
&--cog { &--cog {
padding: 2px 0 0 10px; padding: 2px 0 0 9px;
position: absolute; position: absolute;
bottom: 5px; bottom: 7px;
opacity: .2; opacity: .2;
transition: all .3s; transition: all .3s;
filter: alpha(opacity=20); filter: alpha(opacity=20);

View File

@ -10,12 +10,16 @@
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head> </head>
<body> <body>
<app-root> <app-root>
loading... loading...
</app-root> </app-root>
<script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
</body> </body>
</html> </html>