diff --git a/assets/css/media-library/media-library-buttons.css b/assets/css/media-library/media-library-buttons.css index 8dcaed607156dc3856be462851dee3288564b61b..492f72f238e22eeffd13abe2444af5d9f450d063 100644 --- a/assets/css/media-library/media-library-buttons.css +++ b/assets/css/media-library/media-library-buttons.css @@ -1,11 +1,18 @@ /* Remove button of selected medias. */ -button[name$="media-library-remove-button"] { +button.media-library-remove-button, +/* Edit button. */ +a.media-library-edit__link { position: absolute; z-index: 1; right: var(--bs-card-spacer-x); margin: 0.25rem; } +/* Edit button. */ +a.media-library-edit__link { + top: 30px; +} + /* Remove button when creating a media. */ .media-added-remove-button { position: absolute; diff --git a/src/HookHandler/PreprocessMediaLibraryItem.php b/src/HookHandler/PreprocessMediaLibraryItem.php index ea05edda64b68d9fd389bac6b9d5cefcaffd747f..54779ffd751672db1af06fb501c4862b46c26f03 100644 --- a/src/HookHandler/PreprocessMediaLibraryItem.php +++ b/src/HookHandler/PreprocessMediaLibraryItem.php @@ -13,12 +13,33 @@ use Drupal\ui_suite_bootstrap\Utility\Element; class PreprocessMediaLibraryItem { /** - * Add icons in media library view. + * Ensure the remove button is the first element. + */ + public const REMOVE_BUTTON_WEIGHT = -10; + + /** + * Ensure the edit link is after the remove button. + */ + public const EDIT_LINK_WEIGHT = -5; + + /** + * Add icons in media library item. * * @param array $variables * The preprocessed variables. */ public function preprocess(array &$variables): void { + $this->preprocessRemoveButton($variables); + $this->preprocessEditLink($variables); + } + + /** + * Add icon on remove button. + * + * @param array $variables + * The preprocessed variables. + */ + protected function preprocessRemoveButton(array &$variables): void { if (!isset($variables['content']['remove_button'])) { return; } @@ -29,7 +50,35 @@ class PreprocessMediaLibraryItem { 'alt' => $element->getProperty('value'), ])); $element->setProperty('icon_position', 'icon_only'); - $element->addClass('btn-sm'); + $element->addClass([ + 'btn-sm', + 'media-library-remove-button', + ]); + $element->setProperty('weight', static::REMOVE_BUTTON_WEIGHT); + } + + /** + * Add icon and button style on edit link. + * + * @param array $variables + * The preprocessed variables. + */ + protected function preprocessEditLink(array &$variables): void { + if (!isset($variables['content']['media_edit'])) { + return; + } + + $element = Element::create($variables['content']['media_edit']); + $element->setIcon(Bootstrap::icon('pencil-fill', 'bootstrap', [ + 'size' => '16px', + ])); + $element->setProperty('icon_position', 'icon_only'); + $element->addClass([ + 'btn', + 'btn-sm', + 'btn-success', + ]); + $element->setProperty('weight', static::EDIT_LINK_WEIGHT); } } diff --git a/ui_suite_bootstrap.info.yml b/ui_suite_bootstrap.info.yml index 13b276a507dc822bd4c6e35f07ed8a74f82a0de9..76c770eab713b8a59b69b2b5adb465698241930c 100644 --- a/ui_suite_bootstrap.info.yml +++ b/ui_suite_bootstrap.info.yml @@ -80,6 +80,10 @@ libraries-override: commerce_checkout/form: false commerce_checkout/login_pane: false layout_builder_browser/browser: false + media_library_edit/admin: + css: + component: + css/media_library_edit.admin.css: false paragraphs/drupal.paragraphs.unpublished: false section_library/section_library: css: