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

New sidebar layout

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-10-11 15:15:58 +02:00
parent 7500a179c0
commit e9a320e528
2 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.scss
View File

@@ -1490,6 +1490,21 @@ input.input-inline {
}
}
.section-wrapper {
display: flex;
max-width: 100%;
margin-top: 10px;
}
.section-label {
background-position: 0px center;
width:28px;
flex-shrink: 0;
}
.section-details {
flex-grow: 1;
}
/**
* Mobile optimizations
*/

95
templates/part.card.php
View File

@@ -33,61 +33,58 @@
<div id="card-meta" class="card-block">
<div class="section-header">
<h4 id="card-tag-label" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
<?php p($l->t('Tags')); ?>
</h4>
<div class="section-wrapper" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
<div class="section-label icon-tag"><span class="hidden-visually"><?php p($l->t('Tags')); ?></span></div>
<div class="section-details">
<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
ng-disabled="boardservice.isArchived() || card.archived"
title="<?php p($l->t('Choose a tag')); ?>"
placeholder="<?php p($l->t('Add a tag')); ?>"
on-select="labelAssign($item, $model)"
on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
<ui-select-match placeholder="<?php p($l->t('Select tags')); ?>">
<span class="select-label" ng-style="labelStyle($item.color)">{{$item.title}}&nbsp;</span>
</ui-select-match>
<ui-select-choices
repeat="label in boardservice.getCurrent().labels | filter:$select.search track by label.id">
<span class="choose-label" ng-style="labelStyle(label.color)">{{label.title}}</span>
</ui-select-choices>
</ui-select>
</div>
</div>
<div id="labels" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
ng-disabled="boardservice.isArchived() || card.archived"
title="<?php p($l->t('Choose a tag')); ?>"
placeholder="<?php p($l->t('Add a tag')); ?>"
on-select="labelAssign($item, $model)"
on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
<ui-select-match placeholder="<?php p($l->t('Select tags')); ?>">
<span class="select-label" ng-style="labelStyle($item.color)">{{$item.title}}&nbsp;</span>
</ui-select-match>
<ui-select-choices
repeat="label in boardservice.getCurrent().labels | filter:$select.search track by label.id">
<span class="choose-label" ng-style="labelStyle(label.color)">{{label.title}}</span>
</ui-select-choices>
</ui-select>
</div>
<div class="section-header" ng-click="toggleAssignUser()">
<h4><?php p($l->t('Assign users')); ?></h4>
<button class="button icon-add"></button>
</div>
<div class="section-content card-details-assign-users" ng-if="cardservice.getCurrent()">
<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
theme="select2"
title="<?php p($l->t('Choose a user to assign')); ?>" placeholder="<?php p($l->t('Choose a user to assign')); ?>"
on-select="addAssignedUser($item)">
<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
</ui-select-match>
<ui-select-choices repeat="acl in boardservice.getUsers() | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by acl.uid">
<div class="avatardiv" avatar ng-attr-user="{{ acl.uid }}" ng-attr-displayname="{{ acl.displayname }}" ng-if="boardservice.id"></div><span>{{ acl.displayname }}</span>
</ui-select-choices>
</ui-select>
<div class="card-details-assign-users-list">
<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
<div class="section-wrapper card-details-assign-users" ng-click="toggleAssignUser()">
<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
<div class="section-details" ng-if="cardservice.getCurrent()">
<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
theme="select2"
title="<?php p($l->t('Choose a user to assign')); ?>" placeholder="<?php p($l->t('Choose a user to assign')); ?>"
on-select="addAssignedUser($item)">
<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
</ui-select-match>
<ui-select-choices repeat="acl in boardservice.getUsers() | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by acl.uid">
<div class="avatardiv" avatar ng-attr-user="{{ acl.uid }}" ng-attr-displayname="{{ acl.displayname }}" ng-if="boardservice.id"></div><span>{{ acl.displayname }}</span>
</ui-select-choices>
</ui-select>
<div class="card-details-assign-users-list">
<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
</div>
<a class="icon-add icon-inline"></a>
</div>
</div>
</div>
<div class="section-header">
<h4>
<?php p($l->t('Due date')); ?>
</h4>
</div>
<div class="duedate">
<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
</div>
<div class="section-wrapper">
<div class="section-label icon-calendar-dark"><span class="hidden-visually"><?php p($l->t('Due date')); ?></span></div>
<div class="section-details duedate">
<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
</div>
</div>
<div class="section-header-tabbed">
<ul class="tabHeaders ng-scope">