Merge pull request #139 from nextcloud/card_redesing

added a card control bar
nextcloud · May 19, 2017 · c696d9f · c696d9f
2 parents e9f71d1 + 92349f6
commit c696d9f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 38 deletions.
diff --git a/css/style.css b/css/style.css
@@ -303,21 +303,34 @@ button:hover {
 	padding: 5px;
 }
 
-.card .card-options {
+.card .card-controls {
+	padding: 10px;
+	background: #f8f8f8;
+	display: flex;
+	position: relative;
+}
+
+.card .card-controls .card-options {
+	opacity: 0.25;
 	position: absolute;
-	bottom: 10px;
 	right: 10px;
-	display: none;
+	top: 8px;
 }
 
-.card:hover .card-options {
-	display: block;
+.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;
 }
 
@@ -940,12 +953,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
@@ -70,7 +70,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"
@@ -80,34 +79,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>
 						//-->