Use icon_button for picture ingredient editor

AlchemyCMS · Dec 6, 2023 · daffbe6 · daffbe6
1 parent 797da39
commit daffbe6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 44 deletions.
diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -51,36 +51,30 @@ input.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 27px;
-  height: 27px;
+  width: 30px;
+  height: 30px;
   margin: 0;
-  padding: 3px;
+  padding: 0;
   overflow: hidden;
-  text-align: center;
   text-shadow: none;
   border-radius: $default-border-radius;
 
   &.small {
     width: 15px;
     height: 15px;
-    padding: 0;
-    position: relative;
-    top: 0px;
     background: none;
     border: none;
+  }
 
-    .icon {
-      transition: color 250ms;
-    }
-
-    &:hover {
-      background-color: $default-border-color;
-      cursor: pointer;
+  &:hover {
+    text-decoration: none;
+    background-color: $default-border-color;
+    cursor: pointer;
+  }
 
-      .icon {
-        color: inherit;
-      }
-    }
+  .icon {
+    color: inherit;
+    transition: color 250ms;
   }
 
   &.disabled,
@@ -146,10 +140,6 @@ button.icon_button {
     top: 0;
   }
 
-  .icon_button {
-    text-decoration: none;
-  }
-
   &.disabled {
     opacity: 0.5;
     cursor: default;
@@ -158,11 +148,6 @@ button.icon_button {
 
 .button_with_label,
 .button_group {
-  .icon_button {
-    width: 29px;
-    height: 29px;
-  }
-
   label {
     border-radius: $default-border-radius;
     position: absolute;

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -532,19 +532,9 @@ alchemy-tinymce {
   bottom: 0;
   z-index: 0;
   width: 100%;
-  padding: $default-padding $default-padding/2;
+  padding: $default-padding/2;
 
   a {
-    margin: 0 $default-padding/2;
-    padding: $default-padding/2;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $default-border-color;
-      border-radius: $default-border-radius;
-      text-decoration: none;
-    }
-
     &.linked {
       border-radius: $default-border-radius;
       background-color: $linked-color;
@@ -571,7 +561,7 @@ alchemy-tinymce {
     display: inline-block;
     width: 160px;
     margin: $default-margin 0;
-    padding-bottom: 30.72px;
+    padding-bottom: 34px;
 
     .picture_image {
       overflow: hidden;

diff --git a/app/views/alchemy/ingredients/shared/_picture_tools.html.erb b/app/views/alchemy/ingredients/shared/_picture_tools.html.erb
@@ -13,7 +13,7 @@
     padding: false
   }, {
     title: Alchemy.t("Edit Picturemask"),
-    class: croppable ? "crop_link" : "disabled crop_link",
+    class: croppable ? "crop_link icon_button" : "disabled crop_link icon_button" ,
     tabindex: croppable ? nil : "-1",
     onclick: "return false"
   } %>
@@ -27,11 +27,12 @@
     size: "790x590",
     padding: false
   },
-  title: (picture_editor.picture ? Alchemy.t(:swap_image) : Alchemy.t(:insert_image)) %>
+  title: (picture_editor.picture ? Alchemy.t(:swap_image) : Alchemy.t(:insert_image)),
+  class: "icon_button" %>
 
 <%= link_to_if linkable, render_icon("link", style: "m"), "", {
   onclick: "new Alchemy.LinkDialog(this).open(); return false;",
-  class: picture_editor.linked? ? "linked" : nil,
+  class: picture_editor.linked? ? "linked icon_button" : "icon_button",
   title: Alchemy.t(:link_image),
   "data-parent-selector": "[data-ingredient-id='#{picture_editor.id}']",
   id: "edit_link_#{picture_editor.id}"
@@ -41,7 +42,7 @@
 
 <%= link_to_if linkable, render_icon("link-unlink", style: "m"), "", {
   onclick: "return Alchemy.LinkDialog.removeLink(this, '[data-ingredient-id=\"#{picture_editor.id}\"]')",
-  class: picture_editor.linked? ? "linked" : "disabled",
+  class: picture_editor.linked? ? "linked icon_button" : "icon_button disabled",
   tabindex: picture_editor.linked? ? nil : "-1",
   title: Alchemy.t(:unlink)
 } do %>
@@ -54,4 +55,5 @@
     title: Alchemy.t(:edit_image_properties),
     size: "380x255"
   },
-  title: Alchemy.t(:edit_image_properties) %>
+  title: Alchemy.t(:edit_image_properties),
+  class: "icon_button" %>