Commit Graph

47 Commits

Author SHA1 Message Date
Andrea Fercia
1d739a0925 Accessibility: Make some Widgets buttons real buttons.
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622

Fixes #31476.

Built from https://develop.svn.wordpress.org/trunk@40480


git-svn-id: http://core.svn.wordpress.org/trunk@40356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-19 21:14:44 +00:00
Pascal Birchler
38c4565187 Media: Ensure Crop Image is always visible.
Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed.

Props karinedo, sagarprajapati, Cybr, mayurk.
Fixes #40152.

Built from https://develop.svn.wordpress.org/trunk@40428


git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 09:31:43 +00:00
Andrea Fercia
ca44bbd134 Buttons: Fix a few .button-link glitches after [40052].
Removes some stray underlines. Explicitly set the button text to be left aligned.

Props Cheffheid, f.staude, Presskopp.

See #34242.
Fixes #35126, #38712.

Built from https://develop.svn.wordpress.org/trunk@40059


git-svn-id: http://core.svn.wordpress.org/trunk@39996 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-14 18:42:46 +00:00
Andrea Fercia
d33301821b Buttons: Improve the .button-link CSS class for link-like buttons.
Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

Built from https://develop.svn.wordpress.org/trunk@40052


git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 16:47:44 +00:00
Drew Jaynes
b1804afeaf Docs: Standardize on 'backward compatibility/compatible' nomenclature in core inline docs.
Also use 'back-compat' in some inline comments where backward compatibility is the subject and shorthand feels more natural.

Note: 'backwards compatibility/compatibile' can also be considered correct, though it's primary seen in regular use in British English.

Props ocean90.
Fixes #36835.

Built from https://develop.svn.wordpress.org/trunk@37431


git-svn-id: http://core.svn.wordpress.org/trunk@37397 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-05-13 18:41:31 +00:00
Ella Iseulde Van Dorpe
f8a66d7bf2 Update TinyMCE and jQuery UI button styles
Part props liljimmi.
Fixes #35571.


Built from https://develop.svn.wordpress.org/trunk@37076


git-svn-id: http://core.svn.wordpress.org/trunk@37043 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-03-24 00:57:28 +00:00
Dominik Schilling
68f16dca18 Buttons: Update colors for disabled buttons.
Props hugobaeta.
Fixes #31459.
Built from https://develop.svn.wordpress.org/trunk@35697


git-svn-id: http://core.svn.wordpress.org/trunk@35661 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-18 22:47:26 +00:00
Dominik Schilling
31ca684bb4 Buttons: Don't transform disabled buttons by 1px on :active.
Fixes #34717.
Built from https://develop.svn.wordpress.org/trunk@35657


git-svn-id: http://core.svn.wordpress.org/trunk@35621 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-17 23:18:29 +00:00
Helen Hou-Sandí
ae9e173082 Buttons: Standardize on .button-link for link-like buttons.
This serves as both a reset and some basic styling. The class name also aligns with parallel components in other popular projects.

props paulwilde for the initial patch.
fixes #34242.

Built from https://develop.svn.wordpress.org/trunk@35636


git-svn-id: http://core.svn.wordpress.org/trunk@35600 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-13 15:47:27 +00:00
Helen Hou-Sandí
831f3d4105 Buttons: More consistent focus styling.
props afercia.
fixes #32915.

Built from https://develop.svn.wordpress.org/trunk@35421


git-svn-id: http://core.svn.wordpress.org/trunk@35385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-28 20:17:27 +00:00
Helen Hou-Sandí
5b40bd827c Buttons: Update styles and colors.
* Aligns with the color standards. See https://make.wordpress.org/design/handbook/foundations/colors/
* Creates a consistent interaction experience between states.
* Improves contrast and accessibility.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.

Built from https://develop.svn.wordpress.org/trunk@34948


