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 super
@render() @render()
# on window resize
resizeTasksDelay = =>
App.Delay.set( @resizeTasks, 100, 'resizeTasks', 'task' )
$(window).off( 'resize.taskbar' )
$(window).on( 'resize.taskbar', resizeTasksDelay )
# render view # render view
@bind 'task:render', => @render() @bind 'task:render', => @render()
@ -202,15 +208,29 @@ class Taskbar extends App.Controller
@navigate '#' @navigate '#'
resizeTasks: -> resizeTasks: ->
width = $('#task .taskbar').width() - 280 width = $('#task .taskbar').width() - $('#task .taskbar-new').width() - 200
task_count = App.TaskManager.all().length task_count = App.TaskManager.all().length
task_size = ( width / task_count ) - ( task_count * 1.3 ) 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 if task_size < 40
$('#task .task').css('max-width', '40px') $('#task .task').css('max-width', '40px')
else if task_size < 130 else if task_size < 130
$('#task .task').css('max-width', task_size + 'px') $('#task .task').css('max-width', task_size + 'px')
else else
$('#task .task').css('max-width', '120px') $('#task .task').css('max-width', '130px')
class Remove extends App.ControllerModal class Remove extends App.ControllerModal
constructor: -> constructor: ->

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

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