Rails Admin should be prettier

[gunn]

Update: See the new pretty rails_admin live here: http://rails-admin.heroku.com See the code here: https://github.com/gunn/rails_admin/tree/activo

...

I've put up a repo with some mockups at: https://github.com/gunn/rails_admin-prototypes/

The idea would be to base this on the current jquery branch, and modify the markup to be consistent with what the web-app-theme project provides. This would make us compatible with a few nice css / js themes in addition to the one shown in my mockups.

What do people think?

[hurrycane]

Nice! I was working some time ago on a new Rails Admin Design. Since I've stopped contributing I will be very happy to help you get the new prototypes into place, they look very nice!

[kaapa]

Nice one!

The jQuery branch has one known bug (list views next/previous column set links) which I'll attempt to fix tonight. I'm hoping a merge to master could occur as soon as Sferik has reviewed it if nothing else comes up.

Some initial comments about the mockups:

• Flash messages
  • The "Error inline" example seems bit too packed for me and the gained vertical space probably isn't that big of a deal.
  • I'd prefer to use the 3rd example (Error above) as it isn't tied to any specific page component (As in future or a customized RailsAdmin there might be multiple components per page).
• The darkened buttons don't have enough contrast to be easily readable. I'd rather use the light buttons.

I'll try form my thoughts about the navigation stuff - I find the tabs navigation above the tables somewhat confusing, but I'll process my thoughts and post about it soon.

[ccabot]

Beauty is in the eye of the beholder but if these changes make it easier for users to change the look and feel then I'm +1. If they're just changing one hard-coded style for another then I don't see the point.

[kaapa]

Ccabbot, that is true, but I think the best part of this idea is shifting the tedious work of maintaining browser markup/css compatibility to a 3rd party.

Also I believe that integrating web-app-theme should provide a nice markup framework that is more consistent than our current one.

One can check out some different themes here. Although those examples are nearly just color-schemes, at least proof of concept on customizability is provided.

PS. The thread heading is a bit provocative, but hopefully that will gain attention for the integration proposition... ;)

[ccabot]

I agree that using common css/style plumbing is a good idea.

[drewda]

Very nice! I'm glad to also see the ability to select and delete multiple records.

[kaylarose]

I forked rails_admin awhile ago, planning to port the default web-app-theme to rails_admin. This is a much better idea to port rails_admin to use web-app-theme markup so any future themes are compatible.

I would be very willing to contribute to this effort!

[aroop]

+1 for this enhancement

[kieranklaassen]

nice one!

[marksands]

Is it worth exploring multiple themes, sort of how padrino does their admin dashboard? I would love that feature!

[gunn]

All right, everyone seems to be in favour of this. To clarify: the idea is to clean up our markup to be consistent with what web-app-theme produces. This should make us compatible with the current web-app-theme themes straight away, and will make it easier for people to create new custom rails_admin themes.

As a default to ship with rails_admin, I think activo (version 2) will do very well.

I've started on converting the views. At the moment the index view looks fantastic, the edit view looks okay, and everything else looks pretty terrible.

I've put a demo app up on heroku so you can SEE IT LIVE NOW!!:

• http://rails-admin.heroku.com/admin/players?set=1&page=3
• http://rails-admin.heroku.com/admin/users
• http://rails-admin.heroku.com/admin/players/477601085/edit

At the moment there is no authorisation or any kind of protection. I'll change that if I have to but in the mean time please don't trash everything.

[mankind]

+3 for this enhancement. When do you think you would be through with this.

[hurrycane]

@gunn Where can we get the code from? (is there a branch of rails_admin etc). Can you make a short guide (or just point some links, even a git diff would be perfect) on what changes are needed to be done in order to port 100% the rails_admin markup to the web-app-theme one?

[kieranklaassen]

yes please, a little how to so that we can contribute or help you. cheers

[kaylarose]

@gunn That look great! I would also like to third @hurrycane and @kieranklaassen's requests for a small contribution guide

[sferik]

He's doing the development in the activo branch at https://github.com/gunn/rails_admin/tree/activo

This change will be hard to merge since many of the views are being completely rewritten in Haml, so I would like to see it get merged into master as soon as possible! :)

[hurrycane]

@sferik Thanks! I have some other ideas to add to the current theme (that is going to be default).

[gunn]

Awesome. Glad everyone's so keen to help. I had converted all the views to haml by script, but as @sferik pointed out, this makes merging very tough. The plan now is I'll revert the ones I haven't touched to erb, and only convert to haml as I go.

I hope to do that this (NZ) evening, and put up something of a contributor guide in the readme.

I'll let you all know when I do.

[gunn]

Alright @hurrycane, @kieranklaassen, @kaylarose, I've got something of a contributors guide up at https://github.com/gunn/rails_admin/tree/activo

It might currently be lacking in specific details about how things should be changed. Please tell me what you need to know.

[bbenezech]

I like Activo, but I think the current theme is clean, functional and easy to the eye. Since Activo's integration is nowhere near ready and optional, shouldn't we pospone it for, say, milestone 0.2 ? It will leave time for people interested in it to see where they want to go (replace default theme, make default theme compatible and switchable, etc.)

[sferik]

@gunn How's this coming?

@bbenezech I'm happy to push this to the 0.1 for the reasons you stated. Let's go there before we jump to 0.2.

[gunn]

@sferik, all,

Great progress! All of the major views are converted and looking pretty nice. All the specs are passing save one. You can see the code here: https://github.com/gunn/rails_admin/tree/activo To try in your own project, run bundle with this in your Gemfile:

gem "rails_admin", :git => "git://github.com/gunn/rails_admin.git", :branch => "activo"

Or have a look at the hosted demo: http://rails-admin.heroku.com/admin , http://rails-admin.heroku.com/admin/leagues Keep an eye out for the new flash notices.

The project needs:

• That one spec to pass
• Some of the buttons and links to be connected properly
• Some css tweaks e.g. inactive link colour, changes for horizontal flexibility
• Ajax links to work: https://github.com/gunn/rails_admin/issues/1
• To be merged with the main repo

[sferik]

Great progress! Maybe this can go back in the 0.0 milestone after all?

[kaapa]

I think 0.0 is completely possible.

[gunn]

Alright! 0.0 looking extremely bloody likely I think.

I have merged with the main repo. All the buttons / links from last time are connected properly (think multi-delete etc.). Everything, the history slider included, stretches horizontally. All the ajax functionality is working again!

I've updated the live demo again, See it here: http://rails-admin.heroku.com

What's needed now:

• Two specs to pass (the functionality is fine, it may be a webrat issue)
• The history slider bars to show
• Some css tweaks e.g. inactive link colour
• Us to think a little about integrating breadcrumbs or their replacement
• Someone to decide how or if models should be displayed in dropdown groups now that the navigation is vertical

All pretty minor issues I think.

[kaylarose]

@gunn This is fantastic. Thanks for the hard work.

[sferik]

Overall this looks amazing! I did find a few issues:

• The Activo logo in the upper left should be a (new) RailsAdmin logo. Perhaps @dmfrancisco could design one for us?
• Clicking the logo should take you back to the dashboard. Once this is implemented "Dashboard" should be removed from the Navigation links in the right column, which should only contain model names.
• Is there a favicon.ico we can use? The current favicon one is blank. Again, perhaps @dmfrancisco could volunteer here?
• On the list view, the column headers are aligned left but their content is centered. Their alignment should be the same for both (centered).
• On the list view, there should be an indication of which column is the active sort and whether it is ascending or descending. For an example of this, see: http://merb-admin.heroku.com/division?sort=created_at
• On the list view, the "Select All" checkbox at the top doesn't work.
• On the list view, the search box should be near the top of the box, not at the bottom.
• On the list view, hover text for the Edit and Delete buttons doesn't work for search results.
• On the list view, I liked the idea of having a preview of the model's history in the right column, as you had mocked up (#5). Any particular reason why you decided not to implement this?
• The iconography for the Delete action is inconsistent. On the list view, delete is represented by an X. On the edit view, it's represented by a minus sign and the X is for cancel. After you press the delete button, the delete confirmation page shows the minus sign icon on the confirm button and the cancel button has no icon. This is very confusing. IMHO, we should standardize on using either the X or the minus (I don't care which one) for delete everywhere. Cancel should never have an icon.
• On the edit view, the delete button doesn't work.
• On the edit view, the multiselect search box uses a different magnifying glass icon from the search icon on the list page. They should both use the list view icon. The search box should also have rounded corners, just like the one on the list view.
• On the dashboard, the Last used, Records, and Modify columns don't seem to be working.

As for the breadcrumbs, I think we can remove the Show and Edit links from the list view. There is currently no Show view, so we can also remove that from the edit and new views also. I don't think we need any additional breadcrumbs.

What do you think about changing the list view so you can click on any row to jump to the edit view for that record? This is how it worked on MerbAdmin and I liked that feature a lot. The click target for the edit button is too small (and it's too close to the delete button). This obviously has implications for [...] but I would like to find a way to eliminate [...] since it is a bit of a design hack.

@dmfrancisco I'd be interested to get your feedback as the designer of the Activo theme. Do you have any other suggestions?

[sferik]

@gunn If it would make it easier for you, I can create tickets for the above as GitHub Issues in your branch. I could also help work on resolving some of these.

You've done a great job on this branch! Please don't let my nitpicking discourage you. :)

