Improving points visualization

stable
Alejandro Alonso 2014-07-07 10:07:55 +02:00
parent 9dc197389f
commit 979239902d
3 changed files with 50 additions and 22 deletions

View File

@ -543,9 +543,12 @@ UsRolePointsSelectorDirective = ($rootscope) ->
UsPointsDirective = ($repo) ->
selectionTemplate = _.template("""
<ul class="popover pop-role">
<% _.each(roles, function(role) { %>
<li><a href="" class="role" title="<%- role.name %>"
data-role-id="<%- role.id %>"><%- role.name %></a>
<% _.each(rolePoints, function(rolePointsElement) { %>
<li><a href="" class="role" title="<%- rolePointsElement.name %>"
data-role-id="<%- rolePointsElement.id %>">
<%- rolePointsElement.name %>
(<%- rolePointsElement.points %>)
</a>
</li>
<% }); %>
</ul>
@ -563,7 +566,6 @@ UsPointsDirective = ($repo) ->
link = ($scope, $el, $attrs) ->
$ctrl = $el.controller()
us = $scope.$eval($attrs.tgUsPoints)
updatingSelectedRoleId = null
selectedRoleId = null
@ -573,7 +575,30 @@ UsPointsDirective = ($repo) ->
if numberOfRoles == 1
selectedRoleId = _.keys(us.points)[0]
showPopPoints = () ->
$el.find(".pop-points-open").remove()
$el.append(pointsTemplate({ "points": $scope.project.points }))
$el.find(".pop-points-open a[data-point-id='#{us.points[updatingSelectedRoleId]}']").addClass("active")
# If not showing role selection let's move to the left
if not $el.find(".pop-role:visible").css('left')?
$el.find(".pop-points-open").css('left', '30px')
$el.find(".pop-points-open").show()
showPopRoles = () ->
$el.find(".pop-role").remove()
rolePoints = _.clone(_.filter($scope.project.roles, "computable"), true)
undefinedToQuestion = (val) ->
return "?" if not val?
return val
_.map(rolePoints, (v, k) -> v.points = undefinedToQuestion($scope.pointsById[us.points[v.id]].value))
$el.append(selectionTemplate({ "rolePoints": rolePoints }))
$el.find(".pop-role").show()
updatePoints = (roleId) ->
# Update the dom with the points
pointsDom = $el.find("a > span.points-value")
usTotalPoints = calculateTotalPoints(us)
us.total_points = usTotalPoints
@ -594,11 +619,6 @@ UsPointsDirective = ($repo) ->
updatePoints(null)
bindOnce $scope, "project", (project) ->
roles = _.filter(project.roles, "computable")
$el.append(selectionTemplate({ "roles": roles }))
$el.append(pointsTemplate({ "points": project.points }))
$scope.$on "uspoints:select", (ctx, roleId, roleName) ->
updatePoints(roleId)
selectedRoleId = roleId
@ -607,18 +627,17 @@ UsPointsDirective = ($repo) ->
updatePoints(null)
selectedRoleId = null
$el.on "click", "a.us-points", (event) ->
$el.on "click", "a.us-points span", (event) ->
event.preventDefault()
target = angular.element(event.target)
if target.is("span")
event.stopPropagation()
if selectedRoleId?
updatingSelectedRoleId = selectedRoleId
$el.find(".pop-points-open").show()
showPopPoints()
else
$el.find(".pop-role").show()
showPopRoles()
body = angular.element("body")
body.one "click", (event) ->
@ -631,8 +650,10 @@ UsPointsDirective = ($repo) ->
target = angular.element(event.currentTarget)
updatingSelectedRoleId = target.data("role-id")
$el.find(".pop-points-open").show()
$el.find(".pop-role").hide()
popRolesDom = $el.find(".pop-role")
popRolesDom.find("a").removeClass("active")
popRolesDom.find("a[data-role-id='#{updatingSelectedRoleId}']").addClass("active")
showPopPoints()
$el.on "click", ".point", (event) ->
event.preventDefault()
@ -640,6 +661,7 @@ UsPointsDirective = ($repo) ->
target = angular.element(event.currentTarget)
$el.find(".pop-points-open").hide()
$el.find(".pop-role").hide()
$scope.$apply () ->
usPoints = _.clone(us.points, true)

View File

@ -11,8 +11,7 @@ section.us-comments
a.username(href="", title="User name") User Name
//- includes module activity
include comment-activity
p.comment
{{ comment.comment }}
p.comment {{ comment.comment }}
p.date 15 junio 2014 15:30h
a.delete-comment.icon.icon-delete(href="", title="delete comment")

View File

@ -36,16 +36,22 @@
}
}
.pop-role {
@include popover(150px, '', 30px, 10px, '');
@include popover(150px, -100px, 30px, '', '');
a {
&.active {
background: $fresh-taiga;
color: $white;
}
}
}
.pop-status {
@include popover(150px, '', 30px, 10px, '');
}
.pop-points {
@include popover(150px, '', 30px, 10px, '');
@include popover(150px, 0px, 30px, 10px, '');
}
.pop-points-open {
@include popover(200px, '', 30px, 10px, '');
@include popover(200px, -100px, 180px, '', '');
li {
display: inline-block;
width: 23%;
@ -53,7 +59,8 @@
a {
display: block;
text-align: center;
&:hover {
&:hover,
&.active {
background: $fresh-taiga;
color: $white;
}