WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 7 months ago

#28753 closed enhancement (maybelater)

Use reusable consistent CSS for the theme and plugin uploader

Reported by: paulwilde Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: Upload Keywords: ui-feedback needs-refresh needs-screenshots
Focuses: ui, javascript Cc:

Description

The theme uploader introduced a new look in 3.8. This patch gives the file upload container a more generic reusable class and I've added it to plugin upload for consistency between the views.

Attachments (15)

plugin-upload-file.png (286.3 KB) - added by paulwilde 5 years ago.
28753.diff (6.3 KB) - added by paulwilde 5 years ago.
28753.2.diff (14.7 KB) - added by paulwilde 5 years ago.
28753.3.diff (21.6 KB) - added by paulwilde 5 years ago.
28753.4.diff (22.1 KB) - added by michalzuber 5 years ago.
Rewrite of 28753.3.diff, didn't move plugin-install.js to plugin.js
28753.5.diff (22.2 KB) - added by michalzuber 5 years ago.
Fixed Uncaught ReferenceError: _wpPluginSettings is not defined plugin-install.js?ver=4.0-beta1-src:10
28753.6.diff (3.1 KB) - added by michalzuber 5 years ago.
Changed only the design of Install plugins for current trunk
drawer-grouping.diff (2.9 KB) - added by paulwilde 5 years ago.
drawer-grouping-2.diff (2.9 KB) - added by paulwilde 5 years ago.
theme-groups-before.png (518.3 KB) - added by paulwilde 5 years ago.
theme-groups-after.png (518.4 KB) - added by paulwilde 5 years ago.
upload.diff (9.1 KB) - added by paulwilde 5 years ago.
28753-no-results.patch (998 bytes) - added by ocean90 5 years ago.
28753-upload-container.patch (11.4 KB) - added by ocean90 5 years ago.
28753.patch (11.4 KB) - added by ocean90 5 years ago.
Fixes browse link on plugin uploader

Download all attachments as: .zip

Change History (47)

@paulwilde
5 years ago

#1 @paulwilde
5 years ago

  • Keywords has-patch added

#2 @melchoyce
5 years ago

Looks good! Related, we should think about making the header area consistent between theme and plugin uploading as well: https://cloudup.com/ilT84tTVWSv

#3 @paulwilde
5 years ago

Indeed, was thinking the same. The Media Library could also have it too with it's multi-upload specific UI.

Last edited 5 years ago by paulwilde (previous) (diff)

@paulwilde
5 years ago

@paulwilde
5 years ago

#4 @paulwilde
5 years ago

  • Keywords dev-feedback added

28753.3.diff does the following:

  • Use the same consistent styling between the theme/plugin uploaders.
  • Removes the "Upload" tab and move it beside the title. Clicking the title button will toggle the upload frame on any of the tabs you are currently viewing.
  • Removes plugin-install.js in favour of plugin.js.
  • plugin.js includes the code previously in plugin-install.js and the Backbone to handle routing/toggling the upload button. I've never used backbone before so this code might be a little off. Ideally it would be nice if there was a base controller that theme.js and plugin.js could extend so that both can share the same functionality without having duplicated code.
Last edited 5 years ago by paulwilde (previous) (diff)

#5 @paulwilde
5 years ago

  • Focuses javascript added

#6 @michalzuber
5 years ago

Nice work paulwilde. Would be good to unify the Media uploaders, too. Currently they have different design

http://i.imgur.com/ZIAtJ5b.png
http://i.imgur.com/MkaYyhu.png

This ticket was mentioned in IRC in #wordpress-dev by michalzuber. View the logs.


5 years ago

#8 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.0

@michalzuber
5 years ago

Rewrite of 28753.3.diff, didn't move plugin-install.js to plugin.js

#9 @michalzuber
5 years ago

Rewrote paulwilde's diff, thank you paulwilde.
Results http://i.imgur.com/Y8LqW8s.png & http://i.imgur.com/P6HziVc.png

@michalzuber
5 years ago

