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> <h3 class="panel__title">Manage Account</h3>
<div class="account__header"> <div class="account__header">
<!-- <div class="account__display-avatar"> -->
<img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " /> <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]="faUserPlus"></fa-icon></a> -->
<a href class="account__header--button"><fa-icon [icon]="faAt"></fa-icon></a> <a href class="account__header--button"
<a href class="account__header--button"><fa-icon [icon]="faBell"></fa-icon></a> [ngClass]="{ 'account__header--button--selected': true, 'account__header--button--notification': true }">
<a href class="account__header--button"><fa-icon [icon]="faUser"></fa-icon></a> <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>
<div class="account__body flexcroll"> <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 "variables";
@import "panel"; @import "panel";
@import "commons"; @import "commons";
$account-header-height: 60px; $account-header-height: 60px;
.panel { .panel {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
@ -17,22 +15,36 @@ $account-header-height: 60px;
padding-bottom: 5px; padding-bottom: 5px;
height: $account-header-height; //border-top: 1px solid #222736; height: $account-header-height; //border-top: 1px solid #222736;
border-bottom: 1px solid #222736; border-bottom: 1px solid #222736;
&--button {
&--button{
// outline: 1px greenyellow solid; // outline: 1px greenyellow solid;
margin-top: 20px;
margin-top: 15px;
width: 35px; width: 35px;
height: 35px; height: 35px;
float: right; float: right;
margin-left: 5px; margin-left: 5px;
font-size: 24px; font-size: 22px;
color: whitesmoke; font-size: 20px;
color: $font-link-primary;
padding-left: 6px; padding-left: 6px;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; 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 { } // &__display-avatar {
// text-align: center; // text-align: center;
@ -47,8 +59,7 @@ $account-header-height: 60px;
overflow: auto; overflow: auto;
height: calc(100% - #{$account-header-height} - 31px); height: calc(100% - #{$account-header-height} - 31px);
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px; // outline: 1px solid red;
// outline: 1px solid red;
} }
&__label { &__label {
// text-decoration: underline; // 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 { Component, OnInit, Input } from '@angular/core';
import { Store } from '@ngxs/store'; import { Store } from '@ngxs/store';
import { faAt } from "@fortawesome/free-solid-svg-icons"; import { faAt, faUserPlus } from "@fortawesome/free-solid-svg-icons";
import { faBell, faEnvelope, faUser, } from "@fortawesome/free-regular-svg-icons"; import { faBell, faEnvelope, faUser, faStar } from "@fortawesome/free-regular-svg-icons";
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state'; import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state';
import { RemoveAccount } from '../../../states/accounts.state'; import { RemoveAccount } from '../../../states/accounts.state';
@ -19,6 +19,8 @@ export class ManageAccountComponent implements OnInit {
faBell = faBell; faBell = faBell;
faEnvelope = faEnvelope; faEnvelope = faEnvelope;
faUser = faUser; faUser = faUser;
faStar = faStar;
faUserPlus = faUserPlus;
@Input() account: AccountWrapper; @Input() account: AccountWrapper;