You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Joachim Dreimann <jo...@wandisco.com> on 2012/02/08 14:39:02 UTC

Dashboard design, Wiki (incl HTML/CSS)

Good to see that some discussion is ongoing, and that work on some on
the architecture of the dashboard has already started.

I believe it would help to refocus our efforts by making the designs I
sent previously more concrete by creating them in HTML. I did this
yesterday with the Bootstrap framework that seemed to have been quite
popular when it was suggested [1]. You can see the result here:
http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html

This is our initial goal for the design. I will create further pages
over the next few days.

I will now start to document the actual functionality of this page in
the Bloodhound Wiki, but please be aware that this won't contain
significant information for another few hours:
https://issues.apache.org/bloodhound/wiki/Ui/Dashboard

I would strongly suggest that we only implement functionality as
described in this Wiki article. Anyone that wants to get edit access,
please ask on this list, providing the username of your choice. Gary
will then contact you with initial login details that can be modified
within Bloodhound. This is only an initial process and we'll have to
come up with something more sustainable in the medium term.

- Joe

[1] http://mail-archives.apache.org/mod_mbox/incubator-bloodhound-dev/201201.mbox/%3C27717227-01EF-4297-B17D-961F36715005%40gmail.com%3E

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Thu, Feb 9, 2012 at 10:17 AM, Olemis Lang <ol...@gmail.com> wrote:
> On Thu, Feb 9, 2012 at 8:19 AM, Olemis Lang <ol...@gmail.com> wrote:
>> On Thu, Feb 9, 2012 at 7:34 AM, Joachim Dreimann
>> <jo...@wandisco.com> wrote:
>>>
[...]
>
> You can get there relatively fast by applying the following patchs
> [1]_ .
>

oops ! download link is missing

.. [1] Download patches for ThemeEngine + Bootstrap CSS
        (https://bitbucket.org/olemis/trac-mq/get/528f01c8c3d1.zip)

--
Regards,

Olemis

Facebook => http://www.facebook.com/olemis
Twitter => http://www.twitter.com/olemislc (@olemislc)
Blog ES => http://simelo-es.blogspot.com
Blog EN => http://simelo-en.blogspot.com
Quora => http://www.quora.com/olemis
Youtube => http://youtube.com/user/greatsoftw

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Thu, Feb 9, 2012 at 8:19 AM, Olemis Lang <ol...@gmail.com> wrote:
> On Thu, Feb 9, 2012 at 7:34 AM, Joachim Dreimann
> <jo...@wandisco.com> wrote:
>>
[...]
>
>> Please take
>> the next bit with a pinch of salt because my focus is less technical:
>> I would think mapping all current CSS references in Trac to the single
>> Bootstrap file instead is a starting point. We have already
>> established earlier that Bootstrap and Genshi are not in conflict per
>> se.
>>
>
> I already did that for trac.css as it contains generic .

I wanted to say generic CSS rules (e.g. for HTML elements ...) .

> JFTR the
> missing piece in the puzzle is that specific modules (e.g. wiki) add
> their own rules & CSS classes . In theory , if Trac
>
> 1- didn't provide generic rules (e.g. p { /* whatever */ } ) and ...
[...]
>
> ... then it would be possible to obtain expected result relatively quick . So
>
> - In order to work around #1 above I suggested to replace trac.css
> with bootstrap.css

well , this is a good approximation to start with ... there's still
some room for enhancement ... ;)

You can get there relatively fast by applying the following patchs
[1]_ . Needless to say that
you'll get there much more faster if you use the patch queue @
Bitbucket ... something **like** this

{{{
#!sh

$ hg qclone ssh://hg@bitbucket.org/olemis/trac-mq/ trac-mq
$ cd .hg/patches
$ hg update bh_theme_bootstrap
$ cd ../../
$ hg qpush -a
applying tho/themeengine/t-9580-tc-infinite-recursion.diff
applying tho/themeengine/t-9580-infinite-recursion.diff
applying bh/theme/bootstrap.diff
now at: bh/theme/bootstrap.diff
}}}

First two patches are needed to make ThemeEnginePlugin run in
Trac=0.13 . The third one replaces trac.css with bootstrap.css
Starting from there you can create a new patch on top of those ...

{{{
#!sh

$ hg qnew bh/theme/patchname.diff

}}}

... make some changes to css and/or Genshi templates , and refresh the
patch (qrefresh) + new changeset (qci) once you obtain some results .
IMO it'd be nice to keep patches as small as possible , thus focusing
on a particular subject (e.g. fix styles used in wiki pages ;) .

Doing this I'll be able to pull your changes and apply them to my
local copy . Once they'll be ready to go they may be committed to ASF
svn repos ;).

--
Regards,

Olemis

Facebook => http://www.facebook.com/olemis
Twitter => http://www.twitter.com/olemislc (@olemislc)
Blog ES => http://simelo-es.blogspot.com
Blog EN => http://simelo-en.blogspot.com
Quora => http://www.quora.com/olemis
Youtube => http://youtube.com/user/greatsoftw

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Thu, Feb 9, 2012 at 7:34 AM, Joachim Dreimann
<jo...@wandisco.com> wrote:
> In terms of option 2, Bootstrap can be modified on the page itself:
> http://twitter.github.com/bootstrap/download.html#variables
>
> ..but also using LESS:
> http://lesscss.org/
>
> It all depends on what modifications you are looking for exactly.
>

thnx for the pointer
;)

> From my insights into Trac so far there is no CSS that is currently
> provided which Bootstrap doesn't also cover in some way.

that's cool indeed .
:)

> Please take
> the next bit with a pinch of salt because my focus is less technical:
> I would think mapping all current CSS references in Trac to the single
> Bootstrap file instead is a starting point. We have already
> established earlier that Bootstrap and Genshi are not in conflict per
> se.
>

I already did that for trac.css as it contains generic . JFTR the
missing piece in the puzzle is that specific modules (e.g. wiki) add
their own rules & CSS classes . In theory , if Trac

1- didn't provide generic rules (e.g. p { /* whatever */ } ) and ...
2- use different CSS classes

... then it would be possible to obtain expected result relatively quick . So

- In order to work around #1 above I suggested to replace trac.css
with bootstrap.css
- The links you provided before might help to achieve #2

I'll provide more feedback later today .

> We will then see what breaks, and should decide how to best map those
> instances to Bootstrap on a case by case basis, recording these
> decisions in patches that can then also be applied to Apps (currently
> called TracHacks/plugins) to maintain compatibility, or at least
> highlight what exactly needs to be changed to be compatible.
>

+1

> The upshot of this is that we should be able to try this quickly and
> if too much breaks to be worth fixing we've ruled out one option.
>

... agreed . I just mentioned the three options to get feedback from
you and be in synch
Thnx for your reply .

> In fact I'll go further than that and volunteer myself to try it this
> afternoon (with Gary's help). I'll post here again later to say how it
> went.
>

I look forward to see your conclusions .

--
Regards,

Olemis

Facebook => http://www.facebook.com/olemis
Twitter => http://www.twitter.com/olemislc (@olemislc)
Blog ES => http://simelo-es.blogspot.com
Blog EN => http://simelo-en.blogspot.com
Quora => http://www.quora.com/olemis
Youtube => http://youtube.com/user/greatsoftw

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Joachim Dreimann <jo...@wandisco.com>.
In terms of option 2, Bootstrap can be modified on the page itself:
http://twitter.github.com/bootstrap/download.html#variables

..but also using LESS:
http://lesscss.org/

It all depends on what modifications you are looking for exactly.

>From my insights into Trac so far there is no CSS that is currently
provided which Bootstrap doesn't also cover in some way. Please take
the next bit with a pinch of salt because my focus is less technical:
I would think mapping all current CSS references in Trac to the single
Bootstrap file instead is a starting point. We have already
established earlier that Bootstrap and Genshi are not in conflict per
se.

We will then see what breaks, and should decide how to best map those
instances to Bootstrap on a case by case basis, recording these
decisions in patches that can then also be applied to Apps (currently
called TracHacks/plugins) to maintain compatibility, or at least
highlight what exactly needs to be changed to be compatible.

The upshot of this is that we should be able to try this quickly and
if too much breaks to be worth fixing we've ruled out one option.

In fact I'll go further than that and volunteer myself to try it this
afternoon (with Gary's help). I'll post here again later to say how it
went.

- Joe

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Wed, Feb 8, 2012 at 8:39 AM, Joachim Dreimann
<jo...@wandisco.com> wrote:
[...]
>
> I believe it would help to refocus our efforts by making the designs I
> sent previously more concrete by creating them in HTML. I did this
> yesterday with the Bootstrap framework that seemed to have been quite
> popular when it was suggested [1]. You can see the result here:
> http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html
>

a comment about this :

I started doing this and I need you (all ;) to consider something very
important so as to move forward with Bootstrap .

<introduction>
The process of building a Trac theme usually involves developing a
plugin that relies on ThemeEnginePlugin so as to override default
trac.css file (and *override* means that trac.css is still applied ) ,
but also all other aspects defined by further Trac css files e.g.

{{{
#!sh

$ find /path/to/trac/0.13/venv/trac/ -name "*.css"
/path/to/trac/0.13/venv/trac/htdocs/css/about.css
/path/to/trac/0.13/venv/trac/htdocs/css/changeset.css
/path/to/trac/0.13/venv/trac/htdocs/css/code.css
/path/to/trac/0.13/venv/trac/htdocs/css/diff.css
/path/to/trac/0.13/venv/trac/htdocs/css/prefs.css
/path/to/trac/0.13/venv/trac/htdocs/css/search.css
/path/to/trac/0.13/venv/trac/htdocs/css/timeline.css
/path/to/trac/0.13/venv/trac/htdocs/css/admin.css
/path/to/trac/0.13/venv/trac/htdocs/css/browser.css
/path/to/trac/0.13/venv/trac/htdocs/css/report.css
/path/to/trac/0.13/venv/trac/htdocs/css/roadmap.css
/path/to/trac/0.13/venv/trac/htdocs/css/ticket.css
/path/to/trac/0.13/venv/trac/htdocs/css/trac.css
/path/to/trac/0.13/venv/trac/htdocs/css/wiki.css

}}}
</introduction>

considering this , there are three options :

1- include bootstrap.css as is and a separate css file so as to
   patch it in order to override trac.css et al.
2- include a modified version of bootstrap.css (<= is this possible ?)
3- replace trac.css with bootstrap.css and build all other css
   files (+ Genshi templates)

... basically this (and other hidden causes I'll mention along the way
;) means that there's a little extra effort due to the fact that the
HTML conversion is not straightforward ; even if it is great to start
;) .

> This is our initial goal for the design. I will create further pages
> over the next few days.
>

I'm trying to provide a solution based on 1 ( ... but I'd rather
prefer to have green light to use 2 ;) . Nonetheless if many pages are
going to change maybe there's a chance to discuss whether 3 is the way
to go so as to move forward with Bootstrap and avoid patching styles (
too much ? ) along the way .

