another theme in the works

[Jacek Sawoszczuk]

I don't know if this is still an issue but i've put together a theme and
would like to know if you can find some use for it. Either way I will be
finishing it for my own use but will be happy to contribute.

Obviously not everything has been styled yet. It still needs some
polishing and testing in browsers other than FF but other than that, it
is more or less in a shape that I wanted it to be.
It is simple, light, elegant and flexible theme. The only images used
are some monochromatic icons so it would be easy to create color
variations of it.

You can see it in action here:
http://studioavatar.pl/dev/fs/
(login: admin, pass: password)

For a quick tour:

overview of the projects:
http://studioavatar.pl/dev/fs/index.php?do=toplevel&project=0
progressbars without images for ease of restyling (i couldnt as of yet
use them in tasklist)

tasklist for all the projects:
http://studioavatar.pl/dev/fs/index.php?project=0&do=index
every menu in this theme should be aware of currently active page and
mark it accordingly

sample task with comments and attachments:
http://studioavatar.pl/dev/fs/index.php?do=details&task_id=6

admin toolbox:
http://studioavatar.pl/dev/fs/index.php?do=admin&area=prefs

[Maciej Jaros]

Jacek Sawoszczuk (2011-12-22 00:12):

> I don't know if this is still an issue but i've put together a theme
> and would like to know if you can find some use for it. Either way I
> will be finishing it for my own use but will be happy to contribute.
>
> Obviously not everything has been styled yet. It still needs some
> polishing and testing in browsers other than FF but other than that,
> it is more or less in a shape that I wanted it to be.
> It is simple, light, elegant and flexible theme. The only images used
> are some monochromatic icons so it would be easy to create color
> variations of it.
>

I think you should either change colours of labels in the header or
change the background. You could use input placeholder for username and
password, but label for the remember checkbox would still need some
distinctive colour. Or you can use jQuery.ui dialog for login to cleanup
some mess in the header.

In "Overview" you should supply static height to boxes so they will
float nicely (280px should be enough).

Also you are missing some icons: +/- for advanced searches and Percent
Complete (but you've mentioned that).

Other then that - looks nice and clean. I would probably change top
black to something else thou.

[Jacek Sawoszczuk]

Forms are one thing that I haven't touched on yet but will probably do
them today. I would very much like to use jQuery but there is already
prototype/scriptaculous and replacing it would probably require
replacing lots of other small scripts.

I was also thinking about introducing some additional, dominant color to
the layout.

[Marcus Gilroy-Ware]

It's excellent! Really like the direction you are headed in.

> --
> You received this message because you are subscribed to the Google Groups "flyspray" group.
> To post to this group, send email to flys...@googlegroups.com
> To unsubscribe from this group, send email to flyspray-u...@googlegroups.com.
> If you only wish to be informed about new flyspray releases, visit http://www.flyspray.org/download and subscribe to the flyspray-announce list.
> For more options, visit this group at http://groups.google.com/group/flyspray?hl=en

[Sean Dubois]

Its looks really sharp Jacek! I think we should adopt this (with a
little more work) as our default theme. We can still provide Bluey and
those other themes floating out in the wild in the default install
too?

> > If you only wish to be informed about new flyspray releases, visithttp://www.flyspray.org/downloadand subscribe to the flyspray-announce list.

[Jacek Sawoszczuk]

I've updated the theme on my test installation (studioavatar.pl/dev/fs
admin password)

Things addressed this time:
- loginbox
- some form styling
- fixed missing images
- floating problem (as Maciej pointed out)
- progressbars can now adapt to available space (compare: overview
and task details)
- progressbars on tasklist (a little hack here)
- styled error/success messages
- lots and lots of minor tweaks
- did some testing on latest stable linux versions of Opera,
Firefox and Chrome

Next on my list is this color thing - where and how to add it, i haven't
decided on that yet.
Also, let me know if you want something specific to be done with this.

[testify4]

