From 919f378961749c2a584f5658fc09c00e043483be Mon Sep 17 00:00:00 2001
From: yaricrolletservico
 <101557629+yaricrolletservico@users.noreply.github.com>
Date: Tue, 10 Oct 2023 14:40:12 +0200
Subject: [PATCH] Fix WidgetsListPart UI (#14461)

---
 .../Assets/scss/widgetslist.edit.scss         | 61 +++++++++++++++++++
 .../wwwroot/Styles/widgetslist.edit.css       | 48 ++++++++++++++-
 .../wwwroot/Styles/widgetslist.edit.min.css   |  2 +-
 3 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/Assets/scss/widgetslist.edit.scss b/src/OrchardCore.Modules/OrchardCore.Widgets/Assets/scss/widgetslist.edit.scss
index c81ccb9ab8c..3235103d070 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/Assets/scss/widgetslist.edit.scss
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/Assets/scss/widgetslist.edit.scss
@@ -61,3 +61,64 @@
         }
     }
 }
+
+.btn-widget-metadata {
+    margin: 0 auto;
+    left: 0;
+    top: -6px;
+    position: absolute;
+    visibility: collapse;
+    height: 1px;
+    white-space: nowrap;
+    text-align: center;
+    transition: 0.3s visibility;
+
+    > .btn-group {
+        top: -20px;
+    }
+}
+
+.widget-editor-header {
+    &.card-header {
+        &:hover {
+            > .btn-widget-metadata {
+                visibility: visible;
+            }
+        }
+    }
+}
+
+.btn-widget-add-below-wrapper{
+    min-height: 5px;
+
+    &:hover{
+        > .btn-widget-add-below{
+            border-width: 5px;
+            opacity: 1;
+        }
+    }
+}
+
+.btn-widget-add-below {
+    height: 1px;
+    position: relative;
+    opacity: 0.5;
+    transition: 0.3s opacity;
+
+    > .btn-group {
+        margin: 0 auto;
+        bottom: 17px;
+    }
+}
+
+[dir="ltr"] .btn-widget-add-below {
+    > .btn-group {
+        left: calc(-14px + 50%);
+    }
+}
+
+[dir="rtl"] .btn-widget-add-below {
+    > .btn-group {
+        right: calc(-14px + 50%);
+    }
+}
diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.css b/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.css
index af08501b4e2..ee2a9c13116 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.css
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.css
@@ -43,4 +43,50 @@
   top: 5px;
   margin-left: -10px;
 }
-/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpZGdldHNsaXN0LmVkaXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDSTtFQUNJOztBQUlBO0VBQ0k7O0FBSUE7RUFDSTs7QUFPSjtFQUNJOztBQUtaO0VBQ0k7RUFDQTs7QUFFQTtFQUNJOzs7QUFLWjtFQUNJOzs7QUFHSjtFQUNJOzs7QUFJQTtFQUNJO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0k7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBIiwiZmlsZSI6IndpZGdldHNsaXN0LmVkaXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLndpZGdldC1lZGl0b3Ige1xyXG4gICAgLmNhcmQtYm9keSwgLmNhcmQtZm9vdGVyIHtcclxuICAgICAgICBkaXNwbGF5OiBpbmhlcml0O1xyXG4gICAgfVxyXG5cclxuICAgICYuY29sbGFwc2VkIHtcclxuICAgICAgICAuY2FyZC1ib2R5LCAuY2FyZC1mb290ZXIge1xyXG4gICAgICAgICAgICBkaXNwbGF5OiBub25lO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgPiAud2lkZ2V0LWVkaXRvci1oZWFkZXIge1xyXG4gICAgICAgICAgICAud2lkZ2V0LWVkaXRvci1idG4tY29sbGFwc2Uge1xyXG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAmOm5vdCguY29sbGFwc2VkKSB7XHJcbiAgICAgICAgPiAud2lkZ2V0LWVkaXRvci1oZWFkZXIge1xyXG4gICAgICAgICAgICAud2lkZ2V0LWVkaXRvci1idG4tZXhwYW5kIHtcclxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLndpZGdldC1lZGl0b3ItaGFuZGxlIHtcclxuICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XHJcblxyXG4gICAgICAgICY6aG92ZXIge1xyXG4gICAgICAgICAgICBjdXJzb3I6IG1vdmU7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcblxyXG4ud2lkZ2V0LWVkaXRvci1idG4tY29sbGFwc2UsIC5jb2xsYXBzZWQgLndpZGdldC1lZGl0b3ItYnRuLWV4cGFuZCB7XHJcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbn1cclxuXHJcbi53aWRnZXQtZHJvcHpvbmUtaGludCB7XHJcbiAgICBib3JkZXI6IDNweCBkYXNoZWQgb3JhbmdlO1xyXG59XHJcblxyXG4ud2lkZ2V0LWRyYWdkcm9wLXBsYWNlaG9sZGVyIHtcclxuICAgIGRpdiB7XHJcbiAgICAgICAgbWFyZ2luLXRvcDogNnB4O1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDZweDtcclxuICAgICAgICBtaW4taGVpZ2h0OiA2cHg7XHJcbiAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG5cclxuICAgICAgICAmOmJlZm9yZSB7XHJcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgICAgICAgY29udGVudDogXCJcIjtcclxuICAgICAgICAgICAgd2lkdGg6IDA7XHJcbiAgICAgICAgICAgIGhlaWdodDogMDtcclxuICAgICAgICAgICAgYm9yZGVyOiA4cHggc29saWQgdHJhbnNwYXJlbnQ7XHJcbiAgICAgICAgICAgIGJvcmRlci1sZWZ0LWNvbG9yOiBvcmFuZ2U7XHJcbiAgICAgICAgICAgIGJvcmRlci1yaWdodDogbm9uZTtcclxuICAgICAgICAgICAgdG9wOiA1cHg7XHJcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAtMTBweDtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIl19 */
+
+.btn-widget-metadata {
+  margin: 0 auto;
+  left: 0;
+  top: -6px;
+  position: absolute;
+  visibility: collapse;
+  height: 1px;
+  white-space: nowrap;
+  text-align: center;
+  transition: 0.3s visibility;
+}
+.btn-widget-metadata > .btn-group {
+  top: -20px;
+}
+
+.widget-editor-header.card-header:hover > .btn-widget-metadata {
+  visibility: visible;
+}
+
+.btn-widget-add-below-wrapper {
+  min-height: 5px;
+}
+.btn-widget-add-below-wrapper:hover > .btn-widget-add-below {
+  border-width: 5px;
+  opacity: 1;
+}
+
+.btn-widget-add-below {
+  height: 1px;
+  position: relative;
+  opacity: 0.5;
+  transition: 0.3s opacity;
+}
+.btn-widget-add-below > .btn-group {
+  margin: 0 auto;
+  bottom: 17px;
+}
+
+[dir=ltr] .btn-widget-add-below > .btn-group {
+  left: calc(-14px + 50%);
+}
+
+[dir=rtl] .btn-widget-add-below > .btn-group {
+  right: calc(-14px + 50%);
+}
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpZGdldHNsaXN0LmVkaXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDSTtFQUNJOztBQUlBO0VBQ0k7O0FBSUE7RUFDSTs7QUFPSjtFQUNJOztBQUtaO0VBQ0k7RUFDQTs7QUFFQTtFQUNJOzs7QUFLWjtFQUNJOzs7QUFHSjtFQUNJOzs7QUFJQTtFQUNJO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0k7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFLWjtFQUNJO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNJOzs7QUFPSTtFQUNJOzs7QUFNaEI7RUFDSTs7QUFHSTtFQUNJO0VBQ0E7OztBQUtaO0VBQ0k7RUFDQTtFQUNBO0VBQ0E7O0FBRUE7RUFDSTtFQUNBOzs7QUFLSjtFQUNJOzs7QUFLSjtFQUNJIiwiZmlsZSI6IndpZGdldHNsaXN0LmVkaXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLndpZGdldC1lZGl0b3Ige1xyXG4gICAgLmNhcmQtYm9keSwgLmNhcmQtZm9vdGVyIHtcclxuICAgICAgICBkaXNwbGF5OiBpbmhlcml0O1xyXG4gICAgfVxyXG5cclxuICAgICYuY29sbGFwc2VkIHtcclxuICAgICAgICAuY2FyZC1ib2R5LCAuY2FyZC1mb290ZXIge1xyXG4gICAgICAgICAgICBkaXNwbGF5OiBub25lO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgPiAud2lkZ2V0LWVkaXRvci1oZWFkZXIge1xyXG4gICAgICAgICAgICAud2lkZ2V0LWVkaXRvci1idG4tY29sbGFwc2Uge1xyXG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAmOm5vdCguY29sbGFwc2VkKSB7XHJcbiAgICAgICAgPiAud2lkZ2V0LWVkaXRvci1oZWFkZXIge1xyXG4gICAgICAgICAgICAud2lkZ2V0LWVkaXRvci1idG4tZXhwYW5kIHtcclxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLndpZGdldC1lZGl0b3ItaGFuZGxlIHtcclxuICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XHJcblxyXG4gICAgICAgICY6aG92ZXIge1xyXG4gICAgICAgICAgICBjdXJzb3I6IG1vdmU7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcblxyXG4ud2lkZ2V0LWVkaXRvci1idG4tY29sbGFwc2UsIC5jb2xsYXBzZWQgLndpZGdldC1lZGl0b3ItYnRuLWV4cGFuZCB7XHJcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbn1cclxuXHJcbi53aWRnZXQtZHJvcHpvbmUtaGludCB7XHJcbiAgICBib3JkZXI6IDNweCBkYXNoZWQgb3JhbmdlO1xyXG59XHJcblxyXG4ud2lkZ2V0LWRyYWdkcm9wLXBsYWNlaG9sZGVyIHtcclxuICAgIGRpdiB7XHJcbiAgICAgICAgbWFyZ2luLXRvcDogNnB4O1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDZweDtcclxuICAgICAgICBtaW4taGVpZ2h0OiA2cHg7XHJcbiAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG5cclxuICAgICAgICAmOmJlZm9yZSB7XHJcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgICAgICAgY29udGVudDogXCJcIjtcclxuICAgICAgICAgICAgd2lkdGg6IDA7XHJcbiAgICAgICAgICAgIGhlaWdodDogMDtcclxuICAgICAgICAgICAgYm9yZGVyOiA4cHggc29saWQgdHJhbnNwYXJlbnQ7XHJcbiAgICAgICAgICAgIGJvcmRlci1sZWZ0LWNvbG9yOiBvcmFuZ2U7XHJcbiAgICAgICAgICAgIGJvcmRlci1yaWdodDogbm9uZTtcclxuICAgICAgICAgICAgdG9wOiA1cHg7XHJcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAtMTBweDtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuXHJcbi5idG4td2lkZ2V0LW1ldGFkYXRhIHtcclxuICAgIG1hcmdpbjogMCBhdXRvO1xyXG4gICAgbGVmdDogMDtcclxuICAgIHRvcDogLTZweDtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHZpc2liaWxpdHk6IGNvbGxhcHNlO1xyXG4gICAgaGVpZ2h0OiAxcHg7XHJcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xyXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgdHJhbnNpdGlvbjogMC4zcyB2aXNpYmlsaXR5O1xyXG5cclxuICAgID4gLmJ0bi1ncm91cCB7XHJcbiAgICAgICAgdG9wOiAtMjBweDtcclxuICAgIH1cclxufVxyXG5cclxuLndpZGdldC1lZGl0b3ItaGVhZGVyIHtcclxuICAgICYuY2FyZC1oZWFkZXIge1xyXG4gICAgICAgICY6aG92ZXIge1xyXG4gICAgICAgICAgICA+IC5idG4td2lkZ2V0LW1ldGFkYXRhIHtcclxuICAgICAgICAgICAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuXHJcbi5idG4td2lkZ2V0LWFkZC1iZWxvdy13cmFwcGVye1xyXG4gICAgbWluLWhlaWdodDogNXB4O1xyXG5cclxuICAgICY6aG92ZXJ7XHJcbiAgICAgICAgPiAuYnRuLXdpZGdldC1hZGQtYmVsb3d7XHJcbiAgICAgICAgICAgIGJvcmRlci13aWR0aDogNXB4O1xyXG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG5cclxuLmJ0bi13aWRnZXQtYWRkLWJlbG93IHtcclxuICAgIGhlaWdodDogMXB4O1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgb3BhY2l0eTogMC41O1xyXG4gICAgdHJhbnNpdGlvbjogMC4zcyBvcGFjaXR5O1xyXG5cclxuICAgID4gLmJ0bi1ncm91cCB7XHJcbiAgICAgICAgbWFyZ2luOiAwIGF1dG87XHJcbiAgICAgICAgYm90dG9tOiAxN3B4O1xyXG4gICAgfVxyXG59XHJcblxyXG5bZGlyPVwibHRyXCJdIC5idG4td2lkZ2V0LWFkZC1iZWxvdyB7XHJcbiAgICA+IC5idG4tZ3JvdXAge1xyXG4gICAgICAgIGxlZnQ6IGNhbGMoLTE0cHggKyA1MCUpO1xyXG4gICAgfVxyXG59XHJcblxyXG5bZGlyPVwicnRsXCJdIC5idG4td2lkZ2V0LWFkZC1iZWxvdyB7XHJcbiAgICA+IC5idG4tZ3JvdXAge1xyXG4gICAgICAgIHJpZ2h0OiBjYWxjKC0xNHB4ICsgNTAlKTtcclxuICAgIH1cclxufVxyXG4iXX0= */
diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.min.css b/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.min.css
index b8317234951..7dd42d414ae 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.min.css
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/wwwroot/Styles/widgetslist.edit.min.css
@@ -1 +1 @@
-.widget-editor .card-body,.widget-editor .card-footer{display:inherit}.widget-editor.collapsed .card-body,.widget-editor.collapsed .card-footer{display:none}.widget-editor.collapsed>.widget-editor-header .widget-editor-btn-collapse{display:none}.widget-editor:not(.collapsed)>.widget-editor-header .widget-editor-btn-expand{display:none}.widget-editor .widget-editor-handle{display:inline-block;margin-right:.5rem}.widget-editor .widget-editor-handle:hover{cursor:move}.collapsed .widget-editor-btn-expand,.widget-editor-btn-collapse{display:inline-block}.widget-dropzone-hint{border:3px dashed orange}.widget-dragdrop-placeholder div{margin-top:6px;margin-bottom:6px;min-height:6px;display:inline-block}.widget-dragdrop-placeholder div:before{position:absolute;content:"";width:0;height:0;border:8px solid transparent;border-left-color:orange;border-right:none;top:5px;margin-left:-10px}
+.widget-editor .card-body,.widget-editor .card-footer{display:inherit}.widget-editor.collapsed .card-body,.widget-editor.collapsed .card-footer{display:none}.widget-editor.collapsed>.widget-editor-header .widget-editor-btn-collapse{display:none}.widget-editor:not(.collapsed)>.widget-editor-header .widget-editor-btn-expand{display:none}.widget-editor .widget-editor-handle{display:inline-block;margin-right:.5rem}.widget-editor .widget-editor-handle:hover{cursor:move}.collapsed .widget-editor-btn-expand,.widget-editor-btn-collapse{display:inline-block}.widget-dropzone-hint{border:3px dashed orange}.widget-dragdrop-placeholder div{margin-top:6px;margin-bottom:6px;min-height:6px;display:inline-block}.widget-dragdrop-placeholder div:before{position:absolute;content:"";width:0;height:0;border:8px solid transparent;border-left-color:orange;border-right:none;top:5px;margin-left:-10px}.btn-widget-metadata{margin:0 auto;left:0;top:-6px;position:absolute;visibility:collapse;height:1px;white-space:nowrap;text-align:center;transition:.3s visibility}.btn-widget-metadata>.btn-group{top:-20px}.widget-editor-header.card-header:hover>.btn-widget-metadata{visibility:visible}.btn-widget-add-below-wrapper{min-height:5px}.btn-widget-add-below-wrapper:hover>.btn-widget-add-below{border-width:5px;opacity:1}.btn-widget-add-below{height:1px;position:relative;opacity:.5;transition:.3s opacity}.btn-widget-add-below>.btn-group{margin:0 auto;bottom:17px}[dir=ltr] .btn-widget-add-below>.btn-group{left:calc(-14px + 50%)}[dir=rtl] .btn-widget-add-below>.btn-group{right:calc(-14px + 50%)}