From 630a5badf837ce27d799b90645576c1d9ef1122e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 5 Oct 2018 10:35:09 +0200
Subject: [PATCH] Sidebar design improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/icons.scss                    |  4 ++++
 css/style.scss                    | 15 ++++++++++++++-
 img/description.svg               |  1 +
 templates/part.board.mainView.php |  2 +-
 templates/part.card.activity.html |  4 +---
 templates/part.card.php           |  6 +++---
 6 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 img/description.svg

diff --git a/css/icons.scss b/css/icons.scss
index 1e8b25048..820bbc5df 100644
--- a/css/icons.scss
+++ b/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');
 }
diff --git a/css/style.scss b/css/style.scss
index a3d10e998..104375287 100644
--- a/css/style.scss
+++ b/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 {
diff --git a/img/description.svg b/img/description.svg
new file mode 100644
index 000000000..a31c5a53d
--- /dev/null
+++ b/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>
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 531498708..72f2da470 100644
--- a/templates/part.board.mainView.php
+++ b/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>
diff --git a/templates/part.card.activity.html b/templates/part.card.activity.html
index f8488b47b..99a0791e9 100644
--- a/templates/part.card.activity.html
+++ b/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>
 
diff --git a/templates/part.card.php b/templates/part.card.php
index 2e690139f..325af78a7 100644
--- a/templates/part.card.php
+++ b/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">