wbrawner/tasks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add confirmation directive

Browse source
This commit is contained in:
Raimund Schlüßler 2016-08-12 20:01:16 +02:00
parent d758d26375
commit 8032b36fe5
8 changed files with 274 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
appinfo/routes.php
View file

@ -31,6 +31,9 @@ $application->registerRoutes($this, array('routes' => array(
// page
array('name' => 'page#index', 'url' => '/', 'verb' => 'GET'),
// templates
array('name' => 'page#templates', 'url' => '/templates/{template}', 'verb' => 'GET'),
// collections
array('name' => 'collections#getCollections', 'url' => '/collections', 'verb' => 'GET'),
array('name' => 'collections#setVisibility', 'url' => '/collection/{collectionID}/visibility/{visibility}', 'verb' => 'POST'),

16
controller/pagecontroller.php
View file

@ -24,6 +24,7 @@ namespace OCA\Tasks\Controller;
use \OCP\AppFramework\Controller;
use \OCP\AppFramework\Http\TemplateResponse;
use \OCP\AppFramework\Http\NotFoundResponse;
use \OCP\IRequest;
use \OCP\IConfig;
@ -62,4 +63,19 @@ class PageController extends Controller {
return $response;
}
/**
* @NoAdminRequired
* @NoCSRFRequired
*/
public function templates($template) {
$templates = array( 'confirmation');
if (in_array($template, $templates)) {
$response = new TemplateResponse('tasks', $template, [], 'blank');
} else {
$response = new NotFoundResponse();
}
return $response;
}
}

55
css/style.css
View file

@ -1567,3 +1567,58 @@ ol[dnd-list] .dndPlaceholder {
border-color: #e9322d !important;
box-shadow: 0 0 6px #f8b9b7;
}
.confirmed {
opacity: 1 !important;
}
.confirmed img {
margin-left: auto;
margin-right: auto !important;
display: block;
}
.confirmation-default {
overflow: hidden;
}
.confirmed .confirmation-default {
display: none !important;
}
.confirmation-confirm, .confirmation-abort {
width: 50% !important;
display: none !important;
overflow: hidden;
float: right;
height: 100% !important;
}
.confirmation-confirm, .confirmation-confirm span {
background-color: red;
cursor: default !important;
}
.confirmed .confirmation-confirm, .confirmed .confirmation-abort {
display: inline-block !important;
}
.confirmed .confirmation-confirm img {
display: none;
}
.countdown {
color: white;
display: block;
text-align: center;
}
.confirmed.active .confirmation-confirm{
cursor: pointer !important;
}
.confirmed.active .confirmation-confirm span.countdown {
display: none;
}
.confirmed.active .confirmation-confirm img {
display: block;
}

16
js/app/controllers/listcontroller.js
View file

@ -49,15 +49,15 @@ angular.module('Tasks').controller('ListController', [
this._$scope.nameError = false;
this._$scope.color = '#31CC7C';
this._$scope.deleteMessage = function (calendar) {
return t('tasks', 'This will delete the Calendar "%s" and all of its entries.').replace('%s', calendar.displayname);
};
this._$scope["delete"] = function(calendar) {
var really;
really = confirm(t('tasks', 'This will delete the Calendar "%s" and all of its entries.').replace('%s', calendar.displayname));
if (really) {
return _$listsbusinesslayer["delete"](calendar).then(function() {
$location.path('/calendars/' + _$listsmodel.getStandardList().uri);
return $scope.$apply();
});
}
return _$listsbusinesslayer["delete"](calendar).then(function() {
$location.path('/calendars/' + _$listsmodel.getStandardList().uri);
return $scope.$apply();
});
};
this._$scope.startCreate = function() {

96
js/app/directives/confirmation.js Normal file
View file

@ -0,0 +1,96 @@
/**
* ownCloud - Tasks
*
* @author Raimund Schlüßler
* @copyright 2016 Raimund Schlüßler <raimund.schluessler@googlemail.com>
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
* License as published by the Free Software Foundation; either
* version 3 of the License, or any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
angular.module('Tasks').directive('confirmation', function() {
'use strict';
return {
priority: -1,
restrict: 'A',
templateUrl: OC.generateUrl('/apps/tasks/templates/confirmation', {}),
scope: {
confirmationFunction: "&confirmation",
confirmationMessage: "&confirmationMessage",
},
controller: 'ConfirmationController'
};
});
angular.module('Tasks').controller('ConfirmationController', [
'$scope', '$rootScope', '$element', '$attrs', '$compile', '$document', '$window', '$timeout', function($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout) {
'use strict';
var ConfirmationController = (function() {
function ConfirmationController(_$scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout) {
this._$scope = _$scope;
this._$scope.countdown = 3;
$element.bind( 'click', function( e ){
_$scope.countdown = 3;
$element.removeClass('active');
var message = _$scope.confirmationMessage() ? _$scope.confirmationMessage() : "Are you sure?";
if ($element.hasClass('confirmed')) {
return;
}
e.stopPropagation();
_$scope.activate();
$element.children('.confirmation-confirm')
.tooltip({title: message, container: 'body', placement: 'right'});
$element.addClass("confirmed");
});
$element.children('.confirmation-confirm').bind( 'click', function (e) {
if ($element.hasClass('confirmed active')) {
_$scope.confirmationFunction();
return;
} else{
e.stopPropagation();
}
});
this._$scope.documentClick = function () {
$element.removeClass("confirmed");
};
this._$scope.activate = function () {
if (_$scope.countdown) {
$element.find('.countdown').html(_$scope.countdown+' s');
$timeout(function() {
_$scope.activate();
}, 1000);
_$scope.countdown--;
} else {
$element.addClass('active');
}
};
$document.bind('click', _$scope.documentClick);
$document.bind('touchend', _$scope.documentClick);
$scope.$on('$destroy', function() {
$document.unbind('click', _$scope.documentClick);
$document.unbind('touchend', _$scope.documentClick);
});
}
return ConfirmationController;
})();
return new ConfirmationController($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout);
}
]);

92
js/public/app.js
View file

@ -607,15 +607,15 @@ angular.module('Tasks').controller('ListController', [
this._$scope.nameError = false;
this._$scope.color = '#31CC7C';
this._$scope.deleteMessage = function (calendar) {
return t('tasks', 'This will delete the Calendar "%s" and all of its entries.').replace('%s', calendar.displayname);
};
this._$scope["delete"] = function(calendar) {
var really;
really = confirm(t('tasks', 'This will delete the Calendar "%s" and all of its entries.').replace('%s', calendar.displayname));
if (really) {
return _$listsbusinesslayer["delete"](calendar).then(function() {
$location.path('/calendars/' + _$listsmodel.getStandardList().uri);
return $scope.$apply();
});
}
return _$listsbusinesslayer["delete"](calendar).then(function() {
$location.path('/calendars/' + _$listsmodel.getStandardList().uri);
return $scope.$apply();
});
};
this._$scope.startCreate = function() {
@ -1456,6 +1456,82 @@ angular.module('Tasks').directive('colorpicker', function() {
});
angular.module('Tasks').directive('confirmation', function() {
'use strict';
return {
priority: -1,
restrict: 'A',
templateUrl: OC.generateUrl('/apps/tasks/templates/confirmation', {}),
scope: {
confirmationFunction: "&confirmation",
confirmationMessage: "&confirmationMessage",
},
controller: 'ConfirmationController'
};
});
angular.module('Tasks').controller('ConfirmationController', [
'$scope', '$rootScope', '$element', '$attrs', '$compile', '$document', '$window', '$timeout', function($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout) {
'use strict';
var ConfirmationController = (function() {
function ConfirmationController(_$scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout) {
this._$scope = _$scope;
this._$scope.countdown = 3;
$element.bind( 'click', function( e ){
_$scope.countdown = 3;
$element.removeClass('active');
var message = _$scope.confirmationMessage() ? _$scope.confirmationMessage() : "Are you sure?";
if ($element.hasClass('confirmed')) {
return;
}
e.stopPropagation();
_$scope.activate();
$element.children('.confirmation-confirm')
.tooltip({title: message, container: 'body', placement: 'right'});
$element.addClass("confirmed");
});
$element.children('.confirmation-confirm').bind( 'click', function (e) {
if ($element.hasClass('confirmed active')) {
_$scope.confirmationFunction();
return;
} else{
e.stopPropagation();
}
});
this._$scope.documentClick = function () {
$element.removeClass("confirmed");
};
this._$scope.activate = function () {
if (_$scope.countdown) {
$element.find('.countdown').html(_$scope.countdown+' s');
$timeout(function() {
_$scope.activate();
}, 1000);
_$scope.countdown--;
} else {
$element.addClass('active');
}
};
$document.bind('click', _$scope.documentClick);
$document.bind('touchend', _$scope.documentClick);
$scope.$on('$destroy', function() {
$document.unbind('click', _$scope.documentClick);
$document.unbind('touchend', _$scope.documentClick);
});
}
return ConfirmationController;
})();
return new ConfirmationController($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout);
}
]);
angular.module('Tasks').directive('datepicker', function() {
'use strict';
return {

11
templates/confirmation.php Normal file
View file

@ -0,0 +1,11 @@
<span class="confirmation-default" title="<?php p($l->t('Delete')); ?>">
<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete.svg'))?>"/>
<span><?php p($l->t('Delete')); ?></span>
</span>
<span class="confirmation-confirm">
<span class="countdown">33 &nbsp;</span>
<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete-white.svg'))?>"/>
</span>
<span class="confirmation-abort" title="<?php p($l->t('Cancel')); ?>">
<img class="icon-close svg" src="<?php p(image_path('core', 'actions/close.svg'))?>"/>
</span>

6
templates/main.php
View file

@ -76,11 +76,7 @@
<span><?php p($l->t('Export')); ?></span>
</a>
</li>
<li>
<span title="<?php p($l->t('Delete')); ?>" ng-click="delete(calendar)">
<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete.svg'))?>"/>
<span><?php p($l->t('Delete')); ?></span>
</span>
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)">
</li>
</ul>
</div>