Frontend: cleanup dom structure and css

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2017-10-01 16:12:29 +02:00
committed by Julius Härtl
parent f42e3eb857
commit 02ec4ae9d1
2 changed files with 42 additions and 33 deletions

View File

@@ -644,27 +644,34 @@ input.input-inline {
text-align: right; text-align: right;
} }
.card-details-assigned-users { .card-details-assign-users {
display: flex;
.assigned-user { .select2 .ui-select-choices-row-inner {
position: relative; display: flex;
padding: 5px !important;
}
.avatardiv { .card-details-assign-users-list {
margin-right:5px; display: flex;
} .assigned-user {
.icon-delete { position: relative;
display: none;
position: absolute; .avatardiv {
top: 8px; margin-right: 5px;
left: 8px; }
} .icon-delete {
&:hover .icon-delete { display: none;
display: inline-block; position: absolute;
cursor: pointer; top: 8px;
} left: 8px;
&:hover .avatardiv { }
opacity: .7; &:hover .icon-delete {
display: inline-block;
cursor: pointer;
}
&:hover .avatardiv {
opacity: .7;
}
} }
} }
} }

View File

@@ -53,21 +53,23 @@
<h4><?php p($l->t('Assign users')); ?></h4> <h4><?php p($l->t('Assign users')); ?></h4>
<button class="button icon-add" ng-click="showAssignUser()"></button> <button class="button icon-add" ng-click="showAssignUser()"></button>
</div> </div>
<ui-select id="assignUserSelect" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)" <div class="section-content card-details-assign-users">
theme="select2" style="width:100%;" <ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
title="Choose a user to assign" placeholder="Choose a user to assign" theme="select2" style="width:100%;"
on-select="addAssignedUser($item)"> title="Choose a user to assign" placeholder="Choose a user to assign"
<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>"> on-select="addAssignedUser($item)">
<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span> <ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
</ui-select-match> <span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
<ui-select-choices repeat="user in boardservice.getCurrent().users| filter: $select.search track by user.uid"> </ui-select-match>
<div class="avatardiv" avatar ng-attr-displayname="{{ user.uid }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span> <ui-select-choices repeat="user in boardservice.getCurrent().users| filter: $select.search track by user.uid">
</ui-select-choices> <div class="avatardiv" avatar ng-attr-displayname="{{ user.uid }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span>
</ui-select-choices>
</ui-select> </ui-select>
<div class="section-content card-details-assigned-users"> <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> <div class="avatardiv" avatar 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> </div>