Add avatars to share selection

fix #208

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

css/style.scss

@@ -874,6 +874,12 @@ input.input-inline {
 /**
  * Board details
  */
+
+#tabBoardShare .select2 .ui-select-choices-row-inner {
+	display: flex;
+	padding: 5px !important;
+}
+
 #shareWithList {
 	list-style-type: none;
 	padding: 0 0 16px;
@@ -912,17 +918,17 @@ input.input-inline {
 	.shareOption {
 		margin-top: 5px;
 	}
+}
 
-	.avatardiv {
-		background-color: $color-lightgrey;
-		border-radius: 16px;
-		width: 32px;
-		height: 32px;
+.avatardiv {
+	background-color: $color-lightgrey;
+	border-radius: 16px;
+	width: 32px;
+	height: 32px;
 
-		.icon-group {
-			padding: 16px;
-			opacity: 0.5;
-		}
+	.icon-group {
+		padding: 16px;
+		opacity: 0.5;
 	}
 }
 
@@ -1017,6 +1023,9 @@ input.input-inline {
 			overflow: hidden;
 		}
 	}
+	.select2-choice {
+		height: auto;
+	}
 }
 
 .ui-select-container[disabled] .ui-select-match-item {
@@ -1036,9 +1045,9 @@ input.input-inline {
 
 .select2-result-label {
 	padding: 0px !important;
-
+	display: flex;
 	span {
-		display: flex;
+		flex-grow: 1;
 		padding: 6px;
 	}
 }

templates/part.board.sidebarView.php

@@ -18,7 +18,7 @@
     <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Tags')); ?></a></li>
 </ul>
 <div class="tabsContainer">
-    <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
+    <div id="tabBoardShare" class="tab" ng-if="status.boardtab==0 || !status.boardtab">
 
         <ui-select ng-if="boardservice.canShare()" ng-model="status.addSharee" theme="select2"
 				   title="<?php p($l->t('Select users or groups to share with')); ?>"
@@ -28,7 +28,11 @@
                 <span><i class="icon icon-{{aclTypeString($item)}}"></i> {{ $item.participant.displayname }}</span>
             </ui-select-match>
             <ui-select-choices refresh="searchForUser($select.search)" refresh-delay="0" repeat="sharee in boardservice.sharees">
-                <span><i class="icon icon-{{aclTypeString(sharee)}}"></i> {{ sharee.participant.displayname }}</span>
+				<div class="avatardiv" avatar displayname="{{ sharee.participant.uid }}" ng-if="sharee.type==OC.Share.SHARE_TYPE_USER"></div>
+				<div class="avatardiv" ng-if="sharee.type==OC.Share.SHARE_TYPE_GROUP"><i class="icon icon-{{aclTypeString(sharee)}}" title="<?php p($l->t('Access for')); ?> {{aclTypeString(sharee)}}"></i></div>
+				<span class="has-tooltip username">
+					{{ sharee.participant.displayname }}
+				</span>
             </ui-select-choices>
             <ui-select-no-choice>
             <?php p($l->t('No matching user or group found.')); ?>