diff --git a/core/modules/media_library/config/install/views.view.media_library.yml b/core/modules/media_library/config/install/views.view.media_library.yml index 2f885f627d..dd31c1169b 100644 --- a/core/modules/media_library/config/install/views.view.media_library.yml +++ b/core/modules/media_library/config/install/views.view.media_library.yml @@ -74,7 +74,7 @@ display: type: default options: grouping: { } - row_class: 'media-library-item js-media-library-item js-click-to-select' + row_class: 'media-library-item media-library-item--grid js-media-library-item js-click-to-select' default_row_class: true row: type: fields @@ -704,7 +704,7 @@ display: style: type: table options: - row_class: 'media-library-item-table js-media-library-item js-click-to-select' + row_class: 'media-library-item media-library-item--table js-media-library-item js-click-to-select' default_row_class: true defaults: style: false diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css index cb3833ad50..8bd3c1964d 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -96,11 +96,19 @@ margin: 8px 0 0; } +/* Generic media library view styles. */ +.media-library-select-all { + margin: 10px 0 10px 0; +} + +.media-library-select-all input { + margin-right: 10px; +} + .media-library-views-form__header .form-item { margin-right: 8px; } -/* Generic media library view styles. */ .media-library-view .form-actions { margin: 0.75em 0; } @@ -190,8 +198,8 @@ background: url(../../../misc/icons/333333/table.svg) right 0 no-repeat; } -/* Media library item styles. */ -.media-library-item { +/* Media library item grid styles. */ +.media-library-item--grid { justify-content: center; width: 180px; margin: 2px 16px 16px 2px; @@ -201,44 +209,57 @@ background: #fff; } -.media-library-item .field--name-thumbnail { +.media-library-item--grid .field--name-thumbnail { overflow: hidden; text-align: center; background-color: #ebebeb; } -.media-library-item .field--name-thumbnail img { +.media-library-item--grid .field--name-thumbnail img { height: 180px; object-fit: contain; object-position: center center; } -.media-library-item-table img { - max-width: 100px; -} - -.media-library-item.is-hover, -.media-library-item.checked, -.media-library-item.is-focus { +.media-library-item--grid.is-hover, +.media-library-item--grid.checked, +.media-library-item--grid.is-focus { margin: 0 14px 14px 0; border-width: 3px; border-color: #40b6ff; border-radius: 3px; } -.media-library-item.checked { +.media-library-item--grid.checked { border-color: #0076c0; } -.media-library-item .js-click-to-select-checkbox input { +.media-library-item--grid .js-click-to-select-checkbox input { width: 30px; height: 30px; } -.media-library-item .js-click-to-select-checkbox .form-item { +.media-library-item--grid .js-click-to-select-checkbox .form-item { margin: 0; } +.media-library-item--grid .views-field-operations { + height: 30px; +} + +.media-library-item--grid .views-field-operations .dropbutton-wrapper { + position: absolute; + right: 5px; + bottom: 5px; + display: inline-block; +} + +/* Media library item table styles. */ +.media-library-item--table img { + max-width: 100px; +} + +/* Media library entity view display styles. */ .media-library-item__preview { padding-bottom: 34px; } @@ -251,17 +272,6 @@ font-style: italic; } -.media-library-item .views-field-operations { - height: 30px; -} - -.media-library-item .views-field-operations .dropbutton-wrapper { - position: absolute; - right: 5px; - bottom: 5px; - display: inline-block; -} - .media-library-item__attributes { position: absolute; bottom: 0; @@ -288,8 +298,8 @@ .media-library-item__attributes:hover .media-library-item__name a, .media-library-item__name a:focus, -.media-library-item.is-focus .media-library-item__name a, -.media-library-item.checked .media-library-item__name a { +.media-library-item--grid.is-focus .media-library-item__name a, +.media-library-item--grid.checked .media-library-item__name a { white-space: normal; } @@ -303,22 +313,11 @@ font-size: 12px; } -.media-library-select-all { - margin: 10px 0 10px 0; -} - -.media-library-select-all input { - margin-right: 10px; -} - .media-library-item--disabled { opacity: 0.5; } -.media-library-selection { - margin-bottom: 1.5rem; -} - +/* Media library widget styles. */ .media-library-widget { position: relative; } @@ -329,18 +328,24 @@ right: 5px; } -.media-library-item .form-item { +.media-library-selection { + margin-bottom: 1.5rem; +} + +/* Media library widget weight field styles. */ +.media-library-item--grid .form-item { margin: 0.75em; } -.media-library-item .media-library-item__remove, -.media-library-item .media-library-item__remove:hover, -.media-library-item .media-library-item__remove:focus, -.media-library-item .media-library-item__remove.button, -.media-library-item .media-library-item__remove.button:disabled, -.media-library-item .media-library-item__remove.button:disabled:active, -.media-library-item .media-library-item__remove.button:hover, -.media-library-item .media-library-item__remove.button:focus { +/* Media library widget remove button styles. */ +.media-library-item__remove, +.media-library-item__remove:hover, +.media-library-item__remove:focus, +.media-library-item__remove.button, +.media-library-item__remove.button:disabled, +.media-library-item__remove.button:disabled:active, +.media-library-item__remove.button:hover, +.media-library-item__remove.button:focus { position: absolute; z-index: 1; top: 0; @@ -358,11 +363,11 @@ text-shadow: none; } -.media-library-item .media-library-item__remove:hover, -.media-library-item .media-library-item__remove:focus, -.media-library-item .media-library-item__remove.button:hover, -.media-library-item .media-library-item__remove.button:focus, -.media-library-item .media-library-item__remove.button:disabled:active { +.media-library-item__remove:hover, +.media-library-item__remove:focus, +.media-library-item__remove.button:hover, +.media-library-item__remove.button:focus, +.media-library-item__remove.button:disabled:active { border-color: #40b6ff; } @@ -414,14 +419,14 @@ } @media screen and (max-width: 600px) { - .media-library-item { + .media-library-item--grid { width: 150px; } - .media-library-item .field--name-thumbnail img { + .media-library-item--grid .field--name-thumbnail img { width: 150px; height: 150px; } - .media-library-item .views-field-operations .dropbutton-wrapper { + .media-library-item--grid .views-field-operations .dropbutton-wrapper { position: relative; right: 0; border: 0; diff --git a/core/modules/media_library/js/media_library.ui.es6.js b/core/modules/media_library/js/media_library.ui.es6.js index f406bc14f5..feec6840f2 100644 --- a/core/modules/media_library/js/media_library.ui.es6.js +++ b/core/modules/media_library/js/media_library.ui.es6.js @@ -165,8 +165,10 @@ e.preventDefault(); e.stopPropagation(); + const $link = $(e.currentTarget); + // Replace the library view. - Drupal.ajax({ + const ajaxObject = Drupal.ajax({ wrapper: 'media-library-view', url: e.currentTarget.href, dialogType: 'ajax', @@ -174,7 +176,23 @@ type: 'fullscreen', message: Drupal.t('Please wait...'), }, - }).execute(); + }); + + // Override the AJAX success callback to announce the updated content + // to screen readers. + const success = ajaxObject.success; + ajaxObject.success = function(response, status) { + success.bind(this)(response, status); + const displayAnnouncement = $link.data('display-announcement'); + if (displayAnnouncement) { + Drupal.announce(displayAnnouncement); + } else { + Drupal.announce(Drupal.t('Media library content changed.')); + } + }; + ajaxObject.execute(); + + Drupal.announce(Drupal.t('Loading media library content.')); }); }, }; diff --git a/core/modules/media_library/js/media_library.ui.js b/core/modules/media_library/js/media_library.ui.js index 9d678dad6d..89ae470683 100644 --- a/core/modules/media_library/js/media_library.ui.js +++ b/core/modules/media_library/js/media_library.ui.js @@ -81,7 +81,9 @@ e.preventDefault(); e.stopPropagation(); - Drupal.ajax({ + var $link = $(e.currentTarget); + + var ajaxObject = Drupal.ajax({ wrapper: 'media-library-view', url: e.currentTarget.href, dialogType: 'ajax', @@ -89,7 +91,21 @@ type: 'fullscreen', message: Drupal.t('Please wait...') } - }).execute(); + }); + + var success = ajaxObject.success; + ajaxObject.success = function (response, status) { + success.bind(this)(response, status); + var displayAnnouncement = $link.data('display-announcement'); + if (displayAnnouncement) { + Drupal.announce(displayAnnouncement); + } else { + Drupal.announce(Drupal.t('Media library content changed.')); + } + }; + ajaxObject.execute(); + + Drupal.announce(Drupal.t('Loading media library content.')); }); } }; diff --git a/core/modules/media_library/media_library.module b/core/modules/media_library/media_library.module index 4759addb72..217ad305e8 100644 --- a/core/modules/media_library/media_library.module +++ b/core/modules/media_library/media_library.module @@ -72,9 +72,6 @@ function media_library_preprocess_container(&$variables) { // @see \Drupal\views\Element\View::preRenderViewElement() if (isset($variables['element']['#view_id']) && $variables['element']['#view_id'] === 'media_library' && strpos($variables['element']['#display_id'], 'widget') === 0) { $variables['attributes']['id'] = 'media-library-view'; - // The views are updated via AJAX so we need to make sure the updated - // content is announced to screen readers. - $variables['attributes']['aria-live'] = 'polite'; } } @@ -89,6 +86,15 @@ function media_library_link_alter(&$variables) { $is_view_display_link = isset($options['view'], $options['target_display_id']); if ($is_view_display_link && $options['view']->id() === 'media_library' && strpos($options['view']->current_display, 'widget') === 0) { $options['attributes']['class'][] = 'js-media-library-view-display-link'; + // Add announcements for screen readers in a data attribute so they can be + // announced when the AJAX content had loaded. + // @see Drupal.behaviors.MediaLibraryViewsDisplay + if ($options['target_display_id'] === 'widget') { + $options['attributes']['data-display-announcement'] = t('Media library content changed to grid view.'); + } + if ($options['target_display_id'] === 'widget_table') { + $options['attributes']['data-display-announcement'] = t('Media library content changed to table view.'); + } } } diff --git a/core/modules/media_library/media_library.post_update.php b/core/modules/media_library/media_library.post_update.php index 9b22436caf..7f134a1a6e 100644 --- a/core/modules/media_library/media_library.post_update.php +++ b/core/modules/media_library/media_library.post_update.php @@ -40,11 +40,19 @@ function media_library_post_update_table_display() { return t('The media_library view could not be updated because it has been deleted. The media library module needs this view to display correctly. Uninstall and reinstall the module so the view will be re-created.'); } + // Override CSS classes to allow targeting grid displays. + $view->setDisplay('default'); + $default_display = $view->getDisplay('default'); + $style = $default_display->getOption('style'); + $style['options']['row_class'] = 'media-library-item media-library-item--grid js-media-library-item js-click-to-select'; + $default_display->setOption('style', $style); + + // Override CSS classes to allow targeting widget displays. $view->setDisplay('widget'); $grid_display = $view->getDisplay('widget'); - // Override CSS classes to allow targeting widget displays. $grid_display->overrideOption('css_class', 'media-library-view js-media-library-view media-library-view--widget'); + // Create the new table display. $table_display = $view->newDisplay('page', 'Widget (table)', 'widget_table'); $table_display->setOption('path', 'admin/content/media-widget-table'); @@ -55,7 +63,7 @@ function media_library_post_update_table_display() { $table_display->overrideOption('style', [ 'type' => 'table', 'options' => [ - 'row_class' => 'media-library-item-table js-media-library-item js-click-to-select', + 'row_class' => 'media-library-item media-library-item--table js-media-library-item js-click-to-select', 'default_row_class' => TRUE, ], ]); diff --git a/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php index 3ecf3ed78e..1afb271384 100644 --- a/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php +++ b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php @@ -322,6 +322,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen '#attributes' => [ 'class' => [ 'media-library-item', + 'media-library-item--grid', 'js-media-library-item', ], ], diff --git a/core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateViewTableDisplayTest.php b/core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateViewTableDisplayTest.php index 2c693d1f8c..861b610a7f 100644 --- a/core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateViewTableDisplayTest.php +++ b/core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateViewTableDisplayTest.php @@ -30,40 +30,50 @@ protected function setDatabaseDumpFiles() { * @see media_library_post_update_table_display() */ public function testMediaLibraryViewTableDisplay() { + $grid_prefix = 'display.widget'; + $table_prefix = 'display.widget_table'; + $config = $this->config('views.view.media_library'); - $this->assertNull($config->get('display.widget.display_options.defaults.css_class')); - $this->assertNull($config->get('display.widget.display_options.css_class')); - $this->assertNull($config->get('display.widget_table')); + $this->assertNull($config->get("$grid_prefix.display_options.defaults.css_class")); + $this->assertNull($config->get("$grid_prefix.display_options.css_class")); + $this->assertNull($config->get($table_prefix)); $this->runUpdates(); $config = $this->config('views.view.media_library'); + // Assert the CSS classes are updated for the widget display. - $this->assertFalse($config->get('display.widget.display_options.defaults.css_class')); - $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get('display.widget.display_options.css_class')); + $this->assertFalse($config->get("$grid_prefix.display_options.defaults.css_class")); + $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get("$grid_prefix.display_options.css_class")); + $this->assertSame('media-library-item media-library-item--grid js-media-library-item js-click-to-select', $config->get('display.default.display_options.style.options.row_class')); + // Assert the widget_table display was added correctly. - $this->assertSame('table', $config->get('display.widget_table.display_options.style.type')); - $this->assertSame('fields', $config->get('display.widget_table.display_options.row.type')); - $this->assertSame(['media_library_select_form', 'thumbnail__target_id', 'name', 'uid', 'changed'], array_keys($config->get('display.widget_table.display_options.fields'))); + $this->assertSame('table', $config->get("$table_prefix.display_options.style.type")); + $this->assertSame('media-library-item media-library-item--table js-media-library-item js-click-to-select', $config->get("$table_prefix.display_options.style.options.row_class")); + $this->assertSame('fields', $config->get("$table_prefix.display_options.row.type")); + $this->assertSame(['media_library_select_form', 'thumbnail__target_id', 'name', 'uid', 'changed'], array_keys($config->get("$table_prefix.display_options.fields"))); + // Assert the CSS classes are added to the widget_table display. - $this->assertFalse($config->get('display.widget_table.display_options.defaults.css_class')); - $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get('display.widget_table.display_options.css_class')); + $this->assertFalse($config->get("$table_prefix.display_options.defaults.css_class")); + $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get("$table_prefix.display_options.css_class")); + // Assert all display options are set correctly on the widget_table display. - $this->assertSame($config->get('display.widget.display_options.filters'), $config->get('display.widget_table.display_options.filters')); - $this->assertSame($config->get('display.widget.display_options.access'), $config->get('display.widget_table.display_options.access')); - $this->assertSame($config->get('display.widget.display_options.sorts'), $config->get('display.widget_table.display_options.sorts')); - $this->assertSame($config->get('display.widget.display_options.pager'), $config->get('display.widget_table.display_options.pager')); - $this->assertSame($config->get('display.widget.display_options.arguments'), $config->get('display.widget_table.display_options.arguments')); + $this->assertSame($config->get("$grid_prefix.display_options.filters"), $config->get("$table_prefix.display_options.filters")); + $this->assertSame($config->get("$grid_prefix.display_options.access"), $config->get("$table_prefix.display_options.access")); + $this->assertSame($config->get("$grid_prefix.display_options.sorts"), $config->get("$table_prefix.display_options.sorts")); + $this->assertSame($config->get("$grid_prefix.display_options.pager"), $config->get("$table_prefix.display_options.pager")); + $this->assertSame($config->get("$grid_prefix.display_options.arguments"), $config->get("$table_prefix.display_options.arguments")); + // Assert the display links are added to the widget and widget_table // displays. - $this->assertSame('display_link', $config->get('display.widget.display_options.header.display_link_grid.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget.display_options.header.display_link_table.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget_table.display_options.header.display_link_grid.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget_table.display_options.header.display_link_table.plugin_id')); - $this->assertSame('widget', $config->get('display.widget.display_options.header.display_link_grid.display_id')); - $this->assertSame('widget_table', $config->get('display.widget.display_options.header.display_link_table.display_id')); - $this->assertSame('widget', $config->get('display.widget_table.display_options.header.display_link_grid.display_id')); - $this->assertSame('widget_table', $config->get('display.widget_table.display_options.header.display_link_table.display_id')); + $this->assertSame('display_link', $config->get("$grid_prefix.display_options.header.display_link_grid.plugin_id")); + $this->assertSame('display_link', $config->get("$grid_prefix.display_options.header.display_link_table.plugin_id")); + $this->assertSame('display_link', $config->get("$table_prefix.display_options.header.display_link_grid.plugin_id")); + $this->assertSame('display_link', $config->get("$table_prefix.display_options.header.display_link_table.plugin_id")); + $this->assertSame('widget', $config->get("$grid_prefix.display_options.header.display_link_grid.display_id")); + $this->assertSame('widget_table', $config->get("$grid_prefix.display_options.header.display_link_table.display_id")); + $this->assertSame('widget', $config->get("$table_prefix.display_options.header.display_link_grid.display_id")); + $this->assertSame('widget_table', $config->get("$table_prefix.display_options.header.display_link_table.display_id")); } /** @@ -72,6 +82,9 @@ public function testMediaLibraryViewTableDisplay() { * @see media_library_post_update_table_display() */ public function testMediaLibraryChangedViewTableDisplay() { + $grid_prefix = 'display.widget'; + $table_prefix = 'display.widget_table'; + $view = Views::getView('media_library'); // The existing 'widget' display could have been overridden. The 'widget' @@ -110,32 +123,39 @@ public function testMediaLibraryChangedViewTableDisplay() { $this->runUpdates(); $config = $this->config('views.view.media_library'); + // Assert the CSS classes are updated for the widget display. - $this->assertFalse($config->get('display.widget.display_options.defaults.css_class')); - $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get('display.widget.display_options.css_class')); + $this->assertFalse($config->get("$grid_prefix.display_options.defaults.css_class")); + $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get("$grid_prefix.display_options.css_class")); + $this->assertSame('media-library-item media-library-item--grid js-media-library-item js-click-to-select', $config->get('display.default.display_options.style.options.row_class')); + // Assert the widget_table display was added correctly. - $this->assertSame('table', $config->get('display.widget_table.display_options.style.type')); - $this->assertSame('fields', $config->get('display.widget_table.display_options.row.type')); - $this->assertSame(['media_library_select_form', 'thumbnail__target_id', 'name', 'uid', 'changed'], array_keys($config->get('display.widget_table.display_options.fields'))); + $this->assertSame('table', $config->get("$table_prefix.display_options.style.type")); + $this->assertSame('media-library-item media-library-item--table js-media-library-item js-click-to-select', $config->get("$table_prefix.display_options.style.options.row_class")); + $this->assertSame('fields', $config->get("$table_prefix.display_options.row.type")); + $this->assertSame(['media_library_select_form', 'thumbnail__target_id', 'name', 'uid', 'changed'], array_keys($config->get("$table_prefix.display_options.fields"))); + // Assert the CSS classes are added to the widget_table display. - $this->assertFalse($config->get('display.widget_table.display_options.defaults.css_class')); - $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get('display.widget_table.display_options.css_class')); + $this->assertFalse($config->get("$table_prefix.display_options.defaults.css_class")); + $this->assertSame('media-library-view js-media-library-view media-library-view--widget', $config->get("$table_prefix.display_options.css_class")); + // Assert all display options are set correctly on the widget_table display. - $this->assertSame($config->get('display.widget.display_options.filters'), $config->get('display.widget_table.display_options.filters')); - $this->assertSame($config->get('display.widget.display_options.access'), $config->get('display.widget_table.display_options.access')); - $this->assertSame($config->get('display.widget.display_options.sorts'), $config->get('display.widget_table.display_options.sorts')); - $this->assertSame($config->get('display.widget.display_options.pager'), $config->get('display.widget_table.display_options.pager')); - $this->assertSame($config->get('display.widget.display_options.arguments'), $config->get('display.widget_table.display_options.arguments')); + $this->assertSame($config->get("$grid_prefix.display_options.filters"), $config->get("$table_prefix.display_options.filters")); + $this->assertSame($config->get("$grid_prefix.display_options.access"), $config->get("$table_prefix.display_options.access")); + $this->assertSame($config->get("$grid_prefix.display_options.sorts"), $config->get("$table_prefix.display_options.sorts")); + $this->assertSame($config->get("$grid_prefix.display_options.pager"), $config->get("$table_prefix.display_options.pager")); + $this->assertSame($config->get("$grid_prefix.display_options.arguments"), $config->get("$table_prefix.display_options.arguments")); + // Assert the display links are added to the widget and widget_table // displays. - $this->assertSame('display_link', $config->get('display.widget.display_options.header.display_link_grid.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget.display_options.header.display_link_table.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget_table.display_options.header.display_link_grid.plugin_id')); - $this->assertSame('display_link', $config->get('display.widget_table.display_options.header.display_link_table.plugin_id')); - $this->assertSame('widget', $config->get('display.widget.display_options.header.display_link_grid.display_id')); - $this->assertSame('widget_table', $config->get('display.widget.display_options.header.display_link_table.display_id')); - $this->assertSame('widget', $config->get('display.widget_table.display_options.header.display_link_grid.display_id')); - $this->assertSame('widget_table', $config->get('display.widget_table.display_options.header.display_link_table.display_id')); + $this->assertSame('display_link', $config->get("$grid_prefix.display_options.header.display_link_grid.plugin_id")); + $this->assertSame('display_link', $config->get("$grid_prefix.display_options.header.display_link_table.plugin_id")); + $this->assertSame('display_link', $config->get("$table_prefix.display_options.header.display_link_grid.plugin_id")); + $this->assertSame('display_link', $config->get("$table_prefix.display_options.header.display_link_table.plugin_id")); + $this->assertSame('widget', $config->get("$grid_prefix.display_options.header.display_link_grid.display_id")); + $this->assertSame('widget_table', $config->get("$grid_prefix.display_options.header.display_link_table.display_id")); + $this->assertSame('widget', $config->get("$table_prefix.display_options.header.display_link_grid.display_id")); + $this->assertSame('widget_table', $config->get("$table_prefix.display_options.header.display_link_table.display_id")); } } diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php index 533193e97c..1cf6b5963b 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -283,34 +283,34 @@ public function testWidget() { // and table display. $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click(); $assert_session->assertWaitOnAjaxRequest(); - $assert_session->elementExists('css', '.media-library-view .media-library-item article'); - $assert_session->elementNotExists('css', '.media-library-view table tr.media-library-item-table'); + $assert_session->elementExists('css', '.media-library-view .media-library-item--grid'); + $assert_session->elementNotExists('css', '.media-library-view .media-library-item--table'); $button_pane = $assert_session->elementExists('css', '.ui-dialog-buttonpane'); $assert_session->buttonExists('Select media', $button_pane); $assert_session->buttonNotExists('Apply filters', $button_pane); - $assert_session->elementExists('named', ['link', 'Show as grid']); - $assert_session->elementExists('named', ['link', 'Show as table'])->click(); + $page->hasLink('Show as grid'); + $page->clickLink('Show as table'); $assert_session->assertWaitOnAjaxRequest(); $assert_session->buttonExists('Select media', $button_pane); $assert_session->buttonNotExists('Apply filters', $button_pane); $assert_session->pageTextContains('Dog'); $assert_session->pageTextContains('Bear'); $assert_session->pageTextNotContains('Turtle'); - $assert_session->elementNotExists('css', '.media-library-view .media-library-item article'); - $assert_session->elementExists('css', '.media-library-view table tr.media-library-item-table'); + $assert_session->elementNotExists('css', '.media-library-view .media-library-item--grid'); + $assert_session->elementExists('css', '.media-library-view .media-library-item--table'); $assert_session->pageTextContains('Dog'); $assert_session->pageTextContains('Bear'); $assert_session->pageTextNotContains('Turtle'); - $assert_session->elementExists('named', ['link', 'Show as table']); - $assert_session->elementExists('named', ['link', 'Show as grid'])->click(); + $page->hasLink('Show as table'); + $page->clickLink('Show as grid'); $assert_session->assertWaitOnAjaxRequest(); - $assert_session->elementExists('css', '.media-library-view .media-library-item article'); - $assert_session->elementNotExists('css', '.media-library-view table tr.media-library-item'); + $assert_session->elementExists('css', '.media-library-view .media-library-item--grid'); + $assert_session->elementNotExists('css', '.media-library-view .media-library-item--table'); $assert_session->pageTextContains('Dog'); $assert_session->pageTextContains('Bear'); $assert_session->pageTextNotContains('Turtle'); - $assert_session->elementExists('named', ['link', 'Show as grid']); - $assert_session->elementExists('named', ['link', 'Show as table']); + $page->hasLink('Show as grid'); + $page->hasLink('Show as table'); $page->find('css', '.ui-dialog-titlebar-close')->click(); $assert_session->assertWaitOnAjaxRequest();