From 5e2b7d0ff85fa65a2541bd98263600213ee76d20 Mon Sep 17 00:00:00 2001
From: cloud2018 <eckstein-markus@gmx.de>
Date: Thu, 1 Nov 2018 12:22:06 +0100
Subject: [PATCH] overlay shared-icon like in app files

Signed-off-by: Markus Eckstein eckstein-markus@gmx.de

fisex #668

and some blanks to tabs
---
 css/style.scss                | 34 +++++++++++++++++++++++++++++-----
 templates/part.boardlist.php  | 25 +++++++++++++------------
 templates/part.navigation.php |  4 ++--
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index c8224f230..4d59e8636 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -55,10 +55,10 @@ button,
 		border: 0;
 		background-color: transparent;
 	}
-    &.button-inline:hover {
+	&.button-inline:hover {
 		border: 0;
 		background-color: transparent;
-    }
+	}
 }
 
 input.input-inline {
@@ -109,7 +109,7 @@ input.input-inline {
 
 #app-navigation {
 	/** menu */
-	.board-bullet {
+	.board-bullet, .board-bullet-shared, .board-bullet-shared-white {
 		position: absolute;
 		margin-left: 17px;
 		margin-top: 16px;
@@ -119,6 +119,19 @@ input.input-inline {
 		border-radius: 50%;
 		cursor: pointer;
 	}
+
+ 	.board-bullet-shared, .board-bullet-shared-white {
+		background-image: var(--icon-share-000);
+		background-size: 6px;
+		background-position: center center;
+		background-repeat: no-repeat;
+		opacity: 1;
+	}
+
+	.board-bullet-shared-white {
+		background-image: var(--icon-share-fff);
+	}
+
 	.app-navigation-entry-utils-menu-share i {
 		height: 100%;
 		width: 100%;
@@ -237,7 +250,7 @@ input.input-inline {
 	display: flex;
 	align-items: center;
 	position: inherit;
-    padding-left: 44px;
+	padding-left: 44px;
 
 	.crumb {
 		order: 0;
@@ -1149,7 +1162,7 @@ input.input-inline {
 		padding: 0 10px;
 		border-bottom: 1px solid $color-grey;
 
-		.board-bullet {
+		.board-bullet, .board-bullet-shared, .board-bullet-shared-white {
 			width: 32px;
 			height: 32px;
 			border-radius: 50%;
@@ -1157,6 +1170,17 @@ input.input-inline {
 			margin: 6px;
 		}
 
+		.board-bullet-shared, .board-bullet-shared-white{
+			background-image: var(--icon-share-000);
+			background-position: center center;
+			background-repeat: no-repeat;
+			opacity: 1;
+		}
+
+		.board-bullet-shared-white {
+			background-image: var(--icon-share-fff);
+		}
+
 		form {
 			display: flex;
 			width: 100%;
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index a7901e2d5..f20cab1a4 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -34,7 +34,8 @@
 		<tbody>
 		<tr data-ng-repeat="b in boardservice.sorted track by b.id" ng-class="{deleted: b.deletedAt > 0}">
 			<td ng-click="gotoBoard(b)">
-				<div class="board-bullet" ng-style="{'background-color':'#'+b.color}"> </div>
+				<div ng-if="b.acl.length !== 0" class="board-bullet-shared{{ b.color | iconWhiteFilter }}" ng-style="{'background-color':'#'+b.color}"></div>
+				<div ng-if="b.acl.length === 0" class="board-bullet" ng-style="{'background-color':'#'+b.color}"></div>
 			</td>
 			<td>
 				<div ng-click="gotoBoard(b)" ng-show="!b.status.edit">{{ b.title }}</div>
@@ -42,11 +43,11 @@
 					<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)">
 						<input class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 						<div class="colorselect" ng-controller="ColorPickerController">
-                            <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
-                            <label class="colorselect-label{{ b.color | iconWhiteFilter }} color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
-                                <input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
-                            </label>
-                        </div>
+							<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
+							<label class="colorselect-label{{ b.color | iconWhiteFilter }} color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
+								<input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
+							</label>
+						</div>
 					</form>
 				</div>
 			</td>
@@ -113,12 +114,12 @@ class="ng-pristine ng-valid" ng-submit="boardCreate()">
 					<input class="edit ng-valid ng-empty"
 						   type="text" placeholder="<?php p($l->t('New board title')); ?>"
 						   autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
-                    <div class="colorselect" ng-controller="ColorPickerController">
-                        <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);b=setColor(b,c);"ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
-                        <label class="colorselect-label{{ newBoard.color | iconWhiteFilter }} color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
-                            <input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
-                        </label>
-                    </div>
+						<div class="colorselect" ng-controller="ColorPickerController">
+						<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);b=setColor(b,c);"ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
+							<label class="colorselect-label{{ newBoard.color | iconWhiteFilter }} color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
+							<input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
+						</label>
+						</div>
 				</form>
 			</td>
 			<td></td>
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index 41d6feecf..d85a48493 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -5,8 +5,8 @@
 	<li ng-class="{active: status.filter === 'shared'}"><a ui-sref="list({ filter: 'shared' })" class="icon-share"><?php p($l->t('Shared boards')); ?></a></li>
 
 	<li class="with-icon with-menu" ng-class="{active: b.id === boardservice.getCurrent().id, editing: b.status.editNavigation}" data-ng-repeat="b in boardservice.sidebar track by b.id" ng-if="b.deletedAt == 0">
-
-		<span class="board-bullet"  ng-style="{'background-color': '#' + b.color}"> </span>
+		<span ng-if="b.acl.length !== 0" class="board-bullet-shared{{ b.color | iconWhiteFilter }}"  ng-style="{'background-color': '#' + b.color}"></span>
+		<span ng-if="b.acl.length === 0" class="board-bullet"  ng-style="{'background-color': '#' + b.color}"></span>
 		<a href="#!/board/{{b.id}}/">{{ b.title }}</a>
 		<div class="app-navigation-entry-utils">
 			<ul>