#3961 - style actions

surveyjs · Feb 10, 2022 · 5acf20e · 5acf20e
1 parent 02e3357
commit 5acf20e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
@@ -4,12 +4,26 @@
   font-size: calcSize(2);
   line-height: calcSize(3);
   .sv-action-bar {
-    padding: calcSize(1);
+    padding: calcSize(1) 0;
     justify-content: center;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
     .sv-action-bar-item {
       height: calcSize(4);
       line-height: calcSize(2);
       color: $foreground-light;
+      border-radius: calcSize(2);
+    }
+    #fileIndex {
+      .sv-action-bar-item {
+        &:hover {
+          background-color: $background;
+        }
+        &:disabled {
+          opacity: initial;
+        }
+      }
     }
     .sv-action:not(:last-child) > .sv-action__content {
       padding-right: calcSize(1);
@@ -171,6 +185,7 @@
   .sd-file__list {
     padding: 0;
     height: 100%;
+    max-height: 100%;
     width: 100%;
   }
   .sd-file__image-wrapper {

diff --git a/src/question_file.ts b/src/question_file.ts
@@ -43,7 +43,8 @@ export class QuestionFileModel extends Question {
     super(name);
     this.fileIndexAction = new Action ({
       id: "fileIndex",
-      title: this.getFileIndexCaption()
+      title: this.getFileIndexCaption(),
+      enabled: false
     });
     this.prevFileAction = new Action({
       id: "prevPage",
@@ -68,6 +69,7 @@ export class QuestionFileModel extends Question {
     super.updateElementCssCore(cssClasses);
     this.prevFileAction.iconName = this.cssClasses.leftIconId;
     this.nextFileAction.iconName = this.cssClasses.rightIconId;
+    //this.mobileFileNavigator.cssClasses = this.survey.getCss().actionBar;
   }
   private getFileIndexCaption(): string {
     return surveyLocalization.getString("indexText")["format"]((this.indexToShow + 1), this.previewValue.length);