Fixed Uncaught ReferenceError: _wpPluginSettings is not defined plugin-install.js?ver=4.0-beta1-src:10

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

#11 follow-up: @helen
5 years ago

  • Keywords needs-refresh added; dev-feedback removed

We can do the styling part from the first patch - no Backbone explorations right now, please. I also don't love that we do a display: block on something with "hidden" in the class name. Would rather toggle something else.

@michalzuber
5 years ago

Changed only the design of Install plugins for current trunk

#12 in reply to: ↑ 11 ; follow-up: @michalzuber
5 years ago

  • Keywords needs-refresh removed

Replying to helen:

We can do the styling part from the first patch - no Backbone explorations right now, please. I also don't love that we do a display: block on something with "hidden" in the class name. Would rather toggle something else.

Updated 28753.6.diff.
Helen I need feedback about adding filter bar above the upload form in Add themes http://i.imgur.com/Y689NpO.png as Install Plugins have http://i.imgur.com/IwydnwA.png

#13 in reply to: ↑ 12 @helen
5 years ago

Replying to michalzuber:

I need feedback about adding filter bar above the upload form in Add themes

No opinion right now. Don't really want to touch it for 4.0.

Patch looks incomplete - doesn't remove the original CSS, doesn't alter markup for themes. I just don't want to dabble in Backbone for plugins. Also note that we put a newline above each ruleset in CSS - there are some inconsistencies, particularly in themes.css, so I can see why they get left out in people's patches sometimes.

#14 @paulwilde
5 years ago

drawer-grouping-2.diff:

  • Renames 'wp-filter-group-wide' to 'wp-filter-group-2-5' to be more understandable as a grid column. Also added 1-5, 3-5 and 4-5.
  • Utilises calc to ensure that the groups have consistent spacing rather than having a bigger gap on the right side.

@paulwilde
5 years ago

#15 @paulwilde
5 years ago

Opps. My above patch (drawer-grouping-2.diff) was meant for #28794. I've gone ahead of reposted it there.

upload.diff does the following different from my previous patch:

  • Removes all the Backbone stuff.
  • Uses .wp-upload-container-toggle instead of .wp-upload-container-hidden for the Themes uploader.

This ticket was mentioned in IRC in #wordpress-dev by michalzuber. View the logs.


5 years ago

#19 @ocean90
5 years ago

In 29359:

Plugin install: Improve styling of the no results message.

see #28753.

#20 @ocean90
5 years ago

  • Keywords commit added

28753-upload-container.patch is build on upload.diff. Additionally it hides .wp-filter on plugin upload screen and switches .add-new-h2 buttons, same as for themes.

#21 @helen
5 years ago

  • Keywords commit removed

Latest patch causes some weirdness on the plugins upload screen. Also, I'm really not feeling the look of it. I know it comes from themes, but that doesn't make it an automatic okay to adopt across the admin.

@ocean90
5 years ago

Fixes browse link on plugin uploader

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.


5 years ago

#23 @ocean90
5 years ago

  • Keywords needs-patch punt added; has-patch removed

#24 @helen
5 years ago

  • Milestone changed from 4.0 to Future Release

Punting. Really not loving the way the themes one is styled - we need to make a unified decision, not just unify around something. Design attention would be lovely.

#25 @ocean90
5 years ago

  • Keywords punt removed

Related: [29634] – "Use the same nice design for the plugin upload screen as the theme upload screen."

#26 @chriscct7
4 years ago

  • Keywords ui-feedback added

#27 @afercia
4 years ago

Related: #35429.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#29 @melchoyce
2 years ago

  • Keywords needs-refresh needs-screenshots added; needs-patch removed

Can we get some screenshots of the latest patch on this?

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


18 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 months ago

#32 @karmatosed
7 months ago

  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from new to closed

This was talked about in this week's design triage meeting. For now, as screnshots were asked and none provided we are closing this. If we have screenshots then feedback can be given and it reopened.

Note: See TracTickets for help on using tickets.