2012-11-12 00:57:12 -05:00
|
|
|
/**
|
|
|
|
|
* Base Styles
|
|
|
|
|
*/
|
2014-01-09 11:36:12 -05:00
|
|
|
.media-modal * {
|
|
|
|
|
-webkit-box-sizing: content-box;
|
2014-02-13 03:30:17 -05:00
|
|
|
-moz-box-sizing: content-box;
|
|
|
|
|
box-sizing: content-box;
|
2014-01-09 11:36:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-09-10 14:09:16 -04:00
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame select,
|
|
|
|
|
.media-frame textarea {
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-21 13:37:52 -05:00
|
|
|
.media-modal,
|
|
|
|
|
.media-frame {
|
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-family: "Open Sans", sans-serif;
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame textarea {
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame select,
|
|
|
|
|
.wp-admin .media-frame select {
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame a {
|
2012-12-05 14:15:40 -05:00
|
|
|
border-bottom: none;
|
2012-11-21 13:37:52 -05:00
|
|
|
color: #21759b;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame a:hover {
|
2012-11-21 13:37:52 -05:00
|
|
|
color: #d54e21;
|
2012-11-21 13:00:18 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:45:06 -05:00
|
|
|
.media-frame a.button {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame a.button:hover {
|
|
|
|
|
color: #222;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame a.button-primary,
|
|
|
|
|
.media-frame a.button-primary:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
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-family: "Open Sans", sans-serif;
|
2012-11-21 13:37:52 -05:00
|
|
|
font-size: 12px;
|
2012-11-21 13:00:18 -05:00
|
|
|
border-width: 1px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: #dfdfdf;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
|
|
border-color: #5b9dd9;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 14:15:40 -05:00
|
|
|
.media-frame select {
|
|
|
|
|
height: 24px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 00:17:23 -05:00
|
|
|
.media-frame :-moz-placeholder {
|
|
|
|
|
color: #a9a9a9;
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
.media-frame .hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-11-14 14:28:22 -05:00
|
|
|
/*!
|
|
|
|
|
* jQuery UI Draggable/Sortable 1.11.2
|
|
|
|
|
* http://jqueryui.com
|
|
|
|
|
*
|
|
|
|
|
* Copyright 2014 jQuery Foundation and other contributors
|
|
|
|
|
* Released under the MIT license.
|
|
|
|
|
* http://jquery.org/license
|
|
|
|
|
*/
|
|
|
|
|
.ui-draggable-handle,
|
|
|
|
|
.ui-sortable-handle {
|
2014-02-23 05:30:19 -05:00
|
|
|
-ms-touch-action: none;
|
2014-11-14 14:28:22 -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;
|
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
|
|
|
text-decoration: none;
|
2014-08-19 16:38:16 -04:00
|
|
|
top: 10px;
|
2014-08-08 15:01:19 -04:00
|
|
|
right: 10px;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
2012-12-03 20:26:03 -05:00
|
|
|
z-index: 1000;
|
2014-08-02 18:02:19 -04:00
|
|
|
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
|
|
|
|
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
|
|
|
|
2014-08-19 16:38:16 -04:00
|
|
|
.media-modal-close:active {
|
2014-08-24 01:11:16 -04:00
|
|
|
-webkit-box-shadow: none;
|
2014-08-19 16:38:16 -04:00
|
|
|
box-shadow: 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
|
|
|
.media-modal-close span.media-modal-icon {
|
2014-08-08 15:01:19 -04:00
|
|
|
display: block;
|
2014-08-19 16:38:16 -04:00
|
|
|
margin-top: 5px;
|
|
|
|
|
width: 30px;
|
2012-12-03 20:26:03 -05:00
|
|
|
height: 15px;
|
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-image: none;
|
2014-08-19 16:38:16 -04:00
|
|
|
text-align: center;
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-08 15:01:19 -04:00
|
|
|
.media-modal-close .media-modal-icon:before {
|
|
|
|
|
content: '\f158';
|
|
|
|
|
font: normal 20px/1 'dashicons';
|
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
|
|
|
speak: none;
|
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;
|
2014-08-08 15:01:19 -04:00
|
|
|
color: #666;
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-08 15:01:19 -04:00
|
|
|
.media-modal-close:hover .media-modal-icon:before {
|
|
|
|
|
color: #2ea2cc;
|
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-10 22:54:19 -04:00
|
|
|
.media-modal-close:active {
|
|
|
|
|
outline: 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
|
|
|
.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;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
|
2014-01-09 11:36:12 -05:00
|
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.7);
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2012-11-29 09:36:12 -05:00
|
|
|
.media-modal-icon {
|
|
|
|
|
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;
|
|
|
|
|
border: 0 solid #dfdfdf;
|
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
|
|
|
}
|
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
.media-toolbar-primary {
|
|
|
|
|
float: right;
|
2012-12-05 05:15:42 -05:00
|
|
|
height: 100%;
|
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;
|
2012-11-10 14:10:04 -05:00
|
|
|
padding: 0 16px 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
|
|
|
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
|
|
|
}
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .sidebar-title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 12px 10px 10px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .sidebar-content {
|
|
|
|
|
padding: 0 10px;
|
2012-10-29 03:38:13 -04:00
|
|
|
margin-bottom: 130px;
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .search {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.media-sidebar h3,
|
2014-08-07 16:32:16 -04:00
|
|
|
.image-details h3 {
|
2012-11-10 13:25:04 -05:00
|
|
|
position: relative;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
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%;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting label,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting label {
|
2012-12-04 23:06:45 -05:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting .link-to-custom,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting .link-to-custom {
|
2014-07-04 19:29:16 -04:00
|
|
|
margin: 3px 2px 0;
|
2012-12-05 14:15:40 -05:00
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting span,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting span {
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting select,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .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
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting span,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting span,
|
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;
|
|
|
|
|
line-height: 16px;
|
2012-11-10 20:26:42 -05:00
|
|
|
font-weight: normal;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-10 13:25:04 -05:00
|
|
|
}
|
|
|
|
|
|
2014-06-05 18:01:18 -04:00
|
|
|
.compat-item label span {
|
|
|
|
|
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,
|
|
|
|
|
.attachment-details .setting .value {
|
2014-08-15 05:41:15 -04:00
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
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,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting .value {
|
2014-07-04 19:29:16 -04:00
|
|
|
margin: 0 1px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar select,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details select {
|
2012-11-10 13:25:04 -05:00
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
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: 66%;
|
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"],
|
|
|
|
|
.compat-item .field input[type="url"] {
|
2012-11-10 20:26:42 -05:00
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
2014-08-19 16:38:16 -04:00
|
|
|
padding: 10px 0;
|
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
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-menu > a {
|
|
|
|
|
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
|
|
|
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: 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
|
|
|
margin: 0;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 14px;
|
2014-01-09 11:36:12 -05:00
|
|
|
color: #0074a2;
|
2012-12-03 20:26:03 -05:00
|
|
|
text-decoration: 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
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-menu > a:hover {
|
|
|
|
|
color: #21759B;
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-menu > a:active {
|
|
|
|
|
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 {
|
2014-01-09 11:36:12 -05:00
|
|
|
color: #222;
|
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-weight: bold;
|
|
|
|
|
}
|
2012-09-06 03:46:15 -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 .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;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-02-06 01:25:18 -05:00
|
|
|
.media-router a {
|
|
|
|
|
-webkit-transition: none;
|
2014-02-13 03:30:17 -05:00
|
|
|
transition: none;
|
2014-02-06 01:25:18 -05:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-router > a {
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
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: 8px 10px 9px;
|
2012-12-03 20:26:03 -05:00
|
|
|
margin: 0;
|
|
|
|
|
height: 18px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-router > a:last-child {
|
|
|
|
|
border-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-28 23:39:15 -04:00
|
|
|
.media-router > a:active {
|
2012-12-03 20:26:03 -05:00
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-router .active,
|
|
|
|
|
.media-router .active:hover {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
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,
|
|
|
|
|
.media-router > a.active:last-child {
|
|
|
|
|
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;
|
|
|
|
|
border-bottom: 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;
|
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;
|
2012-12-03 20:26:03 -05:00
|
|
|
height: 60px;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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-menu .media-frame-menu {
|
|
|
|
|
left: -200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-toolbar .media-frame-content {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-toolbar .media-frame-toolbar {
|
|
|
|
|
bottom: -61px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-router .media-frame-router {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-router .media-frame-title {
|
|
|
|
|
border-bottom: 1px solid #dfdfdf;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
2012-12-03 20:26:03 -05:00
|
|
|
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.media-frame-title .dashicons {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
.media-frame-title h1 {
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
font-size: 22px;
|
2014-08-19 16:38:16 -04:00
|
|
|
line-height: 50px;
|
2012-12-03 20:26:03 -05:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
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%;
|
|
|
|
|
}
|
|
|
|
|
|
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%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-04 11:48:16 -04:00
|
|
|
.media-frame-content .crop-content .upload-errors
|
|
|
|
|
{
|
|
|
|
|
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;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
/**
|
|
|
|
|
* Search
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .search {
|
|
|
|
|
margin-top: 11px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #464646;
|
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-family: "Open Sans", sans-serif;
|
2012-11-27 20:51:15 -05:00
|
|
|
-webkit-appearance: none;
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 04:11:33 -05:00
|
|
|
.media-toolbar-secondary .search {
|
|
|
|
|
margin-right: 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
|
|
|
/**
|
|
|
|
|
* Attachments
|
|
|
|
|
*/
|
|
|
|
|
.attachments {
|
|
|
|
|
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
|
|
|
|
|
*/
|
|
|
|
|
.attachment {
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
2014-08-05 01:20:18 -04:00
|
|
|
padding: 8px;
|
|
|
|
|
margin: 0;
|
2012-10-10 05:55:47 -04:00
|
|
|
color: #464646;
|
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
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-25 17:26:16 -04:00
|
|
|
.attachment:focus,
|
|
|
|
|
.selected.attachment:focus,
|
|
|
|
|
.attachment.details:focus {
|
2014-05-28 23:39:15 -04:00
|
|
|
-webkit-box-shadow:
|
2014-08-25 17:26:16 -04:00
|
|
|
inset 0 0 2px 3px #fff,
|
|
|
|
|
inset 0 0 0 7px #5b9dd9;
|
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;
|
2014-05-28 23:39:15 -04:00
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-30 17:09:45 -04:00
|
|
|
.selected.attachment {
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow:
|
2014-08-05 01:20:18 -04:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 0 7px #ccc;
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-25 17:26:16 -04:00
|
|
|
.attachment.details {
|
|
|
|
|
-webkit-box-shadow:
|
|
|
|
|
inset 0 0 0 3px #fff,
|
|
|
|
|
inset 0 0 0 7px #1e8cbe;
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset 0 0 0 3px #fff,
|
|
|
|
|
inset 0 0 0 7px #1e8cbe;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-18 21:10:17 -04:00
|
|
|
.attachment-preview {
|
2012-10-10 19:32:48 -04:00
|
|
|
position: relative;
|
2014-08-06 02:29:16 -04:00
|
|
|
-webkit-box-shadow:
|
|
|
|
|
inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
|
|
|
|
|
inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
|
|
|
|
|
inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
|
|
|
|
|
background: #eee;
|
|
|
|
|
cursor: pointer;
|
2014-08-05 01:20:18 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-preview:before {
|
|
|
|
|
content: '';
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2012-11-27 14:14:36 -05:00
|
|
|
.attachment .icon {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-08 19:20:04 -04:00
|
|
|
.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;
|
|
|
|
|
-webkit-transition: opacity .1s;
|
|
|
|
|
transition: opacity .1s;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-05 01:20:18 -04:00
|
|
|
.attachment .portrait img {
|
|
|
|
|
max-width: 100%;
|
2014-07-03 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-05 01:20:18 -04:00
|
|
|
.attachment .landscape img {
|
|
|
|
|
max-height: 100%;
|
2014-07-03 23:39:15 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-05 01:20:18 -04:00
|
|
|
.attachment .thumbnail:after {
|
2012-10-29 14:05:03 -04:00
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
2012-10-29 14:05:03 -04:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 16:45:10 -05:00
|
|
|
/* @noflip */
|
2012-10-29 14:05:03 -04:00
|
|
|
.attachment .thumbnail img {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 16:45:10 -05:00
|
|
|
/* @noflip */
|
2012-10-31 16:34:50 -04:00
|
|
|
.attachment .thumbnail .centered {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
-webkit-transform: translate( 50%, 50% );
|
2014-08-05 01:20:18 -04:00
|
|
|
-ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
|
2014-02-13 03:30:17 -05:00
|
|
|
transform: translate( 50%, 50% );
|
2012-10-31 16:34:50 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment .thumbnail .centered img {
|
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
|
|
|
-webkit-transform: translate( -50%, -50% );
|
2014-08-05 01:20:18 -04:00
|
|
|
-ms-transform: translate(-50%,-50%);
|
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
|
|
|
|
2014-08-06 02:29:16 -04:00
|
|
|
.attachment .thumbnail .centered img.icon {
|
|
|
|
|
-webkit-transform: translate( -50%, -70% );
|
|
|
|
|
-ms-transform: translate(-50%,-70%);
|
|
|
|
|
transform: translate( -50%, -70% );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie8 .attachment img.icon {
|
|
|
|
|
top: 20%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-10 05:55:47 -04:00
|
|
|
.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;
|
|
|
|
|
font-weight: bold;
|
2012-10-29 14:05:03 -04:00
|
|
|
background: rgba( 255, 255, 255, 0.8 );
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
2012-11-27 10:58:47 -05:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment .filename div {
|
|
|
|
|
padding: 5px 10px;
|
2012-10-08 19:20:04 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment .thumbnail img {
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2012-09-27 03:45:26 -04:00
|
|
|
.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-09-27 03:45:26 -04:00
|
|
|
font-size: 20px;
|
2012-10-11 00:11:47 -04:00
|
|
|
line-height: 20px;
|
2012-09-27 03:45:26 -04:00
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: #464646;
|
2012-11-29 09:36:12 -05:00
|
|
|
background-color: #fff;
|
|
|
|
|
background-position: -96px 4px;
|
2012-10-11 00:11:47 -04:00
|
|
|
border-width: 0;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-border-radius: 3px;
|
2012-11-29 09:36:12 -05:00
|
|
|
border-radius: 3px;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
2012-10-11 00:11:47 -04:00
|
|
|
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
2014-11-20 10:31:23 -05:00
|
|
|
-webkit-transition-duration: none;
|
2014-11-17 22:34:25 -05:00
|
|
|
transition-duration: none;
|
2014-11-20 10:31:23 -05:00
|
|
|
-webkit-transition-property: none;
|
2014-11-17 22:34:25 -05:00
|
|
|
transition-property: none;
|
2012-10-11 00:11:47 -04:00
|
|
|
}
|
|
|
|
|
|
2014-11-17 22:34:25 -05:00
|
|
|
.attachment a.close:hover,
|
|
|
|
|
.attachment a.close:focus {
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
|
2012-10-11 00:11:47 -04:00
|
|
|
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
|
2014-11-17 22:34:25 -05:00
|
|
|
background-position: -36px 4px;
|
2012-09-27 03:45:26 -04:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-20 06:10:04 -05:00
|
|
|
.attachment .check {
|
|
|
|
|
display: none;
|
|
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
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;
|
2014-07-24 20:47:15 -04:00
|
|
|
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2012-11-29 09:36:12 -05:00
|
|
|
.attachment .check div {
|
|
|
|
|
background-position: -1px 0;
|
|
|
|
|
height: 15px;
|
|
|
|
|
width: 15px;
|
|
|
|
|
margin: 5px;
|
2012-11-20 06:10:04 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 09:36:12 -05:00
|
|
|
.attachment .check:hover div {
|
|
|
|
|
background-position: -40px 0;
|
2012-11-20 06:10:04 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 09:36:12 -05:00
|
|
|
.attachment.selected .check {
|
2012-11-20 06:10:04 -05:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 19:03:14 -04:00
|
|
|
.attachment.details .check,
|
2014-07-18 03:57:15 -04:00
|
|
|
.attachment.selected .check:focus,
|
2014-07-22 12:21:15 -04:00
|
|
|
.media-frame.mode-grid .attachment.selected .check {
|
2014-01-09 11:36:12 -05:00
|
|
|
background-color: #1e8cbe;
|
2014-08-05 01:20:18 -04:00
|
|
|
-webkit-box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 2px #1e8cbe;
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 2px #1e8cbe;
|
2014-01-09 11:36:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 16:42:15 -04:00
|
|
|
.attachment.details .check div,
|
2014-07-22 12:21:15 -04:00
|
|
|
.media-frame.mode-grid .attachment.selected .check div {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -21px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 19:03:14 -04:00
|
|
|
.attachment.details .check:hover div,
|
2014-07-18 03:57:15 -04:00
|
|
|
.attachment.selected .check:focus div,
|
2014-07-22 12:21:15 -04:00
|
|
|
.media-frame.mode-grid .attachment.selected .check:hover div {
|
2012-11-29 09:36:12 -05:00
|
|
|
background-position: -60px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 01:37:49 -05:00
|
|
|
.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;
|
2012-10-10 19:32:48 -04:00
|
|
|
padding: 8px;
|
|
|
|
|
font-size: 12px;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-border-radius: 0;
|
2012-10-10 19:32:48 -04:00
|
|
|
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;
|
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: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
2014-08-13 18:45:15 -04:00
|
|
|
margin: 11px 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;
|
|
|
|
|
top: 50px;
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-07-10 19:06:15 -04:00
|
|
|
.uploader-inline .close {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 48px;
|
|
|
|
|
position: absolute;
|
2014-07-24 20:31:15 -04:00
|
|
|
right: 0;
|
2014-07-10 19:06:15 -04:00
|
|
|
text-align: center;
|
2014-07-24 20:31:15 -04:00
|
|
|
top: 0;
|
2014-07-10 19:06:15 -04:00
|
|
|
width: 50px;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline .close:before {
|
|
|
|
|
font: normal 30px/50px 'dashicons' !important;
|
|
|
|
|
color: #777;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
content: '\f335';
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 13px;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2014-04-07 21:55:15 -04:00
|
|
|
margin-right: 0.5em;
|
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;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-border-radius: 10px;
|
2012-11-22 04:32:21 -05:00
|
|
|
border-radius: 10px;
|
|
|
|
|
background: #dfdfdf;
|
|
|
|
|
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;
|
2013-11-21 19:03:10 -05:00
|
|
|
background: #1e8cbe;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-border-radius: 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
|
|
|
border-radius: 10px;
|
2014-08-02 18:02:19 -04:00
|
|
|
-webkit-transition: width 300ms;
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .media-uploader-status {
|
2012-11-22 04:32:21 -05:00
|
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 07:54:49 -05:00
|
|
|
.uploader-inline .media-uploader-status h3 {
|
|
|
|
|
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 {
|
|
|
|
|
color: #464646;
|
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 {
|
2012-11-22 07:54:49 -05:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .media-uploader-status .upload-dismiss-errors {
|
2012-11-22 05:56:10 -05:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 07:35:05 -05:00
|
|
|
.upload-errors .upload-error {
|
|
|
|
|
margin: 8px auto 0 auto;
|
2012-11-22 05:56:10 -05:00
|
|
|
padding: 8px;
|
|
|
|
|
border: 1px #c00 solid;
|
|
|
|
|
background: #ffebe8;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-border-radius: 3px;
|
2012-11-22 05:56:10 -05:00
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 07:35:05 -05:00
|
|
|
.upload-errors .upload-error-label {
|
2012-11-22 05:56:10 -05:00
|
|
|
padding: 2px 4px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fff;
|
2012-11-22 07:54:49 -05:00
|
|
|
background: #e00;
|
|
|
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #e00, #a00);
|
2014-02-13 03:30:17 -05:00
|
|
|
background-image: linear-gradient(to bottom, #e00, #a00);
|
|
|
|
|
-webkit-border-radius: 3px;
|
2012-11-22 05:56:10 -05:00
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
color: #b44;
|
2012-11-30 10:40:09 -05:00
|
|
|
word-wrap: break-word;
|
2012-11-22 05:56:10 -05:00
|
|
|
}
|
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
.uploader-window {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
2012-11-16 05:30:36 -05:00
|
|
|
z-index: 250000;
|
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: none;
|
2012-10-28 19:29:17 -04:00
|
|
|
text-align: center;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
-webkit-transition: opacity 250ms;
|
2014-02-13 03:30:17 -05:00
|
|
|
transition: opacity 250ms;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window-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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window h3 {
|
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: -0.5em 0 0;
|
2012-10-28 19:29:17 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-transform: translateY( -50% );
|
2014-08-05 01:20:18 -04:00
|
|
|
-ms-transform: translateY(-50%);
|
2014-02-13 03:30:17 -05:00
|
|
|
transform: translateY( -50% );
|
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-size: 40px;
|
2012-10-28 19:29:17 -04:00
|
|
|
color: #fff;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
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 h3 {
|
|
|
|
|
font-size: 20px;
|
2012-11-22 06:46:03 -05:00
|
|
|
line-height: 28px;
|
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;
|
|
|
|
|
color: #464646;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
|
|
font-size: 12px;
|
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;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-14 21:36:06 -05:00
|
|
|
.media-selection .selection-info a {
|
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;
|
2012-11-14 21:36:06 -05:00
|
|
|
float: left;
|
|
|
|
|
padding: 1px 8px;
|
|
|
|
|
margin: 1px 8px 1px -8px;
|
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
|
|
|
line-height: 16px;
|
2012-11-14 21:36:06 -05:00
|
|
|
text-decoration: none;
|
|
|
|
|
border-right: 1px solid #dfdfdf;
|
|
|
|
|
color: #21759B;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .selection-info a:hover {
|
|
|
|
|
background: #21759B;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .selection-info a:last-child {
|
|
|
|
|
border-right: 0;
|
2012-12-04 13:23:47 -05:00
|
|
|
margin-right: 0;
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .selection-info .clear-selection {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .selection-info .clear-selection:hover {
|
|
|
|
|
background: red;
|
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
|
|
|
-webkit-box-shadow: none;
|
2014-08-06 15:13:15 -04:00
|
|
|
box-shadow: none;
|
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 {
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: 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
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-05 01:20:18 -04:00
|
|
|
.media-selection .attachment.selection.details .thumbnail {
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 3px #1e8cbe;
|
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,
|
|
|
|
|
0 0 0 3px #1e8cbe;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection:after {
|
|
|
|
|
content: '';
|
|
|
|
|
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;
|
2014-02-13 03:30:17 -05:00
|
|
|
background-image: -webkit-gradient(linear, right top, left top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
|
|
|
|
|
background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
|
|
|
|
|
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;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-background-size: 20px 20px;
|
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;
|
2012-12-03 01:37:49 -05:00
|
|
|
display: none;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-06 12:46:15 -05:00
|
|
|
.media-toolbar .spinner {
|
|
|
|
|
margin-top: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 16:32:16 -04:00
|
|
|
.attachment-details .settings-save-status .spinner {
|
|
|
|
|
margin: 0 5px 0;
|
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
|
|
|
float: right;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.attachment-details.save-waiting .settings-save-status .spinner,
|
|
|
|
|
.attachment-details.save-complete .settings-save-status .saved {
|
2012-12-03 01:37:49 -05:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
line-height: 18px;
|
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
|
|
|
}
|
|
|
|
|
|
2012-11-10 13:25:04 -05:00
|
|
|
.attachment-info .filename {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #464646;
|
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;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
|
2012-11-11 00:16:41 -05:00
|
|
|
box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
2012-10-29 14:16:12 -04:00
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
2012-11-10 13:25:04 -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,
|
|
|
|
|
.attachment-info .refresh-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-info .refresh-attachment,
|
|
|
|
|
.attachment-details.needs-refresh .attachment-info .edit-attachment {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-details.needs-refresh .attachment-info .refresh-attachment,
|
|
|
|
|
.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 {
|
2012-12-06 00:52:19 -05:00
|
|
|
color: #bc0b0b;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:55:15 -04:00
|
|
|
.media-modal .delete-attachment:hover,
|
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,
|
|
|
|
|
.media-modal .untrash-attachment:hover {
|
2012-12-06 00:52:19 -05:00
|
|
|
color: red;
|
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
|
|
|
|
|
|
|
|
.attachment-display-settings h4 {
|
|
|
|
|
margin: 1.4em 0 0.4em;
|
2012-11-10 13:25:04 -05: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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.collection-settings .setting span {
|
|
|
|
|
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-wait {
|
2014-03-29 04:51:14 -04:00
|
|
|
height: auto !important;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2014-03-27 18:41:14 -04:00
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-wrap .imgedit-panel-content {
|
2014-03-29 04:51:14 -04:00
|
|
|
padding: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 282px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
overflow: auto;
|
2014-03-06 17:55:14 -05:00
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
padding: 0 16px 16px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-group-top h3 {
|
2014-03-29 04:51:14 -04:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-group-top h3 a {
|
2014-03-29 04:51:14 -04:00
|
|
|
text-decoration: none;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-help-toggle {
|
2014-03-29 04:51:14 -04:00
|
|
|
margin-top: -2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-help-toggled span.dashicons:before {
|
2014-03-29 04:51:14 -04:00
|
|
|
content: '\f142';
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-group img {
|
2014-03-29 04:51:14 -04:00
|
|
|
margin-top: 5px;
|
2014-03-06 17:55:14 -05:00
|
|
|
}
|
2014-03-29 04:51:14 -04:00
|
|
|
|
2014-07-09 21:24:14 -04:00
|
|
|
.media-modal .imgedit-wrap div.updated {
|
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;
|
2012-11-12 00:57:12 -05:00
|
|
|
padding: 12px 14px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-width: 200px;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
|
2012-11-12 00:57:12 -05:00
|
|
|
box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
padding: 16px 16px 32px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-26 19:57:14 -04:00
|
|
|
.embed-preview img, .embed-preview iframe, .embed-preview embed {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.embed-preview img {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
.image-details .embed-media-settings,
|
|
|
|
|
.image-details .embed-media-settings div {
|
2014-08-10 00:22:15 -04:00
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
2014-08-07 23:46:17 -04:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-settings h3 {
|
|
|
|
|
margin: 20px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid #ddd;
|
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 {
|
|
|
|
|
color: #666;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.image-details .advanced-toggle:after {
|
2014-04-01 21:54:15 -04:00
|
|
|
font: normal 20px/1 'dashicons';
|
|
|
|
|
speak: none;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
content: '\f140';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.image-details .advanced-visible .advanced-toggle:after {
|
2014-04-01 21:54:15 -04:00
|
|
|
content: '\f142';
|
|
|
|
|
}
|
2014-03-27 18:41:14 -04:00
|
|
|
|
2014-04-02 23:21:15 -04:00
|
|
|
.image-details .embed-media-settings .size {
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size span {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size label {
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size span small {
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size input {
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .custom-size .sep {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 26px 6px 0 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.image-details .custom-size:after {
|
|
|
|
|
content: '';
|
2014-04-02 23:21:15 -04:00
|
|
|
display: table;
|
2014-07-28 11:52:17 -04:00
|
|
|
clear: both;
|
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 {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 03:30:17 -05:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
2012-11-12 00:57:12 -05:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .setting {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .embed-media-settings .setting {
|
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"],
|
|
|
|
|
.media-embed .setting textarea {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
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,
|
|
|
|
|
.image-details .embed-media-settings .custom-size {
|
2014-04-01 21:54:15 -04:00
|
|
|
margin-left: 27%;
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .link-target {
|
|
|
|
|
margin-top: 24px;
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
.media-embed .setting span {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 200px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 24px;
|
2013-11-27 23:14:09 -05:00
|
|
|
color: #666;
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
|
|
2014-06-10 20:23:14 -04:00
|
|
|
.image-details .embed-media-settings .setting span {
|
2014-04-01 21:54:15 -04:00
|
|
|
float: left;
|
|
|
|
|
width: 25%;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin: 8px 1% 0 1%;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
.media-embed .setting .button-group {
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-22 21:42:15 -04:00
|
|
|
/* Drag & drop on the editor upload */
|
2014-03-29 03:54:15 -04:00
|
|
|
#wp-fullscreen-body .uploader-editor,
|
2014-03-22 21:42:15 -04:00
|
|
|
.wp-editor-wrap .uploader-editor {
|
|
|
|
|
background: rgba( 150, 150, 150, 0.9 );
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 99998; /* under the toolbar */
|
|
|
|
|
display: none;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 03:54:15 -04:00
|
|
|
#wp-fullscreen-body .uploader-editor {
|
2014-03-22 21:42:15 -04:00
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 100050; /* above the editor toolbar */
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 03:54:15 -04:00
|
|
|
.wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#wp-fullscreen-body .uploader-editor-content,
|
2014-03-22 21:42:15 -04:00
|
|
|
.wp-editor-wrap .uploader-editor-content {
|
|
|
|
|
border: 1px dashed #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 03:54:15 -04:00
|
|
|
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
|
2014-03-22 21:42:15 -04:00
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-transform: translateY( -50% );
|
2014-08-05 01:20:18 -04:00
|
|
|
-ms-transform: translateY(-50%);
|
2014-03-22 21:42:15 -04:00
|
|
|
transform: translateY( -50% );
|
|
|
|
|
font-size: 3em;
|
2014-03-27 00:08:14 -04:00
|
|
|
line-height: 1.3;
|
2014-03-22 21:42:15 -04:00
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 0;
|
2014-03-29 03:54:15 -04:00
|
|
|
margin: 0;
|
2014-03-22 21:42:15 -04:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-editor-wrap .uploader-editor.droppable {
|
|
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 03:54:15 -04:00
|
|
|
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
|
2014-03-22 21:42:15 -04:00
|
|
|
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 22:15:53 -05:00
|
|
|
/**
|
|
|
|
|
* IE7 Fixes
|
|
|
|
|
*/
|
|
|
|
|
.ie7 .media-frame .attachments-browser {
|
|
|
|
|
position: static;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-frame .embed-url input {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .compat-item {
|
|
|
|
|
width: 99%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .attachment-display-settings {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .attachment-preview,
|
|
|
|
|
.ie7 .attachment-preview .thumbnail {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-frame .attachment .describe {
|
|
|
|
|
width: 102px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-sidebar .setting select {
|
|
|
|
|
max-width: 55%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 17:34:16 -04:00
|
|
|
.ie7 .media-sidebar .setting input[type="text"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="password"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="email"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="number"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="search"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="tel"],
|
|
|
|
|
.ie7 .media-sidebar .setting input[type="url"],
|
2012-12-04 22:15:53 -05:00
|
|
|
.ie7 .media-sidebar .setting textarea {
|
|
|
|
|
width: 55%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-sidebar .setting .link-to-custom {
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
@media only screen and (max-width: 940px) {
|
2012-12-05 05:15:42 -05:00
|
|
|
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
2014-08-07 23:46:17 -04:00
|
|
|
max-width: 134px;
|
2012-12-05 05:15:42 -05:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:51:15 -05:00
|
|
|
/**
|
|
|
|
|
* Responsive layout
|
|
|
|
|
*/
|
|
|
|
|
@media only screen and (max-width: 900px) {
|
2014-08-07 23:46:17 -04:00
|
|
|
|
|
|
|
|
/* Drop-down menu */
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-title,
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
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 {
|
2014-08-09 01:09:16 -04:00
|
|
|
width: auto;
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
z-index: 2000;
|
|
|
|
|
top: 50px;
|
|
|
|
|
left: -300px;
|
|
|
|
|
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 {
|
2014-08-09 01:09:16 -04:00
|
|
|
left: 0;
|
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 > a.active {
|
2014-08-09 01:09:16 -04:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-title {
|
2014-08-07 23:46:17 -04:00
|
|
|
left: 0;
|
|
|
|
|
color: #21759b;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-title .dashicons {
|
2014-08-07 23:46:17 -04:00
|
|
|
display: inline-block;
|
2014-08-19 16:38:16 -04:00
|
|
|
line-height: 50px;
|
2014-08-07 23:46:17 -04:00
|
|
|
}
|
|
|
|
|
|
2014-08-26 17:50:16 -04:00
|
|
|
.media-frame:not(.hide-menu) .media-frame-title h1 {
|
2014-08-07 23:46:17 -04:00
|
|
|
line-height: 3;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
float: left;
|
|
|
|
|
cursor: pointer;
|
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,
|
|
|
|
|
.media-sidebar .setting span,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting input,
|
|
|
|
|
.attachment-details .setting textarea,
|
|
|
|
|
.attachment-details .setting span,
|
2012-11-27 20:51:15 -05:00
|
|
|
.compat-item label span {
|
|
|
|
|
float: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-15 12:02:15 -04:00
|
|
|
.media-sidebar .setting span,
|
2014-08-15 00:10:16 -04:00
|
|
|
.attachment-details .setting span,
|
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;
|
2012-11-27 20:51:15 -05:00
|
|
|
padding: 8px 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
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,
|
|
|
|
|
.attachment-details .setting select {
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-01 21:54:15 -04:00
|
|
|
.image-details .embed-media-settings .setting {
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting span {
|
|
|
|
|
float: none;
|
|
|
|
|
text-align: left;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
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"] {
|
|
|
|
|
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-primary,
|
|
|
|
|
.media-modal .attachments-browser .media-toolbar-secondary {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .attachments-browser .media-toolbar .search {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .attachments-browser .media-toolbar .attachment-filters {
|
|
|
|
|
margin: 11px 0 0;
|
|
|
|
|
height: auto;
|
|
|
|
|
max-width: 65%;
|
2014-08-10 00:22:15 -04:00
|
|
|
max-width: -webkit-calc(100% - 38px);
|
2014-08-07 23:46:17 -04:00
|
|
|
max-width: calc(100% - 38px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .attachments-browser .media-toolbar .spinner {
|
|
|
|
|
margin: 14px 8px 0;
|
2013-11-15 14:54:10 -05:00
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
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
|
|
|
}
|
2012-11-27 20:51:15 -05: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%;
|
2014-08-10 00:22:15 -04:00
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
2014-08-09 01:09:16 -04:00
|
|
|
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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Landscape specific header override */
|
|
|
|
|
@media screen and (max-height: 400px) {
|
|
|
|
|
.media-menu {
|
2014-08-07 23:46:17 -04:00
|
|
|
padding: 0;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 15:07:10 -05:00
|
|
|
.media-frame-router {
|
|
|
|
|
top: 44px;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 15:07:10 -05:00
|
|
|
.media-frame-content {
|
|
|
|
|
top: 78px;
|
|
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
2013-11-18 15:07:10 -05:00
|
|
|
.attachments-browser .attachments {
|
2014-08-07 23:46:17 -04:00
|
|
|
top: 40px;
|
2013-11-15 16:47:09 -05:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 15:07:10 -05:00
|
|
|
/* Prevent unnecessary scrolling on title input */
|
|
|
|
|
.embed-link-settings {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 23:46:17 -04:00
|
|
|
@media only screen and (max-width: 480px) {
|
2013-11-18 15:07:10 -05:00
|
|
|
.media-frame-content .media-toolbar .attachment-filters {
|
2014-08-07 23:46:17 -04:00
|
|
|
max-width: 90px;
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
2014-08-26 17:50:16 -04:00
|
|
|
|
|
|
|
|
.media-modal-close {
|
|
|
|
|
top: 5px;
|
|
|
|
|
right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .media-frame-title {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal .media-frame-title h1,
|
|
|
|
|
.media-frame:not(.hide-menu) .media-frame-title h1 {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame:not(.hide-menu) .media-frame-title .dashicons {
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-router,
|
|
|
|
|
.media-frame:not(.hide-menu) .media-menu {
|
|
|
|
|
top: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-content {
|
|
|
|
|
top: 74px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame.hide-router .media-frame-content {
|
|
|
|
|
top: 40px;
|
|
|
|
|
}
|
2012-11-27 20:51:15 -05:00
|
|
|
}
|
2012-12-04 11:32:06 -05:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* HiDPI Displays
|
|
|
|
|
*/
|
|
|
|
|
@media print,
|
|
|
|
|
(-o-min-device-pixel-ratio: 5/4),
|
|
|
|
|
(-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
|
|
|
|
2014-07-28 11:52:17 -04:00
|
|
|
.media-modal-icon {
|
|
|
|
|
background-image: url(../images/uploader-icons-2x.png);
|
|
|
|
|
-webkit-background-size: 134px 15px;
|
|
|
|
|
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
|
|
|
}
|
