ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #358 from nextcloud/add-tooltips

Browse Source 
Add tooltips and support for contacts menu at avatars
This commit is contained in:
Julius Härtl
2017-12-17 17:44:35 +01:00
committed by GitHub
parent eb0810de27 183c2665eb
commit 415e5b5a1a
7 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.scss
View File

@@ -57,7 +57,9 @@ input.input-inline {
border-radius: 0; border-radius: 0;
} }
#app img {
box-sizing: content-box;
}
#searchbox { #searchbox {
display: flex !important; display: flex !important;
@@ -713,7 +715,7 @@ input.input-inline {
.assigned-user { .assigned-user {
position: relative; position: relative;
.avatardiv { .avatardiv-container {
margin-right: 5px; margin-right: 5px;
} }
.icon-delete { .icon-delete {
@@ -937,7 +939,7 @@ input.input-inline {
#assigned-users { #assigned-users {
display: flex; display: flex;
.avatardiv { .avatardiv-container {
margin: 6px; margin: 6px;
} }
} }
@@ -1004,6 +1006,10 @@ input.input-inline {
} }
} }
.avatardiv-container {
position: relative;
}
#board-detail-labels { #board-detail-labels {
ul li { ul li {
input { input {

5
js/app/Run.js
View File

@@ -74,4 +74,9 @@ app.run(function ($document, $rootScope, $transitions, BoardService) {
} }
} }
}); });
// Select all elements with data-toggle="tooltips" in the document
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
}); });

9
js/directive/avatar.js
View File

@@ -26,11 +26,12 @@ app.directive('avatar', function() {
restrict: 'A', restrict: 'A',
scope: true, scope: true,
link: function(scope, element, attr){ link: function(scope, element, attr){
attr.$observe('displayname', function(value){ var value = attr.user;
if(value!==undefined) { $(element).wrap('<div class="avatardiv-container"></div>');
$(element).avatar(value, 32); if(attr.contactsmenu && oc_current_user !== value) {
$(element).contactsMenu(value, 0, $(element).parent());
} }
}); $(element).avatar(value, 32, false, false, false, attr.displayname);
} }
}; };
}); });

2
templates/part.board.mainView.php
View File

@@ -82,7 +82,7 @@
</span> </span>
<div class="card-assigned-users"> <div class="card-assigned-users">
<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3"> <div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3">
<div class="avatardiv" avatar ng-attr-displayname="{{ user.participant.uid }}"></div> <div class="avatardiv" avatar ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
</div> </div>
</div> </div>
<div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()"> <div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()">

6
templates/part.board.sidebarView.php
View File

@@ -25,7 +25,7 @@
<span><i class="icon icon-{{aclTypeString($item)}}"></i> {{ $item.participant.displayname }}</span> <span><i class="icon icon-{{aclTypeString($item)}}"></i> {{ $item.participant.displayname }}</span>
</ui-select-match> </ui-select-match>
<ui-select-choices refresh="searchForUser($select.search)" refresh-delay="0" repeat="sharee in boardservice.sharees"> <ui-select-choices refresh="searchForUser($select.search)" refresh-delay="0" repeat="sharee in boardservice.sharees">
<div class="avatardiv" avatar displayname="{{ sharee.participant.uid }}" ng-if="sharee.type==OC.Share.SHARE_TYPE_USER"></div> <div class="avatardiv" avatar data-user="{{ sharee.participant.uid }}" data-displayname="{{ sharee.participant.displayname }}" 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> <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"> <span class="has-tooltip username">
{{ sharee.participant.displayname }} {{ sharee.participant.displayname }}
@@ -39,14 +39,14 @@
<ul id="shareWithList" class="shareWithList"> <ul id="shareWithList" class="shareWithList">
<li> <li>
<span class="icon-loading-small" style="display:none;"></span> <span class="icon-loading-small" style="display:none;"></span>
<div class="avatardiv" avatar ng-attr-displayname="{{ boardservice.getCurrent().owner.uid }}" ng-if="boardservice.id"></div> <div class="avatardiv" avatar data-user="{{ boardservice.getCurrent().owner.uid }}" data-displayname="{{ boardservice.getCurrent().owner.displayname }}" ng-if="boardservice.id"></div>
<span class="has-tooltip username"> <span class="has-tooltip username">
{{ boardservice.getCurrent().owner.displayname }} {{ boardservice.getCurrent().owner.displayname }}
</span> </span>
</li> </li>
<li ng-repeat="acl in boardservice.getCurrent().acl track by $index"> <li ng-repeat="acl in boardservice.getCurrent().acl track by $index">
<span class="icon-loading-small" style="display:none;" title="<?php p($l->t('Loading')); ?>"></span> <span class="icon-loading-small" style="display:none;" title="<?php p($l->t('Loading')); ?>"></span>
<div class="avatardiv" avatar displayname="{{ acl.participant.uid }}" ng-if="acl.type==OC.Share.SHARE_TYPE_USER"></div> <div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" ng-if="acl.type==OC.Share.SHARE_TYPE_USER"></div>
<div class="avatardiv" ng-if="acl.type==OC.Share.SHARE_TYPE_GROUP"><i class="icon icon-{{aclTypeString(acl)}}" title="<?php p($l->t('Access for')); ?> {{aclTypeString(acl)}}"></i></div> <div class="avatardiv" ng-if="acl.type==OC.Share.SHARE_TYPE_GROUP"><i class="icon icon-{{aclTypeString(acl)}}" title="<?php p($l->t('Access for')); ?> {{aclTypeString(acl)}}"></i></div>
<span class="has-tooltip username"> <span class="has-tooltip username">

4
templates/part.boardlist.php
View File

@@ -41,8 +41,8 @@
</td> </td>
<td> <td>
<div id="assigned-users"> <div id="assigned-users">
<div class="avatardiv" avatar displayname="{{ b.owner.uid }}" title="{{ b.owner.displayname }}"></div> <div class="avatardiv" avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}" data-toggle="tooltip" title="{{ b.owner.displayname }}"></div>
<div class="avatardiv" avatar displayname="{{ acl.participant.uid }}" title="{{ acl.participant.uid }}" ng-repeat="acl in b.acl | limitTo: 7"></div> <div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" data-toggle="tooltip" title="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></div>
</div> </div>
</td> </td>
<td> <td>

9
templates/part.card.php
View File

@@ -62,12 +62,13 @@
<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span> <span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
</ui-select-match> </ui-select-match>
<ui-select-choices repeat="user in boardservice.getCurrent().users | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by user.uid"> <ui-select-choices repeat="user in boardservice.getCurrent().users | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by user.uid">
<div class="avatardiv" avatar ng-attr-displayname="{{ user.uid }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span> <div class="avatardiv" avatar ng-attr-user="{{ user.uid }}" ng-attr-displayname="{{ user.displayname }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span>
</ui-select-choices> </ui-select-choices>
</ui-select> </ui-select>
<div class="card-details-assign-users-list"> <div class="card-details-assign-users-list">
<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers"> <div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers"
<div class="avatardiv" avatar ng-attr-displayname="{{ user.participant.uid }}"></div> data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}">
<div class="avatardiv" avatar data-contactsmenu="true" ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.uid }}"></div>
<div class="icon icon-delete" ng-click="removeAssignedUser(user)"></div> <div class="icon icon-delete" ng-click="removeAssignedUser(user)"></div>
</div> </div>
</div> </div>
@@ -88,7 +89,7 @@
<h4> <h4>
<div> <div>
<?php p($l->t('Description')); ?> <?php p($l->t('Description')); ?>
<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a> <a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
</div> </div>
</h4> </h4>
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span> <span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>