> Next on my list is this color thing - where and how to add it, i haven't
> decided on that yet.
> Also, let me know if you want something specific to be done with this.

Your theme looks very, very interesting. Recently when using Flyspray
I realized
that placement of task buttons could be much better. This is my little
proposal
for task viewing and editing (pre-formatted text):

Task viewing:

+--------------------------------------------------------------------+
| ______ _______ |
| | Edit | | Close | |
+--------------------------------------------------------------------+
| Task summary |
+-----------------------+--------------------------------------------+
| | |
| | Details |
| | |

Task adding/editing:

+--------------------------------------------------------------------+
| ______ |
| | Save | |
+--------------------------------------------------------------------+
| Task summary |
+-----------------------+--------------------------------------------+
| | |
| | Details |
| | |


As you can see, in the top-right corner of the task box are buttons
(actions)

associated with a task. When editing, task box becomes HTML form which
is

submitted by clicking "Save" button. And I think that "Save" button is

a great opportunity to use accent color which reminds user of saving
task.

Thanks for you work on Flyspray. I hope this will become the default
theme.

[Florian Schmitz]

> a great opportunity to use accent color which reminds user of saving
> task.

I would like something like Gmail does, see attachment.

[JacekS]

Here's an update on the theme, off the top of my head so I might have
omitted something:

- added a dominant color - green by default but it's easy to
customize this since i used SASS, there's also a blue version
available in my demo installation
- reworked most of the templates to replace tables with floats/lists
where it was feasible
- Save search functionalidy is now hidden by default in Advancd
Search Form
- all templates should now have more or less similar structure - no
more <fieldset> as a main container
- fixed styling on task closing popup form
- styled forms in general
- styled My Searches

Known bugs:
- weird bug with advanced search (+) icon disappearing sometimes, as
of yet i have no idea what's going on here
- too little horizontal padding on tabs in admin toolbox - text gets
crowded on some other than english translations

TODO soon:
- deal with the logo section
- restyle popup calendar to fit it in with the rest of the theme
- deal with IE bugs
- set up a github repo

TODO later:
- create more color variations (one could for example use different
color for different project)
- create more compact layout version with less white space, smaller
tabs and so on

As usual, you can see it in action here:
http://studioavatar.pl/dev/fs/
admin password

You can also download the theme here:
http://studioavatar.pl/dev/cleanfs_green_min.zip (91 KB) - minimal
version - includes only the files used by flyspray
http://studioavatar.pl/dev/cleanfs_green_dev.zip (2.1 MB) - dev
version - includes scss style and full icon packs - useful for
changing theme colors