[dmfrancisco]

Amazing work! The hosted demo looks very good! I have some suggestions, but I'm experimenting with the new branch first. I was having a missing template error, because haml is not on the dependencies list. Thanks for the hard work :)

[gunn]

Hey everyone, a quick update:

@sferik's written created a good list of issues to work through at https://github.com/gunn/rails_admin/issues @hurrycane, @kieranklaassen, @kaylarose: if you can still help, now's the time.

I've taken care of a few issues and updated the new demo - check out the new clickable rows: http://rails-admin.heroku.com/admin/leagues

[gunn]

Just 5 issues to be dealt with, most of them are pretty small - https://github.com/gunn/rails_admin/issues?milestone=1

[bbenezech]

Do you have an accordeon for nested menus? Smtg similar to http://demo.ponjoh.com/Simpla-Admin/index.html?#

[gunn]

@bbenezech great idea! At the moment submenu items don't get any special visual treatment. An accordion system looks like a pretty good fit here. Is that something you'd be able to help help with?

[bbenezech]

Sorry, no time at the moment. Busy with other stuff on rails_admin (I need to stabilize filtering select before merging your branch). The only hiccup I see is the new Menu features (parent/dropdown), that require smtg like an accordeon.

[caboteria]

The new UI looks great, but based on a minute or two poking around the Heroku demo it doesn't work unless the user has javascript enabled. For example, on the model list page you can't click on an instance to go to that instance's page. This will make it difficult if not impossible to use Rails Admin in environments where JS isn't available.

[gunn]

@caboteria it certainly won't be so nice with JS disabled. However navigation should still work. you can't click on the row (because rows can't be links in html - see http://wiki.whatwg.org/wiki/FAQ#HTML_should_support_href_on_any_element.21), but you can still click on the edit icon to the right.

There are a few things we could do to make it nicer for JS-less users of course. We could put big link areas inside every TD, or we could disable the blue highlight and hand-cursor so as not to be misleading. Also the icon hover state isn't activated without JS, that could be fixed.

If you'd like to do some of these things I'll be happy to merge them in.

[caboteria]

I see, the edit link still works even though it looks disabled.

[kaylarose]

@gunn & @sferik What is the status of other contributors? I could probably write a noob guide...

[gunn]

@kaylarose no one else has contributed commits specifically for the activo branch yet. Apparently there is demand for a guide... What sort things would you put in it?

@mankind what sort of things do you need to know?

By the way, almost all of the action is at https://github.com/gunn/rails_admin/issues

[kaylarose]

@gunn Most of the info is actually already scattered throughout the README/wiki. I was just thinking about condensing it to a "quickstart" contributor guide with a few tips/tricks, etc.

[gmontard]

@gunn when do you think to subit a pull to sferik repo ?

Thank and btw great great work !!!

[gunn]

@gmontard Just a few more issues to clear up - https://github.com/gunn/rails_admin/issues?milestone=1

[gmontard]

@gunn Great :) Btw does the demo app live in a github repo to check how the code is done ?

[gunn]

@gmontard I've put it up at https://github.com/gunn/rails_admin-demo Anyone want to have a look at gunn/rails_admin#26? It's the only thing really holding us back now.

[bbenezech]

The thing really holding me back is the fonts used... It looks way too play-school for me. And some colors could be a bit softer too.

[sferik]

@bbenezech Activo 2 is a huge improvement over the current RailsAdmin design. If you'd like to propose changes after it gets merged in, feel free to do so, but let's take things one step at a time.

[soulnafein]

I prefer the new style and it's definitely an improvement.

[bbenezech]

I don't like the idea of losing aristo, which is a big part of the slick look&feel of RA for me, for buttons and calendars in particular. @gunn do you think activo is compatible with aristo?

[drewda]

Yeah, I'm looking forward to using the new look in all my projects.

@gunn still need help with the lightbox?

[gunn]

@bbenezech aristo consists of images and css rules for jquery-ui components. Activo supplies it's own version of these so they're not immediately compatible. I suppose you could make it so that you had activo styled buttons etc. inside the rest of the activo look if you felt that was more attractive.

One of the other things we've done here is to make our markup web-app-theme compatible, meaning we should be able to use the styles like http://pilu.github.com/web-app-theme/#themes/djime-cerulean or http://dmfrancisco.github.com/activo/demo/activo.html without too much effort. Perhaps an aristo based theme could be made too.