modxcms/revolution — pull request #11617 by exside (2014-07-03 00:37:46+00:00)
Title: Managertheme buttons

This is gonna be a long comment, sorry in advance =)...

This PR is a proposal mainly for the manager theme buttons and toolbars but also includes various other things, that came along when working on it.

Related issues: https://github.com/modxcms/revolution/issues/11577, https://github.com/modxcms/revolution/issues/11599, https://github.com/modxcms/revolution/issues/11604, https://github.com/modxcms/revolution/issues/11608, https://github.com/modxcms/revolution/pull/11616, https://github.com/modxcms/revolution/issues/11612 and maybe more?

Long story short:

- Less padding for the buttons in general, now 10px 20px
- Implemented :hover and :active states
- Went trough all JS files generating toolbars and nuked all separators, saves a few dom nodes and they were just in the way IMO (and not used for styling purposes in the theme anyway)
- Added consistently ids to all action bar buttons troughout the JS files
- Added more consistent primary-buttons where applicable (in JS)
- Split buttons a bit more sexy but still room for improvement
- Special styling for the filter/clear filter parts of the UI, added according classes to all JS files that implement such functionality
- Pagination toolbar restyled, less padding, enough space for text etc.
- Commented out all checkDirty attributes of the save button (in JS), thought this is gone and the save button should always be active...or was this just for resources? (in that case please tell, I can activate them again)
- Re-styled TV labels that were too close to the field, refresh arrow now to the left of the TV field
- Form field focus border-color now $colorSplash
- Form field labels nicely aligned
- Textareas have now the same font / style as single line fields, except for content fields and others that better show the code font
- Made card layout "micro"-buttons (ex. package manager > package grid) follow the style of "normal" (secondary) buttons, just with less padding + special styles for .orange and .green
- Fixed overlapping label for the property preprocess checkbox in Elements > Properties
- Quite some SASS rewriting in the CSS + some reorganization

The more detailed version:

**The action bar**

before
![bildschirmfoto 2014-07-03 um 01 30 17](https://cloud.githubusercontent.com/assets/445501/3463832/f442e81c-0240-11e4-9513-d9de04d29cfd.png)

and after
![bildschirmfoto 2014-07-03 um 00 48 35](https://cloud.githubusercontent.com/assets/445501/3463833/01042d7c-0241-11e4-827c-223aa6b9b473.png)

and in motion
![modx mgrtheme actionbar](https://cloud.githubusercontent.com/assets/445501/3463849/4a9b7896-0241-11e4-8805-584e4526d416.gif)

**The pagination toolbar for grids**

before
![bildschirmfoto 2014-07-03 um 01 35 33](https://cloud.githubusercontent.com/assets/445501/3463862/9d9bfe8a-0241-11e4-9144-0a3e8677573f.png)

after
![bildschirmfoto 2014-07-02 um 23 59 06](https://cloud.githubusercontent.com/assets/445501/3463864/aa83dc6c-0241-11e4-851c-2f82f2713c70.png)

in motion
![modx mgrtheme paginationbar](https://cloud.githubusercontent.com/assets/445501/3463872/dc88f45e-0241-11e4-9d59-033365d8006e.gif)

**The grid top toolbar, example 1**

before
![bildschirmfoto 2014-07-03 um 01 38 30](https://cloud.githubusercontent.com/assets/445501/3463878/0d7b657e-0242-11e4-8d08-e4afdeb1936a.png)

after
![bildschirmfoto 2014-07-02 um 23 59 19](https://cloud.githubusercontent.com/assets/445501/3463881/2245c74c-0242-11e4-8c58-27b7a9646c0d.png)

**Grid top toolbar, example 2**

before
![bildschirmfoto 2014-07-03 um 01 41 41](https://cloud.githubusercontent.com/assets/445501/3463895/73e08a74-0242-11e4-9472-b06a73ff1c37.png)

after
![bildschirmfoto 2014-07-03 um 01 40 55](https://cloud.githubusercontent.com/assets/445501/3463896/785502e2-0242-11e4-9aac-40f97341a9f3.png)

**Grid top toolbar, example 3**

before
![bildschirmfoto 2014-07-03 um 01 43 22](https://cloud.githubusercontent.com/assets/445501/3463911/cc8ba636-0242-11e4-8779-3321fe032562.png)

after
![bildschirmfoto 2014-07-03 um 01 44 49](https://cloud.githubusercontent.com/assets/445501/3463922/e45aa316-0242-11e4-8d42-9dcb9d6af4fb.png)

all in motion
![modx mgrtheme toolbarui](https://cloud.githubusercontent.com/assets/445501/3463951/64b039ae-0243-11e4-9264-3df0a2aa4fde.gif)

**Resource Groups panel (ex. for panels with trees)**

before
![bildschirmfoto 2014-07-03 um 02 29 35](https://cloud.githubusercontent.com/assets/445501/3464246/3a9be950-0249-11e4-98e1-ec7ded77fa59.png)

after
![bildschirmfoto 2014-07-03 um 02 28 59](https://cloud.githubusercontent.com/assets/445501/3464247/4017aeaa-0249-11e4-855c-c225135ea4a9.png)

**The card layout grid (ex. package manager)**

before
![bildschirmfoto 2014-07-03 um 01 52 39](https://cloud.githubusercontent.com/assets/445501/3463981/fe8e0c9a-0243-11e4-91f2-6ae236b564fc.png)

after
![bildschirmfoto 2014-07-03 um 01 51 54](https://cloud.githubusercontent.com/assets/445501/3463983/042229e8-0244-11e4-8c1b-8e3ec424d716.png)

in motion
![modx mgrtheme cardlayoutgrid](https://cloud.githubusercontent.com/assets/445501/3463990/30befbac-0244-11e4-8e53-1830cf671e90.gif)

**The media browser page**

before
![bildschirmfoto 2014-07-03 um 02 25 20](https://cloud.githubusercontent.com/assets/445501/3464214/9aa4112a-0248-11e4-8918-97ccdc259dfb.png)

after
![bildschirmfoto 2014-07-03 um 02 25 06](https://cloud.githubusercontent.com/assets/445501/3464216/9fc6d58e-0248-11e4-9455-717f374ad9f4.png)

**TVs panel**

before
![bildschirmfoto 2014-07-03 um 01 56 38](https://cloud.githubusercontent.com/assets/445501/3464011/9fb765d0-0244-11e4-9f1c-ce54c4f2532b.png)

after
![bildschirmfoto 2014-07-03 um 01 57 52](https://cloud.githubusercontent.com/assets/445501/3464017/b56aca2a-0244-11e4-9a82-3b7c589facca.png)

I tested all manager pages I could find for inconsitencies, but many eyes see more than two, so please let me know if you find something when playing around with this! Also this is not set in stone at all, suggestions, criticism, improvements are very welcome! The discussion is open...