If anyone wants to modify the theme, there's a few things you may want
to know.
As I mentioned earlier, I used SASS (http://sass-lang.com/) to develop
this theme and most color decisions are functioning as variables.
This, in theory, should allow for a quick theme rebranding if needed.
I also used free icon set from some random dude (somerandomdude.com/
work/iconic/). It is a pretty large set and comes in lots of colors
out of the box so to recolor the theme, it is not necessary to modify
icon files.
I used blueprint's (blueprintcss.org) reset.css and typography.css as
a base.

[JacekS]

That's an interesting idea and i have thought about implementing that.
As for now i've opted however to go with Floele's suggestion (FS#937 -
http://bugs.flyspray.org/task/937?getfile=102) to group all task
related actions in a sidebar. Taking out Edit and Close actions out of
sidebar would leave it having just one or two links there. I'm not
saying it's undesirable, just something to consider.

[JacekS]

I do like how google handled those buttons in their new interfaces (not only gmail but also reader, groups and probably more). They identified the most important actions you may want to do with an app (search and compose email) and created a highly visible buttons for them. I tried to think of analogous actions in flyspray and it would probably be adding a new task. Since Flyspray has no static sidebar, the only way to achieve this would be by removing Add new task tab and creating a standalone button left of project selector. This however would not be very much different of what we have now.
I am open to suggestions on how to tackle this and i'll be trying out some ideas.

[Florian Schmitz]

Hi,

I very much like what I see there :)
I need to give more detailed feedback at the weekend maybe, so far
just a few issues:
- The text on progress bar should be white, maybe use make the
progress bar colour a bit darker.
- The fieldsets can be removed from the management areas (like in
"users and groups"), the current "boxing" is already sufficient, there
is no need to create an additional group box around the contained
elements.
- The login box is a bit difficult. The links "Register" and "Lost
password" can not be recognised as links, they look the same as the
labels. Maybe it would be good to remove the labels and use input
hints instead. Then "Remember me" could go to the same row as the
input boxes, and the two links could be right aligned below, might
look better this way.

Best regards,
Flo

[Maciej Jaros]

Florian Schmitz (2011-12-29 17:13):

The attribute "placeholder" would work for most recent browsers. There
are also some JS scriptsto make it work for others. Adding "title" would
make it work in any case.

Cheers,
Nux.

[KuetFun...@sungard.com]

The buttons for "Overview", "Tasklist" etc wrapped underneath the row when there is not enough room.

 

It should probably wrapped around a new row?

 

Cheers,

Kuet-Fung

--

You received this message because you are subscribed to the Google Groups "flyspray" group.

To post to this group, send email to flys...@googlegroups.com To unsubscribe from this group, send email to flyspray-u...@googlegroups.com.

If you only wish to be informed about new flyspray releases, visit http://www.flyspray.org/download and subscribe to the flyspray-announce list.

[testify4]

Thank you for consideration to use of buttons. My general

assumptions was:

* In terms of user experience, clicking links is just like

browsing or viewing.

* Clicking buttons feels more like taking actions, changing

state of the system or resource. So "Edit this task" or

"Close task" seems like good candidates for buttons.

* Big buttons are good targets for mouse or touch. Because

of this our UI will be more efficient.

* If there are links left, this could be refactored.


I believe these reasons are mostly valid, but I'm not sure

of course. To provide some context, tomorrow I will post to

this group some graphical mockups and maybe some idea

will emerge.



***



I have done some tests on ClearFS with Flyspray 0.9.9.6 and

0.9.9.6 dev. Unfortunately, things looks broken in some

places and I believe the reason was changes that you made in

templates while we have access to theme files only. I just

hope I will help with testing.



***



I'm really excited about Flyspray future. Now I would like

to share with you some mockups that I found on the Web.

These mockups are quite similar to CleanFS, and I think
there are some useful ideas too.



--------

Note: these mockups are design proposals for Bugzilla

future releases. Unfortunetly, Bugzilla have many drawbacks

like immutable description/comments etc. Besides, Bugzilla

is going to be rewritten in Python (now it's Perl). This

rewrite will probably take at least 2-3 years. I recently

reviewed for my own needs 11 open-source issue tracking

systems, and Flyspray is my best choice, mostly because

of reasonable choice of features and good (new!) design. :)

--------



* http://people.mozilla.com/~faaborg/files/daf/bugzillaTheme%5Bbracket%5D.png

* https://bug607829.bugzilla.mozilla.org/attachment.cgi?id=515285

* https://wiki.mozilla.org/images/7/79/JWilde-BugzillaPretty-Bug-27-2-2011.png

[testify4]

OK, so here are my mockups (please see attachments). This is really experimental. But now we can see it and discuss this further: what we like, what we don't like; maybe we don't like it at all; which direction flyspray should take.

Mockups marked as "a" shows task viewing, while "b" means task editing.

Thanks for giving you time for this.

[Bráulio Silva]

Wow...

Great work guys!

Keep it up!

--

[Jacek Sawoszczuk]

You sure got a point there, i'll take a stab at those buttons first
thing in new year. I was trying to avoid doing the buttons because it
can be pretty sticky stuff if you want consistency both between browsers
and elements (a, button, input), but it seems i have no choice now.

As for testing it yourself, you will need to replace your Flyspray
templates with the ones provided. I'm not yet sure if that's the case in
later versions but that's how i'm doing it right now. It would be great
however if flyspray used theme's templates to override default ones.

I've also set up a GitHub repo here: https://github.com/Jacek-S/CleanFS
so you may find it easier getting the latest files that way.

[Florian Schmitz]

I like variant 4 most, but they all are quite good, great work :)
Maybe a combination of the header of version 1 and the task layout of
version 4 would be best, I'd prefer not to have a colour gradient as
seen in version 4.

