Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(roomSelector): room selector highlight (#9)

Browse source
This commit is contained in:
Vladimir Lugovsky 2017-07-07 18:09:04 +03:00 • committed by Dmitry Nehaychik
parent fa8342cc6d
commit 17e41f58b5
3 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
View file

@ -74,6 +74,7 @@
</g> </g>
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms"> <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
<path class="room-bg-border-grad" (click)="roomSelected(room.id)" [attr.d]="room.area.d" />
<path class="room-bg" (click)="roomSelected(room.id)" [attr.d]="room.area.d" /> <path class="room-bg" (click)="roomSelected(room.id)" [attr.d]="room.area.d" />
<path class="room-border" [attr.d]="room.border.d" /> <path class="room-border" [attr.d]="room.border.d" />
<text class="room-text" (click)="roomSelected(room.id)" text-anchor="middle" <text class="room-text" (click)="roomSelected(room.id)" text-anchor="middle"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Before After
Before After

14
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
View file

@ -39,6 +39,13 @@ svg {
stroke: transparent; stroke: transparent;
cursor: pointer; cursor: pointer;
transition: fill 0.4s ease-out; transition: fill 0.4s ease-out;
stroke-width: 4px;
}
.room-bg-border-grad {
fill: none;
stroke: none;
stroke-width: 4px;
} }
.room-text { .room-text {
@ -50,10 +57,15 @@ svg {
.selected-room { .selected-room {
z-index: 40; z-index: 40;
.room-bg { .room-bg {
stroke: rgba(0, 255, 170, 0.5); stroke: rgba(0, 255, 170, 1);
fill: rgba(0, 255, 170, 0.5); fill: rgba(0, 255, 170, 0.5);
filter: url('#f2'); filter: url('#f2');
} }
.room-bg-border-grad {
stroke: rgba(0, 255, 170, 1);
filter: url('#f2');
}
.room-border { .room-border {
stroke: #00f9a6; stroke: #00f9a6;
} }

2
src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
View file

@ -10,7 +10,7 @@ export class RoomSelectorComponent {
sortedRooms = []; sortedRooms = [];
viewBox = '-20 -20 608.88 407.99'; viewBox = '-20 -20 618.88 407.99';
roomSvg = { roomSvg = {
borders: [{ borders: [{