18 Jun 10 Brincadeirinha com Kanban Board Online

Depois de ter algumas idéias mirabolantes, que acabei deixando de lado, resolvi brincar um pouquinho com javascript e fazer um mini protótipo de um “Kanban Board”, sem usar nenhuma imagem, onde as tarefas fossem parecidas com aqueles alertas tipo “buble”, bom, o protótipo ficou beem feinho, mas deu pra tirar uma febre do meu CSS.
Para a parte Javascript usei o Jquery, a idéia básica é o seguinte:
Tenho 3 divs que representam 3 estados que qualquer tarefa pode estar: Backlog, Work In Progress e Done
Estas tem que estar uma ao lado da outra.
Dentro destas, quero ter blocos representando cada tarefa, e preciso conseguir mover estas tarefas entre os estados, para isto o JQuery facilita bastante a nossa vida, adicionei o jquery ui, e tudo o que eu precisei fazer foi o seguinte:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
    $("#backlog,#wip,#done").sortable({
        connectWith: '.connectedSortable',
        receive: function(event, ui) { 
            /*alert($(ui.item).attr('data-id') + ' -> ' + $(this).attr('id'));*/
            //Do something with the recently dropped item here
        }
    }).disableSelection();
 
});
</script>

Onde #backlog, #wip e #done são os IDs das divs principais …
Para posicionar estas divs coloquei elas dentro de um container de ID bublecontainers, e usei o seguinte CSS:

            #bublecontainers {
                background-color: gray;
                width: 600px;
                margin: 0 0 0 0;
                padding: 0 0 0 0;
            }
            #backlog, #wip, #done {
                width: 190px;
                margin-left: 5px;
                height: 340px;
                display: inline-block;
                float:left;
                border: solid 1px;
            }

E agora a parte importante, para fazer as tarefas parecerem bolhas, usei a seguinte estrutura HTML:

<div class="buble">
  <div class="buble-content">
Texto da task aqui
  </div>
  <div class="buble-arrow"></div>
</div>

E me aproveitei de como as bordas do HTML são montadas via CSS, para transformar isto em uma bolha, só precisei do CSS abaixo:

.buble-content {
                width: 100%;
                top: 0;
                margin: 0 0 0 0;
                padding: 8px 8px 8px 8px;
                text-align:justify;
                overflow: hidden;
                border-radius:10px;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                background-color:#FFF;
                border-style: outset;
                text-indent: 10px;
 
 
            }
            .buble
            {
                display:inline-block;
                width:90%;
            }
 
            .buble-arrow
            {
                border-color:#FFF transparent transparent transparent;
                border-style:solid;
                border-width:17px;
                margin: -4 0 0 0;
                height:0;
                width:0;
                position: relative;
                left: 30%;
            }

As bordas arredondadas só vão aparecer em browsers mais modernos que tenham algum suporte a CSS3 rounded corners.

O experimento até que foi divertido, mas o código tem diversas falhas ainda, serviu para brincar um pouco

E o resultado vocês podem ver nesta coisa horrenda aqui de baixo (deem uma folga, fiz isto em 20 minutos ais ou menos só pra brincar e ver se a minha idéia era viável )

Back Log

Work In Progress

Done

Create a virtual Kanban Board

Make this VKB usable

write a blog post about it

make it using no images, just CSS

Se quiserem o código completo, segue abaixo:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <style>
            #bublecontainers {
                background-color: gray;
                width: 600px;
                margin: 0 0 0 0;
                padding: 0 0 0 0;
            }
            .buble-content {
                width: 100%;
                top: 0;
                margin: 0 0 0 0;
                padding: 8px 8px 8px 8px;
                text-align:justify;
                overflow: hidden;
                border-radius:10px;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                background-color:#FFF;
                border-style: outset;
                text-indent: 10px;
 
 
            }
            .buble
            {
                display:inline-block;
                width:90%;
            }
 
            .buble-arrow
            {
                border-color:#FFF transparent transparent transparent;
                border-style:solid;
                border-width:17px;
                margin: -4 0 0 0;
                height:0;
                width:0;
                position: relative;
                left: 30%;
            }
            #backlog, #wip, #done {
                width: 190px;
                margin-left: 5px;
                height: 340px;
                display: inline-block;
                float:left;
                border: solid 1px;
            }
            #bltitle, #wiptitle, #donetitle {
                height: 15px;
                text-align: center;
                width: 190px;
                display: inline-block;
                font-size: 20;
                font-height: bold;
            }
        </style>
        <script>
            $(document).ready(function(){
                $("#backlog,#wip,#done").sortable({
                    connectWith: '.connectedSortable',
                    receive: function(event, ui) { 
                        /*alert($(ui.item).attr('data-id') + ' -> ' + $(this).attr('id'));*/
                        //Do something with the recently dropped item here
                    }
                }).disableSelection();
 
            });
        </script>
    </head>
    <body>
        <div id="bublecontainers">
            <div id="bltitle">Back Log</div>
            <div id="wiptitle">Work In Progress</div>
            <div id="donetitle">Done</div>
            <div id="backlog" class="connectedSortable">
                <div class="buble" data-id="buble1">
                    <div class="buble-content">
                        Create a virtual Kanban Board
                    </div>
                    <div class="buble-arrow"></div>
                </div>
                <div class="buble" data-id="buble2">
                    <div class="buble-content">
                        Make this VKB usable
                    </div>
                    <div class="buble-arrow"></div>
                </div>
                <div class="buble" data-id="buble2">
                    <div class="buble-content">
                        write a blog post about it
                    </div>
                    <div class="buble-arrow"></div>
                </div>
                <div class="buble" data-id="buble2">
                    <div class="buble-content">
                        make it using no images, just CSS
                    </div>
                    <div class="buble-arrow"></div>
                </div>
            </div>
            <div id="wip" class="connectedSortable">
            </div>
            <div id="done" class="connectedSortable">
            </div>
            <div style="clear:both"></div>
        </div>
    </body>
</html>

If you enjoyed this post, make sure you subscribe to my RSS feed!

Tags: javascript, kanban, teste

Filed in Java, Ruby, Trabalho, rails

Reader's Comments

Franklin Dattein | 18 Jun 2010 3:53 pm
Fala Uruba.

Toda a brincadeira com CSS + JS é legal e tal, mas se quiser um esquema profissional, paga 20 doletas e compra o Jira e o plugin Greenhoper da Atlassian.

Fica um Scrum Board igual ao do seu exemplo. De longe a melhor ferramenta web pra gerencimento de projetos (scrum ou não) que eu já usei.

Abraço,
Franklin

[Translate]
Reply to this comment
Thiago Moretto | 18 Jun 2010 6:43 pm
Olá Uburatan,

Bacana, gostei dos bubbles. Fiz um kanban board também com jQuery, mas com um backend em sinatra, com estados dinâmicos e validação. O legal que com jQuery da pra capturar os eventos e transmitir ações ao backend de maneira muito fácil. No exemplo que fiz, existe um workflow (ainda nao é dinamico), faço uma validação no backend (via ajax/json) e caso não passe pela validação eu anulo o movimento. Ah! E também se a tarefa esta com impedimento ela não pode ser movida até que o impedimento seja resolvido

Parece que vou ter que publicar meu kanban board já que você abriu concorrência

Abs!

[Translate]
Reply to this comment