git-svn-id: http://core.svn.wordpress.org/trunk@34913 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-08 17:31:24 +00:00
Scott Taylor
72bf48f0b9 In Media microtemplates after [32467], use <button> instead of <a> for several more non-links.
Props afercia.
Fixes #26550.

Built from https://develop.svn.wordpress.org/trunk@32952


git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 05:01:24 +00:00
Helen Hou-Sandí
bfda508c18 Update more instances of default admin blues and grays.
props hugobaeta.
fixes #31234.

Built from https://develop.svn.wordpress.org/trunk@32051


git-svn-id: http://core.svn.wordpress.org/trunk@32030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-05 21:20:27 +00:00
Andrew Ozz
acc6c422e2 PressThis: fix and update buttons styles. Props Michael-Arestad. Fixes #31498.
Built from https://develop.svn.wordpress.org/trunk@31598


git-svn-id: http://core.svn.wordpress.org/trunk@31579 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-03-02 01:18:27 +00:00
Helen Hou-Sandí
1ef1be8d30 Better focus styling for buttons and button groups. props mattheu, avryl, celloexpressions. fixes #27826. see #28267.
Built from https://develop.svn.wordpress.org/trunk@29466


git-svn-id: http://core.svn.wordpress.org/trunk@29244 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-11 18:21:16 +00:00
Andrew Ozz
9662dc9f7b Fix CSS for form elements for Firefox 30+, fixes #28500.
Built from https://develop.svn.wordpress.org/trunk@29366


git-svn-id: http://core.svn.wordpress.org/trunk@29142 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-03 00:34:15 +00:00
Dominik Schilling
3524302a52 Media Grid: Align "Apply" button on small screens.
fixes #28903.
Built from https://develop.svn.wordpress.org/trunk@29307


git-svn-id: http://core.svn.wordpress.org/trunk@29089 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-27 12:15:16 +00:00
Helen Hou-Sandí
aee8de682b Ensure buttons don't get overly tall in responsive views when a browser (oh, Firefox) enforces a line-height on buttons. props azaozz. fixes #27409.
Built from https://develop.svn.wordpress.org/trunk@27727


git-svn-id: http://core.svn.wordpress.org/trunk@27564 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-25 21:23:14 +00:00
Andrew Ozz
05e23f7506 wpLink: stop using UI dialog, restyle the modal, add better responsive behaviour.
Fix UI dialog styling to match the rest of the admin styling.
Props avryl, see #26952
Built from https://develop.svn.wordpress.org/trunk@27494


git-svn-id: http://core.svn.wordpress.org/trunk@27336 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-11 00:04:14 +00:00
Andrew Nacin
6b4cf7e36e Ensure disabled secondary buttons do not change background on hover or active.
props helen.
fixes #26785.

Built from https://develop.svn.wordpress.org/trunk@27282


git-svn-id: http://core.svn.wordpress.org/trunk@27138 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-26 08:07:15 +00:00
Andrew Nacin
11c3695c77 Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes.
We'll be using it for two distinct tasks:
 * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build.
 * Color CSS files will receive prefixes when they are built.

This commit:
 * Adds prefixes we were missing to core CSS.
 * Removes prefixes that we no longer need from core CSS.
 * Removes all prefixes from colors CSS.

props ocean90.
fixes #27078.

Built from https://develop.svn.wordpress.org/trunk@27174


git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 08:30:17 +00:00
Andrew Ozz
864ab9ae56 Autosave:
- Move the 'Saving post' and 'Draft saved at...' strings from autosaveL10n to postL10n as they are used only there.
- Use the custom jQuery events 'before-autosave' and 'after-autosave' to show these messages.
- Separate autosave.suspend() for local and server so local autosaves can continue while server autosaves are suspended.
- Remove the recently added autosave.server.disable() and use autosave.server.suspend() instead.
- Bring back .button.disabled, button-primary.disabled and use .disabled to prevent multiple form submissions.
See #25272.

