[RFC] Refactoring the layout #1723

Closed
rande opened this Issue Oct 10, 2013 · 86 comments

Projects

None yet
@rande
Member
rande commented Oct 10, 2013

Hello,

Here a test for a new organisation layout:

screen shot 2013-10-10 at 6 11 59 pm

Any comments ?

Changes:

  • main admin access on the left side (before it was on top)
  • add your change here ...
@pulzarraider
Member

👍
I like it, but It will be nice if it the position of menu will be easily configurable (top/left) and previous style of menu will be still available (to not confuse users of of already created projects).

@EmmanuelVella
Contributor

Personally I would prefer the previous version because :

  • A lot of space is lost (many menu items where in submenus)
  • We'll need to scroll if there a too many menu items
  • It will be difficult to have a custom side menu

However if this structure is finally kept, maybe it will be interesting to use a sliding panel : http://jakiestfu.github.io/Snap.js/demo/apps/default.html

@toooni
Contributor
toooni commented Oct 10, 2013

i think with the navigation on the left side and the filter on the right side, there is not much space for the list, even on bigger screens... for me, i do like as much information as possible in lists and overviews..
maybe a solution for the filter like this can be an option: http://rails-admin-tb.herokuapp.com/admin/ball

@dantleech
Contributor

I think having an option to choose which layout to use - vertical navigation or horizontal - would be great. The benefit of the vertical navigation is that you can "run out of space" horizontally. Maybe it could be as simple as specifying a twig template to use for the layout?

In the vertical list maybe we can put the filter at the top of the list and auto hide it? i.e. "Filters [ > ]" ?

@rodrigodiez

Left navigation seems to be much better when traversing the model being a common task (eg: e-commerce plattforms). It shows more clearly the admin structure to the user wich needs no extra clicks to use it. But I think this need to be configurable between top and left navigation in order to not exclude any kind of use.

How about the sidemenu of an admin? How it works with this left navigation?

@rande
Member
rande commented Oct 11, 2013

