Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added icons and colors for account panel

This commit is contained in:
Nicolas Constant 2019-03-19 22:07:42 -04:00
parent 4c31e58e47
commit b1b92a17ac
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/components/floating-column/manage-account/manage-account.component.html
View File

@ -2,13 +2,25 @@
<h3 class="panel__title">Manage Account</h3>
<div class="account__header">
<!-- <div class="account__display-avatar"> -->
<img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
<!-- </div> -->
<a href class="account__header--button"><fa-icon [icon]="faEnvelope"></fa-icon></a>
<a href class="account__header--button"><fa-icon [icon]="faAt"></fa-icon></a>
<a href class="account__header--button"><fa-icon [icon]="faBell"></fa-icon></a>
<a href class="account__header--button"><fa-icon [icon]="faUser"></fa-icon></a>
<!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
<a href class="account__header--button"
[ngClass]="{ 'account__header--button--selected': true, 'account__header--button--notification': true }">
<fa-icon [icon]="faStar"></fa-icon>
</a>
<a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
<fa-icon [icon]="faEnvelope"></fa-icon>
</a>
<a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
<fa-icon [icon]="faAt"></fa-icon>
</a>
<a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': false }">
<fa-icon [icon]="faBell"></fa-icon>
</a>
<a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
<fa-icon [icon]="faUser"></fa-icon>
</a>
</div>
<div class="account__body flexcroll">

35
src/app/components/floating-column/manage-account/manage-account.component.scss
View File

@ -1,9 +1,7 @@
@import "variables";
@import "panel";
@import "commons";
$account-header-height: 60px;
.panel {
padding-left: 0px;
padding-right: 0px;
@ -17,22 +15,36 @@ $account-header-height: 60px;
padding-bottom: 5px;
height: $account-header-height; //border-top: 1px solid #222736;
border-bottom: 1px solid #222736;
&--button{
&--button {
// outline: 1px greenyellow solid;
margin-top: 15px;
margin-top: 20px;
width: 35px;
height: 35px;
height: 35px;
float: right;
margin-left: 5px;
font-size: 24px;
color: whitesmoke;
font-size: 22px;
font-size: 20px;
color: $font-link-primary;
padding-left: 6px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: all .2s;
&:hover {
color: $font-link-primary-hover;
}
&--selected {
color: whitesmoke;
&:hover {
color: whitesmoke;
}
}
&--notification {
color: rgb(250, 152, 41);
&:hover {
color: rgb(250, 152, 41);
}
}
}
} // &__display-avatar {
// text-align: center;
@ -47,8 +59,7 @@ $account-header-height: 60px;
overflow: auto;
height: calc(100% - #{$account-header-height} - 31px);
padding-left: 10px;
padding-right: 10px;
// outline: 1px solid red;
padding-right: 10px; // outline: 1px solid red;
}
&__label {
// text-decoration: underline;

6
src/app/components/floating-column/manage-account/manage-account.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, Input } from '@angular/core';
import { Store } from '@ngxs/store';
import { faAt } from "@fortawesome/free-solid-svg-icons";
import { faBell, faEnvelope, faUser, } from "@fortawesome/free-regular-svg-icons";
import { faAt, faUserPlus } from "@fortawesome/free-solid-svg-icons";
import { faBell, faEnvelope, faUser, faStar } from "@fortawesome/free-regular-svg-icons";
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state';
import { RemoveAccount } from '../../../states/accounts.state';
@ -19,6 +19,8 @@ export class ManageAccountComponent implements OnInit {
faBell = faBell;
faEnvelope = faEnvelope;
faUser = faUser;
faStar = faStar;
faUserPlus = faUserPlus;
@Input() account: AccountWrapper;