You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Olemis Lang <ol...@gmail.com> on 2012/02/09 22:06:01 UTC

Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Yeehaw !

There is a new version of the theme based on Bootstrap , very similar
to what Joachim sketched before ( while True : print "Thanks Joachim
... Keep up the good work" ) . Please take a look at it here [6]_ , as
you can see a bit more of CSS-fu still needed ;)

Important Notes (top-down):

- `Preferences` label rather than `Settings` . Trac-core modification required.
- `View More` link under `Apps` dropdown menu is useless => removed
- Only `wiki`, `tickets` and `browser` main nav items are visible in tabs area
  [1]_ .
- `Browse source` item is not visible in there as there's no repository
  configured in that environment.
- Reports look empty due to the fact that it's a brand new Trac=0.13
  environment (tickets number = 0) . [4]_
- Pay attention to duplicated search box [5]_
- IMO what mainnav items are always visible should be set in trac.ini . So
  default configuration will the one shown in screenshots , but people can
  configure and make their own decisions
- Nonetheless, if some other main nav item (e.g. `Admin`) is active it is also
  added in there [2]_ as I thought it was useful to be aware of that fact.
  If this is not ok for you then my suggestion is to add `active` class to the
  corresponding (active) mainnav item in the dropdown menu . (i.e. highlighted
  in blue background color)
- TODO: Styles for notices, warnings and messages are not available in Joachim
  HTML , therefore I didn't know how to add something like that . This how
  it looks at present [3]_ .
- `Search anything ...` hint inside search box is not displayed in Firefox
  but it shows up in Chrome & Opera [7]_ ... :-/

Further comments below ... ;)

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:
> >>
>
[...]
>
> > 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
> >


I wonder if it's a good idea to publish the code (for both dashboard +
theme ;) @ Bb ... IMO that may be useful at least in the meantime , as
code is migrated to Apache svn repos ;)

>
> > - 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 ... ;)
>

This is what I've done , so I'm assuming legacy trac.css file is not
there anymore and it becomes a brand new shiny copy of bootstrap.js .
I toast to that
:)

Instructions below ... keep it under your pillow

> You can get there relatively fast by applying the following patches.
>
> 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 ;).
>

