fix(board): style of card while dragging.

src/app/work-item/work-item-board/work-item-board.component.html

@@ -12,7 +12,6 @@
           <div class="board">
             <!-- board columns -->
             <div class="board-lane" *ngFor='let lane of lanes'>
-
               <section class="flex-container in-column-direction board-lane-column" [attr.data-state]="lane.option">
                 <div class="lane-header">
                   <span class="dib">{{lane.option}}</span>
@@ -24,37 +23,38 @@
                   [eachElementHeightInPx]='contentItemHeight'
                   (initItems)='initWiItems($event, lane)'
                   (fetchMore)='fetchMoreWiItems(lane)' >
+
                   <div *ngIf="lane.option == 'new'">
                       <div *ngIf="loggedIn" class="boardQuickAddContainer flex-container in-column-direction">
                           <alm-work-item-quick-add [wilistview] = "'wi-card-view'" (close)="close($event)"></alm-work-item-quick-add>
                       </div>
                   </div>
                   <div [dragula]='"first-bag"' class="card-wrapper">
-                    <div class="board-card flex-container in-column-direction flex-grow-1" *ngFor='let item of workItems | almFilterBoardList:lane.option' (click)="gotoDetail(item)" (mousedown)="foo(item)">
+                    <div class="board-card flex-container in-column-direction flex-grow-1" *ngFor='let item of lane.workItems' (click)="gotoDetail(item)" (mousedown)="getWI(item)">
                       <div class="row-wrapper">
                         <div class="">
                           <span class="wi-type-icon" almIcon [iconType]="item.relationships?.baseType?.data?.id"></span>
+                          <span class=""> {{item.id}} </span>
                         </div>
-                        <span class=""> {{item.id}} </span>
                         <span dropdown>
-                        <button class="btn btn-link color-grey" type="button" dropdownToggle>
-                          <span class="fa fa-ellipsis-v"></span>
-                        </button>
-                        <ul class="dropdown-menu-right" dropdownMenu>
-                          <li><a class="workItemList_MoveTop">Move to Top</a></li>
-                          <li><a class="workItemList_MoveBottom">Move to Bottom</a></li>
-                          <li class="divider" role="presentation"></li>
-                          <li><a class="workItemList_Open" href="./detail/429">Open</a></li>
-                          <li><a class="workItemList_Delete">Delete</a></li>
-                          <li><a class="workItemList_Backlog">Move to Backlog</a></li>
-                        </ul>
+                          <button class="btn btn-link color-grey" type="button" dropdownToggle>
+                            <span class="fa fa-ellipsis-v"></span>
+                          </button>
+                          <ul class="dropdown-menu-right" dropdownMenu>
+                            <li><a class="workItemList_MoveTop">Move to Top</a></li>
+                            <li><a class="workItemList_MoveBottom">Move to Bottom</a></li>
+                            <li class="divider" role="presentation"></li>
+                            <li><a class="workItemList_Open" href="./detail/429">Open</a></li>
+                            <li><a class="workItemList_Delete">Delete</a></li>
+                            <li><a class="workItemList_Backlog">Move to Backlog</a></li>
+                          </ul>
                         </span>
                       </div>
                       <div class="row-wrapper">
-                        <div class="col-md-10 col-sm-10 col-xs-9">
+                        <div class="">
                           <p class="multiline-truncation">{{ item.attributes['system.title'] }}</p>
                         </div>
-                        <div class="col-md-2 col-sm-2 col-xs-3 user-avatar">
+                        <div class="user-avatar">
                           <img *ngIf="item.relationalData?.assignees?.length"
                             src="{{item.relationalData?.assignees[0]?.attributes.imageURL + '&s=20'}}"
                             onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=20'" />

src/app/work-item/work-item-board/work-item-board.component.scss

