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

Card: Auto save while typing

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2017-10-09 13:40:35 +02:00
committed by Julius Härtl
parent 3d54d129b9
commit 8d39fd9ad1
3 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.scss
View File

@@ -613,14 +613,21 @@ input.input-inline {
} }
.save-indicator { .save-indicator {
background-color: $color-success;
color: $color-primary-text;
border-radius: 3px; border-radius: 3px;
float: right; float: right;
padding: 0px 10px; padding: 0 10px;
font-size: 8pt !important; font-size: 8pt;
display: none; display: none;
align-self: flex-end; align-self: flex-end;
text-align: center;
&.saved {
background-color: $color-success;
color: $color-primary-text;
}
&.unsaved {
background-color: $color-lightgrey;
color: $color-darkgrey;
}
} }
.icon-help { .icon-help {

31
js/controller/CardController.js
View File

@@ -23,9 +23,12 @@
/* global app */ /* global app */
/* global moment */ /* global moment */
app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, BoardService, CardService, StackService, StatusService) { app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, $interval, BoardService, CardService, StackService, StatusService) {
$scope.sidebar = $rootScope.sidebar; $scope.sidebar = $rootScope.sidebar;
$scope.status = {}; $scope.status = {
lastEdit: 0,
lastSave: Date.now()
};
$scope.cardservice = CardService; $scope.cardservice = CardService;
$scope.cardId = $stateParams.cardId; $scope.cardId = $stateParams.cardId;
@@ -58,6 +61,27 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
$scope.status.cardEditDescription = true; $scope.status.cardEditDescription = true;
return true; return true;
}; };
$scope.cardEditDescriptionChanged = function ($event) {
$scope.status.lastEdit = Date.now();
$('#card-description').find('.save-indicator.unsaved').show();
$('#card-description').find('.save-indicator.saved').hide();
};
$scope.cardEditDescriptionAutosave = function() {
var currentTime = Date.now();
var timeSinceEdit = currentTime-$scope.status.lastEdit;
if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave) {
$scope.status.lastSave = currentTime;
$('#card-description').find('.save-indicator.unsaved').fadeIn(500);
CardService.update(CardService.getCurrent()).then(function (data) {
$('#card-description').find('.save-indicator.unsaved').hide();
$('#card-description').find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
});
}
};
$interval( function(){ $scope.cardEditDescriptionAutosave(); }, 500);
// handle rename to update information on the board as well // handle rename to update information on the board as well
$scope.cardRename = function (card) { $scope.cardRename = function (card) {
CardService.rename(card).then(function (data) { CardService.rename(card).then(function (data) {
@@ -68,7 +92,8 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
$scope.cardUpdate = function (card) { $scope.cardUpdate = function (card) {
CardService.update(CardService.getCurrent()).then(function (data) { CardService.update(CardService.getCurrent()).then(function (data) {
$scope.status.cardEditDescription = false; $scope.status.cardEditDescription = false;
$('#card-description').find('.save-indicator').fadeIn(500).fadeOut(1000); $('#card-description').find('.save-indicator.unsaved').hide();
$('#card-description').find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
}); });
}; };

5
templates/part.card.php
View File

@@ -63,12 +63,15 @@
<?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')); ?>"></a> <a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
</div> </div>
<span class="save-indicator"><?php p($l->t('Saved')); ?></span> <span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
</h4> </h4>
<textarea elastic ng-if="status.cardEditDescription" <textarea elastic ng-if="status.cardEditDescription"
placeholder="<?php p($l->t('Add a card description…')); ?>" placeholder="<?php p($l->t('Add a card description…')); ?>"
ng-blur="cardUpdate(cardservice.getCurrent())" ng-blur="cardUpdate(cardservice.getCurrent())"
ng-model="cardservice.getCurrent().description" ng-model="cardservice.getCurrent().description"
ng-change="cardEditDescriptionChanged()"
autofocus-on-insert> </textarea> autofocus-on-insert> </textarea>
<div class="container" ng-click="cardEditDescriptionShow($event)" <div class="container" ng-click="cardEditDescriptionShow($event)"
ng-if="!status.cardEditDescription" ng-animate> ng-if="!status.cardEditDescription" ng-animate>