Ticket #4980 - Studio: Actions in Agents list.

studio/template/agents_agents.html

@@ -6,33 +6,23 @@
                     <div class="bx-agt-aic grow-0">__icon__</div>
                     <div class="bx-agt-aic-aux flex items-center justify-center gap-1 shrink-0">
                         <bx_if:show_trigger>
-                            <div class="bx-agt-aica bx-agt-aic-trigger w-7 h-7 flex items-center justify-center bg-gray-200/80 dark:bg-gray-800/80 rounded-full overflow-hidden" title="__trigger_title__">__trigger_icon__</div>
+                            <div class="bx-act bx-agt-aica bx-agt-aic-trigger w-7 h-7 flex items-center justify-center bg-gray-200/80 dark:bg-gray-800/80 rounded-full overflow-hidden" title="__trigger_title__">__trigger_icon__</div>
                         </bx_if:show_trigger>
                         <bx_if:show_model>
-                            <div class="bx-agt-aica bx-agt-aic-model w-7 h-7 flex items-center justify-center bg-gray-200/80 dark:bg-gray-800/80 rounded-full overflow-hidden" title="__model_title__">__model_icon__</div>
+                            <div class="bx-act bx-agt-aica bx-agt-aic-model w-7 h-7 flex items-center justify-center bg-gray-200/80 dark:bg-gray-800/80 rounded-full overflow-hidden" title="__model_title__">__model_icon__</div>
                         </bx_if:show_model>
                         <bx_if:show_profile>
                             <div class="bx-agt-aica bx-agt-aic-profile w-7 h-7 flex items-center justify-center rounded-full overflow-hidden">__unit__</div>
                         </bx_if:show_profile>
-                    </div>
-                </div>
-                <div class="bx-agt-a-ttl flex justify-between items-center gap-2 pt-1 min-w-0">
-                    <div class="bx-agt-attl flex-1 min-w-0 font-semibold text-base truncate">__title__</div>
-                    <div class="bx-agt-attl-act flex items-center shrink-0 gap-1">
-                        __switcher__
                         <bx_if:show_actions>
-                            <a class="bx-agt-agent-more w-7 h-7 flex items-center justify-center rounded-full opacity-70 hover:opacity-100 hover:bg-gray-200/80 dark:hover:bg-gray-800/80" href="javascript:void(0)" onclick="__js_object__.agentActions(this)">
-                                <i class="sys-icon ellipsis-v"></i>
-                            </a>
+                            <a class="bx-act bx-agt-aica bx-agt-aic-more w-7 h-7 flex items-center justify-center bg-gray-200/80 dark:bg-gray-800/80 rounded-full" href="javascript:void(0)" onclick="__js_object__.agentActions(this)">__actions_icon__</a>
                             <div id="bx-agt-agent-actions-__id__" class="bx-agt-agent-actions bx-popup bx-popup-box bx-popup-color-bg bx-popup-border bx-def-round-corners" style="display:none">
                                 <ul class="bx-menu-ver bx-clearfix">
                                     <bx_repeat:actions>
-                                        <li class="bx-menu-item bx-def-round-corners bx-def-color-bg-hl-hover bx-def-padding-sec-left">
-                                            <a href="javascript:void(0)" onclick="__js_object__.agentAction('__name__', __id__, __confirm__, __reset_paginate__)">
-                                                <div class="flex items-center p-2 truncate">
-                                                    <span class="bx-menu-item-icon bx-stl-mii">__icon__</span>
-                                                    <span class="bx-menu-item-title bx-stl-mit">__title__</span>
-                                                </div>
+                                        <li class="bx-menu-item bx-stl-mil-wo-gaps group">
+                                            <a class="bx-stl-mil-gaps flex flex-2 items-center truncate" href="javascript:void(0)" onclick="__js_object__.agentAction('__name__', __id__, __confirm__, __reset_paginate__)">
+                                                <span class="bx-menu-item-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</span>
+                                                <span class="bx-menu-item-title bx-stl-mit">__title__</span>
                                             </a>
                                         </li>
                                     </bx_repeat:actions>
@@ -41,6 +31,12 @@
                         </bx_if:show_actions>
                     </div>
                 </div>
+                <div class="bx-agt-a-ttl flex justify-between items-center gap-2 pt-1 min-w-0">
+                    <div class="bx-agt-attl flex-1 min-w-0 font-semibold text-base truncate">__title__</div>
+                    <div class="bx-agt-attl-act flex items-center shrink-0 gap-1">
+                        __switcher__
+                    </div>
+                </div>
                 <div class="bx-agt-a-dsc text-sm">__description__</div>
             </div>
         </div>

studio/template/css/agents.css

@@ -4,19 +4,6 @@
     height: 1rem;
 }
 
-.bx-agt-agent-actions .bx-menu-item-icon {
-    width: 1.25rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.5rem;
-}
-.bx-agt-agent-actions .bx-menu-item-icon svg,
-.bx-agt-agent-more svg {
-    width: 1rem;
-    height: 1rem;
-}
-
 /**--- Automators ---**/
 .cmt .bx-menu-custom.bx-menu-custom-hor > li > span {
     margin-right: 0;

studio/template/scripts/BxBaseStudioAgents.php

@@ -356,6 +356,7 @@ class BxBaseStudioAgents extends BxDolStudioAgents
                     'content' => [
                         'id' => $aAgent['id'],
                         'js_object' => $sJsObject,
+                        'actions_icon' => $oTemplate->getIconContent('agt-actions.svg'),
                         'bx_repeat:actions' => $aTmplVarsActions
                     ]
                 ],

template/css/tailwind.css

@@ -1459,7 +1459,9 @@
         @apply text-sm font-medium leading-10;
     }
     .bx-std .bx-btn:not(.bx-btn-primary),
-    .bx-std .bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored) {
+    .bx-std .bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored),
+    .bx-std .bx-act,
+    .bx-std .bx-act .sys-icon:not(.sys-colored) {
         @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 active:text-gray-900 dark:active:text-gray-50;
     }