Just to add a bit more information, the layout refactoring will use bootstrap3 so this will be a major BC break as some classes are not BC between bootstrap3 and bootstrap2. Also another user starts to port some layout to bootstrap3 (#1725).

At the last CMF meetup in Zurich an user also show some nice mockup for an admin interface, maybe we can have feedback from the CMF project (@dbu, @lsmith77).

@rodrigodiez for the admin side menu, I want to merge it with the top actions and add a short description of the current edited object. It will be great if we can have a fix ribbon on the top with the main actions for the current object.

@lsmith77
Collaborator
@rande
Member
rande commented Oct 11, 2013

@lsmith77 can't remember, it was the one with the left side action menu with folded actions

@lsmith77
Collaborator

yup that is the one .. they have a working prototype now https://github.com/massiveart/sulu/tree/develop
I will join them for one day for their two day hackday starting on Sunday.

@dbu
Collaborator
dbu commented Oct 11, 2013

yes, that was @chirimoya who showed his mockup of an administration menu. no idea if sulu is now a working prototype or bundle outside sonata - there are no screenshots or description in the readme.

@chirimoya

We are currently building a separate frontend admin framework for our sulu project. It's under heavy development but maybe you can get some inspiration. http://massiveart.github.io/husky/ (built on top of aurajs)

@sensi
Contributor
sensi commented Oct 11, 2013

I've already implement the new bootstrap3 layout into my new sonata admin project. That was quite easy because there only some replacements to do. See upgrading from twbs2 to twbs3 on this site: http://bootply.com/bootstrap-3-migration-guide

Some of the biggest issues are the modals and navigation.

  1. Modals: The modals now are using jquery ui. At the moment it seems it is to much or to complicated... But I can live with that issue because the style can be customized to fit the other side design.
  2. Navigation & Sidemenu: That was tricky to get this running as expected. With an standard bootstrap theme that is not as tricky as you use a customized on with a lot of other stuff in it. The issue is that the knpmenu has some missing function to render "complex" sidebars like this: http://stackoverflow.com/questions/19314957/how-to-i-get-following-menu-structure-with-knp-menu-bundle.
    So a main thing should be the menu generation. It seems it make sense to extend the knpmenu functionality to fit the sonata admin workflow (as we need it). So we have a clean way to generate sidebars, navbars (header menus) drop downs from a given tree array.

The sidemenu I've implement also into the left navigation. But that can be a fail if you have a large product category tree. So I'm going to move that into my breadcrumb bar as drop down similar as the current navbar. That save space and I think it is nice to use.

I think it's a great idea the make the layout selectable/configable if it is vertical or horizontal.
I use currently the following commerce bootstrap extension: http://192.69.216.111/themes/preview/ace/
I think it is well done and easy to work with it. So we can take some ideas from there.

  1. Icons: Last but not least the icons. I've implement for each dashboard group name a simple icon option. There it is possible to set an icon css class which get included. That is necessary to get a unique icon as identifier if you have minimized the navigation.
@kudlatyamroth

configurable position of filters?
top and right?

@Bladrak
Member
Bladrak commented Jan 9, 2014

Some additions have been made those last months, noticeably regarding the integration of KnpMenu (and Bootstrap3). You now have a BlockService in SonataBlockBundle to render a KnpMenu and several examples of this service being overridden to answer specific needs such as side-navigation (see https://github.com/sonata-project/ecommerce/blob/develop/src/Sonata/ProductBundle/Block/CategoriesMenuBlockService.php for instance).

Maybe you can integrate some of that @sensi ?

@zhil
Contributor
zhil commented Jan 15, 2014

It would be great to have dynamic filters, like in ORO CRM
http://www.orocrm.com/wp-content/uploads/2013/04/Grid-867x758.png

As for the menu location - I prefer top location (old version), configuration option is must have IMHO.

@markyboryslav
Contributor

I prefer configurable position for every type of Admin class

@gagarine

I oppened the #1886 but I was tell to move the discution in this issues:

We should remove all modals/lightbox. Modals are very disturbing, they mainly don't work on mobile.

It's possible to not use modal for admin. We should really check out the drupal 8 UX.

The only place where lightbox are perhaps useful is to select related entity (like media). But still I think better solution can be found.

@zhil
Contributor
zhil commented Jan 21, 2014

@gagarine I would vote for configurable option for modals usage\lightbox - per admin or as option in form builder

@Bladrak
Member
Bladrak commented Jan 21, 2014

@gagarine is your main issue with modals the fact they don't currently work properly on mobile? In that case, this should be solved by Bootstrap3, as it's mobile-first oriented.

@rande
Member
rande commented Jan 21, 2014

@gagarine What should be the alternative to modal ?

@ima-tech

That one is clearly the prettiest of all : http://startbootstrap.com/templates/sb-admin-v2

@gagarine
gagarine commented Feb 5, 2014

I don't have yet a solution sadly. We are going to study that with UX guys and the development team. Lot of time it just didn't feel right and yes the main issue is on mobile.

@qwertyxxx

yep, this one http://startbootstrap.com/templates/sb-admin-v2 is the best, but IMO the black dark sidebar and main nav is more better )
but, in any case could you please announce when BS3.0 admin theme will be done ?

@rande
Member
rande commented Feb 17, 2014

@qwertyxxx we don't have an ETA yet, the template will be based on http://startbootstrap.com/templates/sb-admin-v2.

Do you want to contribute ?

@matheo
Contributor
matheo commented Feb 20, 2014

I want to contribute.
I have a work in progress and want to take advantage to upgrade the stuff to use BS 3.

@rande
Member
rande commented Feb 20, 2014

@matheo thanks to pushing this topic. I will create a bootstrap3 branch so you can create a PR against it. The bootstrap3 will be a 2.3.X series as changing the layout will be a major BC break.

@matheo
Contributor
matheo commented Feb 20, 2014

@rande Excellent news, looking forward for that branch :)
Maybe you can take advantage to clean some old branches too hehehe, greetings!

@matheo
Contributor
matheo commented Feb 24, 2014

Ping me when it's commited please. TIA

@rande
Member
rande commented Feb 24, 2014

@matheo I juste create a 2.2 branch for the current code and the master is now an alias for the 2.3 branch.

@rande
Member
rande commented Feb 24, 2014

@matheo This change will also impact others admins bundle

To summarize, the 2.3 series will include twitter bootstrap3 and the admin layout will match http://startbootstrap.com/templates/sb-admin-v2.

@lsmith77 @dbu @K-Phoen @ClementGautier @dunglas

@matheo
Contributor
matheo commented Feb 24, 2014

All right, so now we ask for Pull Requests with the current advances towards BS3 and avoid redundancy on this effort? (2.2 branch is not pushed yet BTW)

@rande
Member
rande commented Feb 24, 2014

@matheo if you want to take the lead on it, feel free to create a PR with the work. We will see how people will react and adapt the strategy depends on the feedback.

(2.2 is now pushed, thanks)

@codecowboy

@matheo @rande is anyone actively working on the BS3 implementation? I would be interested in contributing.

@matheo
Contributor
matheo commented Feb 28, 2014

I began my approach using bower + SpBowerBundle to handle the dependency of external libraries, cleaned up them from the bundle and already got the standard_layout like the SB Admin v2 template.

My work is here: https://github.com/matheo/SonataAdminBundle
if you want to run it, follow the SpBowerBundle instructions.

My config.yml ended like this:
https://gist.github.com/matheo/9275616

@Bladrak
Member
Bladrak commented Mar 20, 2014

@matheo Did you make any progress on this? Could you submit a Pull Request with your developments? We have some resources to actively participate on this in the Sonata team, so we'll give it a push if you're ok with it :)