Built from https://develop.svn.wordpress.org/trunk@27038


git-svn-id: http://core.svn.wordpress.org/trunk@26914 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-27 00:28:13 +00:00
Matt Thomas
9f4f560258 Eliminate the 1px padding adjustment on active buttons because it creates an un-clickable dead zone 1px high and spanning the entire width of the button. Modify the background color of active buttons for better contrast to make the active state more obvious.
See #26700, props johnbillion.


Built from https://develop.svn.wordpress.org/trunk@26993


git-svn-id: http://core.svn.wordpress.org/trunk@26870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-21 21:27:12 +00:00
Matt Thomas
b35e6921bb When a button appears within a paragraph, vertically align it with the text baseline.
Built from https://develop.svn.wordpress.org/trunk@26683


git-svn-id: http://core.svn.wordpress.org/trunk@26573 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-05 18:53:10 +00:00
Matt Thomas
5d06a5e66a Reset responsive button styles in the Customizer, which uses fixed widths and positioning and is otherwise non-responsive. See #21890.
Built from https://develop.svn.wordpress.org/trunk@26628


git-svn-id: http://core.svn.wordpress.org/trunk@26518 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-04 19:44:09 +00:00
Matt Thomas
56a97bdc01 Add basic responsive styles for button-small and button-large, override responsive button-large styles when used in the .interim-login iframe. Fixes #26363.
Built from https://develop.svn.wordpress.org/trunk@26533


git-svn-id: http://core.svn.wordpress.org/trunk@26426 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-02 19:26:09 +00:00
Dion Hulse
8aadb3f31e Add the proper padding-top for button's active states in small screens. Fixes #26346
Built from https://develop.svn.wordpress.org/trunk@26497


git-svn-id: http://core.svn.wordpress.org/trunk@26391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-01 05:42:10 +00:00
Matt Thomas
eb09a427f6 Updating the #wp-auth-check login form to match the new admin design:
* Remove border-radius on the container and add a box shadow
* Style the top bar background to match the new #eee page background
* Replace the close button PNG with a Dashicon
* Remove a no-longer-needed button style override in buttons.css that caused padding to change when clicking the submit button.

See #25858.


Built from https://develop.svn.wordpress.org/trunk@26441


git-svn-id: http://core.svn.wordpress.org/trunk@26339 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-27 22:36:08 +00:00
Matt Thomas
01fdd027f0 Press This fixes:
* Override responsive styles for the Press This window
* Remove the old header logo in Press This
* Add the new Dashicon WP logo

See #25858.


Built from https://develop.svn.wordpress.org/trunk@26433


git-svn-id: http://core.svn.wordpress.org/trunk@26331 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-27 19:16:10 +00:00
Matt Thomas
2fdde46bd8 Unify the style of button-small everywhere we use it, and make sure the edit slug input lines up with its button and label. Fixes #26261, props mattheu.
Built from https://develop.svn.wordpress.org/trunk@26420


git-svn-id: http://core.svn.wordpress.org/trunk@26320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-26 22:10:09 +00:00
Matt Thomas
e86c507db0 Move responsive button styles from wp-admin.css to buttons.css. Fixes #25968, props melchoyce.
Built from https://develop.svn.wordpress.org/trunk@26386


git-svn-id: http://core.svn.wordpress.org/trunk@26286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-26 03:36:09 +00:00
Andrew Nacin
fb69ea9028 Stop using .rtl classes, instead relying on flipping LTR CSS to RTL.
props yoavf.
fixes #24977.

Built from https://develop.svn.wordpress.org/trunk@26243


git-svn-id: http://core.svn.wordpress.org/trunk@26150 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-17 16:18:11 +00:00
Helen Hou-Sandí
69d432410a Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.

see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.

Built from https://develop.svn.wordpress.org/trunk@26072


git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 00:27:10 +00:00
Ryan Boren
d4abd95449 Scope button classes so they can be used on the frontend without interfering with theme styles.
Props helenyhou, koopersmith
fixes #22644


git-svn-id: http://core.svn.wordpress.org/trunk@22948 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 13:40:59 +00:00
Daryl Koopersmith
5a0f702f29 Buttons: Remove unused button arrows and dropdowns. see #21598, #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22707 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 11:26:26 +00:00
Daryl Koopersmith
1d8c49a48c Buttons: Ensure correct disabled submit button state in iOS. props johnbillion, fixes #22490.
git-svn-id: http://core.svn.wordpress.org/trunk@22704 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 03:20:17 +00:00
Andrew Nacin
033506e18c Allow the .hidden class to hide a button. props helenyhou. fixes #22018.
git-svn-id: http://core.svn.wordpress.org/trunk@22440 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-07 21:25:25 +00:00
Andrew Nacin
1a3e4a1207 Don't show a hand cursor when hovering over a disabled button. props sabreuse, fixes #22371.
git-svn-id: http://core.svn.wordpress.org/trunk@22405 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-06 22:30:41 +00:00
Daryl Koopersmith
92823b8635 Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.

This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.

The fine print follows.

----

'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).

----

'''Code'''

`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.

`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.

`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.

`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).

`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*

`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.

`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.

`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).

`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.

`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.

`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.

`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.

`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.

----

see #21390.



git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 22:59:12 +00:00
Andrew Ozz
efbc9d2336 Buttons:
- Update the install/initial configuration/repair screens buttons, props DrewAPicture
- Fix the welcome screen buttons and fine-tune the buttons css, props lessbloat

fixes #21598


git-svn-id: http://core.svn.wordpress.org/trunk@22314 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-26 19:40:39 +00:00
Andrew Ozz
239650f87a Fix the buttons in IE, make them better in IE7, remove the default padding in Firefox, make all .button <a> and <input> look the same, fixes #21598
git-svn-id: http://core.svn.wordpress.org/trunk@22289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-24 01:33:59 +00:00
Andrew Ozz
8c4d96b05a Buttons: slightly bolder :focus styles, make the "Log In" button '.button-large', props lessbloat, see #21598
git-svn-id: http://core.svn.wordpress.org/trunk@22288 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-24 01:27:56 +00:00
Daryl Koopersmith
74cea87b2c Add attachment display settings to the media modal.
* Add a media view for button groups.
* Add button dropdown containers.
* Add a dropdown property to the button media model.

fixes #22206, #21814, see #21390, #21813, #21598.


git-svn-id: http://core.svn.wordpress.org/trunk@22247 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 19:25:17 +00:00
Daryl Koopersmith
439b77aab9 Add a down arrow button. see #21598, #21390, #21813.
git-svn-id: http://core.svn.wordpress.org/trunk@22245 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 15:42:34 +00:00
Daryl Koopersmith
597cd8620d Add button groups. see #21598, #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22242 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 13:34:01 +00:00
Daryl Koopersmith
5fee0949ac Revise and combine button selectors.
* Simplifies button selectors. Maintains backwards compatibility for several classes and makes creating new button styles considerably easier.
* Adds buttons documentation.
* Raw input submit/reset/button types now use default browser styles (instead of half-styled borders that did not look like buttons).
* Moves basic button color standardization to the beginning of wp-admin.

see #21598, #22197.



git-svn-id: http://core.svn.wordpress.org/trunk@22239 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-15 21:25:25 +00:00
Daryl Koopersmith
e9503f9086 Consolidate buttons CSS into a single file.
Adds `wp-includes/css/buttons.css` to consolidate buttons files and make them available in a modular fashion. Buttons are included automatically with the `colors` styles, and can be included independently by running:

	`wp_enqueue_style('buttons');`

fixes #22197, see #21598.


git-svn-id: http://core.svn.wordpress.org/trunk@22236 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-15 14:55:29 +00:00