Merge pull request #11547 from opf/implementation/44751-rework-on-the-disabled-list-status-for-navigation-reasons

[#44751] Rework on the disabled list status for navigation reasons

frontend/src/app/shared/components/attachments/attachment-list/attachment-list-item.html

@@ -5,16 +5,17 @@
     target="_blank"
     (dragstart)="setDragData($event)"
   >
-    <span
-      class="spot-icon spot-icon_{{fileIcon.icon}} op-files-tab--icon op-files-tab--icon_{{fileIcon.clazz}}"
-    ></span>
-
-    <span
-      [textContent]="attachment.fileName"
+    <div
       [title]="attachment.fileName"
       class="spot-list--item-title op-file-list--item-title"
       data-qa-selector="op-files-tab--file-list-item-title"
-    ></span>
+    >
+      <span
+        class="spot-icon spot-icon_{{fileIcon.icon}} op-files-tab--icon op-files-tab--icon_{{fileIcon.clazz}}"
+      ></span>
+
+      <span [textContent]="attachment.fileName"></span>
+    </div>
 
     <span
       class="op-file-list--item-text"

frontend/src/app/shared/components/file-links/file-link-list-item/file-link-list-item.html

@@ -14,20 +14,24 @@
   >
     <a
       class="spot-list--item-action spot-list--item-action_link op-file-list--item-action"
-      [ngClass]="{ 'disabled': disabled, 'view-not-allowed': !viewAllowed }"
+      [ngClass]="{
+        'spot-list--item-action_disabled': disabled,
+        'op-file-list--item-action_view-not-allowed': !viewAllowed
+      }"
       [href]="fileLink._links.staticOriginOpen.href"
       [title]="fileLink.originData.name"
       target="_blank"
     >
-      <span
-        class="spot-icon spot-icon_{{fileLinkIcon.icon}} op-files-tab--icon op-files-tab--icon_{{fileLinkIcon.clazz}}"
-      ></span>
-
-      <span
-        [textContent]="fileLink.originData.name"
-        [title]="fileLink.originData.name"
+      <div
         class="spot-list--item-title op-file-list--item-title"
-      ></span>
+        [title]="fileLink.originData.name"
+      >
+        <span
+          class="spot-icon spot-icon_{{fileLinkIcon.icon}} op-files-tab--icon op-files-tab--icon_{{fileLinkIcon.clazz}}"
+        ></span>
+
+        <span [textContent]="fileLink.originData.name"></span>
+      </div>
 
       <span
         class="op-file-list--item-text"

frontend/src/app/shared/components/file-links/storage-file-list-item/storage-file-list-item.html

@@ -17,15 +17,17 @@
       (checkedChange)="content.changeSelection()"
       [disabled]="content.disabled"
     ></spot-checkbox>
-    <span
-      class="spot-icon spot-icon_{{content.icon.icon}} op-files-tab--icon op-files-tab--icon_{{content.icon.clazz}}"
-    ></span>
 
-    <span
-      [textContent]="content.name"
-      [title]="content.name"
+    <div
       class="spot-list--item-title op-file-list--item-title"
-    ></span>
+      [title]="content.name"
+    >
+      <span
+        class="spot-icon spot-icon_{{content.icon.icon}} op-files-tab--icon op-files-tab--icon_{{content.icon.clazz}}"
+      ></span>
+
+      <span [textContent]="content.name"></span>
+    </div>
 
     <span
       *ngIf="!content.isDirectory"

frontend/src/app/spot/styles/sass/components/list.sass

@@ -41,7 +41,6 @@
         &:hover
           background-color: transparent
           cursor: not-allowed
-          opacity: 0.5
           color: $spot-color-basic-gray-1
 
       &_active#{&}_disabled
@@ -83,10 +82,8 @@
       word-break: break-word
       min-height: $spot-spacing-1_5
 
-      &:not(:first-child)
-        margin-left: $spot-spacing-0_5
-
-      &:not(:last-child)
+      &:not(:first-child),
+      :not(:first-child)
         margin-left: $spot-spacing-0_5
 
       &_ellipse-text
@@ -96,6 +93,9 @@
         max-width: 100%
         width: 100%
 
+    &-action_disabled &-title
+      opacity: 0.5
+
     &-floating-wrapper:hover > &-floating-actions,
     &-floating-actions:focus-within,
     &-floating-actions:hover

frontend/src/global_styles/content/work_packages/shared/_file_list.sass

@@ -33,25 +33,16 @@
     &-action
       text-decoration: none
 
-      &.view-not-allowed
-        opacity: 0.5
-
-      &.disabled
-        color: $spot-color-basic-gray-3
-        opacity: 0.5
-        pointer-events: none
-
-        .op-files-tab--icon
-          color: $spot-color-basic-gray-3
-
       &:hover
         .op-file-list--item-title
           text-decoration: underline
 
+    &-action_view-not-allowed &-title
+      opacity: 0.5
+
     &-title
       @include spot-body-small
 
-      line-height: $spot-spacing-1_5
       word-break: normal
       @include text-shortener
       padding-right: $spot-spacing-0_5