Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
fix(board): add the side-panel and filters to the board view
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuawilson
joshuawilson committed Mar 6, 2017
1 parent c01f98a commit 7e95914
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 69 deletions.
14 changes: 7 additions & 7 deletions src/app/work-item/work-item-board/planner-board.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';

import { TreeModule } from 'angular2-tree-component';
import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
import { DndModule } from 'ng2-dnd';
import { ModalModule } from 'ngx-modal';
import { DropdownModule } from 'ng2-bootstrap';
import { TreeModule } from 'angular2-tree-component';
import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
import {
AlmIconModule,
DialogModule,
Expand All @@ -17,15 +17,14 @@ import {

import { UserService } from 'ngx-login-client';

import { GlobalSettings } from '../../shared/globals';
import { AlmFilterBoardList } from '../../pipes/alm-board-filter.pipe';
import { AuthUserResolve, UsersResolve } from '../common.resolver';
import { GlobalSettings } from '../../shared/globals';
import { IterationModule } from '../../iteration/iteration.module';
import { PlannerBoardRoutingModule } from './planner-board-routing.module';
import { SidepanelModule } from '../../side-panel/side-panel.module';
import { AuthUserResolve, UsersResolve } from '../common.resolver';

import { ToolbarPanelModule } from '../../toolbar-panel/toolbar-panel.module';
import { WorkItemBoardComponent } from './work-item-board.component';
import { PlannerBoardRoutingModule } from './planner-board-routing.module';

import { WorkItemDetailModule } from '../work-item-detail/work-item-detail.module';
import { WorkItemService } from '../work-item.service';

Expand All @@ -43,6 +42,7 @@ import { WorkItemService } from '../work-item.service';
ModalModule,
PlannerBoardRoutingModule,
SidepanelModule,
ToolbarPanelModule,
TooltipModule,
TreeModule,
TreeListModule,
Expand Down
111 changes: 62 additions & 49 deletions src/app/work-item/work-item-board/work-item-board.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,69 @@
<div id="board_topWorkItems" class="container-fluid flex-container flex-grow-1 in-column-direction boardWrapper">
<div class="board">
<!-- board columns -->
<div class="board-lane" *ngFor='let lane of lanes'>

<section class="flex-container in-column-direction board-lane-column">
<div class="lane-header">
<span class="dib">{{lane.option}}</span>
<span class="issueCount dib" >{{workItems | almFilterBoardList:lane.option | arrayCount}}</span>
</div>
<div class="container-fluid work-item-page">
<main class="row">
<aside>
<div class="contents">
<side-panel></side-panel>
</div>
</aside>
<section>
<toolbar-panel></toolbar-panel>
<div class="contents">
<div id="board_topWorkItems" class="container-fluid flex-container flex-grow-1 in-column-direction boardWrapper">
<div class="board">
<!-- board columns -->
<div class="board-lane" *ngFor='let lane of lanes'>

<div class="boardlaneWrapper">
<!--<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 class="board-card flex-container in-column-direction flex-grow-1" *ngFor='let item of workItems | almFilterBoardList:lane.option' (click)="gotoDetail(item)">
<div>
<div class="pull-left">
<span class="wi-type-icon" almIcon [iconType]="item.relationships?.baseType?.data?.id"></span>
<section class="flex-container in-column-direction board-lane-column">
<div class="lane-header">
<span class="dib">{{lane.option}}</span>
<span class="issueCount dib" >{{workItems | almFilterBoardList:lane.option | arrayCount}}</span>
</div>
<span class="pull-left"> {{item.id}} </span>
<span dropdown>
<button class="pull-right 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>
<div class="col-md-10 col-sm-10 col-xs-9">
<p class="multiline-truncation">{{ item.attributes['system.title'] }}</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-3 user-avatar pull-right">
<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'" />
<span *ngIf="!item.relationalData?.assignees?.length" class="fa fa-user not-assigned-user-icon pull-right"></span>

<div class="boardlaneWrapper">
<!--<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 class="board-card flex-container in-column-direction flex-grow-1" *ngFor='let item of workItems | almFilterBoardList:lane.option' (click)="gotoDetail(item)">
<div>
<div class="pull-left">
<span class="wi-type-icon" almIcon [iconType]="item.relationships?.baseType?.data?.id"></span>
</div>
<span class="pull-left"> {{item.id}} </span>
<span dropdown>
<button class="pull-right 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>
<div class="col-md-10 col-sm-10 col-xs-9">
<p class="multiline-truncation">{{ item.attributes['system.title'] }}</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-3 user-avatar pull-right">
<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'" />
<span *ngIf="!item.relationalData?.assignees?.length" class="fa fa-user not-assigned-user-icon pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
<router-outlet></router-outlet>
</section>
</main>
</div>

<router-outlet></router-outlet>
131 changes: 131 additions & 0 deletions src/app/work-item/work-item-board/work-item-board.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,134 @@
}
}

.work-item-page {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
.container-modal {
border: solid 0 red;
background-color: $color-pf-black-100;
position: absolute;
padding: $grid-gutter-width/2;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
overflow-y: auto;
.container-modal-header {
margin: 0;
margin-bottom: $grid-gutter-width/2;
display: flex;
align-items: baseline;
justify-content: space-between;
}
&.container-cards-pf {
.card-pf-title {
text-transform: capitalize;
}
.card-pf-info {
min-height: 4.5em;
@include multiline-truncate($line-height: 1.5em, $line-count: 3, $bg-color: $color-pf-white);
}
}
}

.dropdown {
a {
cursor: pointer;
}
}
.with-cursor-pointer {
cursor: pointer;
}
.with-color-blue {
color: $color-pf-blue-400;
}
>main {
display: flex;
flex-direction: row;
flex: 1;
align-items: stretch;
border-top: 1px solid $color-pf-black-300;
>aside {
flex: 3;
display: flex;
flex-direction: column;
background-color: $color-pf-black-200;
border-right: 1px solid $color-pf-black-300;
position: relative;
align-items: stretch;
.contents {
//@extend .fill-container;
flex: 1;
display: flex;
overflow: auto;
align-items: stretch;
}
}
>section {
flex: 9;
display: flex;
flex-direction: column;
border: solid 0px red;
position: relative;
align-items: stretch;
> header {
padding: 0 rem(20);
border-bottom: 1px solid $color-pf-black-300 !important;
.toolbar-pf {
border-color: transparent;
.toolbar-pf-actions {
border-color: transparent;
.form-group {
border-right: none;
&:first {
border-left: none;
}
}
.toolbar-pf-action-right {
.pficon-add-circle-o{
@extend .with-color-blue;
font-size: ceil(($font-size-base * 1.2)) ;
}
}
}
// ensure icons dont fold around inputs
.wi-input-filter-dropdown {
position: relative;
.wi-input-filter-dropdown-list {
width: 100%;
top: 2.5rem;
padding: 0.25rem;
}
>div {
position: relative;
//HACK:prevents caret icon from folding to a new line
>input {
margin-right: -2.0rem;
}
//HACK:positions the caret in right margin are of input
>span.caret::before {
z-index: 2;
display: inline-block;
height: 1.5rem;
line-height: 1.5rem;
width: 1.5rem;
}
}
}
}
}
.contents {
//@extend .fill-container;
flex: 1;
display: flex;
overflow: auto;
align-items: stretch;
}
}
}
}
2 changes: 1 addition & 1 deletion src/app/work-item/work-item-board/work-item-board.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { WorkItemService } from '../work-item.service';

@Component({
host: {
'class': 'flex-container in-column-direction flex-grow-1'
'class': 'app-component flex-container in-column-direction flex-grow-1'
},
selector: 'alm-board',
templateUrl: './work-item-board.component.html',
Expand Down
23 changes: 11 additions & 12 deletions src/app/work-item/work-item-list/planner-list.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
import { ToolbarPanelModule } from './../../toolbar-panel/toolbar-panel.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';

import { TreeModule } from 'angular2-tree-component';
import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
import { DndModule } from 'ng2-dnd';
import { ModalModule } from 'ngx-modal';
import { DropdownModule } from 'ng2-bootstrap';
import { ModalModule } from 'ngx-modal';
import { TreeModule } from 'angular2-tree-component';
import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
import {
AlmIconModule,
DialogModule,
InfiniteScrollModule,
TreeListModule,
WidgetsModule
} from 'ngx-widgets';

import { UserService } from 'ngx-login-client';

import { AuthUserResolve, UsersResolve } from '../common.resolver';
import { FabPlannerAssociateIterationModalComponent } from '../work-item-iteration-association-modal/work-item-iteration-association-modal.component';
import { GlobalSettings } from '../../shared/globals';
import { IterationModule } from '../../iteration/iteration.module';
import { PlannerListRoutingModule } from './planner-list-routing.module';
import { SidepanelModule } from '../../side-panel/side-panel.module';
import { AuthUserResolve, UsersResolve } from '../common.resolver';
import { FabPlannerAssociateIterationModalComponent } from '../work-item-iteration-association-modal/work-item-iteration-association-modal.component';
import { WorkItemQuickAddModule } from '../work-item-quick-add/work-item-quick-add.module';
import { ToolbarPanelModule } from '../../toolbar-panel/toolbar-panel.module';
import { WorkItemDetailModule } from '../work-item-detail/work-item-detail.module';
import { WorkItemListComponent } from './work-item-list.component';
import { PlannerListRoutingModule } from './planner-list-routing.module';
import { WorkItemListEntryComponent } from './work-item-list-entry/work-item-list-entry.component';
import { WorkItemDetailModule } from '../work-item-detail/work-item-detail.module';
import { WorkItemQuickAddModule } from '../work-item-quick-add/work-item-quick-add.module';
import { WorkItemService } from '../work-item.service';

@NgModule({
Expand All @@ -52,9 +51,9 @@ import { WorkItemService } from '../work-item.service';
WorkItemQuickAddModule
],
declarations: [
FabPlannerAssociateIterationModalComponent,
WorkItemListComponent,
WorkItemListEntryComponent,
FabPlannerAssociateIterationModalComponent
WorkItemListEntryComponent
],
providers: [
AuthUserResolve,
Expand Down

0 comments on commit 7e95914

Please sign in to comment.