Best regards,
Flo

[testify4]

Thank you for feedback. Taking approach you are suggesting, these are mockups in which I'm taking steps for better separation of metadata (task fields) from data (summary and details). This is in harmony with work done by Jacek on comments in CleanFS: author and date are on gray background and comment text on white.

[Florian Schmitz]

I'd either go for version 5, but add the coloured stripe and also use
a little less padding in the header, or use version 6.
We'd need to decide where to put additional buttons like "Assign to
me", a dedicated button header like in version 5 would certainly be
more flexible in this regard.

[Krisztian VASAS]

Well, i didn't really want to reply but i think this design is getting
more and more better and usable, so here are my thougts:
Version 6 is good, looks nice, but yes, the Close/Edit/Assignto buttons
should be places somewhere. For this, v5 is much better, but - as you
mentioned - the padding should be smaller. The height is too much i
think, it takes too much space from the much more usable data...

So +1 for v5 with less padding :)

IroNiQ
--
UNIX/Linux System Administrator
Member of Frugalware Developer Team

[Florian Schmitz]

To extend a little on my previous comments, some additional remarks:

- In the advanced search, the date filter input boxes should be
aligned in some kind of table.
- I really like the look of the tabs.
- The "related tasks", "notifications" and "reminders"-tab need some love.
- I think the "task dependencies" section should maybe go to the
"related tasks" tab. At the very least, when no task dependencies
exist, it shouldn't just say "This task depends upon" with no content
following, but have a more appropriate layout.
- In "overview", the links should no longer be separated with "|",
since the link text also contains "I" which is easy to confuse.
- The task pages are apparently going to be revised anyway, but in
"New task", there should no longer be the "Default Project :: New
Task" heading. The same probably applies to "Manage project" and
"Admin toolbox", since both the project and the area you are in are
clearly visible now with the coloured tabs and the large project name
header.
- The "users and groups" section also needs a little love. The icon
for "account enabled" in the "edit group" section is broken.
- I'm not too fond of underlining the form labels on mouse over. Seems
strange to me.
- The overview for a single project should probably be more extensive.
Otherwise there is very little screen space used.
- The boxes in overview need to resize to their content, otherwise it
won't fit (see "another project").

Thanks to both of you for working on the theme, I hope that we'll get
it done this time :)

[testify4]

Next iteration based on your helpful comments!
[a] - viewing + "Assign to me",
[b] - editing,
[c] - "Re-open this task",
[i] - is toolbar OK for Tasklist? (experimental).

[testify4]

JacekS wrote:
> I was trying to avoid doing the buttons because it
> can be pretty sticky stuff if you want consistency both between browsers
> and elements (a, button, input), but it seems i have no choice now.

Please stay confident that my mockups are nothing more than proposals or help to visualize some potential direction. I'm sure you will take a good decision, links works too!

Warm thanks for all your help and work. With new theme Flyspray will fly! :-)

Happy New Year!

[Florian Schmitz]

Hm, except for 8i it looks great. Not sure what is wrong with the task
list mockup, it looks a bit messy to me. I believe the style of the
task list does not blend well with the top button header. Maybe the
search field needs to be smaller and fully right aligned too.

[testify4]

Floele wrote:

> Hm, except for 8i it looks great.

Yes, version 8i was a quick hack... intended as a proof of concept. And here is another one just to show that toolbar could potentially work on different pages.

[Florian Schmitz]

