From 92349f66a3b38e579048336838c5f617a819d7ef Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Fri, 19 May 2017 12:02:54 +0200
Subject: [PATCH] added a card control bar

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
---
 css/style.css                     | 35 +++++++++++--------
 templates/part.board.mainView.php | 56 +++++++++++++++++--------------
 2 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/css/style.css b/css/style.css
index 516a8401d..65c32436e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -297,21 +297,34 @@ button:hover {
 	padding: 5px;
 }
 
-.card .card-options {
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	display: none;
+.card .card-controls {
+	padding: 10px;
+	background: #f8f8f8;
+	display: flex;
+	position: relative;
 }
 
-.card:hover .card-options {
-	display: block;
+.card .card-controls .card-options {
+	opacity: 0.25;
+	position: absolute;
+	right: 10px;
+	top: 8px;
+}
+
+.card .card-controls:hover .card-options {
+	opacity: 1;
+}
+
+.card .card-controls .space {
+	width: 100%;
+	min-height: 16px;
 }
 
 .card .popovermenu {
 	z-index: 999;
 	opacity: 1;
-	margin-left: 10px;
+	margin-top: 25px;
+	margin-right: 3px;
 	display: block;
 }
 
@@ -934,12 +947,6 @@ button:hover {
 	background-image: url('../img/details-white.svg');
 }
 
-.icon-description-marker {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-}
-
 .icon-home {
 	background-image: url('/core/img/places/home.svg');
 }
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 3a0ca2a53..b14e5af23 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -72,7 +72,6 @@
 					ng-class="{'archived': c.archived, 'has-labels': c.labels.length>0 }">
 					<div data-as-sortable-item-handle>
 						<div class="card-upper">
-							<i class="icon icon-filetype-text icon-description-marker" ng-if="c.description" title="{{ c.description }}"></i>
 							<h3>{{ c.title }}</h3>
 							<ul class="labels">
 								<li ng-repeat="label in c.labels"
@@ -82,34 +81,39 @@
 							</ul>
 
 						</div>
-						<div class="app-popover-menu-utils">
-						<button class="card-options icon-more" ng-model="card"></button>
-						<div class="popovermenu bubble hidden">
-							<ul>
-								<li ng-if="filter!=='archive'">
-									<a class="menuitem action action-rename permanent"
-									   data-action="Archive"
-									   ng-click="cardArchive(c); $event.stopPropagation();"><span
-											class="icon icon-archive"></span><span><?php p($l->t('Archive')); ?></span></a>
-								</li>
-								<li ng-if="filter==='archive'">
-									<a class="menuitem action action-rename permanent"
-									   data-action="Unarchive"
-									   ng-click="cardUnarchive(c); $event.stopPropagation();"><span
-											class="icon icon-archive"></span><span><?php p($l->t('Unarchive')); ?></span></a>
-								</li>
-								<li>
-									<a class="menuitem action action-delete permanent"
-									   data-action="Delete"
-									   ng-click="cardDelete(c)"><span
-											class="icon icon-delete"></span><span><?php p($l->t('Delete')); ?></span></a>
-								</li>
-							</ul>
-						</div>
-							</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>
+								<div class="popovermenu hidden">
+									<ul>
+										<li ng-if="filter!=='archive'">
+											<a class="menuitem action action-rename permanent"
+											data-action="Archive"
+											ng-click="cardArchive(c); $event.stopPropagation();"><span
+													class="icon icon-archive"></span><span><?php p($l->t('Archive')); ?></span></a>
+										</li>
+										<li ng-if="filter==='archive'">
+											<a class="menuitem action action-rename permanent"
+											data-action="Unarchive"
+											ng-click="cardUnarchive(c); $event.stopPropagation();"><span
+													class="icon icon-archive"></span><span><?php p($l->t('Unarchive')); ?></span></a>
+										</li>
+										<li>
+											<a class="menuitem action action-delete permanent"
+											data-action="Delete"
+											ng-click="cardDelete(c)"><span
+													class="icon icon-delete"></span><span><?php p($l->t('Delete')); ?></span></a>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
 						<!--<span class="info due"><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Today</span></span>
 						<span class="info tasks"><i class="fa fa-list" aria-hidden="true"></i> <span>3/12</span></span>
 						//-->