New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style ZMI using Bootstrap #249

Merged
merged 302 commits into from Aug 17, 2018

Conversation

10 participants
@icemac
Member

icemac commented Feb 5, 2018

WIP styling the ZMI of Zope 4 using Bootstrap. (This is part of a customer funded project. – There is still a need for )

It does not seem to make sense to have custom infrastructure to style the ZMI so we integrated it right into the core.

Using fanstatic to serve the static assets seemed to be the easiest way. (We have been using this WSGI middleware for years in production.) But there was neither a discussion nor a consensus about using it. But it is relatively lightweight according to its dependencies and its runtime impact.

Using this branch the ZMI currently (time when creating this PR) looks like this:

zmi-bootstrap

Whereas the same view on current master looks like this:

zmi-master

We decided against removing the frames as this would require AJAX calls for the tree as otherwise it has to be rendered at each page.

What do you think about it?

Related packages having a zmi-bootstrap branch which need to be merged along with this PR:

  • AccessControl
  • Products.BTreeFolder2
  • Products.ZCatalog
  • Products.MailHost
  • Products.PythonScripts
  • Products.CMFCore
  • Products.Sessions
  • Products.TemporaryFolder
  • Products.SiteErrorLog

Open issues:

  • Maybe replace fanstatic by resource directories.
  • Document how to update an existing Zope instance (calling bin/mkwsgiinstance again does not touch already generated files.) not needed as we do not use fanstatic
  • Style more screens using bootstrap (see #306)
@dwt

This comment has been minimized.

Contributor

dwt commented Feb 5, 2018

@tseaver: At the last sprint we did discuss that adding the dependency on bootstrap would be the right way to go (You where not there, so you probably missed it). We did not discuss anything about a python dependency to serve those resources.

icemac added a commit to zopefoundation/AccessControl that referenced this pull request Feb 5, 2018

icemac added a commit to zopefoundation/Products.BTreeFolder2 that referenced this pull request Feb 5, 2018

icemac added a commit to zopefoundation/Products.ZCatalog that referenced this pull request Feb 5, 2018

@icemac

This comment has been minimized.

Member

icemac commented Feb 5, 2018

Added icons for all types which come with a vanilla Zope 4:

icons

@tseaver

This comment has been minimized.

Member

tseaver commented Feb 5, 2018

I'm not intrinsically opposed to adding a dependency on fanstatic (I've never used it, nor do I know much of anything about it). I just didn't want it to slip in without discussion.

icemac added a commit to zopefoundation/Products.MailHost that referenced this pull request Feb 6, 2018

icemac added a commit to zopefoundation/Products.PythonScripts that referenced this pull request Feb 6, 2018

@dwt

This comment has been minimized.

Contributor

dwt commented Feb 6, 2018

It seems to me that fantastics biggest advantage that is usable here, is that it allows hosting the js/css dependencies on urls that have a content hash and are thus easily infinitely cacheable.

Not sure if this is really worth it, as the bundled bootstrap is really only usable by the manage interface itself, thus caching seems not to be so important?

@dwt

This comment has been minimized.

Contributor

dwt commented Feb 6, 2018

@icemac I really like the progress you guys have achieved here, I do however feel that the look that we already had (though still at the spiking stage) was cleaner and smoother. I would really like it if you could go further into the direction set by our prototype.

bildschirmfoto 2018-02-06 um 13 15 18

What do you think?

icemac added a commit to zopefoundation/Products.CMFCore that referenced this pull request Feb 6, 2018

Add icons for Bootstrap ZMI.
The branch requires the merge of zopefoundation/Zope#249.

Currently only the icon for CookieCrumber is added as an example.

icemac added a commit to zopefoundation/Products.CMFCore that referenced this pull request Feb 6, 2018

Add icons for Bootstrap ZMI.
The branch requires the merge of zopefoundation/Zope#249.

Currently only the icon for CookieCrumber is added as an example.
@icemac

This comment has been minimized.

Member

icemac commented Feb 7, 2018

@dwt This PR is mainly to show it is possible to style the ZMI using Bootstrap by changing the code in the Zope core. We did not write any custom CSS but took only the one which came with Bootstrap. Additionally we wanted to avoid writing custom JS if possible. I know there are plenty abilities to make it smoother and nicer. Maybe the next sprint could be a possibility to finalize the styling.

@icemac

This comment has been minimized.

Member

icemac commented Feb 7, 2018

