filemanager v6.0.24

chinonso098 · Nov 23, 2023 · 5917079 · 5917079
1 parent beecbfb
commit 5917079
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 23 deletions.
diff --git a/src/app/system-apps/filemanager/file.manager.validator.ts b/src/app/system-apps/filemanager/file.manager.validator.ts
diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
@@ -157,4 +157,44 @@ span.tail{
 input::selection{
     background-color: #0056b3;
     color: #fff;
-}
+}
+
+.tool-tip-container{
+    position: absolute;
+    width: fit-content;
+    border-bottom: 1px solid black;
+    box-shadow:0px 1px 0px rgba(0, 0, 0, 0.3);
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    z-index: -1;
+    opacity: 0;
+    transform: translate(-100000px,100000px); 
+}
+
+.tool-tip-base{
+    width: fit-content;
+    height: 40px;
+    line-height: 5px;
+    padding: 10px;
+    font-size: 10px;
+    font-weight: normal;
+    text-align: center;
+    color: black;
+    background: rgb(255, 255, 255);
+    border: 4px solid rgb(255, 255, 255);
+    border-radius: 5px;
+    /* text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
+    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; */
+}
+
+.tool-tip-arrow {
+    content: "";
+    position: relative;
+    width: 0;
+    height: 0;
+    border-width: 10px;
+    border-style: solid;
+    border-color: #FFFFFF transparent transparent transparent; 
+    left: 20px;
+    transform: rotate(180deg);
+}
diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
@@ -19,6 +19,13 @@
         </button>
     </li>
 
+    <div class="tool-tip-container" id="invalidChars">
+        <div class="tool-tip-arrow"> </div>
+        <div class="tool-tip-base"> A file name can't contain any of the following characters: <br /><br />
+             \ / : * ? " < > |
+        </div>
+    </div>
+
 
     <div class="icon-vertical-menu" [style]="iconCntxtMenuStyle">
         <div class="empty-line-container"></div>

diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -9,8 +9,7 @@ import { FileInfo } from 'src/app/system-files/fileinfo';
 import { Subscription } from 'rxjs';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { CustomValidator } from './file.manager.validator';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'cos-filemanager',
@@ -327,20 +326,50 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
 
   onInputChange(evt:any):boolean{
 
+    // console.log('the user is typing:',evt.target.value);
+    // console.log( 'Whats happening here:',new RegExp(regexStr).test(evt.key));
     const regexStr = '^[a-zA-Z0-9_]+$';
-    console.log('the user is typing:',evt.target.value);
-    console.log( 'Whats happening here:',new RegExp(regexStr).test(evt.key));
     const res = new RegExp(regexStr).test(evt.key)
-
     if(res){
       console.log('allowed:',evt)
       return res
     }else{
+      this.showInvalidCharsToolTip();
+
+      setTimeout(()=>{
+        this.hideInvalidCharsToolTip();
+      },5000)
+
       return res;
     }
-
-    const invalidChars:string[] = ['#','%','&','{','}','|','\\','<','>','*','?','/','','$','!',"'",'"',':','@','+','`','=']   
-    return false
+  }
+
+  showInvalidCharsToolTip():void{
+    // get the position of the textbox
+    const toolTipID = 'invalidChars';
+    const invalidCharToolTipElement = document.getElementById(toolTipID) as HTMLElement;
+    const renameContainerElement= document.getElementById(`renameContainer${this.elementId}`) as HTMLElement;
+
+    const rect = renameContainerElement.getBoundingClientRect();
+
+    if(invalidCharToolTipElement){
+      invalidCharToolTipElement.style.transform =`translate(${rect.x + 2}px, ${rect.y + 2}px)`;
+      invalidCharToolTipElement.style.zIndex = '3';
+      invalidCharToolTipElement.style.opacity = '1';
+      invalidCharToolTipElement.style.transition = 'opacity 0.5s ease';
+    }
+  }
+
+  hideInvalidCharsToolTip():void{
+    const toolTipID = 'invalidChars';
+    const invalidCharToolTipElement = document.getElementById(toolTipID) as HTMLElement;
+
+    if(invalidCharToolTipElement){
+      invalidCharToolTipElement.style.transform =`translate(${-100000}px, ${100000}px)`;
+      invalidCharToolTipElement.style.zIndex = '-1';
+      invalidCharToolTipElement.style.opacity = '0';
+      invalidCharToolTipElement.style.transition = 'opacity 0.75s ease';
+    }
   }
 
   isFormDirty(): void {