fix #678 - it's possible to scroll when drag US's

stable
Juanfran 2014-12-02 12:03:06 +01:00
parent 382091c726
commit 90a8959d50
5 changed files with 40 additions and 26 deletions

View File

@ -58,9 +58,7 @@ BacklogSortableDirective = ($repo, $rs, $rootscope, $tgConfirm) ->
containment: ".wrapper" containment: ".wrapper"
dropOnEmpty: true dropOnEmpty: true
placeholder: "row us-item-row us-item-drag sortable-placeholder" placeholder: "row us-item-row us-item-drag sortable-placeholder"
# With scroll activated, it has strange behavior scroll: true
# with not full screen browser window.
scroll: false
# A consequence of length of backlog user story item # A consequence of length of backlog user story item
# the default tolerance ("intersection") not works properly. # the default tolerance ("intersection") not works properly.
tolerance: "pointer" tolerance: "pointer"
@ -153,6 +151,7 @@ SprintSortableDirective = ($repo, $rs, $rootscope) ->
# If the user has not enough permissions we don't enable the sortable # If the user has not enough permissions we don't enable the sortable
if project.my_permissions.indexOf("modify_us") > -1 if project.my_permissions.indexOf("modify_us") > -1
$el.sortable({ $el.sortable({
scroll: true
dropOnEmpty: true dropOnEmpty: true
connectWith: ".sprint-table,.backlog-table-body,.empty-backlog" connectWith: ".sprint-table,.backlog-table-body,.empty-backlog"
}) })

View File

@ -29,23 +29,44 @@ module = angular.module("taigaBacklog")
############################################################################# #############################################################################
BacklogSprintDirective = ($repo, $rootscope) -> BacklogSprintDirective = ($repo, $rootscope) ->
sprintTableMinHeight = 50
slideOptions = {
duration: 500,
easing: 'linear'
}
refreshSprintTableHeight = (sprintTable) =>
if !sprintTable.find(".row").length
sprintTable.css("height", sprintTableMinHeight)
else
sprintTable.css("height", "auto")
toggleSprint = ($el) =>
sprintTable = $el.find(".sprint-table")
sprintArrow = $el.find(".icon-arrow-up")
sprintArrow.toggleClass('active')
sprintTable.toggleClass('open')
refreshSprintTableHeight(sprintTable)
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
$scope.$watch $attrs.tgBacklogSprint, (sprint) -> $scope.$watch $attrs.tgBacklogSprint, (sprint) ->
sprint = $scope.$eval($attrs.tgBacklogSprint) sprint = $scope.$eval($attrs.tgBacklogSprint)
if $scope.$first if $scope.$first
$el.addClass("sprint-current") toggleSprint($el)
$el.find(".sprint-table").addClass('open')
else if sprint.closed else if sprint.closed
$el.addClass("sprint-closed") $el.addClass("sprint-closed")
else if not $scope.$first and not sprint.closed else if not $scope.$first and not sprint.closed
toggleSprint($el)
$el.addClass("sprint-old-open") $el.addClass("sprint-old-open")
# Event Handlers # Event Handlers
$el.on "click", ".sprint-name > .icon-arrow-up", (event) -> $el.on "click", ".sprint-name > .icon-arrow-up", (event) ->
target = $(event.currentTarget) toggleSprint($el)
target.toggleClass('active')
$el.find(".sprint-table").toggleClass('open') $el.find(".sprint-table").slideToggle(slideOptions)
$el.on "click", ".sprint-name > .icon-edit", (event) -> $el.on "click", ".sprint-name > .icon-edit", (event) ->
sprint = $scope.$eval($attrs.tgBacklogSprint) sprint = $scope.$eval($attrs.tgBacklogSprint)

View File

@ -121,7 +121,10 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
timeout timeoutValue, -> timeout timeoutValue, ->
overlay.one 'transitionend', () -> overlay.one 'transitionend', () ->
$(document.body).removeClass("loading-project open-projects-nav closed-projects-nav") $(document.body)
.removeClass("loading-project open-projects-nav closed-projects-nav")
.css("overflow-x", "visible")
overlay.hide() overlay.hide()
$(document.body).addClass("closed-projects-nav") $(document.body).addClass("closed-projects-nav")
@ -153,11 +156,12 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
$scope.$on "nav:projects-list:open", -> $scope.$on "nav:projects-list:open", ->
if !$(document.body).hasClass("open-projects-nav") if !$(document.body).hasClass("open-projects-nav")
animationFrame.add () -> animationFrame.add () => overlay.show()
overlay.show()
animationFrame.add () -> animationFrame.add(
$(document.body).toggleClass("open-projects-nav") () => $(document.body).css("overflow-x", "hidden")
() => $(document.body).toggleClass("open-projects-nav")
)
$el.on "click", ".projects-list > li > a", (event) -> $el.on "click", ".projects-list > li > a", (event) ->
# HACK: to solve a problem with the loader when the next url # HACK: to solve a problem with the loader when the next url

View File

@ -1,6 +1,5 @@
// Basic layout styles // Basic layout styles
html { html {
height: 100%;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
} }
@ -9,9 +8,7 @@ body {
background: #fff; // fallback background: #fff; // fallback
color: #444; color: #444;
-webkit-font-smoothing: antialiased; // Fix for webkit renderin -webkit-font-smoothing: antialiased; // Fix for webkit renderin
height: 100%;
min-height: 100%; min-height: 100%;
overflow-x: hidden; // open-projects-nav
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
width: 100%; width: 100%;

View File

@ -116,10 +116,6 @@
} }
} }
.sprint-table { .sprint-table {
@include slide(1000px, overflow-x);
&.open {
min-height: 50px;
}
.row { .row {
@include table-flex(); @include table-flex();
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
@ -211,13 +207,13 @@
} }
} }
} }
.sprint-table {
@include slide(1000px, overflow-y);
}
} }
// If sprint is closed and date is old // If sprint is closed and date is old
.sprint-closed { .sprint-closed {
.sprint-table {
display: none;
}
.sprint-name { .sprint-name {
.icon-arrow-up { .icon-arrow-up {
@include transform(rotate(180deg)); @include transform(rotate(180deg));
@ -242,9 +238,6 @@
background: darken($gray-light, 10%); background: darken($gray-light, 10%);
} }
} }
.sprint-table {
@include slide(1000px, overflow-y);
}
.button-gray { .button-gray {
background: $gray-light; background: $gray-light;
} }