Yes, that nicer. I don't like the large fonts of the tasks though, and
I also think they shouldn't be green. The list should be condensed a
little too. But the "toolbar" certainly works fine.

[Jacek Sawoszczuk]

Those are great mockups guys, tomorrow i'm going back to work on this
but in the meantime i was wandering if we could move the theme bugs and
wishes to the proper BTS because it's getting hard to keep track of them
here.

[testify4]

Jacek Sawoszczuk wrote:

> […] i was wandering if we could move the theme bugs and wishes to the proper BTS […]

http://bugs.flyspray.org/ or https://github.com/Jacek-S/CleanFS/issues?

By the way, I was thinking about the change of dark header color to something lighter. I'm afraid that such big dark header makes the whole page very heavy and it's not in line with theme light design.

And the second issue, would you like to dispense with white content boxes and light gray background? Just a suggestion. I'm not sure this desing is really needed because every Flyspray page have one core content unit. So maybe such boxes belongs more only to additional (external) elements such as top message/notification. I could make yet another mockup but I'm not sure how we will resolve this particular issue. YouTube seems to make it right without use of boxes and the whole page looks cleaner without additional boxes/frames

[Jacek Sawoszczuk]

As for the issue tracker, either option works for me, it may however
make more sense to use flyspray.

I am open to color suggestions and we should definitely put it on the
list, but i'd rather hoped that we could first finalize the main
features, do the basic shape of the theme and leave the color tweaking
for later. That's one reason for moving that kind of issues to flyspray
is a good idea - we could set our priorities.

I was going to ask you about those boxes when i saw their absence on
your mockups. I'll do some testing tomorrow and we'll see how it works.

[testify4]

My design repository is now live: https://github.com/testify4/flyspray-design I'll post all my proposals there.

I'm not sure bugs.flyspray.org is good enough because I just tested it and found access restrictions: can't close tasks or and add related tasks. Can't even use DokuWiki on preview. That's strange.

[Jacek Sawoszczuk]

I've updated the demo installation at studioavatar.pl/dev/fs (admin/
password)
You can see the changes listed on github (http://github.com/Jacek-S/
CleanFS/commits/master) but the most important change is probably the
implementation of actionbar on some pages (task details, task edit,
new task).
I'm not sure i like how it turned out but please tell me what you
think about it.

Be sure to report any bugs on github page (http://github.com/Jacek-S/
CleanFS/issues).

[Přemek Brada]

Hi all,

I fairly like the design, and even more the fact that Flyspray is
getting some new blood :)

My few suggestions:
- use a zebra on lists (task list, history, ...) and in task detail
left pane to improve orientation -- that's my top problem with the
design
- in task detail, maybe color the action buttons (assign, edit, close)
green like the Save details, so they are more prominent; but it might
be too distractive, so maybe green on hover only
- BTW, I have always missed a "Cancel" button on the Edit page...
- design the form elements (dropdowns, checkboxes, ... and also the
progress bars) so that they look more "boxy" (sharp corners) -- maybe
it's just because of my Gnome theme but they look too round, doesn't
fit well with the kind of "new gmail" look of the screens

Keep the good work going!

Premek

> --
> You received this message because you are subscribed to the Google Groups "flyspray" group.

> To post to this group, send email to flys...@googlegroups.com.
> To unsubscribe from this group, send email to flyspray+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/flyspray?hl=en.
>

--
Premek Brada (Ing et MSc, PhD)
  Head of Software Engineering and Information Systems Section
  Department of Computer Science and Engineering
  University of West Bohemia in Pilsen, CZ
  << brada at kiv.zcu.cz | www.kiv.zcu.cz/~brada/ | +420-377-63-2435 >>

[testify4]

Firstly, thank you for a great work! I was testing and thinking about what you implemented. Here are my observations:

• In overall, this looks really good. Well, there are many ways to design such UI. At least I'm quite sure that taking actions on tasks is more convenient now than it is with the current Flyspray theme.
  

• Maybe the colors (light grays) makes pages to much airy and soft. Stronger colors could help.

• I feel that “Edit this task” should be first from the left, before “Assign to me” button.

• “Save details” button should be less bright because it draws to much attention at the start of a task editing.

• Some buttons can have a subtle bottom line colored so they are more prominent or different than others (see the mockup in my GitHub repository as an example: “Edit task” have a blue bottom line).

• (“Edit this task” and “Save details” can be seen as mode switch. That is, “Edit”, when clicked, could become “Save” while an issue can be modified. Clicking “Save” makes it “Edit” and changes an issue to passive (viewing) state. The whole point is that both “Edit” and “Save” must be in the same place: right or left. Unfortunately, this is not the case when we have “Close task” on the right. Besides, I think that buttons which start some process should be on the left while these that end process should be on the right. I doubt that placing “Save” button in bottom-right corner could give benefit.)

• Task fields (attributes) needs some grouping and hierarchy. Maybe colored “Status” and “Percent Complete” could be on top as general status/progress indicator.

• Task fields should be pushed to the left as much as possible (as some kind of sidebar).

• Tasklist could benefit from horizontal lines in task table (as Přemek Brada pointed out).

• I'm not sure about this one: what licence you choose and if it will be compatible with icons license.

[Jacek Sawoszczuk]

Sorry for the delay guys, here's an update on the theme:
 - fixed message boxes so that they won't move the rest of the layout
 - fixed main menu tabs so that they now behave better with less horizontal space
 - added zebra styling to some tables and lists (tasklist, task details fields, history, reminders and related tasks)
 - styled list of users who voted on a given task (task details page)
 - created groupings of task detail fields (both task details and edit pages)
 - tweaked actionbar buttons (task details page)
 - fixed missing icons on my demo installation
 - restyled loginbox

This last change - loginbox - is a little sticky for now. First of all we'd have to modify the translations files to add support for a new button (I used a default 'login' for now). Also I have no way reliably setting (and unsetting) the 'active' class of login button without touching the js files. Right now I used inline js to add class but it is not being removed properly when user clicks away from loginbox popup.

As usual, you can check it out on my testing FS installation:
http://studioavatar.pl/dev/fs (admin password)
and check the details or get the code on GitHub:
http://github.com/Jacek-S/CleanFS/issues



As for testify4's comments:

• Maybe the colors (light grays) makes pages to much airy and soft. Stronger colors could help.

My main idea was to create a light theme so that it may be easily rebranded. However, if you have an idea where and how to introduce more color, I would be happy to consider it. As for now, I made the buttons more visible by using darker border. I haven't implemented the underline you used on mockup because I think it would create yet another button style (we already have default and positive-green) without a reason obvious to the user.

• Task fields should be pushed to the left as much as possible (as some kind of sidebar).

I'm not sure I understand what is your aim here but I think that task fields are already on a narrow, left-aligned strip and I don't see how we can push it more to the left.

• I'm not sure about this one: what licence you choose and if it will be compatible with icons license.

If my understanding of this issue is correct, there is no problem with using the icons (which use CC by-sa) in a theme and releasing the whole thing licensed as either LGPL, just as Flyspray itself is, or MIT which AFAIK is compatible with GPL. Either way I have no strong opinions on the matter and I'll do whatever helps Flyspray community better.

[Přemek Brada]

Hi all,

looks good to me, good work Jacek!

Premek

[Xavier O'Neill]

Checked out CleanFS (https://github.com/Jacek-S/?​​CleanFS) and applied it to FreeBSD port version 0.9.9.6. However, certain links revert back to Bluey.

I noticed CleanFS applied recently to http://bugs.flyspray.org.  Assuming I'm using old code and checked out CleanFS from the wrong place, where should I go?

Very nice work! I'm excited that flysrpay development resumed. I find other tools in this category frustrating to work with. Key nformation obscured from view, buried deep, too many drill-downs that cost page loads.

Thanks!