2012-11-12 06:57:12 +01:00
|
|
|
/**
|
|
|
|
|
* Base Styles
|
|
|
|
|
*/
|
2014-01-09 17:36:12 +01:00
|
|
|
.media-modal * {
|
|
|
|
|
-webkit-box-sizing: content-box;
|
2014-02-13 09:30:17 +01:00
|
|
|
-moz-box-sizing: content-box;
|
|
|
|
|
box-sizing: content-box;
|
2014-01-09 17:36:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-21 19:37:52 +01: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-10 01:27:10 +01:00
|
|
|
font-family: "Open Sans", sans-serif;
|
2012-11-21 19:37:52 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame textarea {
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame select,
|
|
|
|
|
.wp-admin .media-frame select {
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:45:06 +01:00
|
|
|
.media-frame a {
|
2012-12-05 20:15:40 +01:00
|
|
|
border-bottom: none;
|
2012-11-21 19:37:52 +01:00
|
|
|
color: #21759b;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:45:06 +01:00
|
|
|
.media-frame a:hover {
|
2012-11-21 19:37:52 +01:00
|
|
|
color: #d54e21;
|
2012-11-21 19:00:18 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:45:06 +01: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-10 01:27:10 +01:00
|
|
|
font-family: "Open Sans", sans-serif;
|
2012-11-21 19:37:52 +01:00
|
|
|
font-size: 12px;
|
2012-11-21 19:00:18 +01:00
|
|
|
-webkit-box-sizing: border-box;
|
2014-02-13 09:30:17 +01:00
|
|
|
-moz-box-sizing: border-box;
|
2012-11-21 19:00:18 +01:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: #dfdfdf;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 20:15:40 +01:00
|
|
|
.media-frame select {
|
|
|
|
|
height: 24px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 19:33:51 +01:00
|
|
|
.media-frame input:disabled,
|
|
|
|
|
.media-frame textarea:disabled,
|
|
|
|
|
.media-frame input[readonly],
|
|
|
|
|
.media-frame textarea[readonly] {
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:45:06 +01:00
|
|
|
.media-frame input[type="search"] {
|
2012-11-21 19:00:18 +01:00
|
|
|
-webkit-appearance: textfield;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 06:17:23 +01:00
|
|
|
.media-frame :-moz-placeholder {
|
|
|
|
|
color: #a9a9a9;
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-28 22:17:12 +01:00
|
|
|
.media-frame .hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-27 16:00:00 +01:00
|
|
|
/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
|
|
|
|
|
.ui-sortable,
|
|
|
|
|
.ui-draggable {
|
2014-02-23 11:30:19 +01:00
|
|
|
-ms-touch-action: none;
|
2014-02-13 09:30:17 +01:00
|
|
|
touch-action: none;
|
2013-12-06 05:44:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.meta-box-sortables.ui-sortable {
|
2014-02-23 11:30:19 +01:00
|
|
|
-ms-touch-action: auto;
|
2014-02-13 09:30:17 +01:00
|
|
|
touch-action: auto;
|
2013-12-06 05:44:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.meta-box-sortables.ui-sortable .hndle {
|
2014-02-23 11:30:19 +01:00
|
|
|
-ms-touch-action: none;
|
2014-02-13 09:30:17 +01:00
|
|
|
touch-action: none;
|
2012-11-27 16:00:00 +01: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 06:54:23 +02:00
|
|
|
/**
|
|
|
|
|
* Modal
|
|
|
|
|
*/
|
|
|
|
|
.media-modal {
|
|
|
|
|
position: fixed;
|
2012-12-04 02:26:03 +01:00
|
|
|
top: 30px;
|
|
|
|
|
left: 30px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 30px;
|
2012-11-27 20:09:00 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2013-12-03 21:54:11 +01: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 06:54:23 +02:00
|
|
|
.media-modal-backdrop {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-12-05 01:40:13 +01: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 06:54:23 +02:00
|
|
|
background: #000;
|
2012-12-04 02:26:03 +01:00
|
|
|
opacity: 0.7;
|
2012-11-27 20:09:00 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2013-12-03 21:54:11 +01: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 06:54:23 +02:00
|
|
|
.media-modal-close {
|
2012-12-01 03:53:53 +01: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-10 01:27:10 +01:00
|
|
|
text-decoration: none;
|
2014-07-24 23:07:15 +02:00
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 48px;
|
2012-12-04 02:26:03 +01:00
|
|
|
z-index: 1000;
|
2014-07-24 23:07:15 +02:00
|
|
|
color: #777;
|
2014-08-03 00:02:19 +02: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-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
|
|
|
|
|
.media-modal-close span.media-modal-icon {
|
2014-07-24 23:07:15 +02:00
|
|
|
display: none;
|
2012-12-04 02:26:03 +01:00
|
|
|
margin: 8px auto 0;
|
2012-11-29 15:36:12 +01:00
|
|
|
width: 15px;
|
2012-12-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
background-image: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:07:15 +02:00
|
|
|
.media-modal-close:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 1px;
|
|
|
|
|
left: 11px;
|
|
|
|
|
font: normal 30px/50px 'dashicons' !important;
|
|
|
|
|
content: '\f335';
|
|
|
|
|
font-weight: 300;
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
speak: none;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:07:15 +02:00
|
|
|
.media-modal-close:focus,
|
|
|
|
|
.media-modal-close:hover {
|
|
|
|
|
background: #0074a2;
|
|
|
|
|
color: #fff;
|
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
|
box-shadow: none;
|
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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-10-11 04:54:19 +02: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 06:54:23 +02:00
|
|
|
.media-modal-content {
|
|
|
|
|
position: absolute;
|
2012-10-10 11:40:22 +02: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 06:54:23 +02:00
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
overflow: auto;
|
2012-12-05 01:40:13 +01:00
|
|
|
min-height: 300px;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
|
2014-01-09 17:36:12 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 15:36:12 +01:00
|
|
|
.media-modal-icon {
|
|
|
|
|
background-image: url(../images/uploader-icons.png);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
|
* Toolbar
|
|
|
|
|
*/
|
|
|
|
|
.media-toolbar {
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
left: 0;
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
height: 60px;
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
border: 0 solid #dfdfdf;
|
2012-12-05 11:15:42 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
.media-toolbar-primary {
|
|
|
|
|
float: right;
|
2012-12-05 11:15:42 +01:00
|
|
|
height: 100%;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-toolbar-secondary {
|
|
|
|
|
float: left;
|
2012-12-05 11:15:42 +01:00
|
|
|
height: 100%;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
.media-toolbar-primary > .media-button,
|
|
|
|
|
.media-toolbar-primary > .media-button-group {
|
|
|
|
|
margin-left: 10px;
|
2012-09-06 09:46:15 +02: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 23:59:12 +01:00
|
|
|
margin-top: 15px;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
.media-toolbar-secondary > .media-button,
|
|
|
|
|
.media-toolbar-secondary > .media-button-group {
|
2012-09-06 09:46:15 +02: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 23:59:12 +01:00
|
|
|
margin-top: 15px;
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
right: 0;
|
2012-11-22 07:30:25 +01:00
|
|
|
bottom: 0;
|
2012-11-07 21:14:41 +01:00
|
|
|
width: 267px;
|
2012-11-10 20:10:04 +01: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 23:59:12 +01:00
|
|
|
z-index: 75;
|
2014-01-09 17:36:12 +01:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-left: 1px solid #ddd;
|
2012-11-10 20:10:04 +01:00
|
|
|
overflow: auto;
|
2012-12-01 02:44:15 +01:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-10-29 07:56:23 +01:00
|
|
|
}
|
|
|
|
|
|
2014-08-06 21:13:15 +02:00
|
|
|
.upload-php .mode-grid .hide-sidebar .media-sidebar {
|
|
|
|
|
top: 102px;
|
|
|
|
|
display: 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 23:59:12 +01:00
|
|
|
.hide-toolbar .media-sidebar {
|
|
|
|
|
bottom: 0;
|
2012-10-29 07:56:23 +01: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 08:38:13 +01:00
|
|
|
margin-bottom: 130px;
|
2012-10-29 07:56:23 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .search {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.media-sidebar h3,
|
2014-07-24 23:55:17 +02:00
|
|
|
.image-details h3,
|
|
|
|
|
.attachment-info h3 {
|
2012-11-10 19:25:04 +01:00
|
|
|
position: relative;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 12px;
|
2013-11-28 05:14:09 +01:00
|
|
|
color: #666;
|
2012-11-10 19:25:04 +01:00
|
|
|
margin: 24px 0 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting {
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 05:06:45 +01:00
|
|
|
.media-sidebar .setting label {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 20:15:40 +01:00
|
|
|
.media-sidebar .setting .link-to-custom {
|
2014-07-05 01:29:16 +02:00
|
|
|
margin: 3px 2px 0;
|
2012-12-05 20:15:40 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-05 01:29:16 +02:00
|
|
|
.media-sidebar .setting span {
|
2012-11-10 20:10:04 +01:00
|
|
|
min-width: 30%;
|
2012-11-10 21:36:46 +01:00
|
|
|
margin-right: 4%;
|
2012-11-21 19:00:18 +01:00
|
|
|
font-size: 12px;
|
2014-06-06 00:01:18 +02:00
|
|
|
text-align: right;
|
2012-11-11 02:26:42 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-20 23:51:35 +01:00
|
|
|
.media-sidebar .setting select {
|
|
|
|
|
max-width: 65%;
|
|
|
|
|
}
|
|
|
|
|
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
.media-sidebar .setting input[type="checkbox"],
|
2014-08-02 21:53:17 +02:00
|
|
|
.media-sidebar .field input[type="checkbox"],
|
|
|
|
|
.media-sidebar .setting input[type="radio"],
|
|
|
|
|
.media-sidebar .field input[type="radio"] {
|
2012-12-04 19:51:27 +01: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-10 01:27:10 +01:00
|
|
|
margin: 8px 3px 0;
|
2012-12-04 19:51:27 +01:00
|
|
|
padding: 0;
|
2012-12-03 06:32:25 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-11 02:26:42 +01:00
|
|
|
.media-sidebar .setting span,
|
|
|
|
|
.compat-item label span {
|
|
|
|
|
float: left;
|
|
|
|
|
min-height: 22px;
|
2012-11-10 19:25:04 +01:00
|
|
|
padding-top: 8px;
|
|
|
|
|
line-height: 16px;
|
2012-11-11 02:26:42 +01:00
|
|
|
font-weight: normal;
|
2013-11-28 05:14:09 +01:00
|
|
|
color: #666;
|
2012-11-10 19:25:04 +01:00
|
|
|
}
|
|
|
|
|
|
2014-06-06 00:01:18 +02:00
|
|
|
.compat-item label span {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-11 02:26:42 +01:00
|
|
|
.media-sidebar .setting input,
|
2014-06-06 00:01:18 +02:00
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.media-sidebar .setting .value {
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
margin: 1px;
|
2012-11-11 02:26:42 +01:00
|
|
|
width: 65%;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-05 01:29:16 +02:00
|
|
|
.media-sidebar .setting .value {
|
|
|
|
|
margin: 0 1px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-11 02:26:42 +01:00
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.compat-item .field textarea {
|
2012-11-10 19:25:04 +01:00
|
|
|
height: 62px;
|
2012-11-20 03:59:31 +01:00
|
|
|
resize: vertical;
|
2012-11-10 19:25:04 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.media-sidebar select {
|
2012-11-10 19:25:04 +01:00
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-11 02:26:42 +01: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-16 00:58:33 +01:00
|
|
|
|
2012-11-11 02:26:42 +01: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-10 01:27:10 +01:00
|
|
|
width: 66%;
|
2012-11-11 02:26:42 +01:00
|
|
|
}
|
|
|
|
|
|
2014-08-02 21:53:17 +02: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-11 02:26:42 +01:00
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01: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 06:54:23 +02: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 23:59:12 +01: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 06:54:23 +02: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 23:59:12 +01:00
|
|
|
.media-menu {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
bottom: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 16px 0;
|
2014-01-09 17:36:12 +01: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-10 01:27:10 +01:00
|
|
|
border-right-width: 1px;
|
|
|
|
|
border-right-style: solid;
|
2014-01-09 17:36:12 +01:00
|
|
|
border-right-color: #ccc;
|
2012-11-15 03:51:31 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01: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-10 01:27:10 +01: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 23:59:12 +01:00
|
|
|
margin: 0;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 14px;
|
2014-01-09 17:36:12 +01:00
|
|
|
color: #0074a2;
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01: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 06:54:23 +02: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 23:59:12 +01:00
|
|
|
.media-menu .active,
|
|
|
|
|
.media-menu .active:hover {
|
2014-01-09 17:36:12 +01: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 23:59:12 +01:00
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
2012-09-06 09:46:15 +02: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 23:59:12 +01:00
|
|
|
.media-menu .separator {
|
|
|
|
|
height: 0;
|
|
|
|
|
margin: 12px 20px;
|
|
|
|
|
padding: 0;
|
2014-01-09 17:36:12 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 07:25:18 +01:00
|
|
|
.media-router a {
|
|
|
|
|
-webkit-transition: none;
|
2014-02-13 09:30:17 +01:00
|
|
|
transition: none;
|
2014-02-06 07:25:18 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
padding: 8px 10px 9px;
|
2012-12-04 02:26:03 +01:00
|
|
|
margin: 0;
|
|
|
|
|
height: 18px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-router > a:last-child {
|
|
|
|
|
border-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-29 05:39:15 +02:00
|
|
|
.media-router > a:active {
|
2012-12-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
.media-router .active,
|
|
|
|
|
.media-router > a.active:last-child {
|
|
|
|
|
margin: -1px -1px 0;
|
2014-01-09 17:36:12 +01: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-10 01:27:10 +01:00
|
|
|
}
|
2012-12-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
.media-router .active:after {
|
|
|
|
|
display: none;
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
/**
|
|
|
|
|
* Frame
|
|
|
|
|
*/
|
|
|
|
|
.media-frame {
|
|
|
|
|
overflow: hidden;
|
2012-12-03 03:38:10 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-frame-menu {
|
2012-09-06 09:46:15 +02: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 23:59:12 +01:00
|
|
|
top: 0;
|
2012-12-04 02:26:03 +01:00
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
2014-03-07 03:46:14 +01:00
|
|
|
width: 200px;
|
2012-12-04 02:26:03 +01:00
|
|
|
z-index: 150;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
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-10 01:27:10 +01:00
|
|
|
height: 56px;
|
2012-12-04 02:26:03 +01:00
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-router {
|
|
|
|
|
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-10 01:27:10 +01:00
|
|
|
top: 56px;
|
2012-12-04 02:26:03 +01: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-10 01:27:10 +01:00
|
|
|
height: 36px;
|
2012-12-04 02:26:03 +01:00
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-content {
|
|
|
|
|
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-10 01:27:10 +01:00
|
|
|
top: 90px;
|
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 23:59:12 +01:00
|
|
|
left: 200px;
|
2012-11-22 07:30:25 +01: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 23:59:12 +01:00
|
|
|
bottom: 61px;
|
2012-09-06 09:46:15 +02:00
|
|
|
height: auto;
|
|
|
|
|
width: auto;
|
2012-10-29 19:05:03 +01:00
|
|
|
margin: 0;
|
2012-10-29 07:56:23 +01:00
|
|
|
overflow: auto;
|
2014-01-09 17:36:12 +01:00
|
|
|
background: #fff;
|
|
|
|
|
border-top: 1px solid #ddd;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
bottom: 0;
|
2012-12-04 02:26:03 +01: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 {
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
top: 56px;
|
2012-12-04 02:26:03 +01: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 09:30:17 +01:00
|
|
|
-webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
2012-12-04 02:26:03 +01:00
|
|
|
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-frame-title h1 {
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
font-size: 22px;
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
line-height: 60px;
|
2012-12-04 02:26:03 +01:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-11 05:13:16 +01:00
|
|
|
.media-frame-title .suggested-dimensions {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
float: right;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-13 20:20:14 +02:00
|
|
|
.media-frame-content .crop-content {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-04 17:48:16 +02:00
|
|
|
.media-frame-content .crop-content .crop-image {
|
2014-03-11 05:13:16 +01:00
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-04 17:48:16 +02: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 08:51:37 +01:00
|
|
|
/**
|
|
|
|
|
* Iframes
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .media-iframe {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 19:51:27 +01:00
|
|
|
.media-frame .media-iframe,
|
|
|
|
|
.media-frame .media-iframe iframe {
|
2012-11-10 08:51:37 +01:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2012-12-07 11:27:07 +01:00
|
|
|
border: 0;
|
2012-11-10 08:51:37 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-20 14:49:35 +01:00
|
|
|
/**
|
|
|
|
|
* Attachment Browser Filters
|
|
|
|
|
*/
|
|
|
|
|
.media-frame select.attachment-filters {
|
|
|
|
|
margin-top: 11px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
/**
|
|
|
|
|
* Search
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .search {
|
|
|
|
|
margin-top: 11px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
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-10 01:27:10 +01:00
|
|
|
font-family: "Open Sans", sans-serif;
|
2012-11-28 02:51:15 +01:00
|
|
|
-webkit-appearance: none;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 10:11:33 +01: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 23:59:12 +01:00
|
|
|
/**
|
|
|
|
|
* Attachments
|
|
|
|
|
*/
|
|
|
|
|
.attachments {
|
|
|
|
|
margin: 0;
|
2014-08-05 07:20:18 +02:00
|
|
|
padding: 8px;
|
2012-12-01 02:44:15 +01: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 23:59:12 +01: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 06:54:23 +02:00
|
|
|
/**
|
|
|
|
|
* Attachment
|
|
|
|
|
*/
|
|
|
|
|
.attachment {
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
2014-08-05 07:20:18 +02:00
|
|
|
padding: 8px;
|
|
|
|
|
margin: 0;
|
2012-10-10 11:55:47 +02:00
|
|
|
color: #464646;
|
2014-08-05 07:20:18 +02:00
|
|
|
cursor: pointer;
|
2012-11-21 19:00:18 +01:00
|
|
|
list-style: none;
|
2012-11-27 20:14:36 +01:00
|
|
|
text-align: center;
|
2012-09-08 00:15:52 +02:00
|
|
|
-webkit-user-select: none;
|
2014-02-13 09:30:17 +01:00
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
2014-08-05 07:20:18 +02:00
|
|
|
width: 20%;
|
|
|
|
|
-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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2014-05-29 05:39:15 +02:00
|
|
|
.attachment:focus {
|
|
|
|
|
-webkit-box-shadow:
|
2014-08-05 07:20:18 +02:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 1px 7px #5b9dd9;
|
2014-05-29 05:39:15 +02:00
|
|
|
box-shadow:
|
2014-08-05 07:20:18 +02:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 1px 7px #5b9dd9;
|
2014-05-29 05:39:15 +02:00
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-30 22:09:45 +01:00
|
|
|
.selected.attachment {
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow:
|
2014-08-05 07:20:18 +02:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 0 7px #ccc;
|
2014-07-22 21:58:18 +02:00
|
|
|
box-shadow:
|
2014-08-05 07:20:18 +02:00
|
|
|
inset 0 0 0 5px #fff,
|
|
|
|
|
inset 0 0 0 7px #ccc;
|
2014-07-18 09:57:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-09-19 03:10:17 +02:00
|
|
|
.attachment-preview {
|
2012-10-11 01:32:48 +02:00
|
|
|
position: relative;
|
2014-08-06 08:29:16 +02: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 07:20:18 +02: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-27 20:14:36 +01:00
|
|
|
.attachment .icon {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-09 01:20:04 +02:00
|
|
|
.attachment .thumbnail {
|
2014-08-05 07:20:18 +02: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 06:54:23 +02:00
|
|
|
position: absolute;
|
2012-10-09 01:20:04 +02:00
|
|
|
top: 0;
|
2014-08-05 07:20:18 +02:00
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-10-09 01:20:04 +02:00
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-05 07:20:18 +02:00
|
|
|
.attachment .portrait img {
|
|
|
|
|
max-width: 100%;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-08-05 07:20:18 +02:00
|
|
|
.attachment .landscape img {
|
|
|
|
|
max-height: 100%;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-08-05 07:20:18 +02:00
|
|
|
.attachment .thumbnail:after {
|
2012-10-29 19:05:03 +01:00
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
2012-10-29 19:05:03 +01:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 22:45:10 +01:00
|
|
|
/* @noflip */
|
2012-10-29 19:05:03 +01:00
|
|
|
.attachment .thumbnail img {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 22:45:10 +01:00
|
|
|
/* @noflip */
|
2012-10-31 21:34:50 +01:00
|
|
|
.attachment .thumbnail .centered {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
-webkit-transform: translate( 50%, 50% );
|
2014-08-05 07:20:18 +02:00
|
|
|
-ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
|
2014-02-13 09:30:17 +01:00
|
|
|
transform: translate( 50%, 50% );
|
2012-10-31 21:34:50 +01: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 06:54:23 +02:00
|
|
|
-webkit-transform: translate( -50%, -50% );
|
2014-08-05 07:20:18 +02:00
|
|
|
-ms-transform: translate(-50%,-50%);
|
2014-02-13 09:30:17 +01:00
|
|
|
transform: translate( -50%, -50% );
|
2012-10-09 01:20:04 +02: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 06:54:23 +02:00
|
|
|
|
2014-08-06 08:29:16 +02: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 11:55:47 +02:00
|
|
|
.attachment .filename {
|
2012-10-29 19:05:03 +01:00
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-11-27 16:58:47 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
word-wrap: break-word;
|
2012-10-10 11:55:47 +02:00
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
2012-10-29 19:05:03 +01:00
|
|
|
background: rgba( 255, 255, 255, 0.8 );
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
2012-11-27 16:58:47 +01:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment .filename div {
|
|
|
|
|
padding: 5px 10px;
|
2012-10-09 01:20:04 +02: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-09-27 09:45:26 +02:00
|
|
|
.attachment .close {
|
2012-11-29 15:36:12 +01:00
|
|
|
display: none;
|
2012-09-27 09:45:26 +02:00
|
|
|
position: absolute;
|
2012-10-11 06:11:47 +02:00
|
|
|
top: 5px;
|
|
|
|
|
right: 5px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
width: 22px;
|
|
|
|
|
padding: 0;
|
2012-09-27 09:45:26 +02:00
|
|
|
font-size: 20px;
|
2012-10-11 06:11:47 +02:00
|
|
|
line-height: 20px;
|
2012-09-27 09:45:26 +02:00
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: #464646;
|
2012-11-29 15:36:12 +01:00
|
|
|
background-color: #fff;
|
|
|
|
|
background-position: -96px 4px;
|
2012-10-11 06:11:47 +02:00
|
|
|
border-width: 0;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-border-radius: 3px;
|
2012-11-29 15:36:12 +01:00
|
|
|
border-radius: 3px;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
2012-10-11 06:11:47 +02:00
|
|
|
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-29 15:36:12 +01:00
|
|
|
.attachment .close:hover {
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
|
2012-10-11 06:11:47 +02:00
|
|
|
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
|
2012-09-27 09:45:26 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment:hover .close {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-20 12:10:04 +01:00
|
|
|
.attachment .check {
|
|
|
|
|
display: none;
|
|
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
position: absolute;
|
2014-07-11 06:24:14 +02:00
|
|
|
z-index: 10;
|
2014-08-05 07:20:18 +02:00
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
2012-11-20 12:10:04 +01:00
|
|
|
outline: none;
|
2014-01-09 17:36:12 +01:00
|
|
|
background: #eee;
|
2014-07-25 02:47:15 +02: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 12:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 15:36:12 +01:00
|
|
|
.attachment .check div {
|
|
|
|
|
background-position: -1px 0;
|
|
|
|
|
height: 15px;
|
|
|
|
|
width: 15px;
|
|
|
|
|
margin: 5px;
|
2012-11-20 12:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 15:36:12 +01:00
|
|
|
.attachment .check:hover div {
|
|
|
|
|
background-position: -40px 0;
|
2012-11-20 12:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
2012-11-29 15:36:12 +01:00
|
|
|
.attachment.selected .check {
|
2012-11-20 12:10:04 +01:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-05 07:20:18 +02:00
|
|
|
.selected.attachment:focus,
|
2014-07-11 01:03:14 +02:00
|
|
|
.attachment.details,
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .selected.attachment {
|
2014-08-05 07:20:18 +02:00
|
|
|
-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;
|
2014-01-09 17:36:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-11 01:03:14 +02:00
|
|
|
.attachment.details .check,
|
2014-07-18 09:57:15 +02:00
|
|
|
.attachment.selected .check:focus,
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachment.selected .check {
|
2014-01-09 17:36:12 +01:00
|
|
|
background-color: #1e8cbe;
|
2014-08-05 07:20:18 +02: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 17:36:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachment .check {
|
2014-07-17 22:42:15 +02:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachment .check div {
|
2014-07-17 22:42:15 +02:00
|
|
|
background-position: 21px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment.details .check div,
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachment.selected .check div {
|
2012-11-29 15:36:12 +01:00
|
|
|
background-position: -21px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-11 01:03:14 +02:00
|
|
|
.attachment.details .check:hover div,
|
2014-07-18 09:57:15 +02:00
|
|
|
.attachment.selected .check:focus div,
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachment.selected .check:hover div {
|
2012-11-29 15:36:12 +01:00
|
|
|
background-position: -60px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-03 07:37:49 +01:00
|
|
|
.media-frame .attachment .describe {
|
2012-10-11 01:32:48 +02:00
|
|
|
position: relative;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
2014-08-05 07:20:18 +02:00
|
|
|
margin: 0;
|
2012-10-11 01:32:48 +02:00
|
|
|
padding: 8px;
|
|
|
|
|
font-size: 12px;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-border-radius: 0;
|
2012-10-11 01:32:48 +02: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 23:59:12 +01:00
|
|
|
/**
|
|
|
|
|
* Attachments Browser
|
|
|
|
|
*/
|
|
|
|
|
.media-frame .attachments-browser {
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .media-toolbar {
|
2012-11-22 07:30:25 +01: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 23:59:12 +01:00
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-04 05:39:15 +02:00
|
|
|
.attachments-browser.hide-sidebar .media-toolbar {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-13 00:52:17 +01: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 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 07:01:47 +01: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 23:59:12 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50px;
|
|
|
|
|
left: 0;
|
2012-11-22 07:30:25 +01: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 23:59:12 +01:00
|
|
|
bottom: 0;
|
|
|
|
|
overflow: auto;
|
2014-05-29 05:39:15 +02:00
|
|
|
outline: none;
|
2014-07-10 05:50:17 +02:00
|
|
|
}
|
|
|
|
|
|
2014-08-02 22:47:16 +02:00
|
|
|
.media-frame.mode-grid .uploader-inline {
|
2014-07-25 02:31:15 +02:00
|
|
|
border: 4px dashed #bbb;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 05:50:17 +02:00
|
|
|
.attachments-browser .uploader-inline.hidden {
|
2014-07-13 12:44:14 +02:00
|
|
|
display: none;
|
2014-07-10 05:50:17 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-11 01:06:15 +02:00
|
|
|
.uploader-inline .close {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 48px;
|
|
|
|
|
position: absolute;
|
2014-07-25 02:31:15 +02:00
|
|
|
right: 0;
|
2014-07-11 01:06:15 +02:00
|
|
|
text-align: center;
|
2014-07-25 02:31:15 +02:00
|
|
|
top: 0;
|
2014-07-11 01:06:15 +02: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-10 05:50:17 +02:00
|
|
|
.attachments-browser.hide-sidebar .attachments,
|
|
|
|
|
.attachments-browser.hide-sidebar .uploader-inline {
|
2014-07-04 05:39:15 +02:00
|
|
|
right: 0;
|
2014-07-07 22:30:16 +02:00
|
|
|
margin-right: 0;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-10 10:11:33 +01:00
|
|
|
.attachments-browser .instructions {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-size: 13px;
|
2013-11-28 05:14:09 +01:00
|
|
|
color: #666;
|
2014-04-08 03:55:15 +02:00
|
|
|
margin-right: 0.5em;
|
2012-11-10 10:11:33 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 19:31:15 +02: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 06:54:23 +02:00
|
|
|
/**
|
|
|
|
|
* Progress Bar
|
|
|
|
|
*/
|
|
|
|
|
.media-progress-bar {
|
|
|
|
|
position: relative;
|
2012-11-22 10:32:21 +01: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 06:54:23 +02:00
|
|
|
width: 70%;
|
|
|
|
|
margin: 10px auto;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-border-radius: 10px;
|
2012-11-22 10:32:21 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-progress-bar div {
|
2012-11-22 10:32:21 +01: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 06:54:23 +02:00
|
|
|
width: 0;
|
2013-11-22 01:03:10 +01:00
|
|
|
background: #1e8cbe;
|
2014-02-13 09:30:17 +01: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 06:54:23 +02:00
|
|
|
border-radius: 10px;
|
2014-08-03 00:02:19 +02: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 10:32:21 +01:00
|
|
|
.media-uploader-status .media-progress-bar {
|
2012-11-22 11:56:10 +01:00
|
|
|
display: none;
|
2012-11-22 10:32:21 +01:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
.uploading.media-uploader-status .media-progress-bar {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-19 03:10:17 +02: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 06:54:23 +02:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 15%;
|
|
|
|
|
width: 70%;
|
2012-11-22 10:32:21 +01:00
|
|
|
margin: -5px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-uploader-status {
|
2012-11-22 11:56:10 +01:00
|
|
|
position: relative;
|
2012-11-30 16:40:09 +01:00
|
|
|
margin: 0 auto;
|
2012-11-22 10:32:21 +01:00
|
|
|
padding-bottom: 10px;
|
2012-11-30 16:40:09 +01:00
|
|
|
max-width: 400px;
|
2012-11-22 13:54:49 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .media-uploader-status {
|
2012-11-22 10:32:21 +01:00
|
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 13:54:49 +01:00
|
|
|
.uploader-inline .media-uploader-status h3 {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 10:32:21 +01:00
|
|
|
.media-uploader-status .upload-details {
|
2012-11-22 11:56:10 +01:00
|
|
|
display: none;
|
2012-11-22 10:32:21 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
.uploading.media-uploader-status .upload-details {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 10:32:21 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-22 11:56:10 +01: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 13:54:49 +01:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .media-uploader-status .upload-dismiss-errors {
|
2012-11-22 11:56:10 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 13:35:05 +01:00
|
|
|
.upload-errors .upload-error {
|
|
|
|
|
margin: 8px auto 0 auto;
|
2012-11-22 11:56:10 +01:00
|
|
|
padding: 8px;
|
|
|
|
|
border: 1px #c00 solid;
|
|
|
|
|
background: #ffebe8;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-border-radius: 3px;
|
2012-11-22 11:56:10 +01:00
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 13:35:05 +01:00
|
|
|
.upload-errors .upload-error-label {
|
2012-11-22 11:56:10 +01:00
|
|
|
padding: 2px 4px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fff;
|
2012-11-22 13:54:49 +01: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 09:30:17 +01:00
|
|
|
background-image: linear-gradient(to bottom, #e00, #a00);
|
|
|
|
|
-webkit-border-radius: 3px;
|
2012-11-22 11:56:10 +01:00
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 13:35:05 +01:00
|
|
|
.upload-errors .upload-error-message {
|
2012-11-22 11:56:10 +01:00
|
|
|
display: block;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
color: #b44;
|
2012-11-30 16:40:09 +01:00
|
|
|
word-wrap: break-word;
|
2012-11-22 11:56:10 +01:00
|
|
|
}
|
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
.uploader-window {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
2012-11-16 11:30:36 +01: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 06:54:23 +02:00
|
|
|
display: none;
|
2012-10-29 00:29:17 +01:00
|
|
|
text-align: center;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
-webkit-transition: opacity 250ms;
|
2014-02-13 09:30:17 +01:00
|
|
|
transition: opacity 250ms;
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window-content {
|
2012-12-04 02:26:03 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
border: 1px dashed #fff;
|
2012-10-29 00:29:17 +01: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-10 01:27:10 +01:00
|
|
|
margin: -0.5em 0 0;
|
2012-10-29 00:29:17 +01:00
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-transform: translateY( -50% );
|
2014-08-05 07:20:18 +02:00
|
|
|
-ms-transform: translateY(-50%);
|
2014-02-13 09:30:17 +01: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-10 01:27:10 +01:00
|
|
|
font-size: 40px;
|
2012-10-29 00:29:17 +01:00
|
|
|
color: #fff;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-window .media-progress-bar {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-color: #fff;
|
2012-10-29 08:38:13 +01:00
|
|
|
display: none;
|
2012-10-29 00:29:17 +01: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 06:54:23 +02:00
|
|
|
}
|
|
|
|
|
|
2012-10-29 00:29:17 +01: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 06:54:23 +02:00
|
|
|
display: block;
|
2012-09-06 09:46:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 07:01:47 +01:00
|
|
|
.media-frame .uploader-inline {
|
2014-07-25 02:31:15 +02: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 23:59:12 +01:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-13 02:50:08 +01:00
|
|
|
.uploader-inline-content .upload-ui {
|
2014-07-25 02:31:15 +02:00
|
|
|
margin: 2em 0;
|
2012-11-13 02:50:08 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-05 20:15:40 +01:00
|
|
|
.uploader-inline-content .post-upload-ui {
|
|
|
|
|
margin-bottom: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
.uploader-inline h3 {
|
|
|
|
|
font-size: 20px;
|
2012-11-22 12:46:03 +01: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-10 01:27:10 +01:00
|
|
|
font-weight: 400;
|
2014-07-25 02:31:15 +02:00
|
|
|
margin: 0;
|
2012-10-29 08:38:13 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.uploader-inline .has-upload-message .upload-instructions {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #464646;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 12:46:03 +01:00
|
|
|
.uploader-inline .drop-instructions {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supports-drag-drop .uploader-inline .drop-instructions {
|
2012-11-16 10:39:58 +01:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-22 12:46:03 +01:00
|
|
|
.uploader-inline p {
|
|
|
|
|
font-size: 12px;
|
2014-07-25 02:31:15 +02:00
|
|
|
margin: 0.5em 0;
|
2012-11-22 12:46:03 +01:00
|
|
|
}
|
|
|
|
|
|
2012-10-29 08:38:13 +01: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 23:59:12 +01:00
|
|
|
.uploader-inline .browser {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Selection
|
|
|
|
|
*/
|
|
|
|
|
.media-selection {
|
2012-10-29 08:38:13 +01: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 23:59:12 +01:00
|
|
|
top: 0;
|
2012-10-29 08:38:13 +01: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 23:59:12 +01: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 19:37:52 +01: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 23:59:12 +01:00
|
|
|
height: 60px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 19:23:47 +01: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 23:59:12 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .count {
|
|
|
|
|
display: block;
|
|
|
|
|
padding-top: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
display: block;
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
line-height: 16px;
|
2012-11-15 03:36:06 +01: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 19:23:47 +01:00
|
|
|
margin-right: 0;
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
.media-selection .selection-view {
|
|
|
|
|
display: inline-block;
|
2012-12-05 20:15:40 +01:00
|
|
|
vertical-align: top;
|
2012-12-04 17:21:57 +01: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 23:59:12 +01:00
|
|
|
.media-selection .attachments {
|
|
|
|
|
display: inline-block;
|
2012-11-27 20:14:36 +01:00
|
|
|
height: 48px;
|
2014-08-05 07:20:18 +02: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 23:59:12 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-05 07:20:18 +02:00
|
|
|
.media-selection .attachment {
|
|
|
|
|
width: 48px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
-webkit-box-shadow: none;
|
2014-08-06 21:13:15 +02:00
|
|
|
box-shadow: none;
|
2014-08-05 07:20:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .attachment .thumbnail {
|
|
|
|
|
top: 4px;
|
|
|
|
|
right: 4px;
|
|
|
|
|
bottom: 4px;
|
|
|
|
|
left: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-selection .attachment .icon {
|
2012-11-27 20:14:36 +01:00
|
|
|
width: 50%;
|
|
|
|
|
}
|
2014-08-05 07:20:18 +02:00
|
|
|
/*
|
|
|
|
|
.attachment.selection.selected .thumbnail {
|
2014-02-13 09:30:17 +01: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 23:59:12 +01:00
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-18 09:57:15 +02:00
|
|
|
.attachment.selection.selected:focus {
|
2014-07-22 21:58:18 +02:00
|
|
|
-webkit-box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
|
|
|
|
0 0 2px 2px #5b9dd9;
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
|
|
|
|
0 0 2px 2px #5b9dd9;
|
2014-07-18 09:57:15 +02:00
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-15 03:36:06 +01:00
|
|
|
.attachment.selection.details {
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 4px #1e8cbe;
|
2012-11-15 03:36:06 +01:00
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 4px #1e8cbe;
|
|
|
|
|
}
|
2014-08-05 07:20:18 +02:00
|
|
|
*/
|
|
|
|
|
.media-selection .attachment.selection.details .thumbnail {
|
2014-02-13 09:30:17 +01: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 23:59:12 +01: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 08:38:13 +01: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 23:59:12 +01:00
|
|
|
width: 25px;
|
2014-02-13 09:30:17 +01: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 08:38:13 +01: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 23:59:12 +01:00
|
|
|
.media-selection .attachment .filename {
|
|
|
|
|
display: none;
|
2012-10-29 08:38:13 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-03 07:37:49 +01:00
|
|
|
/**
|
|
|
|
|
* Spinner
|
|
|
|
|
*/
|
2012-12-07 00:12:59 +01:00
|
|
|
.media-frame .spinner {
|
2014-02-26 18:23:13 +01:00
|
|
|
background: url(../images/spinner.gif) no-repeat;
|
2014-02-13 09:30:17 +01: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-10 01:27:10 +01:00
|
|
|
background-size: 20px 20px;
|
2012-12-03 07:37:49 +01: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-10 01:27:10 +01:00
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
2012-12-07 00:12:59 +01:00
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-06 18:46:15 +01:00
|
|
|
.media-toolbar .spinner {
|
|
|
|
|
margin-top: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
/**
|
|
|
|
|
* Attachment Details
|
|
|
|
|
*/
|
|
|
|
|
.attachment-details {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-details .settings-save-status {
|
2012-12-07 00:12:59 +01:00
|
|
|
float: right;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:55:17 +02:00
|
|
|
.attachment-details .settings-save-status .spinner,
|
|
|
|
|
.attachment-details .settings-save-status .saved {
|
|
|
|
|
margin: 0 5px -20px;
|
2012-12-03 07:37:49 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.attachment-details .settings-save-status .saved {
|
2012-12-03 07:37:49 +01:00
|
|
|
float: right;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.attachment-details.save-waiting .settings-save-status .spinner,
|
|
|
|
|
.attachment-details.save-complete .settings-save-status .saved {
|
2012-12-03 07:37:49 +01:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
.attachment-info {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-height: 60px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
line-height: 18px;
|
2013-11-28 05:14:09 +01:00
|
|
|
color: #666;
|
2014-03-07 03:46:14 +01:00
|
|
|
border-bottom: 1px solid #ddd;
|
2012-11-11 02:26:42 +01:00
|
|
|
padding-bottom: 11px;
|
2012-10-29 16:13:02 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:55:17 +02:00
|
|
|
.attachment-info .details {
|
|
|
|
|
clear: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info h3:first-child {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info .details .setting .name {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 8px 1% 0 1% !important;
|
|
|
|
|
padding: 0;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info .details .url.setting .name {
|
|
|
|
|
padding-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-info .setting .value {
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
.attachment-info .filename {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #464646;
|
2012-12-03 05:15:32 +01:00
|
|
|
word-wrap: break-word;
|
2012-10-29 16:13:02 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-11 08:15:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .filename {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
.attachment-info .thumbnail {
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
max-height: 120px;
|
2012-12-06 06:52:19 +01:00
|
|
|
margin-top: 5px;
|
2012-11-10 19:25:04 +01:00
|
|
|
margin-right: 10px;
|
2012-11-11 02:26:42 +01:00
|
|
|
margin-bottom: 5px;
|
2012-10-29 19:16:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-11 08:15:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .thumbnail {
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-11 06:16:41 +01:00
|
|
|
.uploading .attachment-info .thumbnail {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 80px;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
|
2012-11-11 06:16:41 +01:00
|
|
|
box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploading .attachment-info .media-progress-bar {
|
2012-11-22 10:32:21 +01:00
|
|
|
margin-top: 35px;
|
2012-11-11 06:16:41 +01:00
|
|
|
}
|
|
|
|
|
|
2014-05-11 08:19:14 +02:00
|
|
|
.attachment-info .thumbnail-image:after {
|
2012-10-29 19:16:12 +01:00
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
2012-11-10 19:25:04 +01:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
2012-10-29 19:16:12 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
.attachment-info .thumbnail img {
|
2012-10-29 16:13:02 +01:00
|
|
|
display: block;
|
2012-11-10 19:25:04 +01:00
|
|
|
max-width: 120px;
|
|
|
|
|
max-height: 120px;
|
2012-10-29 16:13:02 +01:00
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
.attachment-info .details {
|
2012-10-29 16:13:02 +01:00
|
|
|
float: left;
|
2012-11-21 19:37:52 +01:00
|
|
|
font-size: 12px;
|
2012-12-03 05:15:32 +01:00
|
|
|
max-width: 100%;
|
2012-11-11 02:26:42 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:55:17 +02:00
|
|
|
.attachment-info .advanced-toggle {
|
|
|
|
|
color: #666;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.attachment-info .advanced-toggle:hover {
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 17:52:17 +02:00
|
|
|
.attachment-info .advanced-toggle:after {
|
2014-07-24 23:55:17 +02: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 17:52:17 +02:00
|
|
|
.attachment-info .advanced-visible .advanced-toggle:after {
|
2014-07-24 23:55:17 +02:00
|
|
|
content: '\f142';
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-06 06:52:19 +01:00
|
|
|
.attachment-info .edit-attachment,
|
|
|
|
|
.attachment-info .refresh-attachment,
|
2014-03-07 17:42:14 +01:00
|
|
|
.attachment-info .delete-attachment,
|
|
|
|
|
.attachment-info .trash-attachment {
|
2012-12-06 06:52:19 +01:00
|
|
|
display: block;
|
2012-11-27 16:50:59 +01:00
|
|
|
text-decoration: none;
|
2012-12-03 20:49:45 +01:00
|
|
|
white-space: nowrap;
|
2012-11-27 16:50:59 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-06 06:52:19 +01: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-17 05:55:15 +02:00
|
|
|
.media-modal .delete-attachment,
|
|
|
|
|
.media-modal .trash-attachment {
|
2012-12-06 06:52:19 +01:00
|
|
|
color: #bc0b0b;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.media-modal .delete-attachment:hover,
|
|
|
|
|
.media-modal .trash-attachment:hover {
|
2012-12-06 06:52:19 +01:00
|
|
|
color: red;
|
2012-11-27 16:50:59 +01:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
/**
|
|
|
|
|
* Attachment Display Settings
|
|
|
|
|
*/
|
2012-11-11 02:26:42 +01:00
|
|
|
.attachment-display-settings {
|
2012-11-20 23:51:35 +01:00
|
|
|
width: 100%;
|
2012-11-11 02:26:42 +01:00
|
|
|
float: left;
|
2012-11-20 23:51:35 +01:00
|
|
|
overflow: hidden;
|
2012-11-11 02:26:42 +01:00
|
|
|
}
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
|
.attachment-display-settings h4 {
|
|
|
|
|
margin: 1.4em 0 0.4em;
|
2012-11-10 19:25:04 +01:00
|
|
|
}
|
|
|
|
|
|
2014-02-24 19:08:16 +01:00
|
|
|
.collection-settings {
|
2012-11-10 19:25:04 +01:00
|
|
|
overflow: hidden;
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-03-10 00:19:15 +01:00
|
|
|
.collection-settings .setting input[type="checkbox"] {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.collection-settings .setting span {
|
|
|
|
|
min-width: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-06 23:55:14 +01:00
|
|
|
/**
|
|
|
|
|
* Image Editor
|
|
|
|
|
*/
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-wrap {
|
2014-03-29 09:51:14 +01:00
|
|
|
position: static;
|
2014-03-06 23:55:14 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-wait {
|
2014-03-29 09:51:14 +01:00
|
|
|
height: auto !important;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-wrap .imgedit-panel-content {
|
2014-03-29 09:51:14 +01:00
|
|
|
padding: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 282px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
overflow: auto;
|
2014-03-06 23:55:14 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-wrap .imgedit-settings {
|
2014-03-29 09:51:14 +01:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-left: 1px solid #ddd;
|
|
|
|
|
padding: 0 16px 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-03-06 23:55:14 +01:00
|
|
|
width: 250px;
|
2014-03-29 09:51:14 +01:00
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-group {
|
2014-03-29 09:51:14 +01: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-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-group:last-of-type {
|
2014-03-29 09:51:14 +01:00
|
|
|
border: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-group-top h3 {
|
2014-03-29 09:51:14 +01:00
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-group-top h3 a {
|
2014-03-29 09:51:14 +01:00
|
|
|
text-decoration: none;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-help-toggle {
|
2014-03-29 09:51:14 +01:00
|
|
|
margin-top: -2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-help-toggled span.dashicons:before {
|
2014-03-29 09:51:14 +01:00
|
|
|
content: '\f142';
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-group img {
|
2014-03-29 09:51:14 +01:00
|
|
|
margin-top: 5px;
|
2014-03-06 23:55:14 +01:00
|
|
|
}
|
2014-03-29 09:51:14 +01:00
|
|
|
|
2014-07-10 03:24:14 +02:00
|
|
|
.media-modal .imgedit-wrap div.updated {
|
2014-03-29 09:51:14 +01:00
|
|
|
margin: 0;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
/**
|
2014-01-28 22:17:12 +01:00
|
|
|
* Embed from URL and Image Details
|
2012-11-12 06:57:12 +01: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-10 01:27:10 +01:00
|
|
|
padding: 16px;
|
2012-11-12 06:57:12 +01:00
|
|
|
margin: 0;
|
2012-12-04 02:26:03 +01:00
|
|
|
z-index: 250;
|
|
|
|
|
background: #fff;
|
2012-11-12 06:57:12 +01:00
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:45:06 +01:00
|
|
|
.media-frame .embed-url input {
|
2012-11-21 19:37:52 +01:00
|
|
|
font-size: 18px;
|
2012-11-12 06:57:12 +01:00
|
|
|
padding: 12px 14px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-width: 200px;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
|
2012-11-12 06:57:12 +01:00
|
|
|
box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-07 00:12:59 +01:00
|
|
|
.media-frame .embed-url .spinner {
|
|
|
|
|
position: absolute;
|
2014-05-27 01:57:14 +02:00
|
|
|
top: 32px;
|
2012-12-07 00:12:59 +01:00
|
|
|
right: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame .embed-loading .embed-url .spinner {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.embed-link-settings,
|
2014-03-05 16:06:14 +01:00
|
|
|
.embed-media-settings {
|
2012-11-12 06:57:12 +01:00
|
|
|
position: absolute;
|
2014-05-27 01:57:14 +02:00
|
|
|
top: 70px;
|
2012-11-12 06:57:12 +01:00
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
padding: 16px 16px 32px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-27 01:57:14 +02:00
|
|
|
.embed-preview img, .embed-preview iframe, .embed-preview embed {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.embed-preview img {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.image-details .media-modal {
|
|
|
|
|
left: 140px;
|
|
|
|
|
right: 140px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .media-frame-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .media-frame-title,
|
|
|
|
|
.image-details .media-frame-content,
|
|
|
|
|
.image-details .media-frame-router {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-05 16:06:14 +01:00
|
|
|
.image-details .embed-media-settings {
|
2014-01-28 22:17:12 +01:00
|
|
|
top: 0;
|
2014-03-27 23:41:14 +01:00
|
|
|
overflow: visible;
|
2014-04-02 03:54:15 +02:00
|
|
|
padding: 0;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-settings {
|
2014-04-02 03:54:15 +02:00
|
|
|
background: #f3f3f3;
|
|
|
|
|
border-right: 1px solid #ddd;
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
width: 52%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-settings h3 {
|
|
|
|
|
margin: 20px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid #ddd;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .column-image {
|
2014-04-02 03:54:15 +02:00
|
|
|
width: 48%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 52%;
|
|
|
|
|
top: 0;
|
2014-01-28 22:17:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.image-details .image {
|
|
|
|
|
margin: 20px;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .image img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.image-details .advanced-toggle {
|
|
|
|
|
color: #666;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-28 17:52:17 +02:00
|
|
|
.image-details .advanced-toggle:after {
|
2014-04-02 03:54:15 +02: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 17:52:17 +02:00
|
|
|
.image-details .advanced-visible .advanced-toggle:after {
|
2014-04-02 03:54:15 +02:00
|
|
|
content: '\f142';
|
|
|
|
|
}
|
2014-03-27 23:41:14 +01:00
|
|
|
|
2014-04-03 05:21:15 +02: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 17:52:17 +02:00
|
|
|
.image-details .custom-size:after {
|
|
|
|
|
content: '';
|
2014-04-03 05:21:15 +02:00
|
|
|
display: table;
|
2014-07-28 17:52:17 +02:00
|
|
|
clear: both;
|
2014-04-03 05:21:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.media-embed .thumbnail {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
position: relative;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .thumbnail img {
|
|
|
|
|
max-height: 200px;
|
2012-12-07 00:12:59 +01:00
|
|
|
display: block;
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .thumbnail:after {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-02-13 09:30:17 +01:00
|
|
|
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
2012-11-12 06:57:12 +01:00
|
|
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-embed .setting {
|
|
|
|
|
width: 100%;
|
2014-03-27 23:41:14 +01:00
|
|
|
margin: 10px 0;
|
2012-11-12 06:57:12 +01:00
|
|
|
float: left;
|
|
|
|
|
display: block;
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.image-details .embed-media-settings .setting {
|
2014-03-27 23:41:14 +01:00
|
|
|
float: none;
|
2014-04-02 03:54:15 +02:00
|
|
|
width: auto;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .actions {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.image-details .hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.media-embed .setting input[type="text"],
|
|
|
|
|
.media-embed .setting textarea {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
.image-details .embed-media-settings .setting input[type="text"],
|
|
|
|
|
.image-details .embed-media-settings .setting textarea {
|
2014-03-27 23:41:14 +01:00
|
|
|
max-width: inherit;
|
2014-04-02 03:54:15 +02:00
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .setting input.link-to-custom,
|
2014-04-03 05:21:15 +02:00
|
|
|
.image-details .embed-media-settings .link-target,
|
|
|
|
|
.image-details .embed-media-settings .custom-size {
|
2014-04-02 03:54:15 +02:00
|
|
|
margin-left: 27%;
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-details .embed-media-settings .link-target {
|
|
|
|
|
margin-top: 24px;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
2014-04-19 20:34:17 +02:00
|
|
|
.media-embed .setting input.hidden,
|
|
|
|
|
.media-embed .setting textarea.hidden {
|
2014-01-28 22:17:12 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.media-embed .setting span {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 200px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 24px;
|
2013-11-28 05:14:09 +01:00
|
|
|
color: #666;
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
|
|
2014-06-11 02:23:14 +02:00
|
|
|
.image-details .embed-media-settings .setting span {
|
2014-04-02 03:54:15 +02:00
|
|
|
float: left;
|
|
|
|
|
width: 25%;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin: 8px 1% 0 1%;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
.media-embed .setting .button-group {
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.media-embed-sidebar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 440px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-13 06:02:15 +02:00
|
|
|
.advanced-section,
|
2014-03-27 23:41:14 +01:00
|
|
|
.link-settings {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-23 02:42:15 +01:00
|
|
|
/* Drag & drop on the editor upload */
|
2014-03-29 08:54:15 +01:00
|
|
|
#wp-fullscreen-body .uploader-editor,
|
2014-03-23 02:42:15 +01: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 08:54:15 +01:00
|
|
|
#wp-fullscreen-body .uploader-editor {
|
2014-03-23 02:42:15 +01:00
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 100050; /* above the editor toolbar */
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 08:54:15 +01:00
|
|
|
.wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#wp-fullscreen-body .uploader-editor-content,
|
2014-03-23 02:42:15 +01:00
|
|
|
.wp-editor-wrap .uploader-editor-content {
|
|
|
|
|
border: 1px dashed #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 08:54:15 +01:00
|
|
|
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
|
2014-03-23 02:42:15 +01:00
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-transform: translateY( -50% );
|
2014-08-05 07:20:18 +02:00
|
|
|
-ms-transform: translateY(-50%);
|
2014-03-23 02:42:15 +01:00
|
|
|
transform: translateY( -50% );
|
|
|
|
|
font-size: 3em;
|
2014-03-27 05:08:14 +01:00
|
|
|
line-height: 1.3;
|
2014-03-23 02:42:15 +01:00
|
|
|
font-weight: bold;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 0;
|
2014-03-29 08:54:15 +01:00
|
|
|
margin: 0;
|
2014-03-23 02:42:15 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-editor-wrap .uploader-editor.droppable {
|
|
|
|
|
background: rgba( 0, 86, 132, 0.9 );
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-29 08:54:15 +01:00
|
|
|
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
|
2014-03-23 02:42:15 +01:00
|
|
|
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 04:15:53 +01: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%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-sidebar .setting input,
|
|
|
|
|
.ie7 .media-sidebar .setting textarea {
|
|
|
|
|
width: 55%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ie7 .media-sidebar .setting .link-to-custom {
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-09 02:31:11 +01: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"],
|
|
|
|
|
.rtl .media-frame textarea,
|
|
|
|
|
.rtl .media-frame select {
|
|
|
|
|
font-family: Tahoma, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:lang(he-il) .rtl .media-modal,
|
|
|
|
|
:lang(he-il) .rtl .media-frame,
|
|
|
|
|
:lang(he-il) .rtl .media-frame .search,
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="text"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="password"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="number"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="search"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="email"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame input[type="url"],
|
|
|
|
|
:lang(he-il) .rtl .media-frame textarea,
|
|
|
|
|
:lang(he-il) .rtl .media-frame select {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-05 11:15:42 +01:00
|
|
|
@media only screen and (max-width: 960px) {
|
|
|
|
|
.media-frame-content .media-toolbar-primary .search,
|
|
|
|
|
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-28 02:51:15 +01:00
|
|
|
/**
|
|
|
|
|
* Responsive layout
|
|
|
|
|
*/
|
|
|
|
|
@media only screen and (max-width: 900px) {
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-frame-menu {
|
2012-12-01 03:53:53 +01:00
|
|
|
width: 139px;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-menu > a {
|
2013-11-15 20:54:10 +01:00
|
|
|
padding: 4px 5px;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
.media-frame-title,
|
|
|
|
|
.media-frame-router,
|
|
|
|
|
.media-frame-content,
|
|
|
|
|
.media-frame-toolbar {
|
2012-12-01 03:53:53 +01:00
|
|
|
left: 140px;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar {
|
2012-12-01 03:53:53 +01:00
|
|
|
width: 159px;
|
|
|
|
|
padding: 0 10px 24px;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .attachments,
|
2012-11-30 07:01:47 +01:00
|
|
|
.attachments-browser .uploader-inline,
|
2012-11-28 02:51:15 +01:00
|
|
|
.attachments-browser .media-toolbar {
|
|
|
|
|
right: 180px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting input,
|
|
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.media-sidebar .setting span,
|
|
|
|
|
.compat-item label span {
|
|
|
|
|
float: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting span,
|
|
|
|
|
.compat-item label span {
|
|
|
|
|
text-align: inherit;
|
2012-12-01 03:53:53 +01:00
|
|
|
display: block;
|
2012-11-28 02:51:15 +01:00
|
|
|
min-height: 16px;
|
2012-12-01 03:53:53 +01:00
|
|
|
margin: 0;
|
2012-11-28 02:51:15 +01:00
|
|
|
padding: 8px 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting input,
|
|
|
|
|
.media-sidebar .setting textarea,
|
|
|
|
|
.media-sidebar .setting select {
|
2012-12-01 03:53:53 +01:00
|
|
|
width: 98%;
|
2012-11-28 02:51:15 +01:00
|
|
|
max-width: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting select.columns {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame input,
|
|
|
|
|
.media-frame textarea,
|
|
|
|
|
.media-frame .search {
|
|
|
|
|
padding: 3px 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.image-details .media-modal {
|
|
|
|
|
left: 30px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02: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-03 05:21:15 +02:00
|
|
|
.image-details .embed-media-settings .custom-size {
|
|
|
|
|
margin-left: 20px;
|
2014-04-02 03:54:15 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-01 03:53:53 +01:00
|
|
|
.media-selection {
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection:after {
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-selection .attachments {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-menu .separator {
|
|
|
|
|
margin: 12px 10px;
|
|
|
|
|
}
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-10 01:27:10 +01:00
|
|
|
|
|
|
|
|
.media-modal-close {
|
2013-11-15 20:54:10 +01:00
|
|
|
right: 10px;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-15 20:54:10 +01: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-10 01:27:10 +01:00
|
|
|
}
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
/* Responsive on portrait and landscape */
|
|
|
|
|
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
|
|
|
|
|
|
|
|
|
/* Media tabs on the top */
|
2012-12-05 11:15:42 +01:00
|
|
|
.media-frame-content .media-toolbar .instructions {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2013-11-15 22:47:09 +01:00
|
|
|
|
|
|
|
|
.media-frame-menu {
|
|
|
|
|
width: auto;
|
|
|
|
|
bottom: auto;
|
|
|
|
|
right: 0;
|
|
|
|
|
height: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-menu {
|
|
|
|
|
border-right: none;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-bottom: 1px solid #dddddd;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 10px 0 10px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-menu a {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 42%;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2013-11-18 21:07:10 +01:00
|
|
|
|
|
|
|
|
.media-frame-title {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.image-details .media-frame-title {
|
|
|
|
|
display: block;
|
|
|
|
|
top: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.media-frame-toolbar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
border-top: 1px solid #DEDEDE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-toolbar {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .attachments {
|
|
|
|
|
top: 42px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-details h3 {
|
|
|
|
|
margin-top: 45px;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-15 22:47:09 +01:00
|
|
|
/* Shorten right-side links so they don't overlap the close button */
|
|
|
|
|
.media-menu a:nth-child(2),
|
|
|
|
|
.media-menu a:last-child {
|
|
|
|
|
width: 40%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-menu .separator {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-title {
|
|
|
|
|
top: 72px;
|
|
|
|
|
left: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-title h1 {
|
|
|
|
|
line-height: 3;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-frame-router {
|
|
|
|
|
top: 84px;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-15 22:47:09 +01:00
|
|
|
.media-frame-content {
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 118px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.image-details .media-frame.hide-router .media-frame-content {
|
|
|
|
|
top: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-15 22:47:09 +01:00
|
|
|
.media-frame .attachments-browser {
|
|
|
|
|
padding-bottom: 300px;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-15 22:47:09 +01:00
|
|
|
.media-sidebar {
|
|
|
|
|
border-bottom: 1px solid #dddddd;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-15 22:47:09 +01:00
|
|
|
.media-modal {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-toolbar-primary, .media-toolbar-secondary {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content {
|
|
|
|
|
top: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content .upload-ui {
|
2014-07-26 17:30:16 +02:00
|
|
|
margin: 1em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content .post-upload-ui {
|
|
|
|
|
margin-bottom: 1em;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2014-07-26 17:30:16 +02:00
|
|
|
.attachments-browser .attachments,
|
|
|
|
|
.attachments-browser .uploader-inline {
|
2013-11-15 22:47:09 +01:00
|
|
|
position: relative;
|
|
|
|
|
margin-right: 180px;
|
|
|
|
|
}
|
2012-12-05 11:15:42 +01:00
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
/* Full-bleed modal */
|
2014-03-27 23:41:14 +01:00
|
|
|
.media-modal,
|
|
|
|
|
.image-details .media-modal {
|
2013-11-15 22:47:09 +01:00
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-modal-backdrop {
|
2013-11-15 22:47:09 +01:00
|
|
|
position: fixed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .attachment,
|
|
|
|
|
.attachments-browser .attachment-preview {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments-browser .media-toolbar-primary input.search {
|
|
|
|
|
max-width: 150px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploader-inline-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-sidebar .setting input[type="checkbox"],
|
|
|
|
|
.media-sidebar .field input[type="checkbox"] {
|
|
|
|
|
width: 25px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
/* Image From Link */
|
|
|
|
|
.embed-link-settings,
|
2014-03-05 16:06:14 +01:00
|
|
|
.embed-media-settings {
|
2013-11-18 21:07:10 +01:00
|
|
|
padding-bottom: 52px;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
2013-11-18 21:07:10 +01:00
|
|
|
|
2014-03-27 23:41:14 +01:00
|
|
|
.image-details .column-settings,
|
|
|
|
|
.image-details .column-image {
|
2014-04-02 03:54:15 +02:00
|
|
|
position: relative;
|
|
|
|
|
padding: 10px 0 20px 0;
|
|
|
|
|
left: 0;
|
2014-03-27 23:41:14 +01:00
|
|
|
width: 100%;
|
2014-04-02 03:54:15 +02:00
|
|
|
min-height: inherit;
|
2014-03-27 23:41:14 +01:00
|
|
|
}
|
|
|
|
|
|
2014-04-02 03:54:15 +02:00
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
/* Gallery */
|
|
|
|
|
.media-frame.hide-router .media-frame-content {
|
|
|
|
|
top: 73px;
|
|
|
|
|
border-top: none;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2014-02-24 19:08:16 +01:00
|
|
|
.collection-settings h3 {
|
2013-11-18 21:07:10 +01:00
|
|
|
margin-top: 45px;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Landscape specific header override */
|
|
|
|
|
@media screen and (max-height: 400px) {
|
|
|
|
|
.media-menu {
|
|
|
|
|
padding: 0 0 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.media-menu a {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 21%;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
2013-11-15 22:47:09 +01:00
|
|
|
overflow: hidden;
|
2013-11-18 21:07:10 +01:00
|
|
|
padding: 10px inherit;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.media-menu a:nth-child(2),
|
|
|
|
|
.media-menu a:last-child {
|
|
|
|
|
width: 21%;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.media-modal-close {
|
|
|
|
|
top: 2px;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.media-frame-router {
|
|
|
|
|
top: 44px;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.media-frame-content {
|
|
|
|
|
top: 78px;
|
|
|
|
|
}
|
2014-02-13 09:30:17 +01:00
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
.attachments-browser .attachments {
|
|
|
|
|
top: 2px;
|
2013-11-15 22:47:09 +01:00
|
|
|
}
|
|
|
|
|
|
2013-11-18 21:07:10 +01:00
|
|
|
/* Prevent unnecessary scrolling on title input */
|
|
|
|
|
.embed-link-settings {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 680px) {
|
|
|
|
|
.media-frame-content .media-toolbar .search,
|
|
|
|
|
.media-frame-content .media-toolbar .attachment-filters {
|
|
|
|
|
max-width: 85px;
|
2012-11-28 02:51:15 +01:00
|
|
|
}
|
|
|
|
|
}
|
2012-12-04 17:32:06 +01: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-10 01:27:10 +01:00
|
|
|
|
2014-07-28 17:52:17 +02:00
|
|
|
.media-modal-icon {
|
|
|
|
|
background-image: url(../images/uploader-icons-2x.png);
|
|
|
|
|
-webkit-background-size: 134px 15px;
|
|
|
|
|
background-size: 134px 15px;
|
|
|
|
|
}
|
2012-12-04 17:32:06 +01:00
|
|
|
|
2014-07-28 17:52:17 +02:00
|
|
|
.media-frame .spinner {
|
|
|
|
|
background-image: url(../images/spinner-2x.gif);
|
|
|
|
|
}
|
2014-01-28 22:17:12 +01:00
|
|
|
}
|
2014-06-06 00:01:18 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Media Grid
|
|
|
|
|
*/
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid,
|
|
|
|
|
.media-frame.mode-grid .media-frame-content,
|
|
|
|
|
.media-frame.mode-grid .attachments-browser .attachments,
|
|
|
|
|
.media-frame.mode-grid .uploader-inline-content {
|
2014-07-13 18:16:15 +02:00
|
|
|
position: static;
|
2014-06-06 00:01:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Regions we don't use at all */
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .media-frame-title,
|
|
|
|
|
.media-frame.mode-grid .media-frame-toolbar,
|
|
|
|
|
.media-frame.mode-grid .media-frame-router,
|
|
|
|
|
.media-frame.mode-grid .media-frame-menu {
|
2014-06-06 00:01:18 +02:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .media-frame-content {
|
2014-07-13 18:16:15 +02:00
|
|
|
background-color: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .uploader-inline {
|
2014-07-13 18:16:15 +02:00
|
|
|
position: relative;
|
|
|
|
|
top: auto;
|
|
|
|
|
right: auto;
|
|
|
|
|
left: auto;
|
|
|
|
|
bottom: auto;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .media-toolbar select {
|
2014-07-17 22:42:15 +02:00
|
|
|
margin-top: 1px;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachments-browser .bulk-select {
|
2014-07-17 22:42:15 +02:00
|
|
|
display: inline-block;
|
2014-07-26 17:30:16 +02:00
|
|
|
margin: 0 10px 0 0;
|
2014-07-17 22:42:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-04 05:39:15 +02:00
|
|
|
/**
|
|
|
|
|
* Copied styles from the Add theme toolbar.
|
|
|
|
|
*
|
|
|
|
|
* This should be OOCSS'd so both use a shared selector.
|
|
|
|
|
*/
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachments-browser .media-toolbar {
|
2014-07-04 05:39:15 +02:00
|
|
|
background: #fff;
|
|
|
|
|
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
|
|
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
color: #555;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 13px;
|
2014-07-13 18:16:15 +02:00
|
|
|
margin: 20px 0;
|
2014-07-04 05:39:15 +02:00
|
|
|
padding: 0 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
2014-07-13 18:16:15 +02:00
|
|
|
height: auto;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid input[type="search"] {
|
2014-07-13 18:16:15 +02:00
|
|
|
margin: 1px;
|
|
|
|
|
padding: 3px 5px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 9px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
width: 280px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .view-switch {
|
2014-07-13 18:16:15 +02:00
|
|
|
display: inline-block;
|
|
|
|
|
float: none;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
margin: 0 20px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid select {
|
2014-07-13 18:16:15 +02:00
|
|
|
margin: 0 10px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .spinner {
|
2014-07-13 18:16:15 +02:00
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachments-browser {
|
2014-07-13 18:16:15 +02:00
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachments-browser .no-media {
|
2014-07-13 18:16:15 +02:00
|
|
|
color: #999;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 100px 0 0;
|
|
|
|
|
text-align: center;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The left and right buttons are copied from the expanded theme details modal.
|
|
|
|
|
*
|
|
|
|
|
* This should be OOCSS'd so both use a shared selector.
|
|
|
|
|
*/
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-24 23:07:15 +02:00
|
|
|
.upload-php .media-modal-close:before {
|
|
|
|
|
top: 4px;
|
|
|
|
|
left: 14px;
|
2014-07-17 05:55:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upload-php .media-modal-close,
|
2014-07-04 05:39:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .left,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #777;
|
|
|
|
|
background-color: transparent;
|
2014-07-17 05:55:15 +02:00
|
|
|
height: 56px;
|
|
|
|
|
width: 56px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
position: absolute;
|
2014-07-04 05:39:15 +02:00
|
|
|
text-align: center;
|
|
|
|
|
border: 0;
|
2014-07-17 05:55:15 +02:00
|
|
|
border-left: 1px solid #ddd;
|
2014-08-03 00:02:19 +02:00
|
|
|
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
|
|
|
|
transition: color .1s ease-in-out, background .1s ease-in-out;
|
2014-07-17 05:55:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .edit-media-header .left {
|
|
|
|
|
right: 112px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right {
|
|
|
|
|
right: 56px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .media-frame-title {
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 170px; /* leave space for prev/next/close */
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right:before,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .left:before {
|
|
|
|
|
font: normal 20px/50px 'dashicons' !important;
|
|
|
|
|
display: inline;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 05:08:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .left:before,
|
|
|
|
|
.rtl .edit-attachment-frame .edit-media-header .right:before {
|
2014-07-04 05:39:15 +02:00
|
|
|
content: '\f340';
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-22 05:08:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .right:before,
|
|
|
|
|
.rtl .edit-attachment-frame .edit-media-header .left:before {
|
2014-07-04 05:39:15 +02:00
|
|
|
content: '\f344';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .edit-media-header .left.disabled,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right.disabled,
|
2014-07-24 23:07:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .left.disabled:focus,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right.disabled:focus,
|
2014-07-04 05:39:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .left.disabled:hover,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .right.disabled:hover {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
background: inherit;
|
|
|
|
|
cursor: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.upload-php .media-modal-close:hover,
|
2014-07-04 05:39:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .right:hover,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .left:hover,
|
2014-07-17 05:55:15 +02:00
|
|
|
.upload-php .media-modal-close:focus,
|
2014-07-04 05:39:15 +02:00
|
|
|
.edit-attachment-frame .edit-media-header .right:focus,
|
|
|
|
|
.edit-attachment-frame .edit-media-header .left:focus {
|
|
|
|
|
background: #0074a2;
|
|
|
|
|
color: #fff;
|
2014-08-03 00:02:19 +02:00
|
|
|
outline: none;
|
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
|
box-shadow: none;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .media-frame-content,
|
|
|
|
|
.edit-attachment-frame .media-frame-router {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-10 05:50:17 +02:00
|
|
|
.edit-attachment-frame .media-frame-content {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
bottom: 0;
|
2014-07-17 05:55:15 +02:00
|
|
|
top: 56px;
|
2014-07-10 05:50:17 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-04 05:39:15 +02:00
|
|
|
.edit-attachment-frame .attachment-details {
|
|
|
|
|
position: absolute;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
left: 0;
|
2014-07-17 05:55:15 +02:00
|
|
|
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-media-view {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 65%;
|
|
|
|
|
height: 100%;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-media-view .thumbnail {
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
height: 100%;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-media-view img {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 16px;
|
2014-07-10 03:45:16 +02:00
|
|
|
max-width: 100%;
|
2014-07-17 05:55:15 +02:00
|
|
|
max-height: -webkit-calc( 100% - 42px );
|
|
|
|
|
max-height: calc( 100% - 42px ); /* leave space for actions underneath */
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .delete-attachment {
|
|
|
|
|
float: right;
|
|
|
|
|
margin-top: 7px;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-attachment-frame .wp-media-wrapper {
|
2014-07-11 08:15:15 +02:00
|
|
|
margin-bottom: 12px;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
padding: 12px 16px 0;
|
|
|
|
|
width: 35%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
border-left: 1px solid #ddd;
|
|
|
|
|
background: #f3f3f3;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-02 21:53:17 +02:00
|
|
|
.edit-attachment-frame input,
|
|
|
|
|
.edit-attachment-frame textarea {
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .details,
|
|
|
|
|
.edit-attachment-frame .attachment-info .settings {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
float: none;
|
2014-07-22 05:18:15 +02:00
|
|
|
position: relative;
|
2014-07-17 05:55:15 +02:00
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding-bottom: 15px;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
2014-07-04 05:39:15 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting {
|
2014-07-04 05:39:15 +02:00
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting label {
|
2014-07-04 05:39:15 +02:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting .link-to-custom {
|
2014-07-04 05:39:15 +02:00
|
|
|
margin: 3px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting .name {
|
2014-07-04 05:39:15 +02:00
|
|
|
min-width: 30%;
|
|
|
|
|
margin-right: 4%;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting select {
|
2014-07-04 05:39:15 +02:00
|
|
|
max-width: 65%;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
|
2014-08-02 21:53:17 +02:00
|
|
|
.edit-attachment-frame .attachment-info .field input[type="checkbox"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="radio"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .field input[type="radio"] {
|
2014-07-04 05:39:15 +02:00
|
|
|
float: none;
|
|
|
|
|
margin: 8px 3px 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting span {
|
2014-07-04 05:39:15 +02:00
|
|
|
float: left;
|
|
|
|
|
min-height: 22px;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="text"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="password"],
|
2014-08-02 21:53:17 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="email"],
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="number"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="search"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="email"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting input[type="url"],
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting textarea,
|
|
|
|
|
.edit-attachment-frame .attachment-info .setting .value {
|
2014-07-04 05:39:15 +02:00
|
|
|
margin: 1px;
|
|
|
|
|
width: 65%;
|
|
|
|
|
float: right;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info .setting textarea {
|
2014-07-04 05:39:15 +02:00
|
|
|
height: 62px;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 05:55:15 +02:00
|
|
|
.edit-attachment-frame .attachment-info select {
|
2014-07-04 05:39:15 +02:00
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-17 22:42:15 +02:00
|
|
|
/**
|
|
|
|
|
* Media queries for media grid.
|
|
|
|
|
*/
|
|
|
|
|
|
2014-07-13 18:16:15 +02:00
|
|
|
@media only screen and (max-width: 1120px) {
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid .attachments-browser .media-toolbar-primary,
|
|
|
|
|
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
|
2014-07-13 18:16:15 +02:00
|
|
|
float: none;
|
2014-06-06 00:01:18 +02:00
|
|
|
}
|
|
|
|
|
|
2014-07-22 18:21:15 +02:00
|
|
|
.media-frame.mode-grid input[type="search"] {
|
2014-07-13 18:16:15 +02:00
|
|
|
margin: 20px 0;
|
|
|
|
|
position: static;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: none !important;
|
2014-06-06 00:01:18 +02:00
|
|
|
}
|
2014-06-11 02:23:14 +02:00
|
|
|
}
|
2014-08-05 07:20:18 +02:00
|
|
|
|
|
|
|
|
.attachments[data-columns="1"] .attachment {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="2"] .attachment {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="3"] .attachment {
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="4"] .attachment {
|
|
|
|
|
width: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="5"] .attachment {
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="6"] .attachment {
|
|
|
|
|
width: 16.6%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="7"] .attachment {
|
|
|
|
|
width: 14.2%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="8"] .attachment {
|
|
|
|
|
width: 12.5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="9"] .attachment {
|
|
|
|
|
width: 11.1%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="10"] .attachment {
|
|
|
|
|
width: 10%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="11"] .attachment {
|
|
|
|
|
width: 9%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachments[data-columns="12"] .attachment {
|
|
|
|
|
width: 8.3%;
|
|
|
|
|
}
|
