Skip to content

Commit

Permalink
lvg-board layout with flexbox v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@erost
erost committed Aug 17, 2016
1 parent a81d47c commit df3d342
Show file tree
Hide file tree
Showing 22 changed files with 610 additions and 716 deletions.
2 changes: 1 addition & 1 deletion src/main/webapp/WEB-INF/views/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<aside>
<md-sidenav md-component-id="left" class="md-sidenav-left"><lvg-sidebar-content></lvg-sidebar-content></md-sidenav>
</aside>
<div role="main" data-ui-view></div>
<div class="lvg-main-content" role="main" data-ui-view></div>
<lvg-notification></lvg-notification>
{{#inlineTemplates}}{{.}}{{/inlineTemplates}}
</body>
Expand Down
82 changes: 42 additions & 40 deletions src/main/webapp/app/components/board/board.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,49 @@
<lvg-navbar-board board="$ctrl.board" project="$ctrl.project"></lvg-navbar-board>
</header>

<lvg-board-controls
board="$ctrl.board"
project="$ctrl.project"
toggled-sidebar="$ctrl.toggledSidebar"
side-bar-location="$ctrl.sidebarLocation"
un-select-all="$ctrl.unSelectAll"
select-all="$ctrl.selectAll"
selected-visible-count="$ctrl.selectedVisibleCount"
format-bulk-request="$ctrl.formatBulkRequest"
selected-visible-cards-id-by-column-id="$ctrl.selectedVisibleCardsIdByColumnId">
</lvg-board-controls>
<div class="lvg-board__container">
<lvg-board-controls
board="$ctrl.board"
project="$ctrl.project"
toggled-sidebar="$ctrl.toggledSidebar"
side-bar-location="$ctrl.sidebarLocation"
un-select-all="$ctrl.unSelectAll"
select-all="$ctrl.selectAll"
selected-visible-count="$ctrl.selectedVisibleCount"
format-bulk-request="$ctrl.formatBulkRequest"
selected-visible-cards-id-by-column-id="$ctrl.selectedVisibleCardsIdByColumnId">
</lvg-board-controls>

<div class="lavagna-board-sidebar lavagna-board-left-sidebar lavagna-left-sidebar-slide-out"
data-ng-class="{'lavagna-board-left-sidebar-out':$ctrl.toggledSidebar}">
<div data-ng-if="$ctrl.toggledSidebar">
<lvg-board-sidebar project="$ctrl.project" user="$ctrl.user" board="$ctrl.board" metadata-ref="$ctrl.getMetadata()" side-bar-location="$ctrl.sidebarLocation"></lvg-board-sidebar>
</div>
</div>

<div class="horizontal-slide lavagna-left-sidebar-slide-open" data-ng-class="{'lavagna-board-left-sidebar-open':$ctrl.toggledSidebar, 'lvg-can-move-columns' : $ctrl.sortableColumnOptions, 'lvg-can-move-cards': $ctrl.sortableCardOptions}"
data-lvg-fill-height="{{$ctrl.toggledSidebar}}" data-lvg-fill-height-margin="295">
<lvg-rebuild-if-change to-watch="$ctrl.getMetadata().hash">
<ul class="lavagna-board-column-holder"
ng-style="{width : ($ctrl.columns.length*(290 + 4 * 2))+'px'}"
lvg-dnd="$ctrl.columns"
lvg-dnd-drop="$ctrl.dropColumn($index, $oldIndex)"
lvg-dnd-opts="{group: 'column', animation: 150}">
<li class="lavagna-board-column lavagna-sortable-board-column"
data-ng-repeat="column in $ctrl.columns track by column.id"
data-lvg-update-column-size>
<lvg-board-column
project-short-name="{{::$ctrl.project.shortName}}"
board-short-name="{{::$ctrl.board.shortName}}"
metadata-ref="$ctrl.getMetadata()"
column="column"
selected-cards="$ctrl.selectedCards"
search-filter-ref="$ctrl.searchFilter"
user-ref="$ctrl.user"></lvg-board-column>
</li>
</ul>
</lvg-rebuild-if-change>
<div class="lvg-board__inner-container"
data-ng-class="{'lvg-board__sidebar-open': $ctrl.toggledSidebar,'lvg-can-move-columns' : $ctrl.sortableColumnOptions, 'lvg-can-move-cards': $ctrl.sortableCardOptions}">
<div class="lvg-board__sidebar-wrapper">
<lvg-board-sidebar data-ng-if="$ctrl.toggledSidebar"
project="$ctrl.project"
user="$ctrl.user"
board="$ctrl.board"
metadata-ref="$ctrl.getMetadata()"
side-bar-location="$ctrl.sidebarLocation">
</lvg-board-sidebar>
</div>
<div class="lvg-board__wrapper">
<lvg-rebuild-if-change class="lvg-board__rebuild-if-change" to-watch="$ctrl.getMetadata().hash"
lvg-dnd="$ctrl.columns"
lvg-dnd-drop="$ctrl.dropColumn($index, $oldIndex)"
lvg-dnd-opts="{group: 'column', animation: 0, draggingClass: 'lvg-board__dragging-columns', handle: '.lvg-column__handle'}">
<lvg-board-column
data-ng-repeat="column in $ctrl.columns track by column.id"
project-short-name="{{::$ctrl.project.shortName}}"
board-short-name="{{::$ctrl.board.shortName}}"
metadata-ref="$ctrl.getMetadata()"
column="column"
selected-cards="$ctrl.selectedCards"
search-filter-ref="$ctrl.searchFilter"
user-ref="$ctrl.user"></lvg-board-column>
</lvg-rebuild-if-change>
</div>
</div>
</div>

<div id="cardModalAnchor" data-ui-view data-autoscroll="false"></div>


86 changes: 86 additions & 0 deletions src/main/webapp/app/components/board/column/board-column.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
lvg-board-column {
display: block;
background-color: #e5e5e5;
position: relative;
width: 290px;
min-width: 290px;
margin: 4px;
border: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.lvg-board-column__header {
display: block;
width: 290px;
height: 40px;
background-color: #fcfcfc;
border: 0;
padding: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.lvg-board-column__header-title {
height: 100%;
max-width: 290px;
}

.lvg-board-column__header-title-text {
padding: 9px 0px 0px 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.lvg-board-column__header-menu {
width: 52px;
height: 100%;
}

.lvg-board-column__header-edit {
display: block;
width: 290px;
}

.lvg-board-column__content {
min-height: 150px;
display: block;
overflow-y: auto;
overflow-x: hidden;
background-color: #fcfcfc;
}

.lvg-board__dragging-columns lvg-board-column {
opacity: .6;
border: 3px dashed #d5d5d5;
}

.lvg-board__dragging-columns lvg-board-column .lvg-board-column__header {
background-color: #e5e5e5;
}

.lvg-board__dragging-columns lvg-board-column .lvg-board-column__content {
display: none;
}

.lvg-board__dragging-columns lvg-board-column.sortable-ghost {
background-color: #d5d5d5;
border: 3px solid #d5d5d5;
}

.lvg-board__dragging-columns lvg-board-column.sortable-ghost .lvg-board-column__header {
background-color: #d5d5d5;
}

lvg-board-column.sortable-drag {
background-color: #fcfcfc;
}

.sortable-drag .lvg-board-column__content {
display: none;
}

lvg-board-column.sortable-drag {
background-color: #fcfcfc;
}
124 changes: 48 additions & 76 deletions src/main/webapp/app/components/board/column/board-column.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,31 @@
<div class="panel-heading" data-ng-style="::(boardColumnCtrl.metadata.columnsDefinition[boardColumnCtrl.column.status].color|columnColor)">
<div class="lvg-column-handle" layout="row">
<div flex="80">
<div data-ng-if="!boardColumnCtrl.columnState.editColumnName">
<span data-ng-click="boardColumnCtrl.columnState.editColumnName=true; boardColumnCtrl.columnState.newColumnName = boardColumnCtrl.column.name" data-lvg-has-permission="RENAME_COLUMN"class="lvg-edit">{{boardColumnCtrl.column.name}}</span>
<div data-lvg-update-column-size>
<div class="lvg-board-column__header" data-ng-style="::(boardColumnCtrl.metadata.columnsDefinition[boardColumnCtrl.column.status].color|columnColor)">
<div class="lvg-board-column__header-title"
data-ng-hide="boardColumnCtrl.columnState.editColumnName"
layout="row">
<div class="lvg-board-column__header-title-text lvg-column__handle" flex>
<span data-lvg-has-permission="RENAME_COLUMN"
data-ng-click="boardColumnCtrl.columnState.editColumnName=true; boardColumnCtrl.columnState.newColumnName = boardColumnCtrl.column.name"
class="lavagna-hide lvg-edit" title="{{boardColumnCtrl.column.name}}">{{boardColumnCtrl.column.name}}</span>
<span data-lvg-has-not-permission="RENAME_COLUMN" class="lvg-edit">{{boardColumnCtrl.column.name}}</span>
</div>
<div data-ng-if="boardColumnCtrl.columnState.editColumnName">
<div class="form-group">
<input type="text" class="form-control" data-ng-model="boardColumnCtrl.columnState.newColumnName">
</div>
<div>
<button class="lvg-button lvg-button-submit" data-ng-click="boardColumnCtrl.saveNewColumnName(boardColumnCtrl.columnState.newColumnName); boardColumnCtrl.columnState.editColumnName=false">{{::('partials.fragments.columns-fragment.save' | translate)}}</button>
<button class="lvg-button lvg-button-default" data-ng-click="boardColumnCtrl.columnState.editColumnName=false">{{::('partials.fragments.columns-fragment.cancel' | translate)}}</button>
</div>
</div>
</div>
<div flex="20">
<div data-lvg-has-at-least-one-permission="CREATE_CARD,RENAME_COLUMN,MOVE_CARD,MOVE_COLUMN">
<div class="lvg-board-column__header-menu"
data-lvg-has-at-least-one-permission="CREATE_CARD,RENAME_COLUMN,MOVE_CARD,MOVE_COLUMN"
flex="nogrow">
<md-menu>
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)"><span class="fa fa-chevron-down"></md-button>
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)"><span class="fa fa-chevron-down"></span></md-button>
<md-menu-content>
<md-menu-item data-lvg-has-permission="CREATE_CARD"><md-button data-ng-click="boardColumnCtrl.columnState.addNewCardFromTop = true">{{::('partials.fragments.columns-fragment.addCard' | translate)}}</md-button></md-menu-item>
<md-menu-item data-lvg-has-permission="CREATE_CARD"><md-button data-ng-click="boardColumnCtrl.newCard()">{{::('partials.fragments.columns-fragment.addCard' | translate)}}</md-button></md-menu-item>
<md-menu-item data-lvg-has-permission="MANAGE_LABEL_VALUE"><md-button data-ng-click="boardColumnCtrl.selectAllInColumn()">{{::('partials.fragments.columns-fragment.selectAll' | translate)}}</md-button></md-menu-item>
<md-menu-item data-lvg-has-permission="MANAGE_LABEL_VALUE"><md-button data-ng-click="boardColumnCtrl.unSelectAllInColumn()">{{::('partials.fragments.columns-fragment.selectNone' | translate)}}</md-button></md-menu-item>
<md-menu-item data-lvg-has-permission="RENAME_COLUMN">
<md-menu>
<md-button ng-click="$mdOpenMenu($event)">{{::('partials.fragments.columns-fragment.columnStatus' | translate)}}</md-button>
<md-menu-content>
<md-menu-item data-ng-repeat="definition in boardColumnCtrl.metadata.columnsDefinition | addColDefOrder | orderBy:'order'">
<md-button data-ng-click="boardColumnCtrl.setColumnDefinition(definition.id);"><span data-ng-style="::(definition.color | color)" class="fa fa-square"></span> {{::definition.value|capitalize}}</md-button>
</md-menu-item>
</md-menu-content>
<md-menu-content>
<md-menu-item data-ng-repeat="definition in boardColumnCtrl.metadata.columnsDefinition | addColDefOrder | orderBy:'order'">
<md-button data-ng-click="boardColumnCtrl.setColumnDefinition(definition.id);"><span data-ng-style="::(definition.color | color)" class="fa fa-square"></span> {{::definition.value|capitalize}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-item data-lvg-has-permission="MOVE_CARD"><md-button data-ng-click="boardColumnCtrl.moveAllCardsInColumn(boardColumnCtrl.cardsInColumn, 'ARCHIVE')">{{::('partials.fragments.columns-fragment.moveAllToArchive' | translate)}}</md-button></md-menu-item>
Expand All @@ -43,62 +38,39 @@
</md-menu>
</div>
</div>
</div>
<div data-ng-if="boardColumnCtrl.columnState.addNewCardFromTop" class="row">
<div class="col-xs-11">
<!-- TODO: move in a directive -->
<form data-ng-submit="boardColumnCtrl.createCardFromTop(boardColumnCtrl.columnState.cardToCreateFromTop)">
<div class="form-group">
<input placeholder="{{'partials.fragments.columns-fragment.cardName.placeholder' | translate}}"
required="required"
data-ng-model="boardColumnCtrl.columnState.cardToCreateFromTop.name" class="form-control"></input>
<div class="lvg-board-column__header-edit" data-ng-if="boardColumnCtrl.columnState.editColumnName">
<form layout="row"
data-ng-submit="boardColumnCtrl.saveNewColumnName(boardColumnCtrl.columnState.newColumnName); boardColumnCtrl.columnState.editColumnName=false">
<div flex>
<md-input-container md-no-float class="lvg-input-container__inline">
<input ng-model="boardColumnCtrl.columnState.newColumnName">
</md-input-container>
</div>
<div>
<button type="submit" class="lvg-button lvg-button-submit">{{::('button.add' | translate)}}</button>
<button type="button" data-ng-click="boardColumnCtrl.columnState.cardToCreateFromTop = null; boardColumnCtrl.columnState.addNewCardFromTop = false" class="lvg-button lvg-button-default">{{::('partials.fragments.columns-fragment.cancel' | translate)}}</span></button>
<div flex="nogrow">
<md-button class="lvg-small-icon-button" type="submit" ng-disabled="!boardColumnCtrl.columnState.newColumnName">
<md-icon md-svg-icon="ok"></md-icon>
</md-button>
</div>
<div flex="nogrow">
<md-button class="lvg-small-icon-button" ng-click="boardColumnCtrl.columnState.editColumnName=false">
<md-icon md-svg-icon="close"></md-icon>
</md-button>
</div>
</form>
</div>
</div>
</div>
<div class="panel-body">
<ul class="lavagna-board-cards" data-ng-show="boardColumnCtrl.loaded" style="overflow-y:auto;overflow-x:hidden"
data-ng-style="{'max-height' : (maxHeight - panelHeadAndFooterSize - 40)+'px'}"
lvg-dnd="boardColumnCtrl.cardsInColumn"
lvg-dnd-drop="boardColumnCtrl.dropCard($index)"
lvg-dnd-dragstart="boardColumnCtrl.dragStartCard($item)"
lvg-dnd-dragend="boardColumnCtrl.dragEndCard()"
lvg-dnd-opts="{group: 'card', animation: 150}">
<li ng-repeat="card in boardColumnCtrl.cardsInColumn | filter : boardColumnCtrl.searchFilter.cardFilter track by (card.hash+boardColumnCtrl.metadataRef().hash)"
class="lavagna-board-card">
<lvg-card-fragment-v2
view="board"
card-ref="card"
user-ref="boardColumnCtrl.user"
project-metadata-ref="boardColumnCtrl.metadataRef()"
selected-ref="boardColumnCtrl.selectedCards"></lvg-card-fragment-v2>
</li>
</ul>
</div>
<div class="panel-footer" data-lvg-has-permission="CREATE_CARD">
<ul class="board-controls"
data-ng-hide="boardColumnCtrl.columnState.addNewCard || boardColumnCtrl.columnState.deleteColumn">
<li class="control-box">
<span data-ng-click="boardColumnCtrl.columnState.addNewCard = true"
class="fa fa-plus" title="{{'partials.fragments.columns-fragment.addCard' | translate}}"></span></li>
</ul>
<div data-ng-if="boardColumnCtrl.columnState.addNewCard">
<form data-ng-submit="boardColumnCtrl.createCard(boardColumnCtrl.columnState.cardToCreate)">
<div class="form-group">
<input placeholder="{{::('partials.fragments.columns-fragment.cardName.placeholder' | translate)}})"
required="required"
data-ng-model="boardColumnCtrl.columnState.cardToCreate.name" class="form-control"></input>
</div>
<div>
<button type="submit" class="lvg-button lvg-button-submit">{{::('button.add' | translate)}}</button>
<button type="button" data-ng-click="boardColumnCtrl.columnState.cardToCreate = null; boardColumnCtrl.columnState.addNewCard = false"
class="lvg-button lvg-button-default">{{::('partials.fragments.columns-fragment.cancel' | translate)}}</button>
</div>
</form>
<div class="lvg-board-column__content"
lvg-dnd="boardColumnCtrl.cardsInColumn"
lvg-dnd-drop="boardColumnCtrl.dropCard($index)"
lvg-dnd-dragstart="boardColumnCtrl.dragStartCard($item)"
lvg-dnd-dragend="boardColumnCtrl.dragEndCard()"
lvg-dnd-opts="{group: 'card', animation: 150}">
<lvg-card-fragment-v2
ng-repeat="card in boardColumnCtrl.cardsInColumn | filter : boardColumnCtrl.searchFilter.cardFilter track by (card.hash+boardColumnCtrl.metadataRef().hash)"
view="board"
card-ref="card"
user-ref="boardColumnCtrl.user"
project-metadata-ref="boardColumnCtrl.metadataRef()"
selected-ref="boardColumnCtrl.selectedCards"></lvg-card-fragment-v2>
</div>
</div>

0 comments on commit df3d342

Please sign in to comment.