Merge pull request #2858 from Leantime/fix-alignment-in-widgets

Dashboard page widgets UI and dropdown fix
Leantime · Dec 20, 2024 · d92560c · d92560c
2 parents cb158b5 + 0b0d222
commit d92560c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/app/Domain/Widgets/Templates/components/moveableWidget.blade.php b/app/Domain/Widgets/Templates/components/moveableWidget.blade.php
@@ -1,24 +1,39 @@
 <div class="grid-stack-item" {{ $attributes }}>
     <div class="grid-stack-item-content {{ ($background == "default") ? "maincontentinner" : $background  }} p-none">
         <div class="{{ ($background == "default") ? "pb-l" : "" }}">
-            <div class="stickyHeader" style="padding:15px; height:50px;  width:100%;">
-                <div class="grid-handler-top h-[40px] cursor-grab float-left mr-sm">
+            <div class="stickyHeader w-full relative" >
+                <div class="grid-handler-top h-[40px] cursor-grab float-left" style="margin: 0 5px;" >
                     <i class="fa-solid fa-grip-vertical"></i>
                 </div>
                 @if($name != '' && $noTitle == false)
                     <h5 class="subtitle pb-m float-left mr-sm">{{ __($name) }}</h5>
                 @endif
-                <div class="inlineDropDownContainer float-right">
-                    <a href="javascript:void(0);" class="dropdown-toggle ticketDropDown editHeadline" data-toggle="dropdown">
-                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a href="javascript:void(0)" class="fitContent"><i class="fa-solid fa-up-right-and-down-left-from-center"></i> Resize to fit content</a></li>
+
+                <x-global::actions.dropdown content-role="tertiary" position="bottom" align="end"
+                    class="float-right" button-shape="circle"
+                >
+                    <x-slot:label-text>
+                        <i class='fa fa-ellipsis-v'></i>
+                    </x-slot:label-text>
+                    <x-slot:menu>
+                        <!-- Resize content -->
+                        <x-global::actions.dropdown.item variant="link"
+                            class="fitContent"
+                        >
+                            <i class="fa-solid fa-up-right-and-down-left-from-center"></i> Resize to fit content
+                        </x-global::actions.dropdown.item>
+
+                        <!-- Hide Widget -->
                         @if(empty($alwaysVisible))
-                            <li><a href="javascript:void(0)" class="removeWidget"><i class="fa fa-eye-slash"></i> Hide</a></li>
+                            <x-global::actions.dropdown.item variant="link"
+                                class="removeWidget"
+                            >
+                                <i class="fa fa-eye-slash"></i> Hide
+                            </x-global::actions.dropdown.item>
                         @endif
-                    </ul>
-                </div>
+                    </x-slot:menu>
+                </x-global::actions.dropdown>
+
             </div>
             <span class="clearall"></span>
             <div class="widgetContent {{ ($background == "default") ? 'px-m' : '' }}">
@@ -28,3 +43,19 @@
         <div class="clear"></div>
     </div>
 </div>
+
+<script type="text/javascript">
+    jQuery(document).ready(function() {
+
+        jQuery('.fitContent').on('click', function(e) {
+            const gridItem = jQuery(this).closest('.grid-stack-item')[0];
+            leantime.widgetController.resizeWidget(gridItem);
+        })
+
+        jQuery('.removeWidget').on('click', function(e) {
+            // const gridItem = jQuery(this).closest('.grid-stack-item')[0];
+            leantime.widgetController.toggleWidgetVisibility();
+        });
+
+    });
+</script>
diff --git a/app/Domain/Widgets/Templates/partials/welcome.blade.php b/app/Domain/Widgets/Templates/partials/welcome.blade.php
@@ -14,7 +14,7 @@
     <div style="padding:10px 0px">
 
         <div class="center">
-            <span style="font-size:44px; color:var(--main-titles-color); display: inline-block; margin-top: -100px;">
+            <span style="font-size:44px; color:var(--main-titles-color); display: inline-block; margin-top: 10px;">
                 {{ dtHelper()->userNow()->formatTimeForUser() }}
             </span><br />
             <span style="font-size:24px; color:var(--main-titles-color);">

diff --git a/public/assets/less/components/select.css b/public/assets/less/components/select.css
@@ -39,6 +39,7 @@
  *
  */
 .ts-control {
+    border: none !important;
     border: 1px solid #d0d0d0;
     padding: 8px 8px;
     width: 100%;
@@ -55,7 +56,8 @@
     padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
 }
 .full .ts-control {
-    background-color: #fff;
+    /* background-color: #fff; */
+    background-color: transparent;
 }
 .disabled .ts-control, .disabled .ts-control * {
     cursor: default !important;
@@ -422,6 +424,7 @@
 .ts-wrapper.single.input-active .ts-control {
     background: #fff;
     cursor: text;
+    background-color: transparent;
 }
 
 .ts-hidden-accessible {