From c035f0184885bfa84524faa4e51565083624cf7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Fri, 25 Jan 2019 10:40:24 +0100
Subject: [PATCH] Use JS tooltips for board controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 templates/part.board.headerControls.php | 43 ++++++++++++++++---------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/templates/part.board.headerControls.php b/templates/part.board.headerControls.php
index efa5e2620..8e9ee12f7 100644
--- a/templates/part.board.headerControls.php
+++ b/templates/part.board.headerControls.php
@@ -13,19 +13,30 @@
     </form>
 </div>
 
-<button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" title="<?php p($l->t('Show archived cards')); ?>">
-    <i class="icon icon-archive" style="opacity:0.5;"></i>
-    <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
-</button>
-<button ng-if="params.filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
-    <i class="icon icon-archive"></i>
-    <span class="hidden-visually"><?php p($l->t('Hide archived cards')); ?></span>
-</button>
-<button ng-click="toggleCompactMode()" title="<?php p($l->t('Toggle compact mode')); ?>">
-	<i class="icon" ng-class="{ 'icon-toggle-compact-collapsed': compactMode, 'icon-toggle-compact-expanded': !compactMode }"></i>
-	<span class="hidden-visually"><?php p($l->t('Toggle compact mode')); ?></span>
-</button>
-<button ui-sref="board.detail({ id: id, tab: 0})"  title="<?php p($l->t('Show board details')); ?>">
-    <i class="icon icon-settings"></i>
-    <span class="hidden-visually"><?php p($l->t('Show board details')); ?></span>
-</button>
+<div class="section-label" data-toggle="tooltip" data-placement="bottom" title="<?php p($l->t('Show archived cards')); ?>">
+    <button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" title="<?php p($l->t('Show archived cards')); ?>">
+        <i class="icon icon-archive" style="opacity:0.5;"></i>
+        <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
+    </button>
+</div>
+
+<div ng-if="params.filter=='archive'" class="section-label" data-toggle="tooltip" data-placement="bottom" title="<?php p($l->t('Hide archived cards')); ?>">
+    <button ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
+        <i class="icon icon-archive"></i>
+        <span class="hidden-visually"><?php p($l->t('Hide archived cards')); ?></span>
+    </button>
+</div>
+
+<div class="section-label" data-toggle="tooltip" data-placement="bottom" title="<?php p($l->t('Toggle compact mode')); ?>">
+    <button ng-click="toggleCompactMode()" title="<?php p($l->t('Toggle compact mode')); ?>">
+        <i class="icon" ng-class="{ 'icon-toggle-compact-collapsed': compactMode, 'icon-toggle-compact-expanded': !compactMode }"></i>
+        <span class="hidden-visually"><?php p($l->t('Toggle compact mode')); ?></span>
+    </button>
+</div>
+
+<div class="section-label" data-toggle="tooltip" data-placement="bottom" title="<?php p($l->t('Show board details')); ?>">
+    <button ui-sref="board.detail({ id: id, tab: 0})"  title="<?php p($l->t('Show board details')); ?>">
+        <i class="icon icon-settings"></i>
+        <span class="hidden-visually"><?php p($l->t('Show board details')); ?></span>
+    </button>
+</div>