Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
mirror of https://github.com/NicolasConstant/sengi synced 2024-12-22 13:54:10 +01:00
Code Issues Releases Wiki Activity

better draggable design

Browse Source
This commit is contained in:
Nicolas Constant 2023-08-20 01:16:41 -04:00
parent 41faa36087
commit b41c31b4ac
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/components/left-side-bar/left-side-bar.component.html
View File

@ -18,6 +18,7 @@
[cdkDropListData]="accounts"
(cdkDropListDropped)="onDrop($event)">
<div *ngFor="let account of accounts" cdkDrag class="draggable">
<fa-icon class="draggable__icon" [icon]="faArrowsAltV"></fa-icon>
<img class="draggable__avatar" src="{{ account.avatar }}" />
</div>
</div>

23
src/app/components/left-side-bar/left-side-bar.component.scss
View File

@ -84,13 +84,36 @@ $height-button: 40px;
// color: cornflowerblue;
}
$draggable-accent-color: #47e927;
// $draggable-accent-color: #a8ff97;
.draggable {
width: 40px;
height: 40px;
margin: auto;
margin-bottom: 5px;
border: 2px solid #df0adf;
border: 2px solid $draggable-accent-color;
border-radius: 2px;
position: relative;
&__avatar {
width: calc(100%);
opacity: .8;
}
&__icon {
position: absolute;
float: left;
z-index: 5;
color:$draggable-accent-color;
top: 6px;
left: 12px;
font-size: 18px;
}
}

3
src/app/components/left-side-bar/left-side-bar.component.ts
View File

@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from "@angular/core";
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Subscription, Observable } from "rxjs";
import { Store } from "@ngxs/store";
import { faPlus, faCog, faSearch } from "@fortawesome/free-solid-svg-icons";
import { faPlus, faCog, faSearch, faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
import { faCommentAlt, faCalendarAlt } from "@fortawesome/free-regular-svg-icons";
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
@ -25,6 +25,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
faPlus = faPlus;
faCog = faCog;
faCalendarAlt = faCalendarAlt;
faArrowsAltV = faArrowsAltV;
accounts: AccountWithNotificationWrapper[] = [];
hasAccounts: boolean;