better draggable design
This commit is contained in:
parent
41faa36087
commit
b41c31b4ac
|
@ -18,6 +18,7 @@
|
||||||
[cdkDropListData]="accounts"
|
[cdkDropListData]="accounts"
|
||||||
(cdkDropListDropped)="onDrop($event)">
|
(cdkDropListDropped)="onDrop($event)">
|
||||||
<div *ngFor="let account of accounts" cdkDrag class="draggable">
|
<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 }}" />
|
<img class="draggable__avatar" src="{{ account.avatar }}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -84,13 +84,36 @@ $height-button: 40px;
|
||||||
// color: cornflowerblue;
|
// color: cornflowerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$draggable-accent-color: #47e927;
|
||||||
|
// $draggable-accent-color: #a8ff97;
|
||||||
.draggable {
|
.draggable {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
border: 2px solid #df0adf;
|
||||||
|
border: 2px solid $draggable-accent-color;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&__avatar {
|
&__avatar {
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
z-index: 5;
|
||||||
|
color:$draggable-accent-color;
|
||||||
|
|
||||||
|
top: 6px;
|
||||||
|
left: 12px;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from "@angular/core";
|
||||||
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
|
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
|
||||||
import { Subscription, Observable } from "rxjs";
|
import { Subscription, Observable } from "rxjs";
|
||||||
import { Store } from "@ngxs/store";
|
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 { faCommentAlt, faCalendarAlt } from "@fortawesome/free-regular-svg-icons";
|
||||||
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
|
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
|
||||||
|
|
||||||
|
@ -25,6 +25,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
faPlus = faPlus;
|
faPlus = faPlus;
|
||||||
faCog = faCog;
|
faCog = faCog;
|
||||||
faCalendarAlt = faCalendarAlt;
|
faCalendarAlt = faCalendarAlt;
|
||||||
|
faArrowsAltV = faArrowsAltV;
|
||||||
|
|
||||||
accounts: AccountWithNotificationWrapper[] = [];
|
accounts: AccountWithNotificationWrapper[] = [];
|
||||||
hasAccounts: boolean;
|
hasAccounts: boolean;
|
||||||
|
|
Loading…
Reference in New Issue