@@ -23,7 +23,7 @@
       white-space: normal;
       .board-lane-column {
         background: $color-pf-black-200;
-        @include Border(1px, solid ,$color-pf-black-300);
+        @include Border(1px, solid, $color-pf-black-300);
         padding: em(0);
         height: 100%;
         padding-bottom: 0;
@@ -36,8 +36,8 @@
             @include Border(1px, solid , $color-pf-black-400);
             background: $color-pf-white;
             padding: em(15);
-            margin-bottom: em(5);
-            > div {
+            margin: em(5) 0;
+            >div {
               p {
                 margin: 0;
               }
@@ -52,6 +52,10 @@
                 padding-right: em(5);
               }
             }//div ended
+            .row-wrapper {
+              display: flex;
+              justify-content: space-between;
+            }
           }//boardcard ended
         }//boardlaneWrapper ended
         .lane-header {
@@ -151,7 +155,7 @@
       border: solid 0px red;
       position: relative;
       align-items: stretch;
-      > header {
+      >header {
         padding: 0 rem(20);
         border-bottom: 1px solid $color-pf-black-300 !important;
         .toolbar-pf {
@@ -221,4 +225,8 @@
 
 .gu-mirror {
   padding: em(15);
+  .row-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
 }

src/app/work-item/work-item-board/work-item-board.component.ts

@@ -121,7 +121,7 @@ export class WorkItemBoardComponent implements OnInit {
     let [el, source] = args;
   }
 
-  foo(workItem: WorkItem) {
+  getWI(workItem: WorkItem) {
     console.log(workItem);
     this.workItem = workItem;
   }
@@ -132,14 +132,14 @@ export class WorkItemBoardComponent implements OnInit {
     let state = target.parentElement.parentElement.getAttribute('data-state');
     //this.workItem = this.workItems[el.getAttribute('data-item')];
     //console.log(el.getAttribute('data-item'));
-    this.onChangeState(state);
+    this.changeState(state);
   }
 
   onOver(args) {
     let [el, container, source] = args;
     let containerClassList = container.parentElement.parentElement.classList;
     let laneSection = document.getElementsByClassName('board-lane-column');
-    for(let i=0; i<laneSection.length; i++){
+    for(let i=0; i<laneSection.length; i++) {
       laneSection[i].classList.remove('active-lane');
     }
     containerClassList.add('active-lane');
@@ -156,7 +156,7 @@ export class WorkItemBoardComponent implements OnInit {
     }, timeOut);
   }
 
-  onChangeState(option: any): void {
+  changeState(option: any): void {
     this.workItem.attributes['system.state'] = option;
     this.save();
   }

src/assets/stylesheets/_dragula.scss

@@ -1,34 +1,34 @@
-@import './../vendor/patternfly/stylesheets/patternfly/color-variables';
+@import '../../assets/stylesheets/base';
 .gu-mirror {
-    position: fixed!important;
-    cursor: -webkit-grabbing;
-    cursor:    -moz-grabbing;
-    cursor:         grabbing;
-    margin: 0!important;
-    z-index: 9999!important;
-    opacity: 1;
-    background-color: $color-pf-blue-100;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-    filter: alpha(opacity=80);
+  position: fixed!important;
+  cursor: -webkit-grabbing;
+  cursor:    -moz-grabbing;
+  cursor:         grabbing;
+  margin: 0!important;
+  z-index: 9999!important;
+  opacity: 1;
+  background-color: $color-pf-blue-100;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
 }
 .gu-hide {
-    display: none!important;
+  display: none!important;
 }
 .gu-unselectable {
-    -webkit-user-select: none!important;
-    -moz-user-select: none!important;
-    -ms-user-select: none!important;
-    user-select: none!important;
+  -webkit-user-select: none!important;
+  -moz-user-select: none!important;
+  -ms-user-select: none!important;
+  user-select: none!important;
 }
 .gu-transit {
-    position: relative;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: $color-pf-black-400;
-    }
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: $color-pf-black-400;
+  }
 }