Merge pull request #29 from taigaio/some-inline-spinners

Some inline spinners
stable
David Barragán Merino 2014-09-19 08:34:56 +02:00
commit 99c28a4c40
6 changed files with 112 additions and 21 deletions

View File

@ -449,7 +449,7 @@ module.directive("tgIssues", ["$log", "$tgLocation", IssuesDirective])
## Issues Filters Directive
#############################################################################
IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading) ->
template = _.template("""
<% _.each(filters, function(f) { %>
<% if (!f.selected) { %>
@ -468,7 +468,9 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
</a>
<% } %>
<% }) %>
<input class="hidden my-filter-name" type="text" placeholder="filter name" />
<span class="new">
<input class="hidden my-filter-name" type="text" placeholder="filter name" />
</span>
""")
templateSelected = _.template("""
@ -646,13 +648,17 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
$el.find('.my-filter-name').show()
$el.find('.my-filter-name').focus()
$el.on "keyup", ".my-filter-name", (event) ->
$el.on "keyup", ".new .my-filter-name", (event) ->
event.preventDefault()
if event.keyCode == 13
target = angular.element(event.currentTarget)
newFilter = target.val()
$ctrl.saveCurrentFiltersTo(newFilter).then ->
$ctrl.loadMyFilters().then (filters) ->
$loading.start($el.find(".new"))
promise = $ctrl.saveCurrentFiltersTo(newFilter)
promise.then ->
loadPromise = $ctrl.loadMyFilters()
loadPromise.then (filters) ->
$loading.finish($el.find(".new"))
$scope.filters.myFilters = filters
currentfilterstype = $el.find("h2 a.subfilter span.title").prop('data-type')
@ -661,6 +667,16 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
$el.find('.my-filter-name').hide()
$el.find('.save-filters').show()
loadPromise.then null, ->
$loading.finish($el.find(".new"))
$confirm.notify("error", "Error loading custom filters")
promise.then null, ->
$loading.finish($el.find(".new"))
$el.find(".my-filter-name").val(newFilter).focus().select()
$confirm.notify("error", "Filter not saved")
else if event.keyCode == 27
$el.find('.my-filter-name').val('')
$el.find('.my-filter-name').hide()
@ -668,7 +684,7 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
return {link:link}
module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm",
module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm", "$tgLoading",
IssuesFiltersDirective])

View File

@ -25,7 +25,7 @@ debounce = @.taiga.debounce
module = angular.module("taigaRelatedTasks", [])
RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope) ->
RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading) ->
templateView = _.template("""
<div class="tasks">
<div class="task-name">
@ -89,27 +89,34 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope) ->
link = ($scope, $el, $attrs, $model) ->
saveTask = debounce 2000, (task) ->
task.subject = $el.find('input').val()
$loading.start($el.find('.task-name'))
promise = $repo.save(task)
promise.then =>
$loading.finish($el.find('.task-name'))
$confirm.notify("success")
$rootscope.$broadcast("related-tasks:update")
promise.then null, =>
$loading.finish($el.find('.task-name'))
$el.find('input').val(task.subject)
$confirm.notify("error")
return promise
renderEdit = (task) ->
$el.html($compile(templateEdit({task: task}))($scope))
$el.on "keyup", "input", (event) ->
if event.keyCode == 13
saveTask($model.$modelValue)
renderView($model.$modelValue)
saveTask($model.$modelValue).then ->
renderView($model.$modelValue)
else if event.keyCode == 27
renderView($model.$modelValue)
$el.on "click", ".icon-floppy", (event) ->
saveTask($model.$modelValue)
renderView($model.$modelValue)
saveTask($model.$modelValue).then ->
renderView($model.$modelValue)
$el.on "click", ".cancel-edit", (event) ->
renderView($model.$modelValue)
@ -159,9 +166,9 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope) ->
return {link:link, require:"ngModel"}
module.directive("tgRelatedTaskRow", ["$tgRepo", "$compile", "$tgConfirm", "$rootScope", RelatedTaskRowDirective])
module.directive("tgRelatedTaskRow", ["$tgRepo", "$compile", "$tgConfirm", "$rootScope", "$tgLoading", RelatedTaskRowDirective])
RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel) ->
RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel, $loading) ->
template = _.template("""
<div class="tasks">
<div class="task-name">
@ -199,12 +206,16 @@ RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel) ->
$scope.newTask.status = $scope.project.default_task_status
$scope.newTask.assigned_to = null
$loading.start($el.find('.task-name'))
promise = $repo.create("tasks", task)
promise.then ->
$loading.finish($el.find('.task-name'))
$scope.$emit("related-tasks:add")
$confirm.notify("success")
promise.then null, ->
$el.find('input').val(task.subject)
$loading.finish($el.find('.task-name'))
$confirm.notify("error")
return promise
@ -245,7 +256,7 @@ RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel) ->
$el.off()
return {link: link}
module.directive("tgRelatedTaskCreateForm", ["$tgRepo", "$compile", "$tgConfirm", "$tgModel", RelatedTaskCreateFormDirective])
module.directive("tgRelatedTaskCreateForm", ["$tgRepo", "$compile", "$tgConfirm", "$tgModel", "$tgLoading", RelatedTaskCreateFormDirective])
RelatedTaskCreateButtonDirective = ($repo, $compile, $confirm, $tgmodel) ->
template = _.template("""

View File

@ -34,7 +34,7 @@ module = angular.module("taigaWiki")
## Wiki Main Directive
#############################################################################
WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $loading) ->
template = _.template("""
<header>
<h1>Links</h1>
@ -128,13 +128,32 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
target = angular.element(event.currentTarget)
newLink = target.val()
$el.find(".new").addClass("hidden")
$el.find(".new input").val('')
$loading.start($el.find(".new"))
$tgrepo.create("wiki-links", {project: $scope.projectId, title: newLink, href: slugify(newLink)}).then ->
$ctrl.loadWikiLinks().then ->
promise = $tgrepo.create("wiki-links", {project: $scope.projectId, title: newLink, href: slugify(newLink)})
promise.then ->
loadPromise = $ctrl.loadWikiLinks()
loadPromise.then ->
$loading.finish($el.find(".new"))
$el.find(".new").addClass("hidden")
$el.find(".new input").val('')
$el.find(".add-button").show()
render($scope.wikiLinks)
$el.find(".add-button").show()
loadPromise.then null, ->
$loading.finish($el.find(".new"))
$el.find(".new").addClass("hidden")
$el.find(".new input").val('')
$el.find(".add-button").show()
$confirm.notify("error", "Error loading wiki links")
promise.then null, (error) ->
$loading.finish($el.find(".new"))
$el.find(".new input").val(newLink)
$el.find(".new input").focus().select()
if error?.__all__?[0]?
$confirm.notify("error", "The link already exists")
else
$confirm.notify("error")
else if event.keyCode == 27
target = angular.element(event.currentTarget)
@ -147,4 +166,4 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
return {link:link}
module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgNavUrls", WikiNavDirective])
module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgNavUrls", "$tgLoading", WikiNavDirective])

View File

@ -97,6 +97,16 @@
padding: 3px;
width: 85%;
}
&.loading {
margin: 0;
padding: 8px;
text-align: center;
width: 100%;
span {
@include animation (loading .5s linear);
@include animation (spin 1s linear infinite);
}
}
}
.blocked,
.blocked:hover {

View File

@ -47,11 +47,30 @@
right: .7rem;
top: .7rem;
}
}
.filters-inner {
opacity: 0;
@include transition (all .1s ease-in);
.loading {
background: $grayer;
border: 1px solid #b8b8b8;
display: inline-block;
margin: 0;
padding: 8px;
text-align: center;
width: 100%;
.icon-spinner {
color: $whitish;
float: none;
}
span {
@include animation (loading .5s linear);
@include animation (spin 1s linear infinite);
}
}
}
.filters-applied {

View File

@ -30,6 +30,22 @@
color: $gray-light;
}
}
&.loading {
background: $grayer;
border: 1px solid #b8b8b8;
margin: 0;
padding: 8px;
text-align: center;
width: 100%;
.icon-spinner {
color: $whitish;
float: none;
}
span {
@include animation (loading .5s linear);
@include animation (spin 1s linear infinite);
}
}
}
.button {
color: $white;