2012-11-12 00:57:12 -05:00
|
|
|
/**
|
|
|
|
|
* Base Styles
|
|
|
|
|
*/
|
2014-01-09 11:36:12 -05:00
|
|
|
.media-modal * {
|
2014-02-13 03:30:17 -05:00
|
|
|
box-sizing: content-box;
|
2014-01-09 11:36:12 -05:00
|
|
|
}
|
|
|
|
|
|
2015-11-18 18:36:28 -05:00
|
|
|
.media-modal input,
|
|
|
|
|
.media-modal select,
|
|
|
|
|
.media-modal textarea {
|
|
|
|
|
box-sizing: border-box;
|
2014-09-10 14:09:16 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-21 13:37:52 -05:00
|
|
|
.media-modal,
|
|
|
|
|
.media-frame {
|
2016-07-26 12:39:30 -04:00
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 12px;
|
2015-04-07 23:19:28 -04:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-11-21 13:37:52 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-modal legend {
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
.media-modal label {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-modal .legend-inline {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translate(-100%, 50%);
|
|
|
|
|
margin-left: -1%;
|
|
|
|
|
line-height: 1.2;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame a {
|
2012-12-05 14:15:40 -05:00
|
|
|
border-bottom: none;
|
2015-10-21 12:18:26 -04:00
|
|
|
color: #0073aa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame a:hover,
|
|
|
|
|
.media-frame a:active {
|
2020-07-07 06:11:05 -04:00
|
|
|
color: #006799;
|
2012-11-21 13:37:52 -05:00
|
|
|
}
|
|
|
|
|
|
2015-10-21 12:18:26 -04:00
|
|
|
.media-frame a:focus {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
2019-03-04 17:02:52 -05:00
|
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
2015-10-21 12:18:26 -04:00
|
|
|
color: #124964;
|
2019-01-10 11:47:50 -05:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 1px solid transparent;
|
2012-11-21 13:00:18 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame a.button {
|
2015-04-05 17:20:27 -04:00
|
|
|
color: #32373c;
|
2012-11-27 20:45:06 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame a.button:hover {
|
2015-04-05 17:20:27 -04:00
|
|
|
color: #23282d;
|
2012-11-27 20:45:06 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame a.button-primary,
|
|
|
|
|
.media-frame a.button-primary:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 13:24:59 -04:00
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame textarea {
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame select,
|
|
|
|
|
.wp-admin .media-frame select {
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
min-height: 30px;
|
2019-09-30 13:24:59 -04:00
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame input[type="text"],
|
|
|
|
|
.media-frame input[type="password"],
|
2019-09-30 13:24:59 -04:00
|
|
|
.media-frame input[type="color"],
|
|
|
|
|
.media-frame input[type="date"],
|
|
|
|
|
.media-frame input[type="datetime"],
|
|
|
|
|
.media-frame input[type="datetime-local"],
|
|
|
|
|
.media-frame input[type="email"],
|
|
|
|
|
.media-frame input[type="month"],
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame input[type="number"],
|
|
|
|
|
.media-frame input[type="search"],
|
2019-09-30 13:24:59 -04:00
|
|
|
.media-frame input[type="tel"],
|
|
|
|
|
.media-frame input[type="time"],
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame input[type="url"],
|
2019-09-30 13:24:59 -04:00
|
|
|
.media-frame input[type="week"],
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame textarea,
|
|
|
|
|
.media-frame select {
|
2019-09-23 11:49:57 -04:00
|
|
|
box-shadow: 0 0 0 transparent;
|
|
|
|
|
border-radius: 4px;
|
2019-09-30 13:24:59 -04:00
|
|
|
border: 1px solid #7e8993;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
color: #32373c;
|
2016-07-26 12:39:30 -04:00
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
2019-09-30 13:24:59 -04:00
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame input[type="text"],
|
|
|
|
|
.media-frame input[type="password"],
|
|
|
|
|
.media-frame input[type="date"],
|
|
|
|
|
.media-frame input[type="datetime"],
|
|
|
|
|
.media-frame input[type="datetime-local"],
|
|
|
|
|
.media-frame input[type="email"],
|
|
|
|
|
.media-frame input[type="month"],
|
|
|
|
|
.media-frame input[type="number"],
|
|
|
|
|
.media-frame input[type="search"],
|
|
|
|
|
.media-frame input[type="tel"],
|
|
|
|
|
.media-frame input[type="time"],
|
|
|
|
|
.media-frame input[type="url"],
|
|
|
|
|
.media-frame input[type="week"] {
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
/* inherits font size 13px */
|
|
|
|
|
line-height: 2.15384615; /* 28px */
|
2012-11-21 13:00:18 -05:00
|
|
|
}
|
|
|
|
|
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
/* Search field in the Media Library toolbar */
|
|
|
|
|
.media-frame.mode-grid .wp-filter input[type="search"] {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 2;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-25 17:26:16 -04:00
|
|
|
.media-frame input[type="text"]:focus,
|
|
|
|
|
.media-frame input[type="password"]:focus,
|
|
|
|
|
.media-frame input[type="number"]:focus,
|
|
|
|
|
.media-frame input[type="search"]:focus,
|
|
|
|
|
.media-frame input[type="email"]:focus,
|
|
|
|
|
.media-frame input[type="url"]:focus,
|
|
|
|
|
.media-frame textarea:focus,
|
|
|
|
|
.media-frame select:focus {
|
2019-09-23 11:49:57 -04:00
|
|
|
border-color: #007cba;
|
|
|
|
|
box-shadow: 0 0 0 1px #007cba;
|
|
|
|
|
outline: 2px solid transparent;
|
2014-08-25 17:26:16 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 13:33:51 -05:00
|
|
|
.media-frame input:disabled,
|
|
|
|
|
.media-frame textarea:disabled,
|
|
|
|
|
.media-frame input[readonly],
|
|
|
|
|
.media-frame textarea[readonly] {
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame input[type="search"] {
|
2012-11-21 13:00:18 -05:00
|
|
|
-webkit-appearance: textfield;
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-22 18:29:26 -05:00
|
|
|
.media-frame ::-webkit-input-placeholder {
|
|
|
|
|
color: #72777c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame ::-moz-placeholder {
|
|
|
|
|
color: #72777c;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame :-ms-input-placeholder {
|
|
|
|
|
color: #72777c;
|
2012-12-03 00:17:23 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
/*
|
|
|
|
|
* In some cases there's the need of higher specificity,
|
|
|
|
|
* for example higher than `.media-embed .setting`.
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .hidden,
|
|
|
|
|
.media-frame .setting.hidden {
|
2014-01-28 16:17:12 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-11-14 14:28:22 -05:00
|
|
|
/*!
|
2015-03-11 11:12:27 -04:00
|
|
|
* jQuery UI Draggable/Sortable 1.11.4
|
2014-11-14 14:28:22 -05:00
|
|
|
* http://jqueryui.com
|
|
|
|
|
*
|
2015-02-27 05:21:26 -05:00
|
|
|
* Copyright jQuery Foundation and other contributors
|
2014-11-14 14:28:22 -05:00
|
|
|
* Released under the MIT license.
|
|
|
|
|
* http://jquery.org/license
|
|
|
|
|
*/
|
|
|
|
|
.ui-draggable-handle,
|
|
|
|
|
.ui-sortable-handle {
|
2015-02-27 05:21:26 -05:00
|
|
|
touch-action: none;
|
2012-11-27 10:00:00 -05:00
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
|
* Modal
|
|
|
|
|
*/
|
|
|
|
|
.media-modal {
|
|
|
|
|
position: fixed;
|
2012-12-03 20:26:03 -05:00
|
|
|
top: 30px;
|
|
|
|
|
left: 30px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 30px;
|
2012-11-27 14:09:00 -05:00
|
|
|
z-index: 160000;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2013-12-03 15:54:11 -05:00
|
|
|
.wp-customizer .media-modal {
|
|
|
|
|
z-index: 560000;
|
|
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
.media-modal-backdrop {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-12-04 19:40:13 -05:00
|
|
|
min-height: 360px;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
background: #000;
|
2012-12-03 20:26:03 -05:00
|
|
|
opacity: 0.7;
|
2012-11-27 14:09:00 -05:00
|
|
|
z-index: 159900;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2013-12-03 15:54:11 -05:00
|
|
|
.wp-customizer .media-modal-backdrop {
|
|
|
|
|
z-index: 559900;
|
|
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
.media-modal-close {
|
2012-11-30 21:53:53 -05:00
|
|
|
position: absolute;
|
2015-06-26 01:01:24 -04:00
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
2017-03-31 12:51:45 -04:00
|
|
|
margin: 0;
|
2015-06-26 01:01:24 -04:00
|
|
|
padding: 0;
|
2017-03-31 12:51:45 -04:00
|
|
|
border: 1px solid transparent;
|
|
|
|
|
background: none;
|
|
|
|
|
color: #666;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 1000;
|
2017-03-31 12:51:45 -04:00
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
2014-08-02 18:02:19 -04:00
|
|
|
transition: color .1s ease-in-out, background .1s ease-in-out;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
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-09 19:27:10 -05:00
|
|
|
|
2017-03-31 12:51:45 -04:00
|
|
|
.media-modal-close:hover,
|
|
|
|
|
.media-modal-close:active {
|
2020-07-07 06:11:05 -04:00
|
|
|
color: #006799;
|
2017-02-09 11:47:44 -05:00
|
|
|
}
|
|
|
|
|
|
2017-03-31 12:51:45 -04:00
|
|
|
.media-modal-close:focus {
|
2020-07-07 06:11:05 -04:00
|
|
|
color: #006799;
|
2017-03-31 12:51:45 -04:00
|
|
|
border-color: #5b9dd9;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
2019-01-10 11:47:50 -05:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
2014-08-19 16:38:16 -04:00
|
|
|
}
|
|
|
|
|
|
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-09 19:27:10 -05:00
|
|
|
.media-modal-close span.media-modal-icon {
|
|
|
|
|
background-image: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-08 15:01:19 -04:00
|
|
|
.media-modal-close .media-modal-icon:before {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "\f158";
|
2015-09-05 15:57:25 -04:00
|
|
|
font: normal 20px/1 dashicons;
|
2020-10-25 22:25:09 -04:00
|
|
|
speak: never;
|
2014-08-08 15:01:19 -04:00
|
|
|
vertical-align: middle;
|
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-09 19:27:10 -05:00
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
2012-10-10 22:54:19 -04:00
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
.media-modal-content {
|
|
|
|
|
position: absolute;
|
2012-10-10 05:40:22 -04:00
|
|
|
top: 0;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
overflow: auto;
|
2012-12-04 19:40:13 -05:00
|
|
|
min-height: 300px;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #fcfcfc;
|
|
|
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2015-11-04 18:43:26 -05:00
|
|
|
.media-modal-content .media-frame select.attachment-filters {
|
2019-10-03 08:10:57 -04:00
|
|
|
margin-top: 32px;
|
2015-11-04 18:43:26 -05:00
|
|
|
margin-right: 2%;
|
|
|
|
|
width: 42%;
|
|
|
|
|
width: calc(48% - 12px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal-content .attachments-browser .search {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
/* higher specificity */
|
|
|
|
|
.wp-core-ui .media-modal-icon {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-image: url(../images/uploader-icons.png);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
/**
|
|
|
|
|
* Toolbar
|
|
|
|
|
*/
|
|
|
|
|
.media-toolbar {
|
2012-10-29 02:56:23 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
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 17:59:12 -05:00
|
|
|
left: 0;
|
2012-10-29 02:56:23 -04:00
|
|
|
right: 0;
|
|
|
|
|
z-index: 100;
|
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 17:59:12 -05:00
|
|
|
height: 60px;
|
|
|
|
|
padding: 0 16px;
|
2016-03-09 14:51:26 -05:00
|
|
|
border: 0 solid #ddd;
|
2012-12-05 05:15:42 -05:00
|
|
|
overflow: hidden;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2017-04-14 05:31:43 -04:00
|
|
|
.media-frame-toolbar .media-toolbar {
|
2019-06-13 10:12:52 -04:00
|
|
|
top: auto;
|
2020-02-11 11:32:06 -05:00
|
|
|
bottom: -47px;
|
2017-04-14 05:31:43 -04:00
|
|
|
height: auto;
|
2019-06-13 10:12:52 -04:00
|
|
|
overflow: visible;
|
2017-04-14 05:31:43 -04:00
|
|
|
border-top: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
.media-toolbar-primary {
|
|
|
|
|
float: right;
|
2012-12-05 05:15:42 -05:00
|
|
|
height: 100%;
|
2019-10-07 08:43:03 -04:00
|
|
|
position: relative;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-toolbar-secondary {
|
|
|
|
|
float: left;
|
2012-12-05 05:15:42 -05:00
|
|
|
height: 100%;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
.media-toolbar-primary > .media-button,
|
|
|
|
|
.media-toolbar-primary > .media-button-group {
|
|
|
|
|
margin-left: 10px;
|
2012-09-06 03:46:15 -04:00
|
|
|
float: left;
|
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 17:59:12 -05:00
|
|
|
margin-top: 15px;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
.media-toolbar-secondary > .media-button,
|
|
|
|
|
.media-toolbar-secondary > .media-button-group {
|
2012-09-06 03:46:15 -04:00
|
|
|
margin-right: 10px;
|
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 17:59:12 -05:00
|
|
|
margin-top: 15px;
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sidebar
|
|
|
|
|
*/
|
|
|
|
|
.media-sidebar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
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 17:59:12 -05:00
|
|
|
right: 0;
|
2012-11-22 01:30:25 -05:00
|
|
|
bottom: 0;
|
2012-11-07 15:14:41 -05:00
|
|
|
width: 267px;
|
2020-02-11 11:32:06 -05:00
|
|
|
padding: 0 16px;
|
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 17:59:12 -05:00
|
|
|
z-index: 75;
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-left: 1px solid #ddd;
|
2012-11-10 14:10:04 -05:00
|
|
|
overflow: auto;
|
2012-11-30 20:44:15 -05:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
|
|
|
|
|
2020-02-11 11:32:06 -05:00
|
|
|
/*
|
|
|
|
|
* Implementation of bottom padding in overflow content differs across browsers.
|
|
|
|
|
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
|
|
|
|
|
*/
|
|
|
|
|
.media-sidebar::after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: flex;
|
|
|
|
|
clear: both;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
.hide-toolbar .media-sidebar {
|
|
|
|
|
bottom: 0;
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
|
|
|
|
|
2015-10-28 19:08:24 -04:00
|
|
|
.media-sidebar h2,
|
|
|
|
|
.image-details h2 {
|
2012-11-10 13:25:04 -05:00
|
|
|
position: relative;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
2012-11-10 13:25:04 -05:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 12px;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-10 13:25:04 -05:00
|
|
|
margin: 24px 0 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting {
|
2012-11-10 13:25:04 -05:00
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
width: 100%;
|
2019-06-07 16:45:02 -04:00
|
|
|
margin: 0 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .collection-settings .setting {
|
2012-11-10 13:25:04 -05:00
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting.has-description,
|
|
|
|
|
.attachment-details .setting.has-description {
|
|
|
|
|
margin-bottom: 5px;
|
2012-12-04 23:06:45 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting .link-to-custom {
|
2014-07-04 19:29:16 -04:00
|
|
|
margin: 3px 2px 0;
|
2012-12-05 14:15:40 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.attachment-details .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.media-sidebar .setting .name,
|
|
|
|
|
.media-sidebar .setting .value,
|
|
|
|
|
.attachment-details .setting .name {
|
2012-11-10 14:10:04 -05:00
|
|
|
min-width: 30%;
|
2012-11-10 15:36:46 -05:00
|
|
|
margin-right: 4%;
|
2012-11-21 13:00:18 -05:00
|
|
|
font-size: 12px;
|
2014-06-05 18:01:18 -04:00
|
|
|
text-align: right;
|
2014-11-16 14:01:22 -05:00
|
|
|
word-wrap: break-word;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting .name {
|
|
|
|
|
max-width: 80px;
|
2012-11-10 20:26:42 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting .value {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting select {
|
2012-11-20 17:51:35 -05:00
|
|
|
max-width: 65%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting input[type="checkbox"],
|
|
|
|
|
.media-sidebar .field input[type="checkbox"],
|
|
|
|
|
.media-sidebar .setting input[type="radio"],
|
|
|
|
|
.media-sidebar .field input[type="radio"],
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting input[type="checkbox"],
|
|
|
|
|
.attachment-details .field input[type="checkbox"],
|
|
|
|
|
.attachment-details .setting input[type="radio"],
|
|
|
|
|
.attachment-details .field input[type="radio"] {
|
2012-12-04 13:51:27 -05:00
|
|
|
float: none;
|
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-09 19:27:10 -05:00
|
|
|
margin: 8px 3px 0;
|
2012-12-04 13:51:27 -05:00
|
|
|
padding: 0;
|
2012-12-03 00:32:25 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.attachment-details .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.media-sidebar .setting .name,
|
|
|
|
|
.media-sidebar .setting .value,
|
|
|
|
|
.media-sidebar .checkbox-label-inline,
|
|
|
|
|
.attachment-details .setting .name,
|
|
|
|
|
.attachment-details .setting .value,
|
2012-11-10 20:26:42 -05:00
|
|
|
.compat-item label span {
|
|
|
|
|
float: left;
|
|
|
|
|
min-height: 22px;
|
2012-11-10 13:25:04 -05:00
|
|
|
padding-top: 8px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.33333333;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 400;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-10 13:25:04 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .checkbox-label-inline {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
.media-sidebar .copy-to-clipboard-container,
|
|
|
|
|
.attachment-details .copy-to-clipboard-container {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-left: calc( 35% - 1px );
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Needs high specificity. */
|
|
|
|
|
.attachment-details .attachment-info .copy-to-clipboard-container {
|
|
|
|
|
float: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .copy-to-clipboard-container .success,
|
|
|
|
|
.attachment-details .copy-to-clipboard-container .success {
|
|
|
|
|
padding: 0;
|
|
|
|
|
min-height: 0;
|
2020-09-27 16:48:05 -04:00
|
|
|
line-height: 2.18181818;
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
text-align: left;
|
2020-09-27 16:48:05 -04:00
|
|
|
color: #40860a;
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
.compat-item label span {
|
2014-06-05 18:01:18 -04:00
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting input[type="text"],
|
|
|
|
|
.media-sidebar .setting input[type="password"],
|
|
|
|
|
.media-sidebar .setting input[type="email"],
|
|
|
|
|
.media-sidebar .setting input[type="number"],
|
|
|
|
|
.media-sidebar .setting input[type="search"],
|
|
|
|
|
.media-sidebar .setting input[type="tel"],
|
|
|
|
|
.media-sidebar .setting input[type="url"],
|
|
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.media-sidebar .setting .value,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting input[type="text"],
|
|
|
|
|
.attachment-details .setting input[type="password"],
|
|
|
|
|
.attachment-details .setting input[type="email"],
|
|
|
|
|
.attachment-details .setting input[type="number"],
|
|
|
|
|
.attachment-details .setting input[type="search"],
|
|
|
|
|
.attachment-details .setting input[type="tel"],
|
|
|
|
|
.attachment-details .setting input[type="url"],
|
|
|
|
|
.attachment-details .setting textarea,
|
2019-03-15 06:43:51 -04:00
|
|
|
.attachment-details .setting .value,
|
|
|
|
|
.attachment-details .setting + .description {
|
2014-08-15 00:10:16 -04:00
|
|
|
box-sizing: border-box;
|
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-09 19:27:10 -05:00
|
|
|
margin: 1px;
|
2012-11-10 20:26:42 -05:00
|
|
|
width: 65%;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting .value,
|
2019-03-15 06:43:51 -04:00
|
|
|
.attachment-details .setting .value,
|
|
|
|
|
.attachment-details .setting + .description {
|
2014-07-04 19:29:16 -04:00
|
|
|
margin: 0 1px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-15 06:43:51 -04:00
|
|
|
.attachment-details .setting + .description {
|
2019-04-18 17:43:52 -04:00
|
|
|
clear: both;
|
2019-03-15 06:43:51 -04:00
|
|
|
font-size: 12px;
|
|
|
|
|
font-style: normal;
|
2019-06-07 16:45:02 -04:00
|
|
|
margin-bottom: 10px;
|
2019-03-15 06:43:51 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting textarea,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting textarea,
|
2012-11-10 20:26:42 -05:00
|
|
|
.compat-item .field textarea {
|
2012-11-10 13:25:04 -05:00
|
|
|
height: 62px;
|
2012-11-19 21:59:31 -05:00
|
|
|
resize: vertical;
|
2012-11-10 13:25:04 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 20:26:42 -05:00
|
|
|
.compat-item {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compat-item table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
table-layout: fixed;
|
|
|
|
|
border-spacing: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compat-item tr {
|
|
|
|
|
padding: 2px 0;
|
|
|
|
|
display: block;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compat-item .label,
|
|
|
|
|
.compat-item .field {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compat-item .label {
|
|
|
|
|
min-width: 30%;
|
|
|
|
|
margin-right: 4%;
|
|
|
|
|
float: left;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
2012-11-15 18:58:33 -05:00
|
|
|
|
2012-11-10 20:26:42 -05:00
|
|
|
.compat-item .label span {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compat-item .field {
|
|
|
|
|
float: right;
|
2015-01-03 15:47:23 -05:00
|
|
|
width: 65%;
|
|
|
|
|
margin: 1px;
|
2012-11-10 20:26:42 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-02 15:53:17 -04:00
|
|
|
.compat-item .field input[type="text"],
|
|
|
|
|
.compat-item .field input[type="password"],
|
|
|
|
|
.compat-item .field input[type="email"],
|
|
|
|
|
.compat-item .field input[type="number"],
|
|
|
|
|
.compat-item .field input[type="search"],
|
|
|
|
|
.compat-item .field input[type="tel"],
|
2015-01-03 15:47:23 -05:00
|
|
|
.compat-item .field input[type="url"],
|
|
|
|
|
.compat-item .field textarea {
|
2012-11-10 20:26:42 -05:00
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
2015-01-03 15:47:23 -05:00
|
|
|
box-sizing: border-box;
|
2012-11-10 20:26:42 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-17 22:26:16 -04:00
|
|
|
.sidebar-for-errors .attachment-details,
|
|
|
|
|
.sidebar-for-errors .compat-item,
|
2014-08-21 00:38:17 -04:00
|
|
|
.sidebar-for-errors .media-sidebar .media-progress-bar,
|
2014-08-17 22:26:16 -04:00
|
|
|
.sidebar-for-errors .upload-details {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2012-11-10 13:25:04 -05:00
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
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 17:59:12 -05:00
|
|
|
* Menu
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
*/
|
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 17:59:12 -05:00
|
|
|
.media-menu {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
2012-12-03 20:26:03 -05:00
|
|
|
right: 0;
|
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 17:59:12 -05:00
|
|
|
bottom: 0;
|
|
|
|
|
margin: 0;
|
2019-06-27 08:33:56 -04:00
|
|
|
padding: 50px 0 10px;
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #f3f3f3;
|
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-09 19:27:10 -05:00
|
|
|
border-right-width: 1px;
|
|
|
|
|
border-right-style: solid;
|
2014-01-09 11:36:12 -05:00
|
|
|
border-right-color: #ccc;
|
2012-11-14 21:51:31 -05:00
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-menu .media-menu-item {
|
2012-12-03 20:26:03 -05:00
|
|
|
display: block;
|
2019-09-30 15:37:58 -04:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
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 17:59:12 -05:00
|
|
|
position: relative;
|
2019-09-30 15:37:58 -04:00
|
|
|
border: 0;
|
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 17:59:12 -05:00
|
|
|
margin: 0;
|
2019-09-30 15:37:58 -04:00
|
|
|
padding: 8px 20px;
|
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 17:59:12 -05:00
|
|
|
font-size: 14px;
|
2019-09-30 15:37:58 -04:00
|
|
|
line-height: 1.28571428;
|
|
|
|
|
background: transparent;
|
2015-04-05 17:20:27 -04:00
|
|
|
color: #0073aa;
|
2019-09-30 15:37:58 -04:00
|
|
|
text-align: left;
|
2012-12-03 20:26:03 -05:00
|
|
|
text-decoration: none;
|
2019-09-30 15:37:58 -04:00
|
|
|
cursor: pointer;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-menu .media-menu-item:hover {
|
2019-03-04 17:02:52 -05:00
|
|
|
background: rgba(0, 0, 0, 0.04);
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-menu .media-menu-item:active {
|
|
|
|
|
color: #0073aa;
|
2012-12-03 20:26:03 -05:00
|
|
|
outline: none;
|
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 17:59:12 -05:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
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 17:59:12 -05:00
|
|
|
.media-menu .active,
|
|
|
|
|
.media-menu .active:hover {
|
2015-04-05 17:20:27 -04:00
|
|
|
color: #23282d;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
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 17:59:12 -05:00
|
|
|
}
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-menu .media-menu-item:focus {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
|
|
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
|
|
|
color: #124964;
|
|
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 1px solid transparent;
|
|
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
.media-menu .separator {
|
|
|
|
|
height: 0;
|
|
|
|
|
margin: 12px 20px;
|
|
|
|
|
padding: 0;
|
2014-01-09 11:36:12 -05:00
|
|
|
border-top: 1px solid #ddd;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
/**
|
|
|
|
|
* Menu
|
|
|
|
|
*/
|
|
|
|
|
.media-router {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 6px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
clear: both;
|
2014-02-06 01:25:18 -05:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-router .media-menu-item {
|
2012-12-03 20:26:03 -05:00
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
2019-09-30 15:37:58 -04:00
|
|
|
border: 0;
|
2012-12-03 20:26:03 -05:00
|
|
|
margin: 0;
|
2019-09-30 15:37:58 -04:00
|
|
|
padding: 8px 10px 9px;
|
2012-12-03 20:26:03 -05:00
|
|
|
height: 18px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.28571428;
|
2012-12-03 20:26:03 -05:00
|
|
|
font-size: 14px;
|
|
|
|
|
text-decoration: none;
|
2019-09-30 15:37:58 -04:00
|
|
|
background: transparent;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: none;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-router .media-menu-item:last-child {
|
2012-12-03 20:26:03 -05:00
|
|
|
border-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-router .media-menu-item:hover,
|
|
|
|
|
.media-router .media-menu-item:active {
|
|
|
|
|
color: #0073aa;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-router .active,
|
|
|
|
|
.media-router .active:hover {
|
2019-09-30 15:37:58 -04:00
|
|
|
color: #23282d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-router .media-menu-item:focus {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
|
|
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
|
|
|
color: #124964;
|
|
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 1px solid transparent;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
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-09 19:27:10 -05:00
|
|
|
.media-router .active,
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-router .media-menu-item.active:last-child {
|
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-09 19:27:10 -05:00
|
|
|
margin: -1px -1px 0;
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-bottom: none;
|
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-09 19:27:10 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
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-09 19:27:10 -05:00
|
|
|
.media-router .active:after {
|
|
|
|
|
display: none;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
/**
|
|
|
|
|
* Frame
|
|
|
|
|
*/
|
|
|
|
|
.media-frame {
|
|
|
|
|
overflow: hidden;
|
2012-12-02 21:38:10 -05:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-frame-menu {
|
2012-09-06 03:46:15 -04:00
|
|
|
position: absolute;
|
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 17:59:12 -05:00
|
|
|
top: 0;
|
2012-12-03 20:26:03 -05:00
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
2014-03-06 21:46:14 -05:00
|
|
|
width: 200px;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 150;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 200px;
|
|
|
|
|
right: 0;
|
2014-08-19 16:38:16 -04:00
|
|
|
height: 50px;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-router {
|
|
|
|
|
position: absolute;
|
2014-08-19 16:38:16 -04:00
|
|
|
top: 50px;
|
2012-12-03 20:26:03 -05:00
|
|
|
left: 200px;
|
|
|
|
|
right: 0;
|
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-09 19:27:10 -05:00
|
|
|
height: 36px;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-content {
|
|
|
|
|
position: absolute;
|
2014-08-19 16:38:16 -04:00
|
|
|
top: 84px;
|
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 17:59:12 -05:00
|
|
|
left: 200px;
|
2012-11-22 01:30:25 -05:00
|
|
|
right: 0;
|
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 17:59:12 -05:00
|
|
|
bottom: 61px;
|
2012-09-06 03:46:15 -04:00
|
|
|
height: auto;
|
|
|
|
|
width: auto;
|
2012-10-29 14:05:03 -04:00
|
|
|
margin: 0;
|
2012-10-29 02:56:23 -04:00
|
|
|
overflow: auto;
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #fff;
|
|
|
|
|
border-top: 1px solid #ddd;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-frame-toolbar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 200px;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 100;
|
2017-04-14 05:31:43 -04:00
|
|
|
bottom: 60px;
|
|
|
|
|
height: auto;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-menu .media-frame-title,
|
|
|
|
|
.media-frame.hide-menu .media-frame-router,
|
|
|
|
|
.media-frame.hide-menu .media-frame-toolbar,
|
|
|
|
|
.media-frame.hide-menu .media-frame-content {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-toolbar .media-frame-content {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-router .media-frame-content {
|
2014-08-19 16:38:16 -04:00
|
|
|
top: 50px;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
2016-12-06 18:28:41 -05:00
|
|
|
.media-frame.hide-menu .media-frame-menu,
|
2019-10-03 08:10:57 -04:00
|
|
|
.media-frame.hide-menu .media-frame-menu-heading,
|
2016-12-06 18:28:41 -05:00
|
|
|
.media-frame.hide-router .media-frame-router,
|
|
|
|
|
.media-frame.hide-toolbar .media-frame-toolbar {
|
2012-12-03 20:26:03 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-title h1 {
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
font-size: 22px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 2.27272727;
|
2012-12-03 20:26:03 -05:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-03 08:10:57 -04:00
|
|
|
.media-frame-menu-heading,
|
|
|
|
|
.media-attachments-filter-heading {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 20px;
|
|
|
|
|
top: 22px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
/* Above the media-frame-menu. */
|
|
|
|
|
z-index: 151;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-attachments-filter-heading {
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mode-grid .media-attachments-filter-heading {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -9999px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mode-grid .media-frame-actions-heading {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.wp-core-ui .button.media-frame-menu-toggle {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-11 00:13:16 -04:00
|
|
|
.media-frame-title .suggested-dimensions {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
float: right;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-13 14:20:14 -04:00
|
|
|
.media-frame-content .crop-content {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2015-07-20 11:57:25 -04:00
|
|
|
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
|
|
|
|
|
margin-right: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-04 11:48:16 -04:00
|
|
|
.media-frame-content .crop-content .crop-image {
|
2014-03-11 00:13:16 -04:00
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-frame-content .crop-content .upload-errors {
|
2014-04-04 11:48:16 -04:00
|
|
|
position: absolute;
|
|
|
|
|
width: 300px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
margin-left: -150px;
|
|
|
|
|
margin-right: -150px;
|
|
|
|
|
z-index: 600000;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 02:51:37 -05:00
|
|
|
/**
|
|
|
|
|
* Iframes
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .media-iframe {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 13:51:27 -05:00
|
|
|
.media-frame .media-iframe,
|
|
|
|
|
.media-frame .media-iframe iframe {
|
2012-11-10 02:51:37 -05:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2012-12-07 05:27:07 -05:00
|
|
|
border: 0;
|
2012-11-10 02:51:37 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-20 08:49:35 -05:00
|
|
|
/**
|
|
|
|
|
* Attachment Browser Filters
|
|
|
|
|
*/
|
|
|
|
|
.media-frame select.attachment-filters {
|
|
|
|
|
margin-top: 11px;
|
2014-12-10 23:12:23 -05:00
|
|
|
margin-right: 2%;
|
2015-11-04 18:43:26 -05:00
|
|
|
max-width: 42%;
|
|
|
|
|
max-width: calc(48% - 12px);
|
2015-04-13 20:54:30 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame select.attachment-filters:last-of-type {
|
|
|
|
|
margin-right: 0;
|
2019-01-18 20:20:49 -05:00
|
|
|
width: auto;
|
|
|
|
|
max-width: 100%;
|
2012-11-20 08:49:35 -05:00
|
|
|
}
|
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
/**
|
|
|
|
|
* Search
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .search {
|
2019-10-07 08:43:03 -04:00
|
|
|
margin: 32px 0 0;
|
2012-10-29 02:56:23 -04:00
|
|
|
padding: 4px;
|
|
|
|
|
font-size: 13px;
|
2016-03-09 14:51:26 -05:00
|
|
|
color: #444;
|
2016-07-26 12:39:30 -04:00
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
2012-11-27 20:51:15 -05:00
|
|
|
-webkit-appearance: none;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-12-10 23:12:23 -05:00
|
|
|
.media-toolbar-primary .search {
|
|
|
|
|
max-width: 100%;
|
2012-11-10 04:11:33 -05:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.media-frame .media-search-input-label {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 10px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
/**
|
|
|
|
|
* Attachments
|
|
|
|
|
*/
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachments {
|
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 17:59:12 -05:00
|
|
|
margin: 0;
|
2012-11-30 20:44:15 -05:00
|
|
|
-webkit-overflow-scrolling: touch;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
|
* Attachment
|
|
|
|
|
*/
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
2014-08-05 01:20:18 -04:00
|
|
|
padding: 8px;
|
|
|
|
|
margin: 0;
|
2016-03-09 14:51:26 -05:00
|
|
|
color: #444;
|
2014-08-05 01:20:18 -04:00
|
|
|
cursor: pointer;
|
2012-11-21 13:00:18 -05:00
|
|
|
list-style: none;
|
2012-11-27 14:14:36 -05:00
|
|
|
text-align: center;
|
2012-09-07 18:15:52 -04:00
|
|
|
-webkit-user-select: none;
|
2014-02-13 03:30:17 -05:00
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
2014-08-07 23:46:17 -04:00
|
|
|
width: 25%;
|
2014-08-05 01:20:18 -04:00
|
|
|
box-sizing: border-box;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment:focus,
|
|
|
|
|
.wp-core-ui .selected.attachment:focus,
|
|
|
|
|
.wp-core-ui .attachment.details:focus {
|
2014-05-28 23:39:15 -04:00
|
|
|
box-shadow:
|
2014-08-25 17:26:16 -04:00
|
|
|
inset 0 0 2px 3px #fff,
|
|
|
|
|
inset 0 0 0 7px #5b9dd9;
|
2019-01-10 11:47:50 -05:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
|
|
|
|
outline-offset: -6px;
|
2014-05-28 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .selected.attachment {
|
2014-07-22 15:58:18 -04:00
|
|
|
box-shadow:
|
2014-08-05 01:20:18 -04:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 0 7px #ccc;
|
2014-07-18 03:57:15 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment.details {
|
2014-08-25 17:26:16 -04:00
|
|
|
box-shadow:
|
|
|
|
|
inset 0 0 0 3px #fff,
|
2015-10-21 12:18:26 -04:00
|
|
|
inset 0 0 0 7px #0073aa;
|
2014-08-25 17:26:16 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment-preview {
|
2012-10-10 19:32:48 -04:00
|
|
|
position: relative;
|
2014-08-06 02:29:16 -04:00
|
|
|
box-shadow:
|
2019-03-04 17:02:52 -05:00
|
|
|
inset 0 0 15px rgba(0, 0, 0, 0.1),
|
|
|
|
|
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
2014-08-06 02:29:16 -04:00
|
|
|
background: #eee;
|
|
|
|
|
cursor: pointer;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment-preview:before {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "";
|
2014-08-05 01:20:18 -04:00
|
|
|
display: block;
|
|
|
|
|
padding-top: 100%;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .icon {
|
2012-11-27 14:14:36 -05:00
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail {
|
2014-08-05 01:20:18 -04:00
|
|
|
overflow: hidden;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
position: absolute;
|
2012-10-08 19:20:04 -04:00
|
|
|
top: 0;
|
2014-08-05 01:20:18 -04:00
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-10-08 19:20:04 -04:00
|
|
|
left: 0;
|
2014-08-14 03:18:15 -04:00
|
|
|
opacity: 1;
|
|
|
|
|
transition: opacity .1s;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .portrait img {
|
2014-08-05 01:20:18 -04:00
|
|
|
max-width: 100%;
|
2014-07-03 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .landscape img {
|
2014-08-05 01:20:18 -04:00
|
|
|
max-height: 100%;
|
2014-07-03 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail:after {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "";
|
2012-10-29 14:05:03 -04:00
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
2012-10-29 14:05:03 -04:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail img {
|
2012-10-29 14:05:03 -04:00
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail .centered {
|
2012-10-31 16:34:50 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
2018-12-19 19:27:47 -05:00
|
|
|
height: 100%;
|
2014-02-13 03:30:17 -05:00
|
|
|
transform: translate( 50%, 50% );
|
2012-10-31 16:34:50 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail .centered img {
|
2014-02-13 03:30:17 -05:00
|
|
|
transform: translate( -50%, -50% );
|
2012-10-08 19:20:04 -04:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2015-04-07 17:29:26 -04:00
|
|
|
.wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
|
2014-08-06 02:29:16 -04:00
|
|
|
transform: translate( -50%, -70% );
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .filename {
|
2012-10-29 14:05:03 -04:00
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-11-27 10:58:47 -05:00
|
|
|
overflow: hidden;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
word-wrap: break-word;
|
2012-10-10 05:55:47 -04:00
|
|
|
text-align: center;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
2019-03-04 17:02:52 -05:00
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
2012-11-27 10:58:47 -05:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .filename div {
|
2012-11-27 10:58:47 -05:00
|
|
|
padding: 5px 10px;
|
2012-10-08 19:20:04 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .thumbnail img {
|
2012-10-08 19:20:04 -04:00
|
|
|
position: absolute;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment-close {
|
2014-11-17 22:34:25 -05:00
|
|
|
display: block;
|
2012-09-27 03:45:26 -04:00
|
|
|
position: absolute;
|
2012-10-11 00:11:47 -04:00
|
|
|
top: 5px;
|
|
|
|
|
right: 5px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
width: 22px;
|
|
|
|
|
padding: 0;
|
2012-11-29 09:36:12 -05:00
|
|
|
background-color: #fff;
|
|
|
|
|
background-position: -96px 4px;
|
|
|
|
|
border-radius: 3px;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
|
2017-02-09 11:47:44 -05:00
|
|
|
transition: none;
|
2012-10-11 00:11:47 -04:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment-close:hover,
|
|
|
|
|
.wp-core-ui .attachment-close:focus {
|
2014-11-17 22:34:25 -05:00
|
|
|
background-position: -36px 4px;
|
2012-09-27 03:45:26 -04:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment .check {
|
2012-11-20 06:10:04 -05:00
|
|
|
display: none;
|
|
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
2015-06-26 01:01:24 -04:00
|
|
|
padding: 0;
|
2017-02-09 11:47:44 -05:00
|
|
|
border: 0;
|
2012-11-20 06:10:04 -05:00
|
|
|
position: absolute;
|
2014-07-11 00:24:14 -04:00
|
|
|
z-index: 10;
|
2014-08-05 01:20:18 -04:00
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
2012-11-20 06:10:04 -05:00
|
|
|
outline: none;
|
2014-01-09 11:36:12 -05:00
|
|
|
background: #eee;
|
2017-02-09 11:47:44 -05:00
|
|
|
cursor: pointer;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
|
2012-11-20 06:10:04 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment .check .media-modal-icon {
|
|
|
|
|
display: block;
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -1px 0;
|
|
|
|
|
height: 15px;
|
|
|
|
|
width: 15px;
|
|
|
|
|
margin: 5px;
|
2012-11-20 06:10:04 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment .check:hover .media-modal-icon {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -40px 0;
|
2012-11-20 06:10:04 -05:00
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment.selected .check {
|
2012-11-20 06:10:04 -05:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .attachment.details .check,
|
|
|
|
|
.wp-core-ui .attachment.selected .check:focus,
|
|
|
|
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
|
2015-10-21 12:18:26 -04:00
|
|
|
background-color: #0073aa;
|
2014-08-05 01:20:18 -04:00
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
2015-10-21 12:18:26 -04:00
|
|
|
0 0 0 2px #0073aa;
|
2014-01-09 11:36:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-01-10 11:47:50 -05:00
|
|
|
.wp-core-ui .attachment.selected .check:focus {
|
|
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment.details .check .media-modal-icon,
|
|
|
|
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -21px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.wp-core-ui .attachment.details .check:hover .media-modal-icon,
|
|
|
|
|
.wp-core-ui .attachment.selected .check:focus .media-modal-icon,
|
|
|
|
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -60px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-13 02:16:23 -05:00
|
|
|
.wp-core-ui .media-frame .attachment .describe {
|
2012-10-10 19:32:48 -04:00
|
|
|
position: relative;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
2014-08-05 01:20:18 -04:00
|
|
|
margin: 0;
|
2019-09-30 13:24:59 -04:00
|
|
|
padding: 0 8px;
|
2012-10-10 19:32:48 -04:00
|
|
|
font-size: 12px;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
/**
|
|
|
|
|
* Attachments Browser
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .attachments-browser {
|
2012-12-03 20:26:03 -05:00
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
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 17:59:12 -05:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .media-toolbar {
|
2012-11-22 01:30:25 -05:00
|
|
|
right: 300px;
|
2019-10-03 08:10:57 -04:00
|
|
|
height: 72px;
|
|
|
|
|
background: #fff;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-03 23:39:15 -04:00
|
|
|
.attachments-browser.hide-sidebar .media-toolbar {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 18:52:17 -05:00
|
|
|
.attachments-browser .media-toolbar-primary > .media-button,
|
|
|
|
|
.attachments-browser .media-toolbar-primary > .media-button-group,
|
|
|
|
|
.attachments-browser .media-toolbar-secondary > .media-button,
|
|
|
|
|
.attachments-browser .media-toolbar-secondary > .media-button-group {
|
2019-09-30 13:24:59 -04:00
|
|
|
margin: 10px 0;
|
2012-11-12 18:52:17 -05:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:28:16 -04:00
|
|
|
.attachments-browser .attachments {
|
|
|
|
|
padding: 2px 8px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 01:01:47 -05:00
|
|
|
.attachments-browser .attachments,
|
|
|
|
|
.attachments-browser .uploader-inline {
|
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 17:59:12 -05:00
|
|
|
position: absolute;
|
2019-10-03 08:10:57 -04:00
|
|
|
top: 72px;
|
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 17:59:12 -05:00
|
|
|
left: 0;
|
2012-11-22 01:30:25 -05:00
|
|
|
right: 300px;
|
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 17:59:12 -05:00
|
|
|
bottom: 0;
|
|
|
|
|
overflow: auto;
|
2014-05-28 23:39:15 -04:00
|
|
|
outline: none;
|
2014-07-09 23:50:17 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .uploader-inline.hidden {
|
2014-07-13 06:44:14 -04:00
|
|
|
display: none;
|
2014-07-09 23:50:17 -04:00
|
|
|
}
|
|
|
|
|
|
2015-04-13 21:21:27 -04:00
|
|
|
.attachments-browser .media-toolbar-primary {
|
2015-11-04 18:43:26 -05:00
|
|
|
max-width: 33%;
|
2015-04-13 21:21:27 -04:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.mode-grid .attachments-browser .media-toolbar-primary {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-04-13 21:21:27 -04:00
|
|
|
.attachments-browser .media-toolbar-secondary {
|
2015-11-04 18:43:26 -05:00
|
|
|
max-width: 66%;
|
2015-04-13 21:21:27 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 19:06:15 -04:00
|
|
|
.uploader-inline .close {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 48px;
|
2017-03-31 13:38:43 -04:00
|
|
|
outline: none;
|
|
|
|
|
padding: 0;
|
2014-07-10 19:06:15 -04:00
|
|
|
position: absolute;
|
2017-03-31 13:38:43 -04:00
|
|
|
right: 2px;
|
2014-07-10 19:06:15 -04:00
|
|
|
text-align: center;
|
2017-03-31 13:38:43 -04:00
|
|
|
top: 2px;
|
|
|
|
|
width: 48px;
|
2014-07-10 19:06:15 -04:00
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline .close:before {
|
2017-03-31 13:38:43 -04:00
|
|
|
font: normal 30px/1 dashicons !important;
|
|
|
|
|
color: #555d66;
|
2014-07-10 19:06:15 -04:00
|
|
|
display: inline-block;
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "\f335";
|
2014-07-10 19:06:15 -04:00
|
|
|
font-weight: 300;
|
2017-03-31 13:38:43 -04:00
|
|
|
margin-top: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline .close:focus {
|
2019-01-17 02:41:52 -05:00
|
|
|
outline: 1px solid #5b9dd9;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
2014-07-10 19:06:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-09 23:50:17 -04:00
|
|
|
.attachments-browser.hide-sidebar .attachments,
|
|
|
|
|
.attachments-browser.hide-sidebar .uploader-inline {
|
2014-07-03 23:39:15 -04:00
|
|
|
right: 0;
|
2014-07-07 16:30:16 -04:00
|
|
|
margin-right: 0;
|
2014-07-03 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 04:11:33 -05:00
|
|
|
.attachments-browser .instructions {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 16px;
|
2019-10-07 22:57:03 -04:00
|
|
|
line-height: 1.38461538;
|
2012-11-10 04:11:33 -05:00
|
|
|
font-size: 13px;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-10 04:11:33 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 13:31:15 -04:00
|
|
|
.attachments-browser .no-media {
|
|
|
|
|
padding: 2em 0 0 2em;
|
|
|
|
|
}
|
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
|
* Progress Bar
|
|
|
|
|
*/
|
|
|
|
|
.media-progress-bar {
|
|
|
|
|
position: relative;
|
2012-11-22 04:32:21 -05:00
|
|
|
height: 10px;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
width: 70%;
|
|
|
|
|
margin: 10px auto;
|
2012-11-22 04:32:21 -05:00
|
|
|
border-radius: 10px;
|
2016-03-09 14:51:26 -05:00
|
|
|
background: #ddd;
|
2019-03-04 17:02:52 -05:00
|
|
|
background: rgba(0, 0, 0, 0.1);
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-progress-bar div {
|
2012-11-22 04:32:21 -05:00
|
|
|
height: 10px;
|
|
|
|
|
min-width: 20px;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
width: 0;
|
2015-10-21 12:18:26 -04:00
|
|
|
background: #0073aa;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
border-radius: 10px;
|
2014-08-02 18:02:19 -04:00
|
|
|
transition: width 300ms;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
.media-uploader-status .media-progress-bar {
|
2012-11-22 05:56:10 -05:00
|
|
|
display: none;
|
2012-11-22 04:32:21 -05:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
.uploading.media-uploader-status .media-progress-bar {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-18 21:10:17 -04:00
|
|
|
.attachment-preview .media-progress-bar {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 15%;
|
|
|
|
|
width: 70%;
|
2012-11-22 04:32:21 -05:00
|
|
|
margin: -5px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-uploader-status {
|
2012-11-22 05:56:10 -05:00
|
|
|
position: relative;
|
2012-11-30 10:40:09 -05:00
|
|
|
margin: 0 auto;
|
2012-11-22 04:32:21 -05:00
|
|
|
padding-bottom: 10px;
|
2012-11-30 10:40:09 -05:00
|
|
|
max-width: 400px;
|
2012-11-22 07:54:49 -05:00
|
|
|
}
|
|
|
|
|
|
2015-10-28 19:08:24 -04:00
|
|
|
.uploader-inline .media-uploader-status h2 {
|
2012-11-22 07:54:49 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
.media-uploader-status .upload-details {
|
2012-11-22 05:56:10 -05:00
|
|
|
display: none;
|
2012-11-22 04:32:21 -05:00
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
.uploading.media-uploader-status .upload-details {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
.media-uploader-status .upload-detail-separator {
|
|
|
|
|
padding: 0 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-uploader-status .upload-count {
|
2016-03-09 14:51:26 -05:00
|
|
|
color: #444;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
.media-uploader-status .upload-dismiss-errors,
|
|
|
|
|
.media-uploader-status .upload-errors {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.errors.media-uploader-status .upload-dismiss-errors,
|
|
|
|
|
.errors.media-uploader-status .upload-errors {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-uploader-status .upload-dismiss-errors {
|
2019-05-22 15:33:53 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: -3px;
|
|
|
|
|
right: -5px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: none;
|
2012-11-22 07:54:49 -05:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-22 15:33:53 -04:00
|
|
|
.uploader-inline .media-uploader-status .upload-dismiss-errors {
|
|
|
|
|
top: 2px;
|
|
|
|
|
right: 2px;
|
2012-11-22 05:56:10 -05:00
|
|
|
}
|
|
|
|
|
|
2019-05-22 15:33:53 -04:00
|
|
|
.media-uploader-status .upload-dismiss-errors::before {
|
2017-05-04 18:32:46 -04:00
|
|
|
content: "\f153";
|
|
|
|
|
display: block;
|
|
|
|
|
font: normal 16px/1 dashicons;
|
|
|
|
|
color: #72777c;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-22 15:33:53 -04:00
|
|
|
.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
|
|
|
|
|
color: #606a73;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.errors.media-uploader-status .upload-dismiss-errors:hover::before,
|
|
|
|
|
.errors.media-uploader-status .upload-dismiss-errors:focus::before {
|
2017-05-04 18:32:46 -04:00
|
|
|
color: #c00;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 07:35:05 -05:00
|
|
|
.upload-errors .upload-error {
|
2015-05-15 12:19:26 -04:00
|
|
|
padding: 12px;
|
2015-06-19 14:49:27 -04:00
|
|
|
margin-bottom: 12px;
|
|
|
|
|
background: #fff;
|
2015-10-09 13:47:25 -04:00
|
|
|
border-left: 4px solid #dc3232;
|
2015-06-19 14:49:27 -04:00
|
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
2012-11-22 05:56:10 -05:00
|
|
|
}
|
|
|
|
|
|
2015-10-09 13:47:25 -04:00
|
|
|
.uploader-inline .upload-errors .upload-error {
|
2019-05-22 15:33:53 -04:00
|
|
|
padding: 12px 30px;
|
2015-10-09 13:47:25 -04:00
|
|
|
background-color: #fbeaea;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-05-15 12:19:26 -04:00
|
|
|
.upload-errors .upload-error-filename {
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
2012-11-22 05:56:10 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 07:35:05 -05:00
|
|
|
.upload-errors .upload-error-message {
|
2012-11-22 05:56:10 -05:00
|
|
|
display: block;
|
|
|
|
|
padding-top: 8px;
|
2012-11-30 10:40:09 -05:00
|
|
|
word-wrap: break-word;
|
2012-11-22 05:56:10 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
/**
|
|
|
|
|
* Window and Editor uploaders used to display "drop zones"
|
|
|
|
|
*/
|
|
|
|
|
.uploader-window,
|
|
|
|
|
.wp-editor-wrap .uploader-editor {
|
2012-10-28 19:29:17 -04:00
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
text-align: center;
|
2019-06-07 16:45:02 -04:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 250000;
|
|
|
|
|
opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
|
2014-02-13 03:30:17 -05:00
|
|
|
transition: opacity 250ms;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.wp-editor-wrap .uploader-editor {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 99998; /* under the toolbar */
|
|
|
|
|
background: rgba(150, 150, 150, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window,
|
|
|
|
|
.wp-editor-wrap .uploader-editor.droppable {
|
|
|
|
|
background: rgba(0, 86, 132, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window-content,
|
|
|
|
|
.wp-editor-wrap .uploader-editor-content {
|
2012-12-03 20:26:03 -05:00
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
border: 1px dashed #fff;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
/* uploader drop-zone title */
|
|
|
|
|
.uploader-window h1, /* Back-compat for pre-5.3 */
|
|
|
|
|
.uploader-window .uploader-editor-title,
|
|
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title {
|
2012-10-28 19:29:17 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
2019-06-07 16:45:02 -04:00
|
|
|
transform: translateY(-50%);
|
|
|
|
|
font-size: 3em;
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
font-weight: 600;
|
2012-10-28 19:29:17 -04:00
|
|
|
color: #fff;
|
2019-06-07 16:45:02 -04:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
|
|
|
|
|
display: block;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window .media-progress-bar {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-color: #fff;
|
2012-10-29 03:38:13 -04:00
|
|
|
display: none;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window .media-progress-bar div {
|
|
|
|
|
background: #fff;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
.uploading .uploader-window .media-progress-bar {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
display: block;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 01:01:47 -05:00
|
|
|
.media-frame .uploader-inline {
|
2014-07-24 20:31:15 -04:00
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding: 0;
|
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 17:59:12 -05:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 20:50:08 -05:00
|
|
|
.uploader-inline-content .upload-ui {
|
2014-07-24 20:31:15 -04:00
|
|
|
margin: 2em 0;
|
2012-11-12 20:50:08 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-05 14:15:40 -05:00
|
|
|
.uploader-inline-content .post-upload-ui {
|
|
|
|
|
margin-bottom: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.uploader-inline .has-upload-message .upload-ui {
|
|
|
|
|
margin: 0 0 4em;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-28 19:08:24 -04:00
|
|
|
.uploader-inline h2 {
|
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 17:59:12 -05:00
|
|
|
font-size: 20px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.4;
|
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-09 19:27:10 -05:00
|
|
|
font-weight: 400;
|
2014-07-24 20:31:15 -04:00
|
|
|
margin: 0;
|
2012-10-29 03:38:13 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.uploader-inline .has-upload-message .upload-instructions {
|
|
|
|
|
font-size: 14px;
|
2016-03-09 14:51:26 -05:00
|
|
|
color: #444;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 400;
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 06:46:03 -05:00
|
|
|
.uploader-inline .drop-instructions {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supports-drag-drop .uploader-inline .drop-instructions {
|
2012-11-16 04:39:58 -05:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 06:46:03 -05:00
|
|
|
.uploader-inline p {
|
2014-07-24 20:31:15 -04:00
|
|
|
margin: 0.5em 0;
|
2012-11-22 06:46:03 -05:00
|
|
|
}
|
|
|
|
|
|
2012-10-29 03:38:13 -04:00
|
|
|
.uploader-inline .media-progress-bar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploading.uploader-inline .media-progress-bar {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
.uploader-inline .browser {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Selection
|
|
|
|
|
*/
|
|
|
|
|
.media-selection {
|
2012-10-29 03:38:13 -04:00
|
|
|
position: absolute;
|
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 17:59:12 -05:00
|
|
|
top: 0;
|
2012-10-29 03:38:13 -04:00
|
|
|
left: 0;
|
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 17:59:12 -05:00
|
|
|
right: 350px;
|
|
|
|
|
height: 60px;
|
|
|
|
|
padding: 0 0 0 16px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .selection-info {
|
|
|
|
|
display: inline-block;
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 12px;
|
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 17:59:12 -05:00
|
|
|
height: 60px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 13:23:47 -05:00
|
|
|
.media-selection.empty,
|
|
|
|
|
.media-selection.editing {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection.one .edit-selection {
|
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 17:59:12 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .count {
|
|
|
|
|
display: block;
|
|
|
|
|
padding-top: 12px;
|
|
|
|
|
font-size: 14px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.42857142;
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.media-selection .button-link {
|
2012-11-14 21:36:06 -05:00
|
|
|
float: left;
|
|
|
|
|
padding: 1px 8px;
|
|
|
|
|
margin: 1px 8px 1px -8px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.4;
|
2016-03-09 14:51:26 -05:00
|
|
|
border-right: 1px solid #ddd;
|
2015-10-21 12:18:26 -04:00
|
|
|
color: #0073aa;
|
2017-02-09 11:47:44 -05:00
|
|
|
text-decoration: none;
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.media-selection .button-link:hover,
|
|
|
|
|
.media-selection .button-link:focus {
|
2020-07-07 06:11:05 -04:00
|
|
|
color: #006799;
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.media-selection .button-link:last-child {
|
2012-11-14 21:36:06 -05:00
|
|
|
border-right: 0;
|
2012-12-04 13:23:47 -05:00
|
|
|
margin-right: 0;
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.selection-info .clear-selection {
|
2015-10-21 12:18:26 -04:00
|
|
|
color: #bc0b0b;
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
|
|
|
|
|
2015-06-26 01:01:24 -04:00
|
|
|
.selection-info .clear-selection:hover,
|
|
|
|
|
.selection-info .clear-selection:focus {
|
2017-10-03 12:03:32 -04:00
|
|
|
color: #dc3232;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
.media-selection .selection-view {
|
|
|
|
|
display: inline-block;
|
2012-12-05 14:15:40 -05:00
|
|
|
vertical-align: top;
|
2012-12-04 11:21:57 -05:00
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
.media-selection .attachments {
|
|
|
|
|
display: inline-block;
|
2012-11-27 14:14:36 -05:00
|
|
|
height: 48px;
|
2014-08-05 01:20:18 -04:00
|
|
|
margin: 6px;
|
|
|
|
|
padding: 0;
|
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 17:59:12 -05:00
|
|
|
overflow: hidden;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-05 01:20:18 -04:00
|
|
|
.media-selection .attachment {
|
2014-10-11 19:24:23 -04:00
|
|
|
width: 40px;
|
2014-08-05 01:20:18 -04:00
|
|
|
padding: 0;
|
2014-10-11 19:24:23 -04:00
|
|
|
margin: 4px;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .attachment .thumbnail {
|
2014-10-11 19:24:23 -04:00
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-selection .attachment .icon {
|
2012-11-27 14:14:36 -05:00
|
|
|
width: 50%;
|
|
|
|
|
}
|
2014-08-25 17:26:16 -04:00
|
|
|
|
|
|
|
|
.media-selection .attachment-preview {
|
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 17:59:12 -05:00
|
|
|
box-shadow: none;
|
2014-08-25 17:26:16 -04:00
|
|
|
background: none;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
2015-04-07 17:29:26 -04:00
|
|
|
.wp-core-ui .media-selection .attachment:focus,
|
|
|
|
|
.wp-core-ui .media-selection .selected.attachment:focus,
|
|
|
|
|
.wp-core-ui .media-selection .attachment.details:focus {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 2px 3px #5b9dd9;
|
2019-01-10 11:47:50 -05:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
2015-04-07 17:29:26 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .media-selection .selected.attachment {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .media-selection .attachment.details {
|
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 17:59:12 -05:00
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
2015-10-21 12:18:26 -04:00
|
|
|
0 0 0 3px #0073aa;
|
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 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection:after {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "";
|
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 17:59:12 -05:00
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
2012-10-29 03:38:13 -04:00
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
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 17:59:12 -05:00
|
|
|
width: 25px;
|
2019-03-04 17:02:52 -05:00
|
|
|
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
2012-10-29 03:38:13 -04:00
|
|
|
}
|
|
|
|
|
|
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 17:59:12 -05:00
|
|
|
.media-selection .attachment .filename {
|
|
|
|
|
display: none;
|
2012-10-29 03:38:13 -04:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 01:37:49 -05:00
|
|
|
/**
|
|
|
|
|
* Spinner
|
|
|
|
|
*/
|
2012-12-06 18:12:59 -05:00
|
|
|
.media-frame .spinner {
|
2014-02-26 12:23:13 -05:00
|
|
|
background: url(../images/spinner.gif) no-repeat;
|
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-09 19:27:10 -05:00
|
|
|
background-size: 20px 20px;
|
2015-04-09 16:35:28 -04:00
|
|
|
float: right;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
visibility: hidden;
|
2012-12-03 01:37:49 -05:00
|
|
|
opacity: 0.7;
|
|
|
|
|
filter: alpha(opacity=70);
|
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-09 19:27:10 -05:00
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
2012-12-06 18:12:59 -05:00
|
|
|
margin: 0;
|
2015-04-09 16:35:28 -04:00
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.media-frame.mode-grid .spinner {
|
|
|
|
|
margin: 0;
|
|
|
|
|
float: none;
|
|
|
|
|
vertical-align: middle;
|
2012-12-06 18:12:59 -05:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.media-modal .media-toolbar .spinner {
|
|
|
|
|
float: none;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
margin: 0 0 5px 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-15 12:47:02 -04:00
|
|
|
.media-frame .instructions + .spinner.is-active {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.media-frame .spinner.is-active {
|
|
|
|
|
visibility: visible;
|
2014-03-06 12:46:15 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
/**
|
|
|
|
|
* Attachment Details
|
|
|
|
|
*/
|
|
|
|
|
.attachment-details {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-details .settings-save-status {
|
2012-12-06 18:12:59 -05:00
|
|
|
float: right;
|
|
|
|
|
text-transform: none;
|
2019-06-07 16:45:02 -04:00
|
|
|
font-weight: 400;
|
2012-12-06 18:12:59 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-07 16:32:16 -04:00
|
|
|
.attachment-details .settings-save-status .spinner {
|
2019-06-07 16:45:02 -04:00
|
|
|
float: none;
|
2015-04-09 16:35:28 -04:00
|
|
|
margin-left: 5px;
|
2012-12-03 01:37:49 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.attachment-details .settings-save-status .saved {
|
2012-12-03 01:37:49 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-04-09 16:35:28 -04:00
|
|
|
.attachment-details.save-waiting .settings-save-status .spinner {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.attachment-details.save-complete .settings-save-status .saved {
|
2019-06-07 16:45:02 -04:00
|
|
|
display: inline-block;
|
2012-12-03 01:37:49 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
margin-bottom: 16px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.5;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2014-03-06 21:46:14 -05:00
|
|
|
border-bottom: 1px solid #ddd;
|
2012-11-10 20:26:42 -05:00
|
|
|
padding-bottom: 11px;
|
2012-10-29 11:13:02 -04:00
|
|
|
}
|
|
|
|
|
|
2020-10-18 13:39:07 -04:00
|
|
|
.attachment-info .wp-media-wrapper {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info .wp-media-wrapper.wp-audio {
|
|
|
|
|
margin-top: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info .filename {
|
2016-06-17 14:37:28 -04:00
|
|
|
font-weight: 600;
|
2016-03-09 14:51:26 -05:00
|
|
|
color: #444;
|
2012-12-02 23:15:32 -05:00
|
|
|
word-wrap: break-word;
|
2012-10-29 11:13:02 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info .thumbnail {
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
max-height: 120px;
|
2012-12-06 00:52:19 -05:00
|
|
|
margin-top: 5px;
|
2012-11-10 13:25:04 -05:00
|
|
|
margin-right: 10px;
|
2012-11-10 20:26:42 -05:00
|
|
|
margin-bottom: 5px;
|
2012-10-29 14:16:12 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-11 00:16:41 -05:00
|
|
|
.uploading .attachment-info .thumbnail {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 80px;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
|
2012-11-11 00:16:41 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploading .attachment-info .media-progress-bar {
|
2012-11-22 04:32:21 -05:00
|
|
|
margin-top: 35px;
|
2012-11-11 00:16:41 -05:00
|
|
|
}
|
|
|
|
|
|
2014-05-11 02:19:14 -04:00
|
|
|
.attachment-info .thumbnail-image:after {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "";
|
2012-10-29 14:16:12 -04:00
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
2012-10-29 14:16:12 -04:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info .thumbnail img {
|
2012-10-29 11:13:02 -04:00
|
|
|
display: block;
|
2012-11-10 13:25:04 -05:00
|
|
|
max-width: 120px;
|
|
|
|
|
max-height: 120px;
|
2012-10-29 11:13:02 -04:00
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info .details {
|
2012-10-29 11:13:02 -04:00
|
|
|
float: left;
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 12px;
|
2012-12-02 23:15:32 -05:00
|
|
|
max-width: 100%;
|
2012-11-10 20:26:42 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-06 00:52:19 -05:00
|
|
|
.attachment-info .edit-attachment,
|
2014-03-07 11:42:14 -05:00
|
|
|
.attachment-info .delete-attachment,
|
Media Grid, support `MEDIA_TRASH`:
* Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash`
* In the attachment edit modal, properly toggle between Trash/Untrash
* In `media.view.Attachment`, add a method for `untrashAttachment`
* When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI.
* Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true
* Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter.
* Cleanup the bootstrapping of `media.view.MediaFrame.Manage`
* Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true`
* Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set.
Props koop for the knowledge sharing and thought partnership.
See #29145.
Built from https://develop.svn.wordpress.org/trunk@29490
git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
|
|
|
.attachment-info .trash-attachment,
|
|
|
|
|
.attachment-info .untrash-attachment {
|
2012-12-06 00:52:19 -05:00
|
|
|
display: block;
|
2012-11-27 10:50:59 -05:00
|
|
|
text-decoration: none;
|
2012-12-03 14:49:45 -05:00
|
|
|
white-space: nowrap;
|
2012-11-27 10:50:59 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-06 00:52:19 -05:00
|
|
|
.attachment-details.needs-refresh .attachment-info .edit-attachment {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info .edit-attachment {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.media-modal .delete-attachment,
|
Media Grid, support `MEDIA_TRASH`:
* Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash`
* In the attachment edit modal, properly toggle between Trash/Untrash
* In `media.view.Attachment`, add a method for `untrashAttachment`
* When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI.
* Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true
* Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter.
* Cleanup the bootstrapping of `media.view.MediaFrame.Manage`
* Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true`
* Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set.
Props koop for the knowledge sharing and thought partnership.
See #29145.
Built from https://develop.svn.wordpress.org/trunk@29490
git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
|
|
|
.media-modal .trash-attachment,
|
|
|
|
|
.media-modal .untrash-attachment {
|
2015-06-26 01:01:24 -04:00
|
|
|
display: inline;
|
|
|
|
|
padding: 0;
|
2012-12-06 00:52:19 -05:00
|
|
|
color: #bc0b0b;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.media-modal .delete-attachment:hover,
|
2015-06-26 01:01:24 -04:00
|
|
|
.media-modal .delete-attachment:focus,
|
Media Grid, support `MEDIA_TRASH`:
* Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash`
* In the attachment edit modal, properly toggle between Trash/Untrash
* In `media.view.Attachment`, add a method for `untrashAttachment`
* When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI.
* Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true
* Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter.
* Cleanup the bootstrapping of `media.view.MediaFrame.Manage`
* Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true`
* Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set.
Props koop for the knowledge sharing and thought partnership.
See #29145.
Built from https://develop.svn.wordpress.org/trunk@29490
git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
|
|
|
.media-modal .trash-attachment:hover,
|
2015-06-26 01:01:24 -04:00
|
|
|
.media-modal .trash-attachment:focus,
|
|
|
|
|
.media-modal .untrash-attachment:hover,
|
|
|
|
|
.media-modal .untrash-attachment:focus {
|
2017-10-03 12:03:32 -04:00
|
|
|
color: #dc3232;
|
2012-11-27 10:50:59 -05:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
/**
|
|
|
|
|
* Attachment Display Settings
|
|
|
|
|
*/
|
2012-11-10 20:26:42 -05:00
|
|
|
.attachment-display-settings {
|
2012-11-20 17:51:35 -05:00
|
|
|
width: 100%;
|
2012-11-10 20:26:42 -05:00
|
|
|
float: left;
|
2012-11-20 17:51:35 -05:00
|
|
|
overflow: hidden;
|
2012-11-10 20:26:42 -05:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
|
2014-02-24 13:08:16 -05:00
|
|
|
.collection-settings {
|
2012-11-10 13:25:04 -05:00
|
|
|
overflow: hidden;
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-03-09 19:19:15 -04:00
|
|
|
.collection-settings .setting input[type="checkbox"] {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.collection-settings .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.collection-settings .setting .name {
|
2014-03-09 19:19:15 -04:00
|
|
|
min-width: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
/**
|
|
|
|
|
* Image Editor
|
|
|
|
|
*/
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-wrap {
|
2014-03-29 04:51:14 -04:00
|
|
|
position: static;
|
2014-03-06 17:55:14 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-wrap .imgedit-panel-content {
|
2020-02-11 11:32:06 -05:00
|
|
|
padding: 16px 16px 0 16px;
|
2014-03-29 04:51:14 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 282px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
overflow: auto;
|
2014-03-06 17:55:14 -05:00
|
|
|
}
|
|
|
|
|
|
2020-02-11 11:32:06 -05:00
|
|
|
/*
|
|
|
|
|
* Implementation of bottom padding in overflow content differs across browsers.
|
|
|
|
|
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
|
|
|
|
|
*/
|
|
|
|
|
.media-modal .imgedit-wrap .imgedit-submit {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-wrap .imgedit-settings {
|
2014-03-29 04:51:14 -04:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-left: 1px solid #ddd;
|
2020-02-11 11:32:06 -05:00
|
|
|
padding: 20px 16px 0;
|
2014-03-29 04:51:14 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-03-06 17:55:14 -05:00
|
|
|
width: 250px;
|
2014-03-29 04:51:14 -04:00
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-11 11:32:06 -05:00
|
|
|
/*
|
|
|
|
|
* Implementation of bottom padding in overflow content differs across browsers.
|
|
|
|
|
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
|
|
|
|
|
*/
|
|
|
|
|
.media-modal .imgedit-wrap .imgedit-save-target {
|
|
|
|
|
margin: 8px 0 24px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-group {
|
2014-03-29 04:51:14 -04:00
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
padding-bottom: 16px;
|
2014-08-26 08:55:16 -04:00
|
|
|
position: relative; /* RTL fix, #WP29352 */
|
2014-03-29 04:51:14 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-group:last-of-type {
|
2014-03-29 04:51:14 -04:00
|
|
|
border: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
.media-modal .imgedit-group-top {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .imgedit-group-top h2,
|
|
|
|
|
.media-modal .imgedit-group-top h2 .button-link {
|
|
|
|
|
display: inline-block;
|
2014-03-29 04:51:14 -04:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin: 0;
|
2016-01-08 14:13:26 -05:00
|
|
|
margin-top: 3px;
|
2014-03-29 04:51:14 -04:00
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
.media-modal .imgedit-group-top h2 a,
|
|
|
|
|
.media-modal .imgedit-group-top h2 .button-link {
|
2014-03-29 04:51:14 -04:00
|
|
|
text-decoration: none;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
/* higher specificity than media.css */
|
|
|
|
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
|
|
|
|
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
|
|
|
|
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: #0074a2;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 1;
|
2014-03-29 04:51:14 -04:00
|
|
|
cursor: pointer;
|
2016-01-08 14:13:26 -05:00
|
|
|
box-sizing: content-box;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
|
|
|
|
|
color: #0074a2;
|
|
|
|
|
border-color: #5b9dd9;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
2019-01-10 11:47:50 -05:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
2016-01-08 14:13:26 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
|
|
|
|
|
margin-top: -3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
|
|
|
|
|
margin-top: -2px;
|
2014-03-29 04:51:14 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-help-toggled span.dashicons:before {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "\f142";
|
2014-03-29 04:51:14 -04:00
|
|
|
}
|
|
|
|
|
|
2016-01-08 14:13:26 -05:00
|
|
|
.media-modal .imgedit-thumbnail-preview {
|
|
|
|
|
margin: 10px 8px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgedit-thumbnail-preview-caption {
|
|
|
|
|
display: block;
|
2014-03-06 17:55:14 -05:00
|
|
|
}
|
2014-03-29 04:51:14 -04:00
|
|
|
|
2020-07-07 09:45:02 -04:00
|
|
|
.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
|
|
|
|
|
.media-modal .imgedit-wrap .notice {
|
2014-03-29 04:51:14 -04:00
|
|
|
margin: 0;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
/**
|
2014-01-28 16:17:12 -05:00
|
|
|
* Embed from URL and Image Details
|
2012-11-12 00:57:12 -05:00
|
|
|
*/
|
|
|
|
|
.embed-url {
|
|
|
|
|
display: block;
|
|
|
|
|
position: relative;
|
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-09 19:27:10 -05:00
|
|
|
padding: 16px;
|
2012-11-12 00:57:12 -05:00
|
|
|
margin: 0;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 250;
|
|
|
|
|
background: #fff;
|
2012-11-12 00:57:12 -05:00
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame .embed-url input {
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 18px;
|
2019-09-30 15:20:58 -04:00
|
|
|
line-height: 1.22222222; /* 22px */
|
2019-06-07 16:45:02 -04:00
|
|
|
padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
|
2012-11-12 00:57:12 -05:00
|
|
|
width: 100%;
|
|
|
|
|
min-width: 200px;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-frame .embed-url input::-ms-clear {
|
|
|
|
|
display: none; /* the "x" in IE 11 conflicts with the spinner */
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-06 18:12:59 -05:00
|
|
|
.media-frame .embed-url .spinner {
|
|
|
|
|
position: absolute;
|
2014-05-26 19:57:14 -04:00
|
|
|
top: 32px;
|
2012-12-06 18:12:59 -05:00
|
|
|
right: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame .embed-loading .embed-url .spinner {
|
2015-04-09 16:35:28 -04:00
|
|
|
visibility: visible;
|
2012-12-06 18:12:59 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
.embed-link-settings,
|
2014-03-05 10:06:14 -05:00
|
|
|
.embed-media-settings {
|
2012-11-12 00:57:12 -05:00
|
|
|
position: absolute;
|
2014-05-26 19:57:14 -04:00
|
|
|
top: 70px;
|
2012-11-12 00:57:12 -05:00
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2020-02-11 11:32:06 -05:00
|
|
|
padding: 0 16px;
|
2012-11-12 00:57:12 -05:00
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-11 11:32:06 -05:00
|
|
|
/*
|
|
|
|
|
* Implementation of bottom padding in overflow content differs across browsers.
|
|
|
|
|
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
|
|
|
|
|
*/
|
|
|
|
|
.embed-link-settings::after,
|
|
|
|
|
.embed-media-settings::after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: flex;
|
|
|
|
|
clear: both;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-19 14:49:27 -04:00
|
|
|
.media-embed .embed-link-settings {
|
|
|
|
|
/* avoid Firefox to give focus to the embed preview container parent */
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-27 17:13:27 -05:00
|
|
|
.embed-preview img,
|
|
|
|
|
.embed-preview iframe,
|
2015-06-19 14:49:27 -04:00
|
|
|
.embed-preview embed,
|
|
|
|
|
.mejs-container video {
|
2014-05-26 19:57:14 -04:00
|
|
|
max-width: 100%;
|
2015-06-19 14:49:27 -04:00
|
|
|
vertical-align: middle;
|
2014-05-26 19:57:14 -04:00
|
|
|
}
|
|
|
|
|
|
2015-02-27 17:13:27 -05:00
|
|
|
.embed-preview a {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-26 19:57:14 -04:00
|
|
|
.embed-preview img {
|
2015-02-27 17:13:27 -05:00
|
|
|
display: block;
|
2014-05-26 19:57:14 -04:00
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-19 14:49:27 -04:00
|
|
|
.mejs-container:focus {
|
|
|
|
|
outline: 1px solid #5b9dd9;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: 0 0 2px 1px rgba(30, 140, 190, 0.8);
|
2015-06-19 14:49:27 -04:00
|
|
|
}
|
|
|
|
|
|
2014-03-27 18:41:14 -04:00
|
|
|
.image-details .media-modal {
|
|
|
|
|
left: 140px;
|
|
|
|
|
right: 140px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .media-frame-title,
|
|
|
|
|
.image-details .media-frame-content,
|
|
|
|
|
.image-details .media-frame-router {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-05 10:06:14 -05:00
|
|
|
.image-details .embed-media-settings {
|
2014-01-28 16:17:12 -05:00
|
|
|
top: 0;
|
2014-03-27 18:41:14 -04:00
|
|
|
overflow: visible;
|
2014-04-01 21:54:15 -04:00
|
|
|
padding: 0;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
2020-02-11 11:32:06 -05:00
|
|
|
.image-details .embed-media-settings::after {
|
|
|
|
|
content: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.image-details .embed-media-settings,
|
|
|
|
|
.image-details .embed-media-settings div {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 18:41:14 -04:00
|
|
|
.image-details .column-settings {
|
2014-04-01 21:54:15 -04:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-right: 1px solid #ddd;
|
|
|
|
|
min-height: 100%;
|
2014-08-07 23:46:17 -04:00
|
|
|
width: 55%;
|
2014-04-01 21:54:15 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-28 19:08:24 -04:00
|
|
|
.image-details .column-settings h2 {
|
2014-04-01 21:54:15 -04:00
|
|
|
margin: 20px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid #ddd;
|
2015-10-28 19:08:24 -04:00
|
|
|
color: #23282d;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-image {
|
2014-08-07 23:46:17 -04:00
|
|
|
width: 45%;
|
2014-04-01 21:54:15 -04:00
|
|
|
position: absolute;
|
2014-08-07 23:46:17 -04:00
|
|
|
left: 55%;
|
2014-04-01 21:54:15 -04:00
|
|
|
top: 0;
|
2014-01-28 16:17:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .image {
|
|
|
|
|
margin: 20px;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .image img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .advanced-toggle {
|
2015-06-26 01:01:24 -04:00
|
|
|
padding: 0;
|
2014-04-01 21:54:15 -04:00
|
|
|
color: #666;
|
2015-06-26 01:01:24 -04:00
|
|
|
text-transform: uppercase;
|
2017-02-09 11:47:44 -05:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .advanced-toggle:hover,
|
|
|
|
|
.image-details .advanced-toggle:active {
|
|
|
|
|
color: #666;
|
2014-04-01 21:54:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.image-details .advanced-toggle:after {
|
2015-09-05 15:57:25 -04:00
|
|
|
font: normal 20px/1 dashicons;
|
2020-10-25 22:25:09 -04:00
|
|
|
speak: never;
|
2014-04-01 21:54:15 -04:00
|
|
|
vertical-align: top;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "\f140";
|
2014-04-01 21:54:15 -04:00
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.image-details .advanced-visible .advanced-toggle:after {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "\f142";
|
2014-04-01 21:54:15 -04:00
|
|
|
}
|
2014-03-27 18:41:14 -04:00
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .custom-size label, /* Back-compat for pre-5.3 */
|
|
|
|
|
.image-details .custom-size .custom-size-setting {
|
2014-04-02 23:21:15 -04:00
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .custom-size .custom-size-setting label {
|
|
|
|
|
float: none;
|
2014-04-02 23:21:15 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size input {
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size .sep {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 26px 6px 0 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .custom-size .description {
|
|
|
|
|
margin-left: 0;
|
2014-04-02 23:21:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
.media-embed .thumbnail {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .thumbnail img {
|
|
|
|
|
max-height: 200px;
|
2012-12-06 18:12:59 -05:00
|
|
|
display: block;
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .thumbnail:after {
|
2015-09-10 16:22:25 -04:00
|
|
|
content: "";
|
2012-11-12 00:57:12 -05:00
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2019-03-04 17:02:52 -05:00
|
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
2012-11-12 00:57:12 -05:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-embed .setting,
|
|
|
|
|
.media-embed .setting-group {
|
2012-11-12 00:57:12 -05:00
|
|
|
width: 100%;
|
2014-03-27 18:41:14 -04:00
|
|
|
margin: 10px 0;
|
2012-11-12 00:57:12 -05:00
|
|
|
float: left;
|
|
|
|
|
display: block;
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-embed .setting-group .setting:not(.checkbox-setting) {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-15 06:43:51 -04:00
|
|
|
.media-embed .setting.has-description {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .description {
|
|
|
|
|
clear: both;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-01 18:05:58 -04:00
|
|
|
.media-embed .content-track + .description {
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
/* The !important needs to override a high specificity selector from wp-medialement.css */
|
|
|
|
|
max-width: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .remove-track {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .embed-media-settings .setting,
|
|
|
|
|
.image-details .embed-media-settings .setting-group {
|
2014-03-27 18:41:14 -04:00
|
|
|
float: none;
|
2014-04-01 21:54:15 -04:00
|
|
|
width: auto;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .actions {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 18:41:14 -04:00
|
|
|
.media-embed .setting input[type="text"],
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-embed .setting textarea,
|
|
|
|
|
.media-embed fieldset {
|
2014-03-27 18:41:14 -04:00
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .embed-media-settings .setting input[type="text"],
|
|
|
|
|
.image-details .embed-media-settings .setting textarea {
|
2014-03-27 18:41:14 -04:00
|
|
|
max-width: inherit;
|
2014-04-01 21:54:15 -04:00
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting input.link-to-custom,
|
2014-04-02 23:21:15 -04:00
|
|
|
.image-details .embed-media-settings .link-target,
|
2019-03-15 06:43:51 -04:00
|
|
|
.image-details .embed-media-settings .custom-size,
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .embed-media-settings .setting-group,
|
2019-03-15 06:43:51 -04:00
|
|
|
.image-details .description {
|
2014-04-01 21:54:15 -04:00
|
|
|
margin-left: 27%;
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-15 06:43:51 -04:00
|
|
|
.image-details .description {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .embed-media-settings .link-target {
|
2019-06-07 16:45:02 -04:00
|
|
|
margin-top: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .checkbox-label,
|
|
|
|
|
.audio-details .checkbox-label,
|
|
|
|
|
.video-details .checkbox-label {
|
|
|
|
|
vertical-align: baseline;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
2014-04-19 14:34:17 -04:00
|
|
|
.media-embed .setting input.hidden,
|
|
|
|
|
.media-embed .setting textarea.hidden {
|
2014-01-28 16:17:12 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-embed .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.media-embed .setting .name,
|
|
|
|
|
.media-embed .setting-group .name {
|
|
|
|
|
display: inline-block;
|
2012-11-12 00:57:12 -05:00
|
|
|
font-size: 13px;
|
2019-05-30 09:18:52 -04:00
|
|
|
line-height: 1.84615384;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-embed .setting span {
|
|
|
|
|
display: block; /* Back-compat for pre-5.3 */
|
|
|
|
|
width: 200px; /* Back-compat for pre-5.3 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.image-details .embed-media-settings .setting .name {
|
2014-04-01 21:54:15 -04:00
|
|
|
float: left;
|
|
|
|
|
width: 25%;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin: 8px 1% 0 1%;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-23 06:00:59 -04:00
|
|
|
/* Buttons group in IE 11. */
|
2019-10-21 19:23:04 -04:00
|
|
|
.media-frame .setting-group .button-group,
|
2019-09-23 06:00:59 -04:00
|
|
|
.image-details .embed-media-settings .setting .button-group {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 18:41:14 -04:00
|
|
|
.media-embed-sidebar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 440px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-13 00:02:15 -04:00
|
|
|
.advanced-section,
|
2014-03-27 18:41:14 -04:00
|
|
|
.link-settings {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 22:15:53 -05:00
|
|
|
/**
|
2019-06-07 16:45:02 -04:00
|
|
|
* Button groups fix: can be removed together with the Back-compat for pre-5.3
|
2012-12-04 22:15:53 -05:00
|
|
|
*/
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-frame .setting .button-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
max-width: none !important;
|
|
|
|
|
}
|
2012-12-04 22:15:53 -05:00
|
|
|
|
2013-12-08 20:31:11 -05:00
|
|
|
/**
|
|
|
|
|
* Localization
|
|
|
|
|
*/
|
|
|
|
|
.rtl .media-modal,
|
|
|
|
|
.rtl .media-frame,
|
|
|
|
|
.rtl .media-frame .search,
|
|
|
|
|
.rtl .media-frame input[type="text"],
|
|
|
|
|
.rtl .media-frame input[type="password"],
|
|
|
|
|
.rtl .media-frame input[type="number"],
|
|
|
|
|
.rtl .media-frame input[type="search"],
|
|
|
|
|
.rtl .media-frame input[type="email"],
|
|
|
|
|
.rtl .media-frame input[type="url"],
|
2014-08-07 17:34:16 -04:00
|
|
|
.rtl .media-frame input[type="tel"],
|
2013-12-08 20:31:11 -05:00
|
|
|
.rtl .media-frame textarea,
|
|
|
|
|
.rtl .media-frame select {
|
|
|
|
|
font-family: Tahoma, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:lang(he-il) .rtl .media-modal,
|
|
|
|
|
:lang(he-il) .rtl .media-frame,
|
|
|
|
|
:lang(he-il) .rtl .media-frame .search,
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="text"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="password"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="number"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="search"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="email"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="url"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame textarea,
|
|
|
|
|
:lang(he-il) .rtl .media-frame select {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:51:15 -05:00
|
|
|
/**
|
|
|
|
|
* Responsive layout
|
|
|
|
|
*/
|
|
|
|
|
@media only screen and (max-width: 900px) {
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-modal .media-frame-title {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .media-frame-title h1 {
|
|
|
|
|
line-height: 2.22222222;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal-close {
|
|
|
|
|
width: 42px;
|
|
|
|
|
height: 42px;
|
|
|
|
|
}
|
2014-08-07 23:46:17 -04:00
|
|
|
|
|
|
|
|
/* Drop-down menu */
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-frame .media-frame-title {
|
|
|
|
|
position: static;
|
|
|
|
|
padding: 0 44px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-router,
|
|
|
|
|
.media-frame:not(.hide-menu) .media-frame-content,
|
|
|
|
|
.media-frame:not(.hide-menu) .media-frame-toolbar {
|
2014-08-07 23:46:17 -04:00
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-router {
|
|
|
|
|
/* 40 title + (40 - 6) menu toggle button + 6 spacing */
|
|
|
|
|
top: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame:not(.hide-menu) .media-frame-content {
|
|
|
|
|
/* 80 + room for the tabs */
|
|
|
|
|
top: 114px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-router .media-frame-content {
|
|
|
|
|
top: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-menu {
|
2014-08-07 23:46:17 -04:00
|
|
|
position: static;
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-menu {
|
2019-09-30 15:37:58 -04:00
|
|
|
display: none;
|
2014-08-09 01:09:16 -04:00
|
|
|
width: auto;
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
z-index: 2000;
|
2019-09-30 15:37:58 -04:00
|
|
|
top: 75px;
|
2019-10-03 08:10:57 -04:00
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
2014-08-09 01:09:16 -04:00
|
|
|
right: auto;
|
|
|
|
|
bottom: auto;
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
border: 1px solid #ccc;
|
2014-08-07 23:46:17 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-menu.visible {
|
2019-09-30 15:37:58 -04:00
|
|
|
display: block;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-menu > a {
|
2014-08-09 01:09:16 -04:00
|
|
|
padding: 12px 16px;
|
2014-08-07 23:46:17 -04:00
|
|
|
font-size: 16px;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-menu .separator {
|
2014-08-09 01:09:16 -04:00
|
|
|
margin: 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-03 08:10:57 -04:00
|
|
|
/* Visually hide the menu heading keeping it available to assistive technologies. */
|
|
|
|
|
.media-frame-menu-heading {
|
|
|
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
|
|
|
-webkit-clip-path: inset(50%);
|
|
|
|
|
clip-path: inset(50%);
|
|
|
|
|
height: 1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 1px;
|
|
|
|
|
word-wrap: normal !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Reveal the menu toggle button. */
|
2019-09-30 15:37:58 -04:00
|
|
|
.wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
2019-10-03 08:10:57 -04:00
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
margin: -6px 0 0;
|
2019-09-30 15:37:58 -04:00
|
|
|
padding: 0 2px 0 12px;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
background: transparent;
|
2019-10-03 08:10:57 -04:00
|
|
|
/* Only for IE11 to vertically align text within the inline-flex button */
|
|
|
|
|
height: 0.1%;
|
|
|
|
|
/* Modern browsers */
|
|
|
|
|
min-height: 40px;
|
2014-08-07 23:46:17 -04:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.wp-core-ui .button.media-frame-menu-toggle:hover,
|
|
|
|
|
.wp-core-ui .button.media-frame-menu-toggle:active {
|
|
|
|
|
background: transparent;
|
|
|
|
|
transform: none;
|
2014-08-07 23:46:17 -04:00
|
|
|
}
|
|
|
|
|
|
2019-09-30 15:37:58 -04:00
|
|
|
.wp-core-ui .button.media-frame-menu-toggle:focus {
|
|
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 1px solid transparent;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
2014-08-07 23:46:17 -04:00
|
|
|
/* End drop-down menu */
|
2012-11-27 20:51:15 -05:00
|
|
|
|
|
|
|
|
.media-sidebar {
|
2014-08-07 23:46:17 -04:00
|
|
|
width: 230px;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .attachments,
|
2012-11-30 01:01:47 -05:00
|
|
|
.attachments-browser .uploader-inline,
|
2012-11-27 20:51:15 -05:00
|
|
|
.attachments-browser .media-toolbar {
|
2014-08-07 23:46:17 -04:00
|
|
|
right: 262px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting {
|
2014-08-07 23:46:17 -04:00
|
|
|
margin: 6px 0px;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting input,
|
|
|
|
|
.media-sidebar .setting textarea,
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting .name,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting input,
|
|
|
|
|
.attachment-details .setting textarea,
|
2019-06-07 16:45:02 -04:00
|
|
|
.attachment-details .setting .name,
|
2012-11-27 20:51:15 -05:00
|
|
|
.compat-item label span {
|
|
|
|
|
float: none;
|
2019-06-07 16:45:02 -04:00
|
|
|
display: inline-block;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.attachment-details .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.media-sidebar .checkbox-label-inline {
|
|
|
|
|
float: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting .select-label-inline {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting .name,
|
|
|
|
|
.media-sidebar .checkbox-label-inline,
|
|
|
|
|
.attachment-details .setting .name,
|
2012-11-27 20:51:15 -05:00
|
|
|
.compat-item label span {
|
|
|
|
|
text-align: inherit;
|
|
|
|
|
min-height: 16px;
|
2012-11-30 21:53:53 -05:00
|
|
|
margin: 0;
|
2019-06-07 16:45:02 -04:00
|
|
|
padding: 8px 2px 2px;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
/* Needs high specificity. */
|
|
|
|
|
.media-sidebar .setting .copy-to-clipboard-container,
|
|
|
|
|
.attachment-details .attachment-info .copy-to-clipboard-container {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting .copy-attachment-url,
|
|
|
|
|
.attachment-details .attachment-info .copy-attachment-url {
|
|
|
|
|
margin: 0 1px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting .value,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting .value {
|
2014-08-07 23:46:17 -04:00
|
|
|
float: none;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting input[type="text"],
|
|
|
|
|
.media-sidebar .setting input[type="password"],
|
|
|
|
|
.media-sidebar .setting input[type="email"],
|
|
|
|
|
.media-sidebar .setting input[type="number"],
|
|
|
|
|
.media-sidebar .setting input[type="search"],
|
|
|
|
|
.media-sidebar .setting input[type="tel"],
|
|
|
|
|
.media-sidebar .setting input[type="url"],
|
|
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.media-sidebar .setting select,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting input[type="text"],
|
|
|
|
|
.attachment-details .setting input[type="password"],
|
|
|
|
|
.attachment-details .setting input[type="email"],
|
|
|
|
|
.attachment-details .setting input[type="number"],
|
|
|
|
|
.attachment-details .setting input[type="search"],
|
|
|
|
|
.attachment-details .setting input[type="tel"],
|
|
|
|
|
.attachment-details .setting input[type="url"],
|
|
|
|
|
.attachment-details .setting textarea,
|
2019-04-18 17:43:52 -04:00
|
|
|
.attachment-details .setting select,
|
|
|
|
|
.attachment-details .setting + .description {
|
2014-08-15 00:10:16 -04:00
|
|
|
float: none;
|
2012-11-30 21:53:53 -05:00
|
|
|
width: 98%;
|
2012-11-27 20:51:15 -05:00
|
|
|
max-width: none;
|
2014-08-07 23:46:17 -04:00
|
|
|
height: auto;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.media-frame .media-toolbar input[type="search"] {
|
|
|
|
|
line-height: 2.25; /* 36px */
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting select.columns,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting select.columns {
|
2012-11-27 20:51:15 -05:00
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame textarea,
|
|
|
|
|
.media-frame .search {
|
|
|
|
|
padding: 3px 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.wp-admin .media-frame select {
|
|
|
|
|
min-height: 40px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 1.625;
|
|
|
|
|
padding: 5px 24px 5px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.image-details .column-image {
|
|
|
|
|
width: 30%;
|
|
|
|
|
left: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-settings {
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 18:41:14 -04:00
|
|
|
.image-details .media-modal {
|
|
|
|
|
left: 30px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .embed-media-settings .setting,
|
|
|
|
|
.image-details .embed-media-settings .setting-group {
|
2014-04-01 21:54:15 -04:00
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-07 16:45:02 -04:00
|
|
|
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
|
|
|
|
|
.image-details .embed-media-settings .setting .name {
|
2014-04-01 21:54:15 -04:00
|
|
|
float: none;
|
|
|
|
|
text-align: left;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 4px;
|
2019-06-07 16:45:02 -04:00
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .legend-inline {
|
|
|
|
|
position: static;
|
|
|
|
|
transform: none;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting-group .setting {
|
|
|
|
|
margin-bottom: 0;
|
2014-04-01 21:54:15 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting input.link-to-custom,
|
|
|
|
|
.image-details .embed-media-settings .setting input[type="text"],
|
|
|
|
|
.image-details .embed-media-settings .setting textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-04-18 17:43:52 -04:00
|
|
|
.image-details .embed-media-settings .setting.has-description {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .description {
|
|
|
|
|
width: auto;
|
|
|
|
|
margin: 0 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 23:21:15 -04:00
|
|
|
.image-details .embed-media-settings .custom-size {
|
|
|
|
|
margin-left: 20px;
|
2014-04-01 21:54:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.collection-settings .setting input[type="checkbox"] {
|
2019-06-07 16:45:02 -04:00
|
|
|
float: none;
|
2014-08-15 12:02:15 -04:00
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 21:53:53 -05:00
|
|
|
.media-selection {
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection:after {
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .attachments {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.media-modal .attachments-browser .media-toolbar .search {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .attachments-browser .media-toolbar .attachment-filters {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-15 14:54:10 -05:00
|
|
|
/* Text inputs need to be 16px, or they force zooming on iOS */
|
|
|
|
|
.media-frame input[type="text"],
|
|
|
|
|
.media-frame input[type="password"],
|
|
|
|
|
.media-frame input[type="number"],
|
|
|
|
|
.media-frame input[type="search"],
|
|
|
|
|
.media-frame input[type="email"],
|
|
|
|
|
.media-frame input[type="url"],
|
|
|
|
|
.media-frame textarea,
|
|
|
|
|
.media-frame select {
|
|
|
|
|
font-size: 16px;
|
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-09 19:27:10 -05:00
|
|
|
}
|
2019-10-03 08:10:57 -04:00
|
|
|
|
|
|
|
|
.media-frame .media-toolbar input[type="search"] {
|
2019-10-07 08:43:03 -04:00
|
|
|
line-height: 2.3755; /* 38px */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .media-toolbar .spinner {
|
|
|
|
|
margin-bottom: 10px;
|
2019-10-03 08:10:57 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 782px) {
|
|
|
|
|
.attachments-browser .media-toolbar {
|
|
|
|
|
height: 82px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .attachments,
|
|
|
|
|
.attachments-browser .uploader-inline {
|
|
|
|
|
top: 82px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-toolbar .media-toolbar {
|
2020-02-11 11:32:06 -05:00
|
|
|
bottom: -54px;
|
2019-10-03 08:10:57 -04:00
|
|
|
}
|
2012-11-27 20:51:15 -05:00
|
|
|
|
2019-10-07 08:43:03 -04:00
|
|
|
.mode-grid .attachments-browser .media-toolbar-primary {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
|
|
|
|
|
.media-sidebar .copy-to-clipboard-container .success,
|
|
|
|
|
.attachment-details .copy-to-clipboard-container .success {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 2.71428571;
|
|
|
|
|
}
|
2019-10-07 08:43:03 -04:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 15:07:10 -05:00
|
|
|
/* Responsive on portrait and landscape */
|
|
|
|
|
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
|
|
|
|
/* Full-bleed modal */
|
2014-03-27 18:41:14 -04:00
|
|
|
.media-modal,
|
2014-08-09 01:09:16 -04:00
|
|
|
.image-details .media-modal {
|
2013-11-15 16:47:09 -05:00
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal-backdrop {
|
2013-11-15 16:47:09 -05:00
|
|
|
position: fixed;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.media-sidebar {
|
2014-08-09 01:09:16 -04:00
|
|
|
z-index: 1900;
|
|
|
|
|
max-width: 70%;
|
|
|
|
|
bottom: 120%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar.visible {
|
|
|
|
|
bottom: 0;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.attachments-browser .attachments,
|
|
|
|
|
.attachments-browser .uploader-inline,
|
|
|
|
|
.attachments-browser .media-toolbar {
|
|
|
|
|
right: 0;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
2013-11-18 15:07:10 -05:00
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.image-details .media-frame-title {
|
|
|
|
|
display: block;
|
|
|
|
|
top: 0;
|
|
|
|
|
font-size: 14px;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-26 01:20:16 -04:00
|
|
|
.image-details .column-image,
|
|
|
|
|
.image-details .column-settings {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-settings {
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
/* Media tabs on the top */
|
|
|
|
|
.media-frame-content .media-toolbar .instructions {
|
|
|
|
|
display: none;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
2013-11-18 15:07:10 -05:00
|
|
|
}
|
|
|
|
|
|
2019-06-27 08:33:56 -04:00
|
|
|
@media only screen and (min-width: 901px) and (max-height: 400px) {
|
|
|
|
|
.media-menu,
|
|
|
|
|
.media-frame:not(.hide-menu) .media-menu {
|
|
|
|
|
top: 0;
|
|
|
|
|
padding-top: 44px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
@media only screen and (max-width: 480px) {
|
2015-07-20 11:57:25 -04:00
|
|
|
.wp-core-ui.wp-customizer .media-button {
|
|
|
|
|
margin-top: 13px;
|
|
|
|
|
}
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
2012-12-04 11:32:06 -05:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* HiDPI Displays
|
|
|
|
|
*/
|
|
|
|
|
@media print,
|
|
|
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
|
|
|
|
(min-resolution: 120dpi) {
|
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-09 19:27:10 -05:00
|
|
|
|
2015-12-30 13:32:29 -05:00
|
|
|
.wp-core-ui .media-modal-icon {
|
2014-07-28 11:52:17 -04:00
|
|
|
background-image: url(../images/uploader-icons-2x.png);
|
|
|
|
|
background-size: 134px 15px;
|
|
|
|
|
}
|
2012-12-04 11:32:06 -05:00
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.media-frame .spinner {
|
|
|
|
|
background-image: url(../images/spinner-2x.gif);
|
|
|
|
|
}
|
2014-01-28 16:17:12 -05:00
|
|
|
}
|
2014-06-05 18:01:18 -04:00
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="1"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="2"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="3"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 33.33%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="4"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="5"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="6"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 16.66%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="7"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 14.28%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="8"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 12.5%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="9"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 11.11%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="10"] .attachment {
|
2014-08-05 01:20:18 -04:00
|
|
|
width: 10%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="11"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 9.09%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
2014-09-03 02:10:19 -04:00
|
|
|
.media-frame-content[data-columns="12"] .attachment {
|
2014-09-03 02:28:16 -04:00
|
|
|
width: 8.33%;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
