Sylius/Sylius — pull request #1488 by pjedrzejewski (2014-05-11 00:55:14+00:00)
Title: [WIP] Introducing SyliusUiBundle and reworked backend

| Q | A
| ------------- | ---
| Bug fix? | yes
| New feature? | yes
| BC breaks? | yes
| Fixed tickets | #627 and few others!
| License | MIT
| Doc PR | -

Ok, this is a bit big one, but I think it is worth it! Initially I wanted to split it into few separate PRs, but these are mostly template changes and assets handling. I recommend looking through branch view on github to see all changes - https://github.com/pjedrzejewski/Sylius/tree/sylius-ui-poc.

**CHANGES**:

- This PR adds BowerPHP for managing the frontend dependencies. This php library is mostly compatible with the nodejs version and allows us to remove the libs commited into repository. Please note, I have not removed the assets yet, to avoid huge and unreviewable changeset.
- It also replaces our css styles for the backend with LESS files. They need to be cleaned up and adjusted, in large part I just separated the main big css file.
- All components, layouts and elements which build the **backend and only the backend** are moved to new SyliusUiBundle.
- All repeatable elements are moved to macros, like page headers, history tables and so on. No more duplication here and it is easy to modify all headers across backend, without the need to override it.
- Big templates have been separated into several smaller ones.
- Generally, organization of templates is cleaner and easier to override. (theming on its way)

Why?

1. The raw interface can be used outside of Sylius. Please keep in mind it is very basic now, but as we work on new features and improve the UX in general, we'll have more and more elements, which are repeatable in many apps, also these non-Sylius powered.
2. The layouts, assets, js libraries and elements can be used in bundle's default templates. Right now SyliusResourceBundle in clunked with all this stuff.
3. SyliusUiBundle contains base MenuBuilder, Security and Form controllers.

**TODO**:

- [ ] Clean up the LESS files.
- [ ] Adjust features to button / little UI changes.
- [ ] Make the navbar full-width.
- [ ] Finish the order page.
- [ ] Remove the extra fields in product form. (rendered by ``form_end``)
- [ ] Merge and adapt my ``collection-fix`` branch.
- [ ] Remove all UI stuff from SyliusResourceBundle. (twig extension for sorting columns etc.)

**BACKEND UI CHANGES**:

I've made few tweaks to how backend looks, hopefully you'll like it.

- Global sidebar has been replaced by contextual one. Having sidebar with all options visible all the time is waste of space. Especially when we have so many menu nodes, half of them is invisible on small screens.
- The main sidebar was moved to top horizontal navbar with dropdown menus on hover. I restructured the menu a bit, now it contains Products, Sales, Marketing, Customers, Content and Configuration nodes.
- The sidebar on the left appears on pages where it is useful, currently on Product, Order and User pages.
- The form action buttons were moved to the top right, inside the page header.
- Replaced the enabled/disabled & yes/no labels with nicer alternatives.
- Other various minor changes.

See images yourself! I need merge another branch where I have fixed and improved all js collection stuff etc. - I will deploy this branch to demo page, so that you can see all the changes live.

![sylius meta title default - google chrome_025](https://cloud.githubusercontent.com/assets/614970/2937459/86407a32-d8a6-11e3-8aaa-97fb3274901c.png)
![sylius meta title default - google chrome_024](https://cloud.githubusercontent.com/assets/614970/2937460/8640be66-d8a6-11e3-8d0b-987c044771b0.png)
![sylius meta title default - google chrome_023](https://cloud.githubusercontent.com/assets/614970/2937461/8642f9ec-d8a6-11e3-9e67-a0b25150286e.png)
![sylius meta title default - google chrome_022](https://cloud.githubusercontent.com/assets/614970/2937462/86482818-d8a6-11e3-8cf8-5b6ff4152a6c.png)
![sylius meta title default - google chrome_021](https://cloud.githubusercontent.com/assets/614970/2937463/864a935a-d8a6-11e3-9edc-f3619ae92a79.png)
![sylius meta title default - google chrome_020](https://cloud.githubusercontent.com/assets/614970/2937464/864aceec-d8a6-11e3-8d51-73cef64f01e3.png)
![sylius meta title default - google chrome_019](https://cloud.githubusercontent.com/assets/614970/2937465/865844dc-d8a6-11e3-8098-aacb7988245e.png)
![sylius meta title default - google chrome_018](https://cloud.githubusercontent.com/assets/614970/2937466/86597fdc-d8a6-11e3-8021-9645e6946225.png)
![sylius meta title default - google chrome_017](https://cloud.githubusercontent.com/assets/614970/2937467/865a8116-d8a6-11e3-819e-70a7af63c437.png)
![sylius meta title default - google chrome_016](https://cloud.githubusercontent.com/assets/614970/2937468/865e64e8-d8a6-11e3-959e-cc99b2f2ed71.png)