@tseaver @pbauer Discussing the taken approach using fanstatic internally at gocept we found out that it would be a bigger effort to integrate fanstatic with ZServer. (I do not think the gain is worth the effort.) I doubt Plone will stop using ZServer on Zope 4 to keep the locking support and all the other things a plain WSGI server does not provide. (at least as long Python 2 is the only supported Python version)
But using fanstatic would mean that ZServer based installations see a ZMI without any styling. This would be bad.
Maybe a better solution is to keep using the tools Zope provides for resources namely resource directories which are served via ++resource++ and which are compatible with ZServer and WSGI.

@thet

This comment has been minimized.

Member

thet commented Feb 7, 2018

+1 for using resource directories instead of fanstatic. Todays static resource build and deployment tools are quite different from fanstatic. Resource directories support any build environment, fanstatic has their own tools.

Besides of that, both the new ZMI looks very nice - the @icemac version as well as the @dwt
one. It's probably just about tweaking some variables to get @icemac's version look like @dwt's.
@dwt where can I find your branch?

The templates also got a nice cleanup.

Although all templates are still DTML - I know it's out of scope for this PR but IMO it would make a nice sprint topic to migrating everything to TAL templates and browser views.

@jcbrand

This comment has been minimized.

jcbrand commented Feb 9, 2018

@dwt

This comment has been minimized.

Contributor

dwt commented Feb 12, 2018

@thet: you can currently find our branch here: https://zmslabs.org/trac/browser/ZMS/branches/zope4

@icemac: I agree that loads of custom css / js are not the right initial push, but I think that it could be little effort, to get even plain bootstrap more into the direction we set forth.

Some examples:

  • Use one color for all the action buttons instead of mixing priority and notification styles
  • Use solid styles for buttons instead of the wireframe ones
  • in general reduce the amount of colors used in the admin UI.

Of course we can always work towards this in a future sprint - but I feel these could be good guidelines for you when you guys work on this right now.

In any case: Thanks for the work!

@icemac icemac changed the title from [WIP] Style ZMI using Twitter Bootstrap to [WIP] Style ZMI using Bootstrap Feb 13, 2018

@icemac icemac added this to the 4.0b4 milestone Apr 12, 2018

@icemac icemac modified the milestones: 4.0b4, 4.0b5 Apr 23, 2018

Martin Häcker and others added some commits Jul 10, 2018

Martin Häcker
Auto open the currently shown item on enter if there is only one item.
Search for the search term in all other cases.

@icemac icemac added this to In progress in Zope 4 final release Jul 12, 2018

@pbauer pbauer referenced this pull request Jul 14, 2018

Open

PLIP: Port Plone to Python 3 #2368

11 of 17 tasks complete
@sallner

This comment has been minimized.

Contributor

sallner commented Jul 17, 2018

@dwt and @drfho
It seems to me, that the work done in this PR is accepted by the majority to go into the right direction. Unfortunately, it is huge and hard to understand. Additionally there are branches in other packages, which have to be merged to really try this feature, which add more complexity. If you have time, it would probably be good to focus first on getting the tests to run and then rebase this huge PR. Afterwards, there could be issues and smaller PRs for individual improvements.

icemac added some commits Aug 17, 2018

Merge branch 'master' into zmi-bootstrap
* master:
  Use newer Version of chameleon
  Document min virtualenv version.
  fix spelling error
  fix link to download location of FieldedTextIndex
  fix spelling error
  fix link to TextIndexNG3 project
  fix spelling error
  fix spelling error
  fix spelling error
  complete abrupt ending sentence
  add missing single quotation mark
  Add entry which got lost during consolidation
  Create all scripts only once.
Fix NameError.
[skip ci]

icemac added a commit to zopefoundation/Products.PythonScripts that referenced this pull request Aug 17, 2018

icemac added some commits Aug 17, 2018

Use master branches after merge.
Yes, adding the zmi-bootstrap branch to MailHost was intentional as it was missing before and this branch is not yet ready.

@icemac icemac referenced this pull request Aug 17, 2018

Merged

Add icon for Bootstrap ZMI. #10

@icemac icemac referenced this pull request Aug 17, 2018

Closed

Finish Bootstrap ZMI #306

4 of 4 tasks complete

@icemac icemac merged commit 8917b15 into master Aug 17, 2018

3 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
coverage/coveralls Coverage decreased (-0.07%) to 79.273%
Details

Zope 4 final release automation moved this from In progress to Done Aug 17, 2018

@icemac icemac deleted the zmi-bootstrap branch Aug 17, 2018

@icemac icemac referenced this pull request Sep 14, 2018

Closed

ZMI not correctly displayed #315

@icemac icemac changed the title from [WIP] Style ZMI using Bootstrap to Style ZMI using Bootstrap Sep 14, 2018

@icemac icemac modified the milestones: 4.0 final, 4.0b6 Oct 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment