[WIP] Introducing SyliusUiBundle and reworked backend by pjedrzejewski · Pull Request #1488 · Sylius/Sylius

pjedrzejewski · 2014-05-11T00:55:14Z

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?

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.
The layouts, assets, js libraries and elements can be used in bundle's default templates. Right now SyliusResourceBundle in clunked with all this stuff.
SyliusUiBundle contains base MenuBuilder, Security and Form controllers.

TODO:
-25px

Clean up the LESS files.
Adjust features to button / little UI changes.
Make the sidebar full-width.
Finish the order page.
Remove the extra fields in product form. (rendered by form_end)
Merge and adapt my collection-fix branch.
Fix the styles of backend login page.

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.

arnolanglade · 2014-05-11T09:38:42Z

👍 for the UIbundle

You should move the title of the page (and the action buttons) above the the breadcrumb and put it in the the page. The main menu and the sub menu (title and actions button) should fixed. Like that we can scroll at the end of the page (a form for example) and still save it.

pjedrzejewski · 2014-05-11T09:41:28Z

@Arn0d Why above the breadcrumb? I'm not sure I understand "put it in the page".

Regarding the main menu and submenu - yeah, I was thinking about it - good idea!

arnolanglade · 2014-05-11T09:42:05Z

src/Sylius/Bundle/UiBundle/Controller/FormController.php

Should we move it in the ResourceController and tweak it a little bit for being it more generic ?

arnolanglade · 2014-05-11T09:50:20Z

@pjedrzejewski : I thought at something like that :

kayue · 2014-05-12T02:11:16Z

+1 on using LESS.

BTW can we use sub-nav bar instead of dropdown for 2nd nav?

winzou · 2014-05-14T11:09:34Z

This is huge PR!
A bit hard to review but seems nice. Can you ping when you push it on demo.sylius.org?

arnolanglade · 2014-05-23T11:24:42Z

@pjedrzejewski : where is your collection-fix ?

arnolanglade · 2014-05-27T09:52:14Z

@pjedrzejewski What is the status of this ?

pjedrzejewski · 2014-05-27T11:00:07Z

@Arn0d Hope to have this finished this week, then we'll get more speed, cause I am waiting with merging some of the PR's to get this in master.

arnolanglade · 2014-05-27T11:06:07Z

Which PR are you talking about ? Can I have a look on your collection-fix branch ?

antonydb · 2014-07-24T07:24:06Z

Can I request that elements like the .page-header be moved into a separate twig block inside a base template (e.g. Have an empty {% block page_header %}{% endblock %} inside UiBundle::layout.html.twig )? If you ever wanted to move the .page-header you'd have to edit a lot of templates otherwise.

arnolanglade · 2014-08-05T11:32:54Z

@pjedrzejewski What is the status on this PR ?

pjedrzejewski · 2014-08-07T09:36:13Z

@Arn0d To be honest I've made it too big and got stuck... I am thinking about taking just the good parts of it and giving a shot to https://github.com/Ehesp/Responsive-Dashboard (MIT License)... That would be awesome! What do you think?

stloyd · 2014-08-07T09:46:51Z

@pjedrzejewski That's why I mostly do my PRs as small steps =) (i.e. that domain managers PoC)

IMO you should list here what is missing, what is exactly done, so anyone can help you with this and speed up it.

TBH. I don't think we should introduce that "dashboard" code in this PR, it will make it even bigger and harder to finish, I think that we should handle only started stuff, and later create RFC or PR that introduces next change like that dashboard.

kayue · 2014-08-07T09:56:32Z

@pjedrzejewski Are we abandoning this PR?

If you can break this PR into smaller steps, I think I can contribute the frontend part.

Move all backend code to SyliusUiBundle.
Setup BowerPHP to handle JS dependency.
Rework the backend layout and styling in LESS.

PS: I think SyliusBackofficeBundle is a better name than SyliusUiBundle.

pjedrzejewski · 2014-08-07T14:39:59Z

@kayue The idea behind this SyliusUiBundle is that it can be used outside of Sylius and even core. I will sit down today and analyze how can we break up this huge crap into smaller ones. :/

kayue · 2014-08-08T16:24:29Z

@pjedrzejewski So the UI bundle will be a frontend UI components bundle, am I correct?

Is this similar to Telerik's Kendo UI PHP library http://demos.telerik.com/php-ui/line-charts/index

arnolanglade · 2014-08-30T17:20:28Z

@pjedrzejewski I can split #627 into small PR if you want !

pjedrzejewski · 2014-09-15T08:53:19Z

I hate myself for this PR. :/ I will split it into smaller bits later, backend UI is not that important. I will move this further in the roadmap and complete other stuff I have started. :S

arnolanglade · 2014-09-15T10:39:24Z

@pjedrzejewski CMF integration / API ???

madc · 2014-10-08T12:02:58Z

It's a shame. I really liked the horizontal menu.

adamelso · 2015-02-04T13:01:21Z

Too bad this wasn't merged, it was quite a sexy-looking UI.

@pjedrzejewski Do we have an RFC for UiBundle? I am working on two proof-of-concepts that are related, it would be great if there was one place where thoughts regarding the UI codebase could be collected.

pjedrzejewski · 2015-02-04T13:07:39Z

I hope to give a shot soon. I have actually started playing with adding Sylius look to http://rdash.github.io/#/ And it looks quite cool. (without angular, jquery version)

I think I will find some time to describe my ideas and we can discuss it again if you are interested. I will ping you in appropriate issue. :)

madc · 2015-02-04T15:38:27Z

You could ping me too, if you want. Would like to contribute to this.

songecko · 2015-10-09T06:44:30Z

Hi @pjedrzejewski , please you should consider this option: https://almsaeedstudio.com/preview. See the differentes options of that template. Im using this on my sylius projects like a replacement of the current desing.

nakashu · 2015-10-09T08:10:54Z

@songecko, @pjedrzejewski I also recommend adminLTE

pjedrzejewski · 2015-10-19T21:38:15Z

Wow, I see that AdminLTE is MIT licensed, which is a nice surprise.

pjedrzejewski mentioned this pull request May 11, 2014

Create.js integration and ContentBundle #1489

Merged

arnolanglade reviewed May 11, 2014
View reviewed changes

arnolanglade added the Enhancement label May 27, 2014

pjedrzejewski mentioned this pull request Jun 5, 2014

[RFC] API #1356

Closed

pjedrzejewski mentioned this pull request Jun 21, 2014

Removed useless route. #1558

Merged

pjedrzejewski mentioned this pull request Jul 4, 2014

Initial api bundle #1688

Merged

kayue mentioned this pull request Jul 10, 2014

Livequery fetched from github raw #1709

Closed

kayue mentioned this pull request Jul 20, 2014

[POC][WIP] Handling JS dependencies with Bower PHP #1355

Closed

Paweł Jędrzejewski added 6 commits August 7, 2014 20:20

Final concept of SyliusUiBundle and reloaded backend

a4fc31b

Style the login page

80dc6ab

Split order summary even more and hide extra fields in product form

8abb6c7

Add contents to order tabs

88b839f

Rework the features

e4b3b75

Fix the navbar in backend and product list pagination

d188498

Paweł Jędrzejewski added 2 commits August 7, 2014 20:20

Make the sidebar full width and general tweaks

b498b2c

WIP

2d31a49

arnolanglade mentioned this pull request Aug 27, 2014

move paginate twig macro to ResourceBundle? #1841

Closed

arnolanglade added this to the v0.11.0 milestone Aug 30, 2014

pjedrzejewski closed this Sep 15, 2014

pjedrzejewski mentioned this pull request Dec 8, 2015

Backend views autogeneration #1881

Closed

Uh oh!

Conversation

pjedrzejewski commented May 11, 2014

Uh oh!

arnolanglade commented May 11, 2014

Uh oh!

pjedrzejewski commented May 11, 2014

Uh oh!

arnolanglade May 11, 2014

Choose a reason for hiding this comment

Uh oh!

arnolanglade commented May 11, 2014

Uh oh!

kayue commented May 12, 2014

Uh oh!

winzou commented May 14, 2014

Uh oh!

arnolanglade commented May 23, 2014

Uh oh!

arnolanglade commented May 27, 2014

Uh oh!

pjedrzejewski commented May 27, 2014

Uh oh!

arnolanglade commented May 27, 2014

Uh oh!

antonydb commented Jul 24, 2014

Uh oh!

arnolanglade commented Aug 5, 2014

Uh oh!

pjedrzejewski commented Aug 7, 2014

Uh oh!

stloyd commented Aug 7, 2014

Uh oh!

kayue commented Aug 7, 2014

Uh oh!

pjedrzejewski commented Aug 7, 2014

Uh oh!

kayue commented Aug 8, 2014

Uh oh!

arnolanglade commented Aug 30, 2014

Uh oh!

pjedrzejewski commented Sep 15, 2014

Uh oh!

arnolanglade commented Sep 15, 2014

Uh oh!

madc commented Oct 8, 2014

Uh oh!

adamelso commented Feb 4, 2015

Uh oh!

pjedrzejewski commented Feb 4, 2015

Uh oh!

madc commented Feb 4, 2015

Uh oh!

songecko commented Oct 9, 2015

Uh oh!

nakashu commented Oct 9, 2015

Uh oh!

pjedrzejewski commented Oct 19, 2015

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants