Sidebar design improvements

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/icons.scss

@@ -37,6 +37,10 @@
   background-image: url('../../../core/img/places/home.svg');
 }
 
+.icon-description {
+  background-image: url('../img/description.svg');
+}
+
 .icon-badge {
   background-image: url('../img/calendar-dark.svg');
 }

css/style.scss

@@ -454,9 +454,10 @@ input.input-inline {
 			opacity: 1;
 		}
 
-		.icon-filetype-text {
+		.icon-description {
 			margin: 10px;
 			margin-left: 0px;
+			opacity: 0.5;
 		}
 
 		.due {
@@ -955,6 +956,11 @@ input.input-inline {
 	}
 }
 
+#commentsTabView .comment {
+	position: relative;
+	padding: 0 0 15px;
+}
+
 .card-attachments {
 	.error {
 		padding-left: 38px;
@@ -1268,6 +1274,13 @@ input.input-inline {
 	clear: both;
 	overflow: initial;
 	margin-bottom: 0;
+	.icon {
+		display: inline-block;
+		background-size: contain;
+		margin: -3px;
+		margin-right: 5px;
+		opacity: 0.5;
+	}
 }
 
 .tabsContainer {

img/description.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" version="1.1" height="16"><path fill="#000" d="m2.5 1c-0.28 0-0.5 0.22-0.5 0.5v13c0 0.28 0.22 0.5 0.5 0.5h11c0.28 0 0.5-0.22 0.5-0.5v-10.5l-3-3h-8.5zm1.5 2h6v1h-6v-1zm0 3h5v1h-5v-1zm0 3h8v1h-8v-1zm0 3h4v1h-4v-1z"/></svg>

templates/part.board.mainView.php

@@ -94,7 +94,7 @@
 						</div>
 
 						<div class="card-controls compact-item" ng-if="!compactMode">
-							<i class="icon icon-filetype-text" ng-if="cardservice.get(c.id).description" title="{{ cardservice.get(c.id).description }}"></i>
+							<i class="icon icon-description" ng-if="cardservice.get(c.id).description" title="{{ cardservice.get(c.id).description }}"></i>
 							<span class="due" ng-if="cardservice.get(c.id).duedate" ng-class="{'overdue': cardservice.get(c.id).overdue == 3, 'now': cardservice.get(c.id).overdue == 2, 'next': cardservice.get(c.id).overdue == 1  }" title="{{ cardservice.get(c.id).duedate }}">
 								<i class="icon icon-badge"></i>
 								<span data-timestamp="{{ cardservice.get(c.id).duedate | dateToTimestamp }}" class="live-relative-timestamp">{{ cardservice.get(c.id).duedate | relativeDateFilterString }}</span>

templates/part.card.activity.html

@@ -1,5 +1,3 @@
-<div class="icon icon-activity"></div>
-<div class="icon icon-comment"></div>
 <div id="commentsTabView">
 	<div class="newCommentRow comment" data-id="">
 		<div class="authorRow">
@@ -35,7 +33,7 @@
 			</div>
 		</div>
 		<span class="activitytime has-tooltip live-relative-timestamp"
-			  data-timestamp="{{ activity.timelineTimestamp }}">{{ activity.timelineTimestamp/1000 | relativeDateFilter }}</span>
+			  data-timestamp="{{ activity.timelineTimestamp }}">{{ activity.timestamp/1000 | relativeDateFilter }}</span>
 		<div class="activitymessage" ng-bind-html="activity.message"></div>
 	</li>
 

templates/part.card.php

@@ -90,9 +90,9 @@
 
 	<div class="section-header-tabbed">
 		<ul class="tabHeaders ng-scope">
-			<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><?php p($l->t('Description')); ?></a></li>
-			<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><?php p($l->t('Attachments')); ?></a></li>
-			<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}"><a><?php p($l->t('Activity')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><span class="icon icon-description"></span><?php p($l->t('Description')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><span class="icon icon-files-dark"></span><?php p($l->t('Attachments')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}"><a><span class="icon icon-activity"></span><?php p($l->t('Activity/Comments')); ?></a></li>
 
 		</ul>
 		<div class="tabDetails">