ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
header bar and mobile device improvements
This commit is contained in:
Julius Härtl
2017-05-24 19:10:32 +02:00
committed by GitHub
parent 286a56e6f4 0b7b89b602
commit a070fa3bac
3 changed files with 125 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
css/style.css
View File

@@ -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;
}
#board-header > * {
display: flex;
align-items: center;
font-size: 14pt;
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;
#board-header .crumb {
background-image: url('../../../core/img/breadcrumb.svg?v=1');
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;
margin: 0px;
padding: 4px 5px;
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 {
width: 100%;
.card .card-controls button {
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 h1 {
margin-left: 50px;
#board-header-controls-menu {
display: flex;
}
}
@@ -959,7 +992,7 @@ button:hover {
}
.icon-home {
background-image: url('/core/img/places/home.svg');
background-image: url('../../../core/img/places/home.svg');
}
/**

12
js/directive/appPopoverMenuUtils.js
View File

@@ -4,20 +4,20 @@
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*
*/
app.directive('appPopoverMenuUtils', function () {
@@ -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 () {
}
};
});

76
templates/part.board.mainView.php
View File

@@ -5,36 +5,59 @@
<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">
<a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<div id="board-header-controls">
<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"
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 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>
<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>
@@ -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>
@@ -79,15 +102,14 @@
</ul>
</div>
<div class="card-assignees" ng-if="c.assignees">
<!-- <div class="avatar" avatar user="{{c.owner}}" size="24"></div>//-->
</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'">