Comments ?

--

Regards,

Olemis

Facebook => http://www.facebook.com/olemis
Twitter => http://www.twitter.com/olemislc (@olemislc)
Blog ES => http://simelo-es.blogspot.com
Blog EN => http://simelo-en.blogspot.com
Quora => http://www.quora.com/olemis
Youtube => http://youtube.com/user/greatsoftw

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.

Re: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
Hi !

On Wed, Feb 8, 2012 at 8:39 AM, Joachim Dreimann
<jo...@wandisco.com> wrote:
>
> Good to see that some discussion is ongoing, and that work on some on
> the architecture of the dashboard has already started.
>

:)

>
> I believe it would help to refocus our efforts by making the designs I
> sent previously more concrete by creating them in HTML.


yes, thnx .

>
> I did this
> yesterday with the Bootstrap framework that seemed to have been quite
> popular when it was suggested [1]. You can see the result here:
> http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html
>

... from the coder perspective :

1- we need a report outputting data just like shown under "dashboard"
    header (and figure out how to make it look like ) . I'd appreciate
    if somebody can provide the SQL for it ;)
2- ... or implement another widget looking just like that , though IMO
    it's a bit redundant to have a gorgeous report engine and still
    write SQL queries *by hand* ... but it's possible in the end ;)
3- considering the fact that there's no multi-proj support yet ,
    widget at the bottom will be replaced by something else .
4- Activity widget is ready so ... ;)
5- Bootstrap layout should be no big deal , as I mentioned before ;)

<joke>
... and please , tell Warren to stop saying the same thing over
and over ... two days and still the same speech ...
</joke>

> This is our initial goal for the design. I will create further pages
> over the next few days.
>

cool !
now that I have some HTML , I'll update theme + dashboard to make it
look as similar as possible .

thnx

> I will now start to document the actual functionality of this page in
> the Bloodhound Wiki, but please be aware that this won't contain
> significant information for another few hours:
> https://issues.apache.org/bloodhound/wiki/Ui/Dashboard
>
>
> I would strongly suggest that we only implement functionality as
> described in this Wiki article. Anyone that wants to get edit access,
> please ask on this list, providing the username of your choice.


/me wants to access
username : olemis

>
> Gary
> will then contact you with initial login details that can be modified
> within Bloodhound. This is only an initial process and we'll have to
> come up with something more sustainable in the medium term.
>

OpenID ?
;)

--
Regards,

Olemis

Facebook => http://www.facebook.com/olemis
Twitter => http://www.twitter.com/olemislc (@olemislc)
Blog ES => http://simelo-es.blogspot.com
Blog EN => http://simelo-en.blogspot.com
Quora => http://www.quora.com/olemis
Youtube => http://youtube.com/user/greatsoftw

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.