Merge pull request #146 from nextcloud/header-bar-improvements

header bar and mobile device improvements

css/style.css

@@ -42,12 +42,12 @@ input.input-inline {
 	margin: -4px 0;
 }
 
-button {
+button.button-inline {
 	border: 0;
 	background-color: transparent;
 }
 
-button:hover {
+button.button-inline:hover {
 	border: 0;
 	background-color: transparent;
 }
@@ -126,21 +126,27 @@ button:hover {
 	position: relative;
 	z-index: 120;
 	height: 44px;
-}
+	display: flex;
-
+	align-items: center;
-#board-header > * {
 	font-size: 14pt;
-	padding: 7px;
-	margin: 7px;
-	float: left;
 }
 
-#board-header > a {
+#board-header .crumb {
-	background: url('/core/img/breadcrumb.svg?v=1');
+	background-image: url('../../../core/img/breadcrumb.svg?v=1');
-	background-repeat: no-repeat;
-	background-position: right center;
 	background-size: auto 24px;
-	padding-right: 24px;
+	background-position: right center;
+	background-repeat: no-repeat;
+	padding: 7px 14px;
+}
+
+#board-header > h1 {
+	white-space: nowrap;
+	padding: 7px;
+}
+
+#board-header #home {
+	position: relative;
+	padding: 0px;
 }
 
 #board-actions {
@@ -161,6 +167,38 @@ button:hover {
 	cursor: pointer;
 }
 
+#board-header-controls {
+	display: flex;
+	align-items: center;
+	position: relative;
+	margin-left: auto;
+}
+
+#board-header-controls-menu {
+  display: none;
+}
+
+#board-header-controls-menu button {
+	padding: 15px 20px 15px 20px;
+}
+
+#board-header-controls-menu #popover-controls {
+	display: flex;
+	align-items: center;
+	padding-left: 3px;
+}
+
+#board-header-controls-menu .popovermenu{
+	margin-top: 35px;
+	margin-right: 6px;
+}
+
+.board-action-button,
+.board-action-button * {
+	display: flex;
+	align-items: center;
+}
+
 .filter-select {
 	position: absolute;
 	right: auto;
@@ -192,22 +230,19 @@ button:hover {
 	background-color: transparent;
 }
 
-#board-header > .board-action-button {
-	float: right;
-}
-
 #stack-add {
 	background-color: rgba(240,240,240,.9);
 	border-radius: 3px;
-	padding: 0;
+	margin-right: 3px;
+}
+
+#stack-add > form {
+	display: flex;
 }
 
 #stack-add input {
-	padding: 7px;
+	padding: 4px 5px;
-	margin: 0px;
 	border: 0px none transparent;
-	display: table-cell;
-	vertical-align: middle;
 	min-height: initial;
 	background-color: rgba(240,240,240,.9);
 }
@@ -224,11 +259,6 @@ button:hover {
 	box-shadow:none;
 }
 
-#stack-add button {
-	display: table-cell;
-    vertical-align: middle;
-}
-
 .stack {
 	width: 320px;
 	margin-right: 10px;
@@ -321,12 +351,17 @@ button:hover {
 	opacity: 1;
 }
 
-.card .card-controls .space {
+.card .card-controls button {
-	width: 100%;
+	padding: 0px;
+	margin-right: 0px;
+}
+
+.app-popover-menu-utils {
+	margin-left: auto;
 	min-height: 16px;
 }
 
-.card .popovermenu {
+.popovermenu {
 	z-index: 999;
 	opacity: 1;
 	margin-top: 25px;
@@ -334,7 +369,7 @@ button:hover {
 	display: block;
 }
 
-.card .popovermenu.hidden {
+.popovermenu.hidden {
 	display: none;
 }
 
@@ -850,14 +885,12 @@ button:hover {
 
 @media (max-width: 480px) {
 	/* hide board actions on mobile */
-	#board-actions {
+	#board-header-controls {
 		display: none !important;
 	}
-}
 
-@media only screen and (max-width: 768px) {
+	#board-header-controls-menu {
-	#board-header h1 {
+		display: flex;
-		margin-left: 50px;
 	}
 }
 
@@ -959,7 +992,7 @@ button:hover {
 }
 
 .icon-home {
-	background-image: url('/core/img/places/home.svg');
+	background-image: url('../../../core/img/places/home.svg');
 }
 
 /**

js/directive/appPopoverMenuUtils.js

@@ -37,7 +37,8 @@ app.directive('appPopoverMenuUtils', function () {
 				e.stopPropagation();
 			});
             scope.$on('documentClicked', function (scope, event) {
-                if (event.target !== button) {
+                /* prevent closing popover if target has no-close class */
+                if (event.target !== button && !$(event.target).hasClass('no-close')) {
                     menu.addClass('hidden');
                 }
                 button.css('display','');
@@ -45,4 +46,3 @@ app.directive('appPopoverMenuUtils', function () {
         }
     };
 });
-

templates/part.board.mainView.php

@@ -5,37 +5,60 @@
 		<p>{{ statusservice.text }}</p></div>
 </div>
 <div id="board-header">
-	<a href="#" title="<?php p($l->t('All Boards')); ?>">
+	<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
 		<i class="icon icon-home"></i>
+		<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
 	</a>
 	<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
 		{{ boardservice.getCurrent().title }}
 	</h1>
-	<div class="board-action-button">
+	<div id="board-header-controls">
-		<a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
+		<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
-			<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>
+				<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
 			</form>
 		</div>
+		<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
+			<i class="icon icon-archive"></i>
+		</a>
+		<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
+			<i class="icon icon-archive"></i>
+		</a>
+		<a class="board-action-button button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
+			<i class="icon icon-details"></i>
+		</a>
+	</div>
+	<div id="board-header-controls-menu" class="app-popover-menu-utils">
+		<button class="icon-more button board-action-button"></button>
+		<div class="popovermenu hidden">
+			<div id="popover-controls">
+				<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
+					<form class="ng-pristine ng-valid" ng-submit="createStack()">
+						<input type="text" class="no-close" placeholder="Add a new stack"
+							ng-focus="status.addStack=true"
+							ng-blur="status.addStack=false"
+							ng-model="newStack.title" required
+							maxlength="100" />
+						<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
+					</form>
+				</div>
+				<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
+					<i class="icon icon-archive"></i>
+				</a>
+				<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
+					<i class="icon icon-archive"></i>
+				</a>
+				<a class="board-action-button button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
+					<i class="icon icon-details"></i>
+				</a>
+			</div>
+		</div>
+	</div>
 </div>
 
 <div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board">
@@ -54,9 +77,9 @@
 						   required maxlength="100"/>
 				</form>
 				<div ng-if="!s.status.editStack" class="stack-actions">
-					<button class="icon-rename"
+					<button class="icon-rename button-inline"
 							ng-click="s.status.editStack=true"></button>
-					<button class="icon-delete"
+					<button class="icon-delete button-inline"
 							ng-click="stackservice.delete(s.id)"></button>
 				</div>
 			</h2>
@@ -85,9 +108,8 @@
 						</div>
 						<div class="card-controls">
 							<i class="icon icon-filetype-text" ng-if="c.description" title="{{ c.description }}"></i>
-							<div class="space"></div>
 							<div class="app-popover-menu-utils">
-								<button class="card-options icon-more" ng-model="card"></button>
+								<button class="button-inline card-options icon-more" ng-model="card"></button>
 								<div class="popovermenu hidden">
 									<ul>
 										<li ng-if="filter!=='archive'">