@matheo
Contributor
matheo commented Mar 20, 2014

This commit: matheo/SonataAdminBundle@72be323 was the initial conversion I did, and haven't advanced anymore because I needed to focus on the frontend. I will continue later maybe, but with an approach based on bower, life doesn't needs to be complicated without it ;)

@Bladrak
Member
Bladrak commented Mar 21, 2014

Ok thanks :) I'll try to come up with something then.

@codecowboy

I can offer some time early next week Mon / Tues towards integrating http://startbootstrap.com/templates/sb-admin-v2 as I'd like to use this in an admin panel I'm building for a client.

@Bladrak
Member
Bladrak commented Mar 24, 2014

Hello @codecowboy, I'm currently working on that, I will probably submit a PR today or tomorrow. I'll keep you posted. Thanks for the offer!

@Bladrak Bladrak referenced this issue Mar 26, 2014
Closed

[WIP] Bootstrap3 front theming #2017

12 of 15 tasks complete
@bensan
bensan commented Mar 31, 2014

Newcomer here. Interested in this discussion and would like to contribute whatever way I can. Any better idea on ETA? Would love to help.

@rande
Member
rande commented Apr 1, 2014

A first batch has been merged: AdminBundle, DoctrineOrmAdminBundle and jQueryBundle. Some fine tuning are required to improve the user experience.

Users should rely on 2.2 branch for stable feature, if you are using ``dev-master` be ready for some issues.

@rande rande referenced this issue Apr 3, 2014
Closed

New Theme #2031

@rande
Member
rande commented Apr 3, 2014

Here an update of the current layout with TB3

screen shot 2014-04-03 at 14 19 17

@rande
Member
rande commented Apr 4, 2014

New preview, based on AdminLTE, very similar with sbadmin ;)

screen shot 2014-04-04 at 17 33 45

@jbinfo
Contributor
jbinfo commented Apr 7, 2014

@rande +1, I recommend AdminLTE as a base theme.

@codecowboy

http://startbootstrap.com/templates/sb-admin-v2/ gets my vote I particularly want to implement the Tasks menu top-right for running gearman jobs. Would it be possible to build this in a way which would allow both themes / theme overrides?

@ApXaHgheJI

Like new theme, but please provide more Documentation how to manage them.

@ApXaHgheJI

An exception has been thrown during the rendering of a template ("The block type sonata.admin.block.search_result does not exist") in SonataAdminBundle:Core:search.html.twig at line 48.

@samuelfvlcastro

Congrats, I'm loving the redesign, I would just suggest changing one thing.
When closed, the sidebar icons should still be visible, like in this theme:
http://r209.com/templates/moodstrap

In my experience, users tend to like some extra visual aid (even when a menu is closed)

Cheers

@codecowboy

Did SonatajQueryBundle() get removed? Is this change documented somewhere? I'm getting this http://stackoverflow.com/questions/23149771/sonatajquerybundle-no-longer-installed-as-dependency

@sensi
Contributor
sensi commented Apr 18, 2014

@ApXaHgheJI : This occurs if you're calling $this->getRequest()->get('some_param', false) in one of your Admin classes. See http://stackoverflow.com/questions/19551715/sonata-admin-search-feature

@sensi
Contributor
sensi commented Apr 18, 2014

@rande: Awesome work looks fine. But I recommend to replace the action's drop down on top right with buttons. Or make it choice able in config.
And a configable form view would be also nice with tab layout and box layout. The current box layout is not really clearly with many fields and text editor.

@AlmogBaku

@rande looks awesome! much cleaner and simpler! well made pal. :)

@dirkluijk

@sensi How did you add the icon functionality? Did you add an attribute to the service tag, or simply extended the Admin base class? Or did you manage to extend the configuration?

I have created a Moodstrap based template for Sonata Admin. Maybe I will share it later.

@bwhitty
bwhitty commented May 13, 2014

Haven't been following this closely lately and decided to do a version bump and composer update and was seriously surprised when I saw this and how good it looks. Keep up the great work.

@sensi
Contributor
sensi commented May 14, 2014

@dirkluijk I've done it in this way see my current design branch at: sensi@sonata-project:master...design

So it's the icon configurable. But not sure if the getParam functionality in Admin is a good choice. What do you say @rande ?

@dirkluijk

Thanks. I think it's at least one of the flexible solutions. ;)

@zhil
Contributor
zhil commented May 19, 2014

@rande what do you think about adding back tabs on edit page? AdminLTE easily support it by using code like

{% block sonata_tab_content %}
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            {% for name, form_group in admin.formgroups %}
                <li{% if loop.index == 1 %} class="active"{% endif %}><a href="#tab_{{ loop.index }}" data-toggle="tab">{{ admin.trans(name, {}, form_group.translation_domain) }}</a></li>
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for name, form_group in admin.formgroups %}
                <div class="tab-pane active" id="tab_{{ loop.index }}">
                    <div class="box-body">
                        <div class="sonata-ba-collapsed-fields">
                            {% if form_group.description != false %}
                                <p>{{ form_group.description|raw }}</p>
                            {% endif %}

                            {% for field_name in form_group.fields %}
                                {% if admin.formfielddescriptions[field_name] is defined %}
                                    {{ form_row(form[field_name])}}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

We have talked with users - some of them love edit page with tabs, some of them hate tabs. It would be nice to have ability to configure it (maybe in users profile?).

@rande
Member
rande commented May 19, 2014

@zhil Can you try to create a PR ? but keep in mind if you restore the tab, some bundles might not work properly as (for sonata's ones) groups are now used to define the area size. So 2 groups can be side by side. If you restore the tab, this might break a lot.

@zhil
Contributor
zhil commented May 20, 2014

@rande right now we are testing this code and I dont see any problems.
What do you think about this option being configurable? Maybe lets add function to admin class, something like isTabsUsedOnEditPage() { return true; } and check it in base_edit template? So we can inject more advanced logic later

@sensi
Contributor
sensi commented May 21, 2014

@zhil: I've already implement such a configurable tab feature on edit page. I prefer to add a param array at admin class with is also configurable in service definition. Look at my design branch. Need feedback from @rande if the param array solution is ok.
Background is: Whit that param array you can add multiple values for example some other css classes for menu icons and such more.
In my live environment that works like a charm :)

@zhil
Contributor
zhil commented May 21, 2014

@sensi well, I would vote for function as more natural solution for complex logic. For example, we want to give ability for users to choose in their profiles - enable\disable tabs on edit page - that's question of personal preferences.
with array solution we will need to modify array in some ugly way.

@pulzarraider
Member

What about use tabs and groups together? It will be more intuitive and usable for complex forms.

$formMapper
    ->with('tab1', array('tab'=>true))
        ->with('group1')
            ->add('username')
            ->add('password')
        ->end()
        ->with('group2', array('collapsed' => true))
            ->add('enabled')
            ->add('createdAt')
        ->end()
    ->end();
@zhil
Contributor
zhil commented May 22, 2014

@pulzarraider +1 for this solution. It would be most flexible

@zhil
Contributor
zhil commented May 22, 2014

@rande there are another problem with layout - when making window smaller divs are messed.
Screenshots are based on Sonata sandbox
sb1
sb2
you have placed Actions dropdown instead of breadcrumbs from original AdminLTE
lte

I see 2 solutions

  1. switch breadcrumbs and actions in template
  2. patch AdminLTE in sonata for current layout.
    @rande which one way do you prefer?
@samplenull

I like @pulzarraider option, it would be great to have both tabs and groups

@aitboudad
Contributor

+1 for @pulzarraider

@zhil
Contributor
zhil commented May 30, 2014

@sensi what do you think about @pulzarraider suggestion?

@rande
Member
rande commented Jun 4, 2014

@zhil Do you want to take the lead to complete the new layout? I am also agree with @pulzarraider idea. I want is to make a bit more flexible by allowing fields in a group to be on 2/3 columns.

@sensi
Contributor
sensi commented Jun 5, 2014

@zhil: Yes I also like the solution from @pulzarraider. But we have to make sure that both solution's (current and new one) are working. Otherwise I've to change 100 of Admin Formmapper.

How is the status of this feature? Some already start to implement it?

@zhil
Contributor
zhil commented Jun 9, 2014

I will try to implement it now

@zhil zhil added a commit to zhil/SonataAdminBundle that referenced this issue Jun 9, 2014
@zhil zhil #1723
added prototype for code like
```
$formMapper
    ->with('tab1', array('tab'=>true))
        ->with('group1')
            ->add('username')
            ->add('password')
        ->end()
        ->with('group2', array('collapsed' => true))
            ->add('enabled')
            ->add('createdAt')
        ->end()
    ->end();
