Commit 7da933ba authored by effulgentsia's avatar effulgentsia

Issue #3039829 by gease, seanB, alexpott, starshaped, phenaproxima, Wim Leers,...

Issue #3039829 by gease, seanB, alexpott, starshaped, phenaproxima, Wim Leers, lauriii, andrewmacpherson, HeikkiY, mcannon: Remove link to media item from media library view
parent da6392f8
......@@ -414,9 +414,288 @@ display:
weight: 5
context: '0'
menu_name: admin
fields:
media_bulk_form:
id: media_bulk_form
table: media
field: media_bulk_form
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: js-click-to-select-checkbox
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
action_title: Action
include_exclude: exclude
selected_actions: { }
entity_type: media
plugin_id: bulk_form
name:
id: name
table: media_field_data
field: name
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: true
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: value
type: string
settings:
link_to_entity: false
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: media
entity_field: name
plugin_id: field
edit_media:
id: edit_media
table: media
field: edit_media
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: true
text: 'Edit {{ name }}'
make_link: true
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: 'Edit {{ name }}'
rel: ''
link_class: media-library-item__edit
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: '0'
element_wrapper_class: ''
element_default_classes: false
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
text: 'Edit'
output_url_as_text: false
absolute: false
entity_type: media
plugin_id: entity_link_edit
delete_media:
id: delete_media
table: media
field: delete_media
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: true
text: 'Delete {{ name }}'
make_link: true
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: 'Delete {{ name }}'
rel: ''
link_class: media-library-item__remove
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: '0'
element_wrapper_class: ''
element_default_classes: false
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
text: 'Delete'
output_url_as_text: false
absolute: false
entity_type: media
plugin_id: entity_link_delete
rendered_entity:
id: rendered_entity
table: media
field: rendered_entity
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: media-library-item__content
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
view_mode: media_library
entity_type: media
plugin_id: rendered_entity
defaults:
fields: false
cache_metadata:
max-age: 0
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
- url.query_args
......
......@@ -51,22 +51,25 @@
.media-library-item .js-click-to-select-checkbox {
position: absolute;
z-index: 1;
top: 5px;
right: 5px; /* LTR */
top: 16px;
left: 16px; /* LTR */
display: block;
}
[dir="rtl"] .media-library-item .js-click-to-select-checkbox {
right: 0;
left: 5px;
right: 16px;
left: auto;
}
.media-library-item__status {
position: absolute;
top: 10px;
left: 2px;
top: 40px;
left: 5px; /* LTR */
pointer-events: none;
}
[dir="rtl"] .media-library-item__status {
right: 5px;
left: auto;
}
.media-library-select-all {
flex-basis: 100%;
......@@ -85,13 +88,6 @@
cursor: move;
}
/* @todo Remove or re-work in https://www.drupal.org/node/2985168 */
.media-library-widget .media-library-item__name a,
.media-library-view--widget .media-library-item__name a,
.media-library-add-form__selected-media .media-library-item__name a {
pointer-events: none;
}
.media-library-widget-modal .ui-dialog-buttonpane {
display: flex;
align-items: center;
......@@ -106,3 +102,8 @@
flex-basis: 100%;
}
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
.views-live-preview .media-library-view div.views-row + div.views-row {
margin-top: 0;
}
......@@ -318,6 +318,7 @@
height: calc(100% - 16px);
content: "";
transition: border-color 0.2s, color 0.2s, background 0.2s;
pointer-events: none;
border: 1px solid #dbdbdb;
}
......@@ -404,8 +405,8 @@
}
.media-library-item--grid .js-click-to-select-checkbox input {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}
.media-library-item--grid .js-click-to-select-checkbox .form-item {
......@@ -446,27 +447,20 @@
font-size: 14px;
}
.media-library-item__name a {
.media-library-item__name {
display: block;
overflow: hidden;
margin: 2px;
white-space: nowrap;
text-decoration: underline;
text-overflow: ellipsis;
}
.media-library-item__attributes:hover .media-library-item__name a,
.media-library-item__name a:focus,
.media-library-item--grid.is-focus .media-library-item__name a,
.media-library-item--grid.checked .media-library-item__name a {
.media-library-item__attributes:hover .media-library-item__name,
.media-library-item--grid.is-focus .media-library-item__name,
.media-library-item--grid.checked .media-library-item__name {
white-space: normal;
}
.media-library-item__name a:focus {
margin: 0;
border: 2px solid;
}
.media-library-item__type {
color: #696969;
font-size: 12px;
......@@ -497,7 +491,11 @@
.media-library-widget__toggle-weight {
position: absolute;
top: 5px;
right: 5px;
right: 5px; /* LTR */
}
[dir="rtl"] .media-library-widget__toggle-weight {
right: auto;
left: 5px;
}
/* Add negative margin for flex grid. */
......@@ -510,7 +508,15 @@
margin: 0.75em;
}
/* Media library widget remove button styles. */
/**
* Media library widget edit and delete button styles.
*
* We have to override the .button styles since buttons make heavy use of
* background and border property changes.
*/
.media-library-item__edit,
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
......@@ -523,20 +529,52 @@
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
overflow: hidden;
width: 21px;
height: 21px;
margin: 5px;
padding: 0;
transition: 0.2s border-color;
color: transparent;
border: 2px solid #ccc;
border-radius: 20px;
background: url("../../../misc/icons/787878/ex.svg") #fff center no-repeat;
background-size: 16px 16px;
background-size: 13px;
text-shadow: none;
font-size: 0;
}
.media-library-item__edit {
right: 40px; /* LTR */
}
[dir="rtl"] .media-library-item__edit {
right: auto;
left: 40px;
}
.media-library-item__remove {
right: 10px; /* LTR */
}
[dir="rtl"] .media-library-item__remove {
right: auto;
left: 10px;
}
.media-library-item__edit {
background: url("../../../misc/icons/787878/pencil.svg") #fff center no-repeat;
background-size: 13px;
}
.media-library-item__remove,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.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 {
background: url("../../../misc/icons/787878/ex.svg") #fff center no-repeat;
background-size: 13px;
}
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button:hover,
......@@ -655,11 +693,3 @@
[dir="rtl"] .media-library-add-form__remove-button.button:hover {
background-position: left 2px;
}
/* @todo Remove or re-work in https://www.drupal.org/node/2985168 */
.media-library-widget .media-library-item__name a,
.media-library-view--widget .media-library-item__name a,
.media-library-add-form__selected-media .media-library-item__name a {
text-decoration: none;
color: black;
}
......@@ -218,3 +218,218 @@ function media_library_update_8702() {
$view->save(TRUE);
}
}
/**
* Add edit and delete button to media library view page display.
*/
function media_library_update_8703() {
$view = \Drupal::configFactory()->getEditable('views.view.media_library');
if (!$view->isNew() && $view->get('display.page')) {
// Fetch the fields from the page display, if the fields are not yet
// overridden, get the fields from the default display.
$fields = $view->get('display.page.display_options.fields');
if (!$fields) {
$fields = $view->get('display.default.display_options.fields');
// Override the fields for the page display.
$view->set('display.page.display_options.defaults.fields', FALSE);
}
// Check if the name field already exists and add if it doesn't.
if (!isset($fields['name'])) {
$fields['name'] = [
'id' => 'name',
'table' => 'media_field_data',
'field' => 'name',
'relationship' => 'none',
'group_type' => 'group',
'admin_label' => '',
'label' => '',
'exclude' => TRUE,
'alter' => [
'alter_text' => FALSE,
'text' => '',
'make_link' => FALSE,
'path' => '',
'absolute' => FALSE,
'external' => FALSE,
'replace_spaces' => FALSE,
'path_case' => 'none',
'trim_whitespace' => FALSE,
'alt' => '',
'rel' => '',
'link_class' => '',
'prefix' => '',
'suffix' => '',
'target' => '',
'nl2br' => FALSE,
'max_length' => 0,
'word_boundary' => TRUE,
'ellipsis' => TRUE,
'more_link' => FALSE,
'more_link_text' => '',
'more_link_path' => '',
'strip_tags' => FALSE,
'trim' => FALSE,
'preserve_tags' => '',
'html' => FALSE,
],
'element_type' => '',
'element_class' => '',
'element_label_type' => '',
'element_label_class' => '',
'element_label_colon' => FALSE,
'element_wrapper_type' => '',
'element_wrapper_class' => '',
'element_default_classes' => TRUE,
'empty' => '',
'hide_empty' => FALSE,
'empty_zero' => FALSE,
'hide_alter_empty' => TRUE,
'click_sort_column' => 'value',
'type' => 'string',
'settings' => [
'link_to_entity' => FALSE,
],
'group_column' => 'value',
'group_columns' => [],
'group_rows' => TRUE,
'delta_limit' => 0,
'delta_offset' => 0,
'delta_reversed' => FALSE,
'delta_first_last' => FALSE,
'multi_type' => 'separator',
'separator' => ', ',
'field_api_classes' => FALSE,
'entity_type' => 'media',
'entity_field' => 'name',
'plugin_id' => 'field',
];
}
// Check if the edit link field already exists and add if it doesn't.
if (!isset($fields['edit_media'])) {
$fields['edit_media'] = [
'id' => 'edit_media',
'table' => 'media',
'field' => 'edit_media',
'relationship' => 'none',
'group_type' => 'group',
'admin_label' => '',
'label' => '',
'exclude' => FALSE,
'alter' => [
'alter_text' => TRUE,
'text' => 'Edit {{ name }}',
'make_link' => TRUE,
'path' => '',
'absolute' => FALSE,
'external' => FALSE,
'replace_spaces' => FALSE,
'path_case' => 'none',
'trim_whitespace' => FALSE,
'alt' => 'Edit {{ name }}',
'rel' => '',
'link_class' => 'media-library-item__edit',
'prefix' => '',
'suffix' => '',
'target' => '',
'nl2br' => FALSE,
'max_length' => 0,
'word_boundary' => TRUE,
'ellipsis' => TRUE,
'more_link' => FALSE,
'more_link_text' => '',
'more_link_path' => '',
'strip_tags' => FALSE,
'trim' => FALSE,
'preserve_tags' => '',
'html' => FALSE,
],
'element_type' => '',
'element_class' => '',
'element_label_type' => '',
'element_label_class' => '',
'element_label_colon' => FALSE,
'element_wrapper_type' => '0',
'element_wrapper_class' => '',
'element_default_classes' => FALSE,
'empty' => '',
'hide_empty' => FALSE,
'empty_zero' => FALSE,
'hide_alter_empty' => TRUE,
'text' => 'Edit',
'output_url_as_text' => FALSE,
'absolute' => FALSE,
'entity_type' => 'media',
'plugin_id' => 'entity_link_edit',
];
}
// Check if the delete link field already exists and add if it doesn't.
if (!isset($fields['delete_media'])) {
$fields['delete_media'] = [
'id' => 'delete_media',
'table' => 'media',
'field' => 'delete_media',
'relationship' => 'none',
'group_type' => 'group',
'admin_label' => '',
'label' => '',
'exclude' => FALSE,
'alter' => [
'alter_text' => TRUE,
'text' => 'Delete {{ name }}',
'make_link' => TRUE,
'path' => '',
'absolute' => FALSE,
'external' => FALSE,
'replace_spaces' => FALSE,
'path_case' => 'none',
'trim_whitespace' => FALSE,
'alt' => 'Delete {{ name }}',
'rel' => '',
'link_class' => 'media-library-item__remove',
'prefix' => '',
'suffix' => '',
'target' => '',
'nl2br' => FALSE,
'max_length' => 0,
'word_boundary' => TRUE,
'ellipsis' => TRUE,
'more_link' => FALSE,
'more_link_text' => '',
'more_link_path' => '',
'strip_tags' => FALSE,
'trim' => FALSE,
'preserve_tags' => '',
'html' => FALSE,
],
'element_type' => '',
'element_class' => '',
'element_label_type' => '',
'element_label_class' => '',
'element_label_colon' => FALSE,
'element_wrapper_type' => '0',
'element_wrapper_class' => '',
'element_default_classes' => FALSE,
'empty' => '',
'hide_empty' => FALSE,
'empty_zero' => FALSE,
'hide_alter_empty' => TRUE,
'text' => 'Delete',
'output_url_as_text' => FALSE,
'absolute' => FALSE,
'entity_type' => 'media',
'plugin_id' => 'entity_link_delete',
];
}
// Move the rendered entity field to the last position for accessibility.
$rendered_entity = $fields['rendered_entity'];
unset($fields['rendered_entity']);
$fields['rendered_entity'] = $rendered_entity;