Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3049943 by bnjmnm, phenaproxima, Wim Leers, lauriii, alexpott: Media library should not use js- prefixed CSS classes for styling

merge-requests/55/head
Alex Pott 2019-10-10 00:41:34 +01:00
parent 20faabff8c
commit 0ec69d3f68
No known key found for this signature in database
GPG Key ID: 31905460D4A69276
8 changed files with 207 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/modules/media_library/config/install/views.view.media_library.yml
View File

@ -121,7 +121,7 @@ display:
preserve_tags: ''
html: false
element_type: ''
element_class: js-click-to-select-checkbox
element_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
element_label_type: ''
element_label_class: ''
element_label_colon: false
@ -492,7 +492,7 @@ display:
preserve_tags: ''
html: false
element_type: ''
element_class: js-click-to-select-checkbox
element_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
element_label_type: ''
element_label_class: ''
element_label_colon: false
@ -846,7 +846,7 @@ display:
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: js-click-to-select-checkbox
element_wrapper_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
element_default_classes: true
empty: ''
hide_empty: false
@ -1057,7 +1057,7 @@ display:
relationship: none
entity_type: media
plugin_id: media_library_select_form
element_wrapper_class: js-click-to-select-checkbox
element_wrapper_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
element_class: ''
thumbnail__target_id:
id: thumbnail__target_id

6
core/modules/media_library/css/media_library.module.css
View File

@ -47,7 +47,7 @@
position: relative;
}
.media-library-item .click-to-select-trigger {
.media-library-item__click-to-select-trigger {
overflow: hidden;
height: 100%;
cursor: pointer;
@ -57,14 +57,14 @@
align-self: flex-end;
}
.media-library-item .js-click-to-select-checkbox {
.media-library-item__click-to-select-checkbox {
position: absolute;
z-index: 1;
top: 16px;
left: 16px; /* LTR */
display: block;
}
[dir="rtl"] .media-library-item .js-click-to-select-checkbox {
[dir="rtl"] .media-library-item__click-to-select-checkbox {
right: 16px;
left: auto;
}

14
core/modules/media_library/css/media_library.theme.css
View File

@ -322,6 +322,11 @@
border: 1px solid #dbdbdb;
}
/* Media library widget weight field styles. */
.media-library-item--grid .form-item {
margin: 0.75em;
}
/* The selected items in the add form should be shown a bit smaller. */
.media-library-add-form__selected-media .media-library-item--small {
width: 33.3%;
@ -404,12 +409,12 @@
border-color: #0076c0;
}
.media-library-item--grid .js-click-to-select-checkbox input {
.media-library-item__click-to-select-checkbox input {
width: 20px;
height: 20px;
}
.media-library-item--grid .js-click-to-select-checkbox .form-item {
.media-library-item__click-to-select-checkbox .form-item {
margin: 0;
}
@ -503,11 +508,6 @@
margin: 1em -8px;
}
/* Media library widget weight field styles. */
.media-library-item--grid .form-item {
margin: 0.75em;
}
/**
* Media library widget edit and delete button styles.
*

2
core/modules/media_library/media_library.module
View File

@ -130,7 +130,7 @@ function media_library_preprocess_views_view_fields(&$variables) {
// styling and JavaScript mouseover and click events.
if ($variables['view']->id() === 'media_library' && isset($variables['fields']['rendered_entity'])) {
if (isset($variables['fields']['rendered_entity']->wrapper_attributes)) {
$variables['fields']['rendered_entity']->wrapper_attributes->addClass('js-click-to-select-trigger click-to-select-trigger');
$variables['fields']['rendered_entity']->wrapper_attributes->addClass('js-click-to-select-trigger media-library-item__click-to-select-trigger');
}
}
}

54
core/modules/media_library/media_library.post_update.php
View File

@ -529,3 +529,57 @@ function media_library_post_update_add_buttons_to_page_view() {
$view->storage->save(TRUE);
}
}
/**
* Add non js prefixed classes to checkboxes if not present.
*
* Note the inclusion of "update_8001" in the function name. This ensures the
* function is executed after media_library_post_update_table_display(), as
* hook_post_update_NAME() implementations within the same file are executed in
* alphanumeric order.
*/
function media_library_post_update_update_8001_checkbox_classes() {
$view = Views::getView('media_library');
if (!$view) {
return;
}
$display_items = [
[
'display_id' => 'default',
'option' => 'element_class',
'field' => 'media_bulk_form',
],
[
'display_id' => 'page',
'option' => 'element_class',
'field' => 'media_bulk_form',
],
[
'display_id' => 'widget',
'option' => 'element_wrapper_class',
'field' => 'media_library_select_form',
],
[
'display_id' => 'widget_table',
'option' => 'element_wrapper_class',
'field' => 'media_library_select_form',
],
];
foreach ($display_items as $item) {
$display_id = $item['display_id'];
$option = $item['option'];
$field = $item['field'];
$display = &$view->storage->getDisplay($display_id);
// Only proceed if the display, field and option exist.
if (!$display || !isset($display['display_options']['fields'][$field][$option])) {
continue;
}
$classes = $display['display_options']['fields'][$field][$option];
$classes_array = preg_split('/\s+/', $classes);
if (!in_array('media-library-item__click-to-select-checkbox', $classes_array, TRUE)) {
$display['display_options']['fields'][$field][$option] = "$classes media-library-item__click-to-select-checkbox";
$view->save();
}
}
}

2
core/modules/media_library/src/Form/AddFormBase.php
View File

@ -429,7 +429,7 @@ abstract class AddFormBase extends FormBase {
'#type' => 'container',
'#attributes' => [
'class' => [
'js-click-to-select-checkbox',
'js-click-to-select-checkbox media-library-item__click-to-select-checkbox',
],
],
'select_checkbox' => [

54
core/modules/media_library/tests/fixtures/update/drupal-8.8.x-media_library-update-views-classnames-3049943.php vendored Normal file
View File

File diff suppressed because one or more lines are too long

83
core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateCheckboxClassesTest.php Normal file
View File

@ -0,0 +1,83 @@
<?php
namespace Drupal\Tests\media_library\Functional\Update;
use Drupal\FunctionalTests\Update\UpdatePathTestBase;
use Drupal\views\Views;
/**
* Tests the media library module updates views checkbox classes.
*
* @group media_library
* @group legacy
*/
class MediaLibraryUpdateCheckboxClassesTest extends UpdatePathTestBase {
/**
* {@inheritdoc}
*/
public function setDatabaseDumpFiles() {
$this->databaseDumpFiles = [
__DIR__ . '/../../../../../system/tests/fixtures/update/drupal-8.4.0.bare.standard.php.gz',
__DIR__ . '/../../../../../media/tests/fixtures/update/drupal-8.4.0-media_installed.php',
__DIR__ . '/../../../fixtures/update/drupal-8.8.x-media_library-update-views-classnames-3049943.php',
];
}
/**
* Tests that non js prefixes are added to checkboxes in the media view.
*
* @see media_library_post_update_update_8001_checkbox_classes()
*/
public function testAddNonPrefixedClasses() {
$view = Views::getView('media_library');
$display_items = [
[
'display_id' => 'default',
'option' => 'element_class',
'field' => 'media_bulk_form',
],
[
'display_id' => 'page',
'option' => 'element_class',
'field' => 'media_bulk_form',
],
[
'display_id' => 'widget',
'option' => 'element_wrapper_class',
'field' => 'media_library_select_form',
],
[
'display_id' => 'widget_table',
'option' => 'element_wrapper_class',
'field' => 'media_library_select_form',
],
];
foreach ($display_items as $item) {
$display_id = $item['display_id'];
$option = $item['option'];
$field = $item['field'];
$display = $view->storage->getDisplay($display_id);
$classes_string = $display['display_options']['fields'][$field][$option];
$classes = preg_split('/\s+/', $classes_string);
$this->assertContains('js-click-to-select-checkbox', $classes);
$this->assertNotContains('media-library-item__click-to-select-checkbox', $classes);
}
$this->runUpdates();
$view = Views::getView('media_library');
foreach ($display_items as $item) {
$display_id = $item['display_id'];
$option = $item['option'];
$field = $item['field'];
$display = $view->storage->getDisplay($display_id);
$classes_string = $display['display_options']['fields'][$field][$option];
$classes = preg_split('/\s+/', $classes_string);
$this->assertContains('js-click-to-select-checkbox', $classes);
$this->assertContains('media-library-item__click-to-select-checkbox', $classes, "Class 'media-library-item__click-to-select-checkbox' not found in display: $display_id");
}
}
}