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

Use tabbed headers for description and attachments

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-06-14 11:24:44 +02:00
parent 48c622d19e
commit 0b5ded2860
5 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.scss
View File

@@ -727,10 +727,23 @@ input.input-inline {
flex: 1;
}
}
.section-header-tabbed {
margin-top: 10px;
margin-bottom: 5px;
flex-shrink: 0;
display: flex;
.tabHeaders {
margin: 0;
flex-grow: 1;
}
.tabDetails {
display: flex;
}
}
.save-indicator {
border-radius: 3px;
float: right;
margin: 5px;
padding: 0 10px;
font-size: 8pt;
display: none;

3
js/app/Config.js
View File

@@ -74,6 +74,9 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
})
.state('board.card', {
url: '/card/:cardId',
params: {
tab: {value: 0, dynamic: true},
},
views: {
'sidebarView': {
templateUrl: '/card.sidebarView.html',

2
js/controller/BoardController.js
View File

@@ -48,7 +48,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
}, function (params) {
$scope.params = params;
}, true);
$scope.params = $state;
$scope.params = $state.params;
/**
* Check for markdown checkboxes in description to render the counter

20
js/controller/CardController.js
View File

@@ -23,7 +23,7 @@
/* global app moment */
import app from '../app/App.js';
app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $state, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
$scope.sidebar = $rootScope.sidebar;
$scope.status = {
lastEdit: 0,
@@ -38,7 +38,13 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
$scope.boardservice = BoardService;
$scope.isArray = angular.isArray;
// workaround for $stateParams changes not being propagated
$scope.$watch(function() {
return $state.params;
}, function (params) {
$scope.params = params;
}, true);
$scope.params = $state.params;
$scope.mimetypeForAttachment = function(attachment) {
let url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype);
let style = {
@@ -97,7 +103,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
return match;
});
CardService.update($scope.status.edit).then(function (data) {
var header = $('.section-header.card-description');
var header = $('.section-header-tabbed .tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
});
@@ -126,7 +132,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
};
$scope.cardEditDescriptionChanged = function ($event) {
$scope.status.lastEdit = Date.now();
var header = $('.section-header.card-description');
var header = $('.section-header-tabbed .tabDetails');
header.find('.save-indicator.unsaved').show();
header.find('.save-indicator.saved').hide();
};
@@ -136,10 +142,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave && !$scope.status.saving) {
$scope.status.lastSave = currentTime;
$scope.status.saving = true;
var header = $('.section-header.card-description');
var header = $('.section-header-tabbed .tabDetails');
header.find('.save-indicator.unsaved').fadeIn(500);
CardService.update($scope.status.edit).then(function (data) {
var header = $('.section-header.card-description');
var header = $('.section-header-tabbed .tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
$scope.status.saving = false;
@@ -156,7 +162,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
$scope.cardUpdate = function (card) {
CardService.update(card).then(function (data) {
$scope.status.cardEditDescription = false;
var header = $('.section-content.card-description');
var header = $('.section-header-tabbed .tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
});

32
templates/part.card.php
View File

@@ -87,12 +87,21 @@
<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-header">
<h4><?php p($l->t('Attachments')); ?></h4>
<label for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}" />
<div class="section-header-tabbed">
<ul class="tabHeaders ng-scope">
<li class="tabHeader selected" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><?php p($l->t('Description')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><?php p($l->t('Attachments')); ?></a></li>
</ul>
<div class="tabDetails">
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
<label for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}" />
</div>
</div>
<div class="section-content card-attachments" ng-if="cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)">
<div class="section-content card-attachments" ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)">
<ul>
<li class="attachment" ng-repeat="attachment in cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']" ng-class="{deleted: attachment.deletedAt > 0}">
<a class="fileicon" ng-style="mimetypeForAttachment(attachment)" ng-href="{{ attachmentUrl(attachment) }}"></a>
@@ -128,18 +137,7 @@
</ul>
</div>
<div class="section-header card-description">
<h4>
<div>
<?php p($l->t('Description')); ?>
<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>
</h4>
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
</div>
<div class="section-content card-description">
<div class="section-content card-description" ng-if="params.tab === 0">
<textarea elastic ng-if="status.cardEditDescription"
placeholder="<?php p($l->t('Add a card description…')); ?>"
ng-blur="cardUpdate(status.edit)"