AI translation: locked state look #3637

enonic · Jul 8, 2024 · cea6b59 · cea6b59
1 parent 8b0e973
commit cea6b59
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ai/AIHelper.ts b/src/main/resources/assets/admin/common/js/ai/AIHelper.ts
@@ -3,7 +3,6 @@ import {Element} from '../dom/Element';
 import {AIActionButton} from './ui/AIActionButton';
 import {AI_HELPER_STATE} from './AIHelperState';
 import {i18n} from '../util/Messages';
-import {Mask} from '../ui/mask/Mask';
 
 export interface AIHelperConfig {
     dataPathElement: Element;
@@ -25,8 +24,6 @@ export class AIHelper {
 
     private state: AI_HELPER_STATE = AI_HELPER_STATE.DEFAULT;
 
-    private readonly mask: Mask;
-
     constructor(config: AIHelperConfig) {
         this.config = config;
 
@@ -45,9 +42,6 @@ export class AIHelper {
             this.sagaIcon = new AIActionButton();
             this.config.icon.container.appendChild(this.sagaIcon);
         }
-
-        const maskTitle = this.config.label ? i18n('ai.assistant.processing', this.config.label) : '';
-        this.mask = new Mask(this.config.dataPathElement).setTitle(maskTitle).addClass('ai-helper-mask') as Mask;
     }
 
     private updateInputElDataPath(): void {
@@ -71,11 +65,13 @@ export class AIHelper {
                 }
             }, 1000);
 
-            this.mask.hide();
             this.config.dataPathElement.getEl().setDisabled(false);
+            this.config.dataPathElement.removeClass('ai-helper-mask');
+            this.resetTitle();
         } else if (state === AI_HELPER_STATE.PROCESSING) {
             this.config.dataPathElement.getEl().setDisabled(true);
-            this.mask.show();
+            this.config.dataPathElement.addClass('ai-helper-mask');
+            this.updateTitle();
         }
 
         return this;
@@ -97,6 +93,25 @@ export class AIHelper {
     public static getAIHelperByPath(dataPath: string): AIHelper | undefined {
         return AI_HELPER_REGISTRY.get().find(dataPath);
     }
+
+    private updateTitle(): void {
+        const parent = this.config.dataPathElement.getEl().getParent();
+
+        if (parent.hasAttribute('title') && !parent.hasAttribute('data-title')) {
+            parent.setAttribute('data-title', parent.getTitle());
+        }
+
+        parent.setTitle(i18n('ai.assistant.processing', this.config.label));
+    }
+
+    private resetTitle(): void {
+        const parent = this.config.dataPathElement.getEl().getParent();
+        parent.removeAttribute('title');
+
+        if (parent.hasAttribute('data-title')) {
+            parent.setTitle(parent.getAttribute('data-title'));
+        }
+    }
 }
 
 class AI_HELPER_REGISTRY {

diff --git a/...esources/assets/admin/common/styles/api/form/inputtype/support/input-occurrence-view.less b/...esources/assets/admin/common/styles/api/form/inputtype/support/input-occurrence-view.less
@@ -94,10 +94,11 @@
     }
 
     &.fade {
-        display: block;
+      display: block;
 
       .ai-button-container-icon {
         animation: fadingOpacity 2s ease-in-out infinite;
+
         &:before {
           color: @admin-blue;
         }
@@ -135,9 +136,15 @@
     }
 
     @keyframes fadingOpacity {
-      0% {opacity: 0.2;}
-      50% {opacity: 1;}
-      100% {opacity: 0.2;}
+      0% {
+        opacity: 0.2;
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.2;
+      }
     }
   }
 
@@ -181,16 +188,21 @@
     .ai-button-container {
       top: 4px;
       right: 4px;
-      background-color: @admin-white;
 
-      &:hover {
+      &:not(.processing) {
         background-color: @admin-white;
+
+        &:hover {
+          background-color: @admin-white;
+        }
       }
+
     }
   }
 }
 
 .ai-helper-mask {
-  background-color: @admin-blue;
-  opacity: 0.2;
+  background-color: @admin-bg-light-gray;
+  opacity: 0.75;
+  border-color: @admin-medium-gray-border !important;
 }