.. [1] Screenshot #14 - WikiStart (Firefox)
        (https://lh3.googleusercontent.com/-BS95gra7s5Q/TzQkJiZMa0I/AAAAAAAAAcA/8yaegfUbdBo/w598-h336-k/BH_theme_14_bootstrap_wiki.png)

.. [2] Screenshot #19 - Timeline (<= notice that it's included in mainnav)
        (https://lh3.googleusercontent.com/-5qdNJqi6RAw/TzQmuFw-DlI/AAAAAAAAAco/MN-U2kXtes4/w336-h189-n-k/BH_theme_19_bootstrap_timeline.png)

.. [3] Screenshot #23 - Error page
        (https://lh5.googleusercontent.com/-1W_-p3VxSUY/TzQrcBT0OXI/AAAAAAAAAdA/CSUilkjd1ek/w607-h186-k/BH_theme_23_bootstrap_error_opera.png)

.. [4] Screenshot #18 - Report ... no tickets yet (Firefox)
        (https://lh4.googleusercontent.com/-XQZLi6Gr1Po/TzQmXu5VX-I/AAAAAAAAAcg/rklRJpEeL8s/w441-h249-k/BH_theme_18_bootstrap_report.png)

.. [5] Screenshot # 16 - Duplicated search box
        (https://lh5.googleusercontent.com/-kA11fl079_U/TzQkqpJKQSI/AAAAAAAAAcQ/rk1i5vJxJ9U/w441-h249-k/BH_theme_16_bootstrap_search.png)

.. [6] Bloodhound theme (round 2) : Introducing Bootstrap
        (https://plus.google.com/photos#photos/118444449354330048631/albums/5707226375749444353)

.. [7] Screenshot # 22 - Search box in Opera
        (https://lh6.googleusercontent.com/-DlT4_3AhMo4/TzQzb3TWf6I/AAAAAAAAAdY/hAsdQneyk40/w408-h185-n-k/BH_theme_22_bootstrap_wiki_opera.png)

--

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: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Wed, Feb 15, 2012 at 3:40 PM, Olemis Lang <ol...@gmail.com> wrote:
> On Tue, Feb 14, 2012 at 9:37 AM, Joachim Dreimann
> <jo...@wandisco.com> wrote:
[...]
>
>> Two changes I've made since the last Email:
>> 1. Updated the breadcrumb to now be in the style of Bootstrap
>> 2. Added Help back to the metanav.
>>
>> - Joe
>>
>> [1] http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html
>
> I'll finish these later today . Thnx
> ;)
>

Done ! Please take a look [9]_

PS: So far bootstrap CSS needs a patch in order to render breadcrumbs
correctly . The same may be achieved by patching Trac , but bootstrap
patch is tiny , as opposite to the one required in Trac ... anyways
... there u have it !
;)

.. [9] Breadcrumbs + Help
        (https://lh6.googleusercontent.com/-ZznrSWvpJ_E/TzwrVQxETwI/AAAAAAAAAe4/0G4NuqX0thg/w407-h185-n-k/BH_theme_25_bootstrap_breadcrumbs.png)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Tue, Feb 14, 2012 at 9:37 AM, Joachim Dreimann
<jo...@wandisco.com> wrote:
> As I said on Google Plus, this is a very good starting point.
>

:)

This is the latest version [8]_ after incorporating Bootstrap and your
design in the dashboard itself .

> On 9 February 2012 21:06, Olemis Lang <ol...@gmail.com> wrote:
>>
[...]
>> Important Notes (top-down):
>>
>> - `Preferences` label rather than `Settings` . Trac-core modification required.
>> - `View More` link under `Apps` dropdown menu is useless => removed
>> - Only `wiki`, `tickets` and `browser` main nav items are visible in tabs area
>>   [1]_ .
>
> Noted. I've updated the html mock up [1] too where necessary. I think
> we should use the terminology consistently though as Tickets, Wiki and
> Source (ie drop 'View' from 'View Tickets').
>

That requires to modify Trac source code . Now that we have an issue
tracker , is it a good idea to use it ? If so, please feel free to
identify all enhancements needed, create a ticket, and assign it to
olemis (<= /me ;) .
I think that's a good way for me to remember this needs to be done
(... later ... maybe next week ;)

>> - `Browse source` item is not visible in there as there's no repository
>>   configured in that environment.
>
> I believe it should still show when there is no repository. The page
> will then display a message of how to set up the link to the
> repository, or hide the tab and explain how to add it later.
>

... another ticket ? ... :$

>> - Reports look empty due to the fact that it's a brand new Trac=0.13
>>   environment (tickets number = 0) . [4]
>> - Pay attention to duplicated search box [5]_
>
> Redesign of the search results page is almost ready. Essentially the
> search box should be removed from it and the checkboxes rearranged,
> more good stuff in v2 + onwards
>

ok, I look forward to your proposal

>> - IMO what mainnav items are always visible should be set in trac.ini . So
>>   default configuration will the one shown in screenshots , but people can
>>   configure and make their own decisions
>
> I'm happy for it to be represented there. Options to change this via
> the interface may follow in later versions.
>

+1

>> - Nonetheless, if some other main nav item (e.g. `Admin`) is active it is also
>>   added in there [2]_ as I thought it was useful to be aware of that fact.
>
> I believe that when something that is in the Apps dropdown is selected
> (ie Admin in your example), Apps should be highlighted. The Admin tab
> shouldn't suddenly appear next to the others (which would set the
> expectation that it can be found there) just to disappear again once
> something else is clicked (causing confusion).
>

I c your point . I just thought users should know what section of the
site they are browsing at a given moment . If «Apps» is highlighted
then users still might not know «relatively quickly» ... as there're
many options in there .

> The question whether 'Admin' should be a tab on its own is a separate
> one, it's just an example above. What I described should be true for
> all Apps in the main navigation - they should stay where they are
> unless intentionally moved.
>
>>   If this is not ok for you then my suggestion is to add `active` class to the
>>   corresponding (active) mainnav item in the dropdown menu . (i.e. highlighted
>>   in blue background color)
>
> Sounds liks that's more along the lines of what I described above.
>

ok

[...]
>> - `Search anything ...` hint inside search box is not displayed in Firefox
>>   but it shows up in Chrome & Opera [7]_ ... :-/
>
> Works correctly in Firefox 10 on Mac OS X, can try other O/S if you need.
>

Maybe it's my version of Firefox ... not sure whether it's a big deal or not .

> Two changes I've made since the last Email:
> 1. Updated the breadcrumb to now be in the style of Bootstrap
> 2. Added Help back to the metanav.
>
> - Joe
>
> [1] http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html

I'll finish these later today . Thnx
;)

.. [8] Report and activity widgets in the dashboard (using Bootstrap) .
        (https://lh6.googleusercontent.com/-HhA5A5iTYQc/TzwSS0bKcZI/AAAAAAAAAec/FVsmmptrWH4/w443-h200-k/BH_dashboard_10_bootstrap.png)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Mon, Feb 20, 2012 at 4:29 PM, Joachim Dreimann
<jo...@wandisco.com> wrote:
> I'll address points made throughout the last few Emails by Olemis in
> one below, in chronological order:
>
>> PS: So far bootstrap CSS needs a patch in order to render breadcrumbs correctly
>
> That's fine. A small, well documented patch is worth a thousand big
> patches, right?
>

wise words

>> I'll move forward and implement a components cloud (widget) so as to complete dashboard UI
>
> Apologies if you've started with this already, but it seems like we'll
> approach this issue differently. Instead of providing the <well>
> </well> for Components, we'll have a button bar above the list of
> tickets that allows you to select this or other options. You can see
> this already on the Version view for example:
> http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/version.html
>

ok , but there are a few things I might not understand quite well ...

> I'll be able to update this for the Dashboard tomorrow.
>

... so maybe I should wait for this to happen
;)

>> - Colors for reports
>> - Styles for timeline events
>> - Context navigation in dashboard page
>> - Links to download widget contents inserted in dropdown
>>  menu at widgets header
>
> I would leave the download links out for now. We should definitely
> provide them in the Custom Query and Reports interface though -
> because that's where the user has a whole lot more control over the
> query itself and can therefore easily generate the right information
> to export.
>

ok . I'll hide them ;)

> I'm not quite sure what impacts the other points have? (Styles for
> timeline events,

e.g. icons for each timeline event

> colors for reports?)
>

background-color of rows set considering ticket priority

> In regards to the colors highlighting priority in the Dashboard: I
> much prefer showing high importance via left-alignment in the Priority
> columns of High priority items (while Medium and Low priority are
> aligned right in the column). With the colors you may get in a
> situation otherwise where they constantly repeat for every day, which
> could result in a double rainbow :)
>

ok, I agree . I'll revert that ... and try to add a column containing
dots and colors according to priority value (just like in initial
design ;) in order to see what it'd look like . If you are ok with it
then it stays otherwise dots go away (... just scratching my itch ;)

>> Besides I also added another widget displaying a tag cloud similar to «Projects» in Joachim's proposal .
>
> Oops, sorry! This will most likely be replaced with a button bar, as
> described above (and shown in the Version view). Since you've built it
> though, there may be other places where it could come in handy.
>

ok ... or be embedded inside of the more elaborate version containing
buttons et al.
who knows ? life's beautiful !
;)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Joachim Dreimann <jo...@wandisco.com>.
I'll address points made throughout the last few Emails by Olemis in
one below, in chronological order:

> PS: So far bootstrap CSS needs a patch in order to render breadcrumbs correctly

That's fine. A small, well documented patch is worth a thousand big
patches, right?

> I'll move forward and implement a components cloud (widget) so as to complete dashboard UI

Apologies if you've started with this already, but it seems like we'll
approach this issue differently. Instead of providing the <well>
</well> for Components, we'll have a button bar above the list of
tickets that allows you to select this or other options. You can see
this already on the Version view for example:
http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/version.html

I'll be able to update this for the Dashboard tomorrow.

> - Colors for reports
> - Styles for timeline events
> - Context navigation in dashboard page
> - Links to download widget contents inserted in dropdown
>  menu at widgets header

I would leave the download links out for now. We should definitely
provide them in the Custom Query and Reports interface though -
because that's where the user has a whole lot more control over the
query itself and can therefore easily generate the right information
to export.

I'm not quite sure what impacts the other points have? (Styles for
timeline events, colors for reports?)

In regards to the colors highlighting priority in the Dashboard: I
much prefer showing high importance via left-alignment in the Priority
columns of High priority items (while Medium and Low priority are
aligned right in the column). With the colors you may get in a
situation otherwise where they constantly repeat for every day, which
could result in a double rainbow :)

> Besides I also added another widget displaying a tag cloud similar to «Projects» in Joachim's proposal .