```
7b37792
@zhil zhil referenced this issue Jun 9, 2014
Closed

#1723 #2179

@zhil
Contributor
zhil commented Jun 9, 2014

@rande @sensi @pulzarraider I have tried to implement core logic in PR #2179
please review it - its its acceptable I will change templates, docs and unit tests.

@rande I will appreciate if you will check also this one old issue sonata-project/SonataDoctrineORMAdminBundle#297

@sensi
Contributor
sensi commented Jun 11, 2014

@zhil: Look's fine. But had no time to test on one of my development environments. Hope I can do that the next days.

@zhil
Contributor
zhil commented Jun 11, 2014

@sensi thanks. Can you please also check this idea? sonata-project/SonataDoctrineORMAdminBundle#297

@ibasaw
ibasaw commented Jun 12, 2014

it will be very good to choose tab and group together

@zhil
Contributor
zhil commented Jun 13, 2014

@sensi ping :)

@dirkluijk

@sensi

About the the icon functionality: I think it's better when only the icon name is stored in configuration, e.q. icon: fa fa-folder instead of icon: <i class="fa fa-folder"></i>.

How the icon name is handled, is the responsibility of the MenuBuilder and the (Twig) templates. For example, I want to pass the icon name to the labelAttributes option of KnpMenu.

By the way, I am only talking about the default value in the Configuration. ;)

Besides that, I think there must also be an option to add icons to specific Admin items (not only to the groups).

dashboard:
        groups:
            my_bundle.admin.foo:
                label: Foo
                icon: 'fa fa-foo'
                items:
                    - my_bundle.admin.foo
           my_bundle.admin.bar:
                label: Bar
                items:
                    - {name: my_bundle.admin.bar, icon: 'fa fa-bar' }
                    - {name: my_bundle.admin.baz, icon: 'fa fa-baz' }
@rande
Member
rande commented Aug 11, 2014

@sensi @zhil Can we have a status of the tab/group feature implementation? I want to release a 2.3 version with this feature ;)

@zhil
Contributor
zhil commented Aug 11, 2014

@rande well, my PR is seems to work ok in local environment.
I am military volunteer right now (I am from Ukraine) and already missed deadline on main project, so I will not have time to rework this feature in nearest couple weeks.

Unless somebody will kill putin v.v.

@rande
Member
rande commented Aug 11, 2014

@zhil don't worry about this PR, it is only virtual. real life matter first!

@zhil
Contributor
zhil commented Aug 12, 2014

@rande thanks, this year is definetely most crazy year in my life.

meanwhile you can use this PR as a prototype for this functionality #2179

@rande rande referenced this issue in symfony-cmf/menu-bundle Aug 19, 2014
Closed

Switch to KnpMenuBundle 2.0 #202

@rande rande added a commit that referenced this issue Aug 22, 2014
@zhil @rande zhil + rande #1723 added prototype for code like ``` $formMapper ->with('tab1', ar…
…ray('tab'=>true)) ->with('group1') ->add('username') ->add('password') ->end() ->with('group2', array('collapsed' => true)) ->add('enabled') ->add('createdAt') ->end() ->end(); ```
60a15c0
@xeux
xeux commented Aug 28, 2014

This last feature, left side menu, will be used with "configureSideMenu" as in documentation, or with the service admin_pool.dashboardgroups?

@ldelia
ldelia commented Sep 11, 2014

I am sorry for this question, but i can't find how to solve it. Is there a way to place the filter section on top of the list?
Thanks in advance!

@toooni
Contributor
toooni commented Sep 12, 2014

@ldelia this is very easy using grid column ordering in bootstrap (http://getbootstrap.com/css/#grid-column-ordering)

here's a specific example for the filter:
image

With this the filter is above the list, but does look like it's floated after the list in desktop view (medium). Is this what you wanted?

@ldelia
ldelia commented Sep 12, 2014

@toooni thanks for your answer. Maybe I did not explained properly. At this moment, SonataAdminBundle places filter forms on the right side of the list. What i want is to place the filter form on top of the list. This was discussed in #1382

Thanks in advance!

@rande
Member
rande commented Sep 12, 2014

The tag 2.3.0 now include the new layout.

If you want new stuffs, please comment this issue: #2406

@rande rande closed this Sep 12, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment