From be75d28170a5c22ffdd4e05264be304885ea7ce8 Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Wed, 10 May 2017 14:44:05 +0200
Subject: [PATCH] Header redesign - fixes #116

Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
 css/style.css                     | 37 +++++++++++++++----------
 templates/part.board.mainView.php | 46 +++++++++++++++++++------------
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/css/style.css b/css/style.css
index b7efc8a6d..4ebf67c15 100644
--- a/css/style.css
+++ b/css/style.css
@@ -126,16 +126,23 @@ button:hover {
 	position: relative;
 	z-index: 120;
 	height: 44px;
-	background-color: #eee;
 }
 
-#board-header h1 {
+#board-header > * {
 	font-size: 14pt;
-	margin: 0;
-	padding: 12px;
+	padding: 7px;
+	margin: 7px;
 	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 {
 	font-size: 10pt;
 	float: right;
@@ -185,28 +192,24 @@ button:hover {
 	background-color: transparent;
 }
 
-.board-action-button {
-	font-size: 12pt;
-	font-weight: 100;
-	border: none;
-	margin-left: 10px;
+#board-header > .board-action-button {
+	float: right;
 }
 
 #stack-add {
-	float: right;
-	margin: 8px;
-	background-color: #ffffff;
-	border: 1px solid #bbb;
-	border-radius: 4px;
+	background-color: rgba(240,240,240,.9);
+	border-radius: 3px;
+	padding: 0;
 }
 
 #stack-add input {
-	padding: 4px 5px;
+	padding: 7px;
 	margin: 0px;
 	border: 0px none transparent;
 	display: table-cell;
 	vertical-align: middle;
 	min-height: initial;
+	background-color: rgba(240,240,240,.9);
 }
 
 #stack-add input:invalid {
@@ -928,6 +931,10 @@ button:hover {
 	right: 0px;
 }
 
+.icon-home {
+	background-image: url('/core/img/places/home.svg');
+}
+
 /**
  * Hotfix for https://github.com/angular-ui/ui-select/issues/1652
  */
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index f040c4071..3a0ca2a53 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -4,30 +4,40 @@
 		<h2>{{ statusservice.title }}</h2>
 		<p>{{ statusservice.text }}</p></div>
 </div>
-<div id="board-header"
-	 style="background-color: #{{boardservice.getCurrent().color }}; color: {{boardservice.getCurrent().color | textColorFilter }};">
-	<h1>
+<div id="board-header">
+	<a href="#" title="<?php p($l->t('All Boards')); ?>">
+		<i class="icon icon-home"></i>
+	</a>
+	<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
 		{{ boardservice.getCurrent().title }}
 	</h1>
-  	<div id="board-actions">
-		<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>
-		<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>
-		<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>
-    </div>
-</div>
-
-<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
-	<form class="ng-pristine ng-valid" ng-submit="createStack()">
-		<input type="text" placeholder="Add a new stack"
+	<div class="board-action-button">
+		<a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
+			<i class="icon icon-details"></i>
+		</a>
+	</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 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"></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()">
+			<input type="text" placeholder="Add a new stack"
 				ng-focus="status.addStack=true"
 				ng-blur="status.addStack=false"
 				ng-model="newStack.title" required
 				maxlength="100" />
-		<button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};"
-				type="submit"></button>
-	</form>
+			<button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
+		</form>
 	</div>
 </div>
+
 <div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board">
 
 	<search on-search="search" class="ng-hide"></search>
@@ -126,7 +136,7 @@
 				</div>
 			</div>
 		</div>
-		
+
 	</div>
 
-</div>
\ No newline at end of file
+</div>