Oops, sorry! This will most likely be replaced with a button bar, as
described above (and shown in the Version view). Since you've built it
though, there may be other places where it could come in handy.

- Joe

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Mon, Feb 20, 2012 at 1:06 PM, Olemis Lang <ol...@gmail.com> wrote:
> Hi !
>
> I just wanted to let you know that I've changed download links in
> dashboard widgets a little [1]_ [2]_ . The combination of button +
> drop down menu I think it's better (and consistent with Bootstrap
> «best practices» ;) . Besides I also added another widget displaying a
> tag cloud similar to «Projects» in Joachim's proposal . At present it
> supports any ticket field, including custom fields . The example [3]_
> illustrates how it works with components , which may be considered
> similar to projects . Anyways , it's added in there to see how it will
> look like in the future once multi-project support will be added ;) .
>
> Hope you all like it !
> ... and if you don't have further updates or requests , I think
> dashboard page is ready to go !!! ... well u know ... ;)
>
> .. [1] Downloads dropdown menu for report widget in Bloodhound dashboard
>        (https://lh3.googleusercontent.com/-GRbmz1rQ3QY/T0KFTFbUEMI/AAAAAAAAAhY/wQEdQY1nev0/h120/BH_dashboard_16_bootstrap_altlinks.png)
>
> .. [2] Downloads dropdown menu for activity widget in Bloodhound dashboard
>        (https://lh6.googleusercontent.com/-q2Qvy5SIYDU/T0KFaCmnBII/AAAAAAAAAhg/_FxxhM4WwCY/h120/BH_dashboard_17_bootstrap_altlinks.png)
>
> .. [3] Components tag cloud
>        (https://lh3.googleusercontent.com/-2eXm4m7gjWE/T0KF43EdmtI/AAAAAAAAAho/DdrpHn0BNmc/h120/BH_dashboard_18_bootstrap.png)
>

hmm ... small images ... I apologize. Please take a look at this post
[4]_ @ Google+ . It should include links to photos , etc, etc ... the
social stuff we all know ;)

.. [4] Components tag cloud + download dropdown button .
        (https://plus.google.com/118444449354330048631/posts/8J4Bk5XMqKL)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

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

I just wanted to let you know that I've changed download links in
dashboard widgets a little [1]_ [2]_ . The combination of button +
drop down menu I think it's better (and consistent with Bootstrap
«best practices» ;) . Besides I also added another widget displaying a
tag cloud similar to «Projects» in Joachim's proposal . At present it
supports any ticket field, including custom fields . The example [3]_
illustrates how it works with components , which may be considered
similar to projects . Anyways , it's added in there to see how it will
look like in the future once multi-project support will be added ;) .

Hope you all like it !
... and if you don't have further updates or requests , I think
dashboard page is ready to go !!! ... well u know ... ;)

