fix: adapt disabled view for file-list

TRIPTYK · Dec 17, 2024 · 613ca0c · 613ca0c
1 parent 26102f5
commit 613ca0c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/packages/ember-input-validation/package.json b/packages/ember-input-validation/package.json
@@ -123,7 +123,8 @@
       "./static/upload.svg": "/upload.svg",
       "./static/download.svg": "/download.svg",
       "./static/delete.svg": "/delete.svg",
-      "./static/document.svg": "/document.svg"
+      "./static/document.svg": "/document.svg",
+      "./static/block.svg": "/block.svg"
     },
     "app-js": {
       "./components/base.js": "./dist/_app_/components/base.js",

diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-file-list.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-file-list.css
@@ -19,7 +19,11 @@
 }
 
 .tpk-file-list-placeholder-container.disabled {
-  @apply hidden;
+  @apply cursor-not-allowed;
+}
+
+.tpk-file-list-placeholder-container.disabled .tpk-file-list-placeholder-icon {
+  @apply w-12 h-12;
 }
 
 .tpk-file-list-placeholder {
@@ -49,10 +53,6 @@
   @apply space-y-4 mt-4;
 }
 
-.tpk-file-list-list.disabled {
-  @apply mt-0;
-}
-
 .tpk-file-list-list-item {
   @apply flex items-center space-x-6 px-4 py-2 border border-base-300 rounded;
 }
@@ -81,6 +81,7 @@
   @apply flex gap-2 flex-shrink-0;
 }
 
-.tpk-file-list-list-item-action button, .tpk-file-list-list-item-action img {
+.tpk-file-list-list-item-action button,
+.tpk-file-list-list-item-action img {
   @apply w-6 h-6;
 }
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-file-list.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-file-list.gts
@@ -110,13 +110,15 @@ export default class TpkValidationFileListComponent extends Component<TpkValidat
           {{on 'drop' this.handleDrop}}
         >
           <img
-            src='/upload.svg'
-            alt='upload'
+            src={{if @disabled '/block.svg' '/upload.svg'}}
+            alt={{if @disabled 'block' 'upload'}}
             class='tpk-file-list-placeholder-icon'
           />
-          <div class='tpk-file-list-placeholder'>
-            {{@placeholder}}
-          </div>
+          {{#unless @disabled}}
+            <div class='tpk-file-list-placeholder'>
+              {{@placeholder}}
+            </div>
+          {{/unless}}
         </div>
         <TpkValidationErrorsComponent
           class='tpk-validation-errors'

diff --git a/packages/ember-input-validation/static/block.svg b/packages/ember-input-validation/static/block.svg