added left column icons
This commit is contained in:
parent
0c1f90f8f9
commit
658aaec338
|
@ -20,8 +20,8 @@
|
||||||
"src/assets",
|
"src/assets",
|
||||||
"src/favicon.ico"
|
"src/favicon.ico"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"./node_modules/simplebar/dist/simplebar.min.css",
|
"./node_modules/ionicons/dist/scss/ionicons.scss",
|
||||||
"src/sass/styles.scss"
|
"src/sass/styles.scss"
|
||||||
],
|
],
|
||||||
"stylePreprocessorOptions": {
|
"stylePreprocessorOptions": {
|
||||||
|
@ -30,9 +30,7 @@
|
||||||
"./node_modules/bootstrap/scss"
|
"./node_modules/bootstrap/scss"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"scripts": [
|
"scripts": []
|
||||||
"./node_modules/simplebar/dist/simplebar.min.js"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
|
|
|
@ -1966,11 +1966,6 @@
|
||||||
"map-obj": "^1.0.0"
|
"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": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30000865",
|
"version": "1.0.30000865",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
|
||||||
|
@ -5509,6 +5504,11 @@
|
||||||
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
|
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
|
||||||
"dev": true
|
"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": {
|
"ip": {
|
||||||
"version": "1.1.5",
|
"version": "1.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||||
|
@ -6685,11 +6685,6 @@
|
||||||
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
|
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
|
||||||
"dev": true
|
"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": {
|
"log-symbols": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
|
||||||
|
@ -9018,11 +9013,6 @@
|
||||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||||
"dev": true
|
"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": {
|
"resolve": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
|
||||||
|
@ -9183,11 +9173,6 @@
|
||||||
"ajv-keywords": "^3.1.0"
|
"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": {
|
"scss-tokenizer": {
|
||||||
"version": "0.2.3",
|
"version": "0.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
|
||||||
|
@ -9438,17 +9423,6 @@
|
||||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||||
"dev": true
|
"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": {
|
"single-line-log": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",
|
||||||
|
|
|
@ -29,9 +29,9 @@
|
||||||
"@ngxs/store": "^3.2.0",
|
"@ngxs/store": "^3.2.0",
|
||||||
"bootstrap": "^4.1.3",
|
"bootstrap": "^4.1.3",
|
||||||
"core-js": "^2.5.4",
|
"core-js": "^2.5.4",
|
||||||
|
"ionicons": "^4.4.3",
|
||||||
"ngx-electron": "^1.0.4",
|
"ngx-electron": "^1.0.4",
|
||||||
"rxjs": "^6.0.0",
|
"rxjs": "^6.0.0",
|
||||||
"simplebar": "^3.0.0-beta.1",
|
|
||||||
"zone.js": "^0.8.26"
|
"zone.js": "^0.8.26"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -20,7 +20,7 @@ import { AuthService } from "./services/auth.service";
|
||||||
import { StreamingService } from "./services/streaming.service";
|
import { StreamingService } from "./services/streaming.service";
|
||||||
import { RegisteredAppsState } from "./states/registered-apps.state";
|
import { RegisteredAppsState } from "./states/registered-apps.state";
|
||||||
import { AccountsState } from "./states/accounts.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 { NavigationService } from "./services/navigation.service";
|
||||||
import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
|
import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
|
||||||
import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.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 { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
|
||||||
import { AccountWrapper } from '../../../../models/account.models';
|
import { AccountWrapper } from '../../../models/account.models';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-account-icon',
|
selector: 'app-account-icon',
|
|
@ -1,7 +1,11 @@
|
||||||
<div class="left-bar" >
|
<div class="left-bar">
|
||||||
<div id="create-toot">
|
<a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewToot()">
|
||||||
<a class="create-toot__link left-bar-link" href title="write toot!" (click)="createNewToot()">Toot!</a>
|
<!-- <span class="ion ion-md-paper-plane" style="font-size: 32px;"></span> -->
|
||||||
</div>
|
<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">
|
<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)">
|
||||||
|
@ -10,7 +14,11 @@
|
||||||
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
|
<!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="add-account">
|
<a class="left-bar-button left-bar-button--add left-bar-link" href title="add new account" [routerLink]="['/register']">
|
||||||
<a class="add-account__link left-bar-link" href title="add new account" [routerLink]="['/register']">+</a>
|
<span class="ion ion-md-add" style="font-size:26px;"></span>
|
||||||
</div>
|
</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>
|
</div>
|
|
@ -1,20 +1,55 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
$width-button: 50px;
|
||||||
|
$height-button: 40px;
|
||||||
.left-bar {
|
.left-bar {
|
||||||
width: 50px;
|
width: $width-button;
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
background: $color-secondary;
|
background: $color-secondary;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-toot {
|
.left-bar-link {
|
||||||
width: 50px;
|
color: $font-link-primary;
|
||||||
&__link {
|
text-decoration: none;
|
||||||
font-size: 0.8em;
|
&:hover {
|
||||||
margin: 0 0 0 10px;
|
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 {
|
.add-account {
|
||||||
width: 50px;
|
width: $width-button;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding-top: 7px;
|
padding-top: 7px;
|
||||||
&__link {
|
&__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 {
|
.flexcroll {
|
||||||
scrollbar-face-color: #08090d;
|
scrollbar-face-color: #08090d;
|
||||||
// scrollbar-shadow-color: #08090d;
|
scrollbar-shadow-color: #08090d;
|
||||||
scrollbar-highlight-color: #08090d;
|
scrollbar-highlight-color: #08090d;
|
||||||
scrollbar-3dlight-color: #08090d;
|
scrollbar-3dlight-color: #08090d;
|
||||||
scrollbar-darkshadow-color: #08090d;
|
scrollbar-darkshadow-color: #08090d;
|
||||||
|
@ -45,6 +45,6 @@
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
// background: #08090d;
|
// background: #08090d;
|
||||||
background: lighten($color-primary, 5);
|
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