Header redesign - fixes #116

Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj
2017-05-10 14:44:05 +02:00
parent 9c6b2b160e
commit be75d28170
2 changed files with 50 additions and 33 deletions

View File

@@ -126,16 +126,23 @@ button:hover {
position: relative; position: relative;
z-index: 120; z-index: 120;
height: 44px; height: 44px;
background-color: #eee;
} }
#board-header h1 { #board-header > * {
font-size: 14pt; font-size: 14pt;
margin: 0; padding: 7px;
padding: 12px; margin: 7px;
float: left; float: left;
} }
#board-header > a {
background: url('/core/img/breadcrumb.svg?v=1');
background-repeat: no-repeat;
background-position: right center;
background-size: auto 24px;
padding-right: 24px;
}
#board-actions { #board-actions {
font-size: 10pt; font-size: 10pt;
float: right; float: right;
@@ -185,28 +192,24 @@ button:hover {
background-color: transparent; background-color: transparent;
} }
.board-action-button { #board-header > .board-action-button {
font-size: 12pt; float: right;
font-weight: 100;
border: none;
margin-left: 10px;
} }
#stack-add { #stack-add {
float: right; background-color: rgba(240,240,240,.9);
margin: 8px; border-radius: 3px;
background-color: #ffffff; padding: 0;
border: 1px solid #bbb;
border-radius: 4px;
} }
#stack-add input { #stack-add input {
padding: 4px 5px; padding: 7px;
margin: 0px; margin: 0px;
border: 0px none transparent; border: 0px none transparent;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
min-height: initial; min-height: initial;
background-color: rgba(240,240,240,.9);
} }
#stack-add input:invalid { #stack-add input:invalid {
@@ -928,6 +931,10 @@ button:hover {
right: 0px; right: 0px;
} }
.icon-home {
background-image: url('/core/img/places/home.svg');
}
/** /**
* Hotfix for https://github.com/angular-ui/ui-select/issues/1652 * Hotfix for https://github.com/angular-ui/ui-select/issues/1652
*/ */

View File

@@ -4,30 +4,40 @@
<h2>{{ statusservice.title }}</h2> <h2>{{ statusservice.title }}</h2>
<p>{{ statusservice.text }}</p></div> <p>{{ statusservice.text }}</p></div>
</div> </div>
<div id="board-header" <div id="board-header">
style="background-color: #{{boardservice.getCurrent().color }}; color: {{boardservice.getCurrent().color | textColorFilter }};"> <a href="#" title="<?php p($l->t('All Boards')); ?>">
<h1> <i class="icon icon-home"></i>
</a>
<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
{{ boardservice.getCurrent().title }} {{ boardservice.getCurrent().title }}
</h1> </h1>
<div id="board-actions"> <div class="board-action-button">
<div class="board-action-button" ng-if="filter!='archive'"><a ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>"><i class="icon icon-archive{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a></div> <a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<div class="board-action-button" ng-if="filter=='archive'"><a ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>"><i class="icon icon-archive{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a></div> <i class="icon icon-details"></i>
<div class="board-action-button"><a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>"><i class="icon icon-details{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a> </a>
</div> </div>
<div class="board-action-button" ng-if="filter!='archive'">
<a ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
</div> </div>
<div class="board-action-button" ng-if="filter=='archive'">
<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()"> <a ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
</div>
<div id="stack-add" class="board-action-button" ng-if="boardservice.canEdit() && checkCanEdit()">
<form class="ng-pristine ng-valid" ng-submit="createStack()"> <form class="ng-pristine ng-valid" ng-submit="createStack()">
<input type="text" placeholder="Add a new stack" <input type="text" placeholder="Add a new stack"
ng-focus="status.addStack=true" ng-focus="status.addStack=true"
ng-blur="status.addStack=false" ng-blur="status.addStack=false"
ng-model="newStack.title" required ng-model="newStack.title" required
maxlength="100" /> maxlength="100" />
<button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" <button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
type="submit"></button>
</form> </form>
</div> </div>
</div> </div>
<div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board"> <div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board">
<search on-search="search" class="ng-hide"></search> <search on-search="search" class="ng-hide"></search>