added left column icons
This commit is contained in:
Nicolas Constant
parent
0c1f90f8f9
commit
658aaec338
|
|
@ -20,8 +20,8 @@
|
|||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/simplebar/dist/simplebar.min.css",
|
||||
"styles": [
|
||||
"./node_modules/ionicons/dist/scss/ionicons.scss",
|
||||
"src/sass/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
|
|
@ -30,9 +30,7 @@
|
|||
"./node_modules/bootstrap/scss"
|
||||
]
|
||||
},
|
||||
"scripts": [
|
||||
"./node_modules/simplebar/dist/simplebar.min.js"
|
||||
]
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
|
|
|
|||
|
|
@ -1966,11 +1966,6 @@
|
|||
"map-obj": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"can-use-dom": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
|
||||
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30000865",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
|
||||
|
|
@ -5509,6 +5504,11 @@
|
|||
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
|
||||
"dev": true
|
||||
},
|
||||
"ionicons": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.4.3.tgz",
|
||||
"integrity": "sha512-Ys6km6g3l/Q1BVt8HJvF3CC1HcC3JENOMwwblt6Yfer/xb4+ANtWjWN5eo9lQaXubKXSWIacdcXuaA/8hv8bQQ=="
|
||||
},
|
||||
"ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
|
|
@ -6685,11 +6685,6 @@
|
|||
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||
},
|
||||
"log-symbols": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
|
||||
|
|
@ -9018,11 +9013,6 @@
|
|||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||
"dev": true
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
|
||||
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
|
||||
|
|
@ -9183,11 +9173,6 @@
|
|||
"ajv-keywords": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"scrollbarwidth": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz",
|
||||
"integrity": "sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98="
|
||||
},
|
||||
"scss-tokenizer": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
|
||||
|
|
@ -9438,17 +9423,6 @@
|
|||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||
"dev": true
|
||||
},
|
||||
"simplebar": {
|
||||
"version": "3.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/simplebar/-/simplebar-3.0.0-beta.1.tgz",
|
||||
"integrity": "sha1-ds6twWr3YtBAR+7MwXDh7D6U41c=",
|
||||
"requires": {
|
||||
"can-use-dom": "^0.1.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"scrollbarwidth": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"single-line-log": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
"@ngxs/store": "^3.2.0",
|
||||
"bootstrap": "^4.1.3",
|
||||
"core-js": "^2.5.4",
|
||||
"ionicons": "^4.4.3",
|
||||
"ngx-electron": "^1.0.4",
|
||||
"rxjs": "^6.0.0",
|
||||
"simplebar": "^3.0.0-beta.1",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { AuthService } from "./services/auth.service";
|
|||
import { StreamingService } from "./services/streaming.service";
|
||||
import { RegisteredAppsState } from "./states/registered-apps.state";
|
||||
import { AccountsState } from "./states/accounts.state";
|
||||
import { AccountIconComponent } from './components/left-side-bar/presentation/account-icon/account-icon.component';
|
||||
import { AccountIconComponent } from './components/left-side-bar/account-icon/account-icon.component';
|
||||
import { NavigationService } from "./services/navigation.service";
|
||||
import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
|
||||
import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.component';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
|
||||
import { AccountWrapper } from '../../../../models/account.models';
|
||||
import { AccountWrapper } from '../../../models/account.models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account-icon',
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
<div class="left-bar" >
|
||||
<div id="create-toot">
|
||||
<a class="create-toot__link left-bar-link" href title="write toot!" (click)="createNewToot()">Toot!</a>
|
||||
</div>
|
||||
<div class="left-bar">
|
||||
<a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewToot()">
|
||||
<!-- <span class="ion ion-md-paper-plane" style="font-size: 32px;"></span> -->
|
||||
<span class="ion ion-md-send" style="font-size: 32px;"></span>
|
||||
</a>
|
||||
<a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="createNewToot()">
|
||||
<span class="ion ion-md-search" style="font-size: 32px;"></span>
|
||||
</a>
|
||||
|
||||
<div *ngFor="let account of accounts">
|
||||
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)" (openMenuNotify)="onOpenMenuNotify($event)">
|
||||
|
|
@ -10,7 +14,11 @@
|
|||
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
|
||||
</div>
|
||||
|
||||
<div class="add-account">
|
||||
<a class="add-account__link left-bar-link" href title="add new account" [routerLink]="['/register']">+</a>
|
||||
</div>
|
||||
<a class="left-bar-button left-bar-button--add left-bar-link" href title="add new account" [routerLink]="['/register']">
|
||||
<span class="ion ion-md-add" style="font-size:26px;"></span>
|
||||
</a>
|
||||
|
||||
<a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="createNewToot()">
|
||||
<span class="ion ion-md-cog" style="font-size: 32px;"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,20 +1,55 @@
|
|||
@import "variables";
|
||||
$width-button: 50px;
|
||||
$height-button: 40px;
|
||||
.left-bar {
|
||||
width: 50px;
|
||||
width: $width-button;
|
||||
height: calc(100%);
|
||||
background: $color-secondary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.create-toot {
|
||||
width: 50px;
|
||||
&__link {
|
||||
font-size: 0.8em;
|
||||
margin: 0 0 0 10px;
|
||||
.left-bar-link {
|
||||
color: $font-link-primary;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $font-link-primary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.left-bar-button {
|
||||
display: block;
|
||||
width: $width-button;
|
||||
height: $height-button;
|
||||
transition: all .2s;
|
||||
// outline: 1px dotted greenyellow;
|
||||
&--status {
|
||||
padding: 5px 0 0 12px;
|
||||
}
|
||||
&--search {
|
||||
padding: 2px 0 0 12px;
|
||||
}
|
||||
&--add {
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
&--cog {
|
||||
padding: 2px 0 0 10px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
opacity: .2;
|
||||
transition: all .3s;
|
||||
filter: alpha(opacity=20);
|
||||
|
||||
// color: darken($font-link-primary, 30);
|
||||
|
||||
&:hover{
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-account {
|
||||
width: 50px;
|
||||
width: $width-button;
|
||||
height: 30px;
|
||||
padding-top: 7px;
|
||||
&__link {
|
||||
|
|
@ -25,10 +60,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
.left-bar-link {
|
||||
color: $font-link-primary;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $font-link-primary-hover;
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
.flexcroll {
|
||||
scrollbar-face-color: #08090d;
|
||||
// scrollbar-shadow-color: #08090d;
|
||||
scrollbar-shadow-color: #08090d;
|
||||
scrollbar-highlight-color: #08090d;
|
||||
scrollbar-3dlight-color: #08090d;
|
||||
scrollbar-darkshadow-color: #08090d;
|
||||
|
|
@ -45,6 +45,6 @@
|
|||
border-radius: 0px;
|
||||
// background: #08090d;
|
||||
background: lighten($color-primary, 5);
|
||||
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
|
||||
// -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue