Backwards compatible for now.

backdrop-contrib · Nov 6, 2024 · d38735d · d38735d
1 parent 993f21d
commit d38735d
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 119 deletions.
diff --git a/css/paragraphs.css b/css/paragraphs.css
@@ -120,121 +120,3 @@ html.dialog-open {
     }
   }
 }
-
-/* Modal Admin styles. */
-
-.paragraphs-item-modal-admin .dropbutton-wrapper {
-  float: right;
-  margin: 2px 2px 10px 10px;
-  display: none;
-  min-height: 2em;
-  position: relative;
-  z-index: 10;
-}
-
-.paragraphs-item-modal-admin > .content {
-  position: relative;
-  z-index: 9;
-}
-
-.paragraphs-item-modal-admin {
-  border: 1px solid transparent;
-  position: relative;
-}
-
-.paragraphs-item-modal-admin::before {
-  position: relative;
-  display: table-cell;
-  content: '';
-  top: 0;
-  left: 0;
-  z-index: -5;
-}
-
-.paragraphs-item-modal-admin:hover::before {
-  border: 1px dashed rgba(0, 0, 0, .04);
-  position: absolute;
-  display: table-cell;
-  content: '';
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 5;
-  border: 1px dashed #d0e2d5;
-  background-image: repeating-linear-gradient(45deg,
-      rgba(0, 0, 0, .04),
-      rgba(0, 0, 0, .04) 20px,
-      rgba(0, 0, 0, .02) 20px,
-      rgba(0, 0, 0, .02) 40px);
-  transition: .1s ease-in-out;
-}
-
-.ui-dialog .paragraphs-item-modal-admin:hover {
-  border: 1px solid transparent;
-  background-color: inherit;
-  position: inherit;
-}
-
-.paragraphs-item-modal-admin:hover .dropbutton-wrapper {
-  display: inherit;
-  position: absolute;
-  top: 0;
-  right: 0;
-  text-align: right;
-  z-index: 1000;
-}
-
-.paragraphs-item-modal-admin:hover .dropbutton-widget {
-  left: auto;
-  right: 0;
-  min-width: 6em;
-  padding-right: 2em;
-}
-
-.paragraphs-item-modal-admin:hover .dropbutton-widget .dropbutton li,
-.paragraphs-item-modal-admin:hover .dropbutton-widget .dropbutton a {
-  text-align: left;
-}
-
-.paragraphs-admin-dropbutton a {
-  text-decoration: none;
-}
-
-.ui-dialog-content .paragraphs-dialog-edit img {
-  max-width: 100%;
-  width: auto;
-}
-
-.paragraphs-item-modal-admin .dropbutton-widget .dropbutton a.svg-icons {
-  padding: 0.1em 0.5em 0.1em 32px;
-  vertical-align: middle;
-  background-size: 14px;
-  background-repeat: no-repeat;
-  background-position: 6px center;
-  background-color: transparent;
-
-  &.paragraphs-add {
-    background-image: var(--icon-paragraphs-add);
-  }
-
-  &.paragraphs-edit {
-    background-image: var(--icon-paragraphs-edit);
-  }
-
-  &.paragraphs-sort {
-    background-image: var(--icon-paragraphs-sort);
-  }
-
-  &.paragraphs-remove {
-    background-image: var(--icon-paragraphs-remove);
-  }
-
-  &.paragraphs-unpublish {
-    background-image: var(--icon-paragraphs-unpublish);
-  }
-}
-
-.paragraphs-admin-bundle-clone-create-form .paragraphs-type-clone-readonly-field {
-  background-color: #f1f1f1;
-}
diff --git a/css/paragraphs_modal_admin.css b/css/paragraphs_modal_admin.css
@@ -0,0 +1,125 @@
+.deprecated-icons {
+  /* Backport icon functionality for older versions of Backdrop. Can be removed
+     when usage of versions earlier than 1.28.0 is negligible. */
+  --icon-paragraphs-add: url(../icons/paragraphs-add.svg);
+  --icon-paragraphs-edit: url(../icons/paragraphs-edit.svg);
+  --icon-paragraphs-sort: url(../icons/paragraphs-sort.svg);
+  --icon-paragraphs-remove: url(../icons/paragraphs-remove.svg);
+  --icon-paragraphs-unpublish: url(../icons/paragraphs-unpublish.svg);
+}
+
+.paragraphs-item-modal-admin .dropbutton-wrapper {
+  float: right;
+  margin: 2px 2px 10px 10px;
+  display: none;
+  min-height: 2em;
+  position: relative;
+  z-index: 10;
+}
+
+.paragraphs-item-modal-admin > .content {
+  position: relative;
+  z-index: 9;
+}
+
+.paragraphs-item-modal-admin {
+  border: 1px solid transparent;
+  position: relative;
+}
+
+.paragraphs-item-modal-admin::before {
+  position: relative;
+  display: table-cell;
+  content: '';
+  top: 0;
+  left: 0;
+  z-index: -5;
+}
+
+.paragraphs-item-modal-admin:hover::before {
+  border: 1px dashed rgba(0, 0, 0, .04);
+  position: absolute;
+  display: table-cell;
+  content: '';
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  border: 1px dashed #d0e2d5;
+  background-image: repeating-linear-gradient(45deg,
+      rgba(0, 0, 0, .04),
+      rgba(0, 0, 0, .04) 20px,
+      rgba(0, 0, 0, .02) 20px,
+      rgba(0, 0, 0, .02) 40px);
+  transition: .1s ease-in-out;
+}
+
+.ui-dialog .paragraphs-item-modal-admin:hover {
+  border: 1px solid transparent;
+  background-color: inherit;
+  position: inherit;
+}
+
+.paragraphs-item-modal-admin:hover .dropbutton-wrapper {
+  display: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  z-index: 1000;
+}
+
+.paragraphs-item-modal-admin:hover .dropbutton-widget {
+  left: auto;
+  right: 0;
+  min-width: 6em;
+  padding-right: 2em;
+}
+
+.paragraphs-item-modal-admin:hover .dropbutton-widget .dropbutton li,
+.paragraphs-item-modal-admin:hover .dropbutton-widget .dropbutton a {
+  text-align: left;
+}
+
+.paragraphs-admin-dropbutton a {
+  text-decoration: none;
+}
+
+.ui-dialog-content .paragraphs-dialog-edit img {
+  max-width: 100%;
+  width: auto;
+}
+
+.paragraphs-item-modal-admin .dropbutton-widget .dropbutton a.svg-icons {
+  padding: 0.1em 0.5em 0.1em 32px;
+  vertical-align: middle;
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: 6px center;
+  background-color: transparent;
+
+  &.paragraphs-add {
+    background-image: var(--icon-paragraphs-add);
+  }
+
+  &.paragraphs-edit {
+    background-image: var(--icon-paragraphs-edit);
+  }
+
+  &.paragraphs-sort {
+    background-image: var(--icon-paragraphs-sort);
+  }
+
+  &.paragraphs-remove {
+    background-image: var(--icon-paragraphs-remove);
+  }
+
+  &.paragraphs-unpublish {
+    background-image: var(--icon-paragraphs-unpublish);
+  }
+}
+
+.paragraphs-admin-bundle-clone-create-form .paragraphs-type-clone-readonly-field {
+  background-color: #f1f1f1;
+}
diff --git a/paragraphs.module b/paragraphs.module
@@ -533,12 +533,19 @@ function paragraphs_icon_info() {
  */
 function paragraphs_library_info() {
   $libraries = array();
+  $module_path = backdrop_get_path('module', 'paragraphs');
   $info = system_get_info('module', 'paragraphs');
   $libraries['paragraphs_modal_admin'] = array(
     'title' => 'Paragraphs Modal Admin',
     'version' => $info['version'],
     'js' => array(
-      'js/paragraphs_modal_admin.js' => array(),
+      $module_path . '/js/paragraphs_modal_admin.js' => array(
+        'type' => 'file',
+        'scope' => 'footer',
+      ),
+    ),
+    'css' => array(
+      $module_path . '/css/paragraphs_modal_admin.css' => array(),
     ),
     'icons' => array(
       'paragraphs-add',
@@ -1743,6 +1750,12 @@ function paragraphs_modal_admin_links($paragraphs_item) {
     'use-ajax',
     'svg-icons',
   );
+  // @todo: At some future point when there is little or no usage of versions of
+  // core prior to 1.28.0, we can remove the deprecated icon implementation here
+  // and in the paragraphs_modal_admin.css file.
+  if (!function_exists('icon_get_info')) {
+    $classes[] = 'deprecated-icons';
+  }
   if (is_numeric($paragraph_id) && $access) {
     $admin_links = array(
       '#type' => 'dropbutton',