Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved layout and size calculation of taskbar.

Browse source
This commit is contained in:
Martin Edenhofer 2013-07-26 14:41:03 +02:00
parent 271116020c
commit c817b23168
2 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/javascripts/app/controllers/task_widget.js.coffee
View file

@ -102,6 +102,12 @@ class Taskbar extends App.Controller
super
@render()
# on window resize
resizeTasksDelay = =>
App.Delay.set( @resizeTasks, 100, 'resizeTasks', 'task' )
$(window).off( 'resize.taskbar' )
$(window).on( 'resize.taskbar', resizeTasksDelay )
# render view
@bind 'task:render', => @render()
@ -202,15 +208,29 @@ class Taskbar extends App.Controller
@navigate '#'
resizeTasks: ->
width = $('#task .taskbar').width() - 280
width = $('#task .taskbar').width() - $('#task .taskbar-new').width() - 200
task_count = App.TaskManager.all().length
task_size = ( width / task_count ) - ( task_count * 1.3 )
elementsOversize = 0
elementsOversizeLeftTotal = 0
$('#task .task').each(
(position, element) ->
width = $(element).parent().width()
if width > task_size
elementsOversize++
else
elementsOversizeLeftTotal += task_size - width
)
addOversize = elementsOversizeLeftTotal / elementsOversize
task_size += addOversize
if task_size < 40
$('#task .task').css('max-width', '40px')
else if task_size < 130
$('#task .task').css('max-width', task_size + 'px')
else
$('#task .task').css('max-width', '120px')
$('#task .task').css('max-width', '130px')
class Remove extends App.ControllerModal
constructor: ->

35
app/assets/stylesheets/zzz.css
View file

@ -47,15 +47,23 @@ table th, table td {
white-space: nowrap;
}
.taskbar {
#task {
}
#task > .taskbar {
position: fixed;
display: table;
top: 40px;
width: 100%;
padding: 5px;
padding: 2px 2px 2px 2px;
z-index: 990;
}
.task {
#task > .taskbar > div {
display: table-cell;
}
#task .task {
margin: -6px;
padding: 0px 4px;
display: inline-block;
@ -65,32 +73,31 @@ table th, table td {
white-space: nowrap;
}
.task > a,
.task > a:hover {
#task .task > a,
#task .task > a:hover {
color: #ffffff;
text-decoration: none;
}
.btn-default .task > a,
.btn-default .task > a:hover {
#task .btn-default .task > a,
#task .btn-default .task > a:hover {
color: #333333;
}
.taskbar .btn-mini {
#task .taskbar .btn-mini {
margin-top: 2px;
}
[data-type="close"] {
#task [data-type="close"] {
margin-left: 5px;
}
.taskbar-items {
float: left;
#task .taskbar-items {
}
.taskbar-new {
float: right;
margin-right: 14px;
#task .taskbar-new {
text-align: right;
padding-right: 12px;
}
.max-size-scroll {