.. [1] Downloads dropdown menu for report widget in Bloodhound dashboard
        (https://lh3.googleusercontent.com/-GRbmz1rQ3QY/T0KFTFbUEMI/AAAAAAAAAhY/wQEdQY1nev0/h120/BH_dashboard_16_bootstrap_altlinks.png)

.. [2] Downloads dropdown menu for activity widget in Bloodhound dashboard
        (https://lh6.googleusercontent.com/-q2Qvy5SIYDU/T0KFaCmnBII/AAAAAAAAAhg/_FxxhM4WwCY/h120/BH_dashboard_17_bootstrap_altlinks.png)

.. [3] Components tag cloud
        (https://lh3.googleusercontent.com/-2eXm4m7gjWE/T0KF43EdmtI/AAAAAAAAAho/DdrpHn0BNmc/h120/BH_dashboard_18_bootstrap.png)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
The most elaborate versions of the dashboard [14]_ [15]_ incorporate
the following features :

- Colors for reports
- Styles for timeline events
- Context navigation in dashboard page
- Links to download widget contents inserted in dropdown
  menu at widgets header

I look forward to your comments and suggestions . Hope you all like it !

.. [14] Download links for reports / queries
          (https://lh5.googleusercontent.com/-07icBbeDut0/Tz6aK9LfRlI/AAAAAAAAAgw/NUo9sXOsf6A/w441-h200-k/BH_dashboard_14_bootstrap_altlinks.png)

.. [15] Download links for timeline
          (https://lh3.googleusercontent.com/-2Mg3eUqfWoQ/Tz6anTxrB6I/AAAAAAAAAg4/K44AXr75OhY/w293-h133-n-k/BH_dashboard_15_bootstrap_altlinks.png)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Fri, Feb 17, 2012 at 9:46 AM, Olemis Lang <ol...@gmail.com> wrote:
> On Tue, Feb 14, 2012 at 9:37 AM, Joachim Dreimann
> <jo...@wandisco.com> wrote:
>> On 9 February 2012 21:06, Olemis Lang <ol...@gmail.com> wrote:
>>
> [...]
>>>
>>>   If this is not ok for you then my suggestion is to add `active` class to the
>>>   corresponding (active) mainnav item in the dropdown menu . (i.e. highlighted
>>>   in blue background color)
>>
>> Sounds liks that's more along the lines of what I described above.
>>
>
> Done !
> Please take a look at these screenshots [10]_ [11]_
>

I forgot to mention something important . I managed to render the
dashboard as similar to Joachim's proposal as possible [12]_ . This
means that so far the following widgets have been implemented :

- Timeline / Activity widget
- SQL Report widget
- Custom query widget (<= this is the one you'll see in screenshot [12]_ ) .
  In order to make it work like you see in the picture a patch [13]_ (Trac)
  is needed .

Considering the fact that multi-(product | project) support is not
ready yet I'll move forward and implement a components cloud (widget)
so as to complete dashboard UI

> .. [10] Highlighting Apps tab in mainnav
>         (https://lh5.googleusercontent.com/-FurmZD8GfjM/Tz5iY0XzitI/AAAAAAAAAfQ/7O1qOobonjA/w336-h152-n-k/BH_theme_26_bootstrap_apps_active.png)
>
> .. [11] Highlighting active mainnav item inside dropdown menu
>         (https://lh3.googleusercontent.com/-dz5i81cezZ8/Tz5iu2WJjMI/AAAAAAAAAfY/lJ21AZJqX_s/w405-h185-n-k/BH_theme_27_bootstrap_apps_active.png)
>

.. [12] Dashboard implemented
          (https://lh4.googleusercontent.com/-_Ut5DI03Fz0/Tz5qdOdNZOI/AAAAAAAAAfo/yQcEBXT_jTM/w406-h185-n-k/BH_dashboard_11_bootstrap.png)

.. [13] Patch to support groups for datetime fields in custom queries
          (https://bitbucket.org/olemis/trac-mq/src/5038c1db0ccb/bh/dashboard/query_groups_datetime.diff)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Olemis Lang <ol...@gmail.com>.
On Tue, Feb 14, 2012 at 9:37 AM, Joachim Dreimann
<jo...@wandisco.com> wrote:
> On 9 February 2012 21:06, Olemis Lang <ol...@gmail.com> wrote:
>
[...]
>>
>>   If this is not ok for you then my suggestion is to add `active` class to the
>>   corresponding (active) mainnav item in the dropdown menu . (i.e. highlighted
>>   in blue background color)
>
> Sounds liks that's more along the lines of what I described above.
>

Done !
Please take a look at these screenshots [10]_ [11]_

.. [10] Highlighting Apps tab in mainnav
         (https://lh5.googleusercontent.com/-FurmZD8GfjM/Tz5iY0XzitI/AAAAAAAAAfQ/7O1qOobonjA/w336-h152-n-k/BH_theme_26_bootstrap_apps_active.png)

.. [11] Highlighting active mainnav item inside dropdown menu
         (https://lh3.googleusercontent.com/-dz5i81cezZ8/Tz5iu2WJjMI/AAAAAAAAAfY/lJ21AZJqX_s/w405-h185-n-k/BH_theme_27_bootstrap_apps_active.png)

-- 
Regards,

Olemis.

Re: Initial version of Bloodhound WAS: Dashboard design, Wiki (incl HTML/CSS)

Posted by Joachim Dreimann <jo...@wandisco.com>.
As I said on Google Plus, this is a very good starting point.

On 9 February 2012 21:06, Olemis Lang <ol...@gmail.com> wrote:
> Yeehaw !
>
> There is a new version of the theme based on Bootstrap , very similar
> to what Joachim sketched before ( while True : print "Thanks Joachim
> ... Keep up the good work" ) . Please take a look at it here [6]_ , as
> you can see a bit more of CSS-fu still needed ;)
>
> Important Notes (top-down):
>
> - `Preferences` label rather than `Settings` . Trac-core modification required.
> - `View More` link under `Apps` dropdown menu is useless => removed
> - Only `wiki`, `tickets` and `browser` main nav items are visible in tabs area
>   [1]_ .

Noted. I've updated the html mock up [1] too where necessary. I think
we should use the terminology consistently though as Tickets, Wiki and
Source (ie drop 'View' from 'View Tickets').

> - `Browse source` item is not visible in there as there's no repository
>   configured in that environment.

I believe it should still show when there is no repository. The page
will then display a message of how to set up the link to the
repository, or hide the tab and explain how to add it later.

> - Reports look empty due to the fact that it's a brand new Trac=0.13
>   environment (tickets number = 0) . [4]
> - Pay attention to duplicated search box [5]_

Redesign of the search results page is almost ready. Essentially the
search box should be removed from it and the checkboxes rearranged,
more good stuff in v2 + onwards

> - IMO what mainnav items are always visible should be set in trac.ini . So
>   default configuration will the one shown in screenshots , but people can
>   configure and make their own decisions

I'm happy for it to be represented there. Options to change this via
the interface may follow in later versions.

> - Nonetheless, if some other main nav item (e.g. `Admin`) is active it is also
>   added in there [2]_ as I thought it was useful to be aware of that fact.

I believe that when something that is in the Apps dropdown is selected
(ie Admin in your example), Apps should be highlighted. The Admin tab
shouldn't suddenly appear next to the others (which would set the
expectation that it can be found there) just to disappear again once
something else is clicked (causing confusion).

The question whether 'Admin' should be a tab on its own is a separate
one, it's just an example above. What I described should be true for
all Apps in the main navigation - they should stay where they are
unless intentionally moved.

>   If this is not ok for you then my suggestion is to add `active` class to the
>   corresponding (active) mainnav item in the dropdown menu . (i.e. highlighted
>   in blue background color)

Sounds liks that's more along the lines of what I described above.

> - TODO: Styles for notices, warnings and messages are not available in Joachim
>   HTML , therefore I didn't know how to add something like that . This how
>   it looks at present [3]_ .

Other than the type you've shown in your screenshot, what other types
of notices / warnings / messages would appear?

> - `Search anything ...` hint inside search box is not displayed in Firefox
>   but it shows up in Chrome & Opera [7]_ ... :-/

Works correctly in Firefox 10 on Mac OS X, can try other O/S if you need.

Two changes I've made since the last Email:
1. Updated the breadcrumb to now be in the style of Bootstrap
2. Added Help back to the metanav.

- Joe

[1] http://dl.dropbox.com/u/59840506/Bloodhound/bh-html/dashboard.html