Merge pull request #2629 from AlchemyCMS/shoelace-tooltip

Use Shoelace tooltip for all tooltips and hint bubbles
AlchemyCMS · Dec 12, 2023 · e75e933 · e75e933
2 parents a3da01c + 4561b7d
commit e75e933
Show file tree

Hide file tree

Showing 63 changed files with 617 additions and 812 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,4 @@ yarn-debug.log*
 .yarn-integrity
 yarn.lock
 /spec/dummy/public/pictures
+.byebug_history
diff --git a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
@@ -2,12 +2,12 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
 # Adds buttons into a toolbar inside of overlay windows
 Alchemy.ToolbarButton = (options) ->
-  $btn = $('<div class="button_with_label" />')
+  $btn = $("<sl-tooltip content='#{options.label}' placement='top-#{options.align}'></sl-tooltip>")
   if options.align
-    $btn.addClass(options.align)
+    $btn.addClass(options.class)
   if options.buttonId
     $btn.attr(id: options.buttonId)
-  $lnk = $("<a title='#{options.title}' class='icon_button' href='#' />")
+  $lnk = $("<a class='icon_button' href='#' />")
   if options.hotkey
     $lnk.attr('data-alchemy-hotkey', options.hotkey)
   $lnk.click (e) ->
@@ -16,7 +16,6 @@ Alchemy.ToolbarButton = (options) ->
     return
   $lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
   $btn.append $lnk
-  $btn.append "<br><label class='#{options.align || "left"}-aligned'>#{options.label}</label>"
   $btn
 
 Alchemy.ElementsWindow =
@@ -63,7 +62,8 @@ Alchemy.ElementsWindow =
     buttons.push
       label: "Collapse all elements"
       iconClass: "contract-up-down-line"
-      align: "right"
+      align: "end"
+      class: "right"
       onClick: =>
         $("alchemy-element-editor:not([compact]):not([fixed])").each () ->
           @collapse()

diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -28,6 +28,9 @@
   $focus-border-color: $button-focus-border-color,
   $focus-box-shadow: $button-focus-box-shadow
 ) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-family: $default-font-family;
   font-size: $default-font-size;
   font-weight: $button-font-weight;
@@ -211,13 +214,6 @@
   white-space: $wrap;
 }
 
-@mixin hint-hover-style {
-  visibility: visible;
-  top: 26px;
-  opacity: 1;
-  transition-delay: 0.2s;
-}
-
 @mixin clearfix {
   &::after {
     clear: both;

diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -176,7 +176,7 @@ div.assign_image_list_image {
 .picture_tags {
   overflow: hidden;
   position: absolute;
-  bottom: 22px;
+  bottom: 28px;
   left: 0;
   width: 100%;
   max-height: 80%;

diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -117,97 +117,3 @@ button.icon_button {
 #new_element button.button {
   float: right;
 }
-
-.button_with_label {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-
-  .select2-container,
-  select {
-    margin: 0;
-    top: 0;
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-}
-
-.button_with_label,
-.button_group {
-  label {
-    border-radius: $default-border-radius;
-    position: absolute;
-    visibility: hidden;
-    top: -20px;
-    left: 50%;
-    margin-left: -13px;
-    z-index: 30;
-    background-color: $tooltip-background-color;
-    color: $white;
-    padding: $default-padding 2 * $default-padding 1.5 * $default-padding;
-    line-height: 1;
-    box-shadow: 0 0 4px $default-border-color;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transition: 0.3s;
-
-    &:before {
-      content: "";
-      position: absolute;
-      bottom: -10px;
-      left: 8px;
-      border: 5px transparent solid;
-      border-top-color: $tooltip-background-color;
-    }
-
-    &.center {
-      left: auto;
-      right: 50%;
-      margin-left: 0;
-      transform: translateX(50%);
-
-      &:before {
-        left: auto;
-        right: 50%;
-        transform: translateX(50%);
-      }
-    }
-
-    &.left {
-      left: auto;
-      right: 50%;
-      margin-left: 0;
-      margin-right: -13px;
-
-      &:before {
-        left: auto;
-        right: 8px;
-      }
-    }
-
-    &.right-aligned {
-      left: auto;
-      margin-left: auto;
-      right: 50%;
-      margin-right: -13px;
-
-      &:before {
-        left: auto;
-        right: 8px;
-      }
-    }
-  }
-
-  &:hover label {
-    visibility: visible;
-    opacity: 1;
-    top: -25px;
-    transition-delay: 0.2s;
-  }
-}
diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -32,6 +32,7 @@
   border-bottom: $default-border;
 
   .right {
+    display: inline-block;
     margin-left: auto;
   }
 }
@@ -374,20 +375,6 @@ alchemy-tinymce {
     color: inherit;
     transition: color $transition-duration;
   }
-
-  > .hint-with-icon {
-    .hint-bubble {
-      left: auto;
-      right: -24px;
-      transform: none;
-
-      &:before {
-        left: auto;
-        right: 24px;
-        transform: none;
-      }
-    }
-  }
 }
 
 .element-hidden-icon {
@@ -893,21 +880,6 @@ textarea.has_tinymce {
   }
 }
 
-.ingredient-editor .hint-with-icon,
-.ingredient-editor .with-hint,
-.element-handle .hint-with-icon {
-  margin: 0;
-
-  > .hint-bubble {
-    left: -7px;
-    transform: none;
-
-    &:before {
-      left: 16px;
-    }
-  }
-}
-
 .is-fixed {
   &.with-ingredients {
     > .element-footer {

diff --git a/app/assets/stylesheets/alchemy/forms.scss b/app/assets/stylesheets/alchemy/forms.scss
@@ -23,18 +23,16 @@ form {
     padding: $default-padding 0;
     @include clearfix;
 
-    > input[type="url"],
-    > input[type="number"],
-    > input[type="text"],
-    > input[type="email"],
-    > input[type="password"],
-    > textarea,
-    > select,
-    > .select2-container,
-    > .autocomplete_tag_list,
-    > .tinymce_container,
-    > alchemy-datepicker,
-    > .with-hint {
+    input[type="url"],
+    input[type="number"],
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea,
+    select,
+    .select2-container,
+    .autocomplete_tag_list,
+    .tinymce_container {
       width: $form-right-width;
       float: right;
     }
@@ -170,16 +168,6 @@ form {
     }
   }
 
-  .input > .with-hint,
-  .checkbox > .with-hint {
-    cursor: default;
-
-    input,
-    textarea {
-      cursor: not-allowed;
-    }
-  }
-
   .inline-input {
     @include clearfix;
     margin: 0 -1 * $default-margin;
@@ -236,12 +224,17 @@ form {
   }
 
   .input-column {
-    float: left;
     padding: 0 $default-padding;
-    width: 50%;
+
+    input[type] {
+      float: none;
+      width: 100%;
+    }
   }
 
   .input-row {
+    display: flex;
+
     .input-column {
       &:first-of-type {
         padding-left: 0;

diff --git a/app/assets/stylesheets/alchemy/frame.scss b/app/assets/stylesheets/alchemy/frame.scss
@@ -61,15 +61,6 @@ div#overlay_text_box {
     @extend .locked_page;
     cursor: default;
     border-bottom-color: $toolbar-bg-color;
-
-    .hint-bubble {
-      left: -40px;
-      transform: none;
-
-      &:before {
-        left: 47px;
-      }
-    }
   }
 
   .page_name {

diff --git a/app/assets/stylesheets/alchemy/hints.scss b/app/assets/stylesheets/alchemy/hints.scss
@@ -1,63 +1,5 @@
-.hint-with-icon {
-  @extend .with-hint;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  .toolbar_buttons & {
-    margin: 0 2 * $default-margin;
-    align-self: center;
-  }
-
-  > .icon {
-    text-indent: 0;
-  }
-}
-
-.with-hint {
-  position: relative;
-
-  &:hover {
-    cursor: help;
-
-    > .hint-bubble {
-      @include hint-hover-style;
-    }
-  }
-
-  > .hint-bubble {
-    visibility: hidden;
-    background-color: $hint-background-color;
-    color: $hint-text-color;
-    border-radius: $default-border-radius;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 20px;
-    z-index: 100;
-    padding: 8px;
-    line-height: 1.5em;
-    min-width: 180px;
-    max-width: 300px;
-    white-space: normal;
-    text-align: left;
-    font-size: $default-font-size;
-    opacity: 0;
-    transition: 0.3s;
-    pointer-events: none;
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: -8px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0px;
-      height: 0px;
-      border-style: solid;
-      border-width: 0 8px 8px 8px;
-      border-color: transparent transparent $light_yellow transparent;
-    }
-  }
+.like-hint-tooltip {
+  cursor: help;
+  --sl-tooltip-background-color: #{$hint-background-color};
+  --sl-tooltip-color: #{$hint-text-color};
 }
diff --git a/app/assets/stylesheets/alchemy/menubar.scss b/app/assets/stylesheets/alchemy/menubar.scss
@@ -69,7 +69,6 @@
           $margin: 0,
           $color: $white
         );
-        display: block;
         width: 100%;
         text-decoration: none !important;