Dynamically calculate size on status badge so it aligns with tiles view

packages/design-system/src/components/OcIcon/OcIcon.vue

@@ -15,6 +15,7 @@
       :aria-labelledby="accessibleLabel === '' ? null : svgTitleId"
       :focusable="accessibleLabel === '' ? 'false' : null"
       :style="color !== '' ? { fill: color } : {}"
+      @loaded="$emit('loaded')"
     />
   </component>
 </template>
@@ -86,6 +87,7 @@ export default defineComponent({
   components: {
     InlineSvg
   },
+  inheritAttrs: true,
   props: {
     /**
      * The name of the icon to display.
@@ -155,6 +157,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['loaded'],
   computed: {
     svgTitleId() {
       return uniqueId('oc-icon-title-')

packages/design-system/src/components/OcResource/OcResource.vue

@@ -8,29 +8,24 @@
       class="oc-resource-link"
       @click="emitClick"
     >
-      <oc-img
-        v-if="hasThumbnail"
-        :key="thumbnail"
-        v-oc-tooltip="tooltipLabelIcon"
-        :src="thumbnail"
-        class="oc-resource-thumbnail"
-        width="40"
-        height="40"
-        :aria-label="tooltipLabelIcon"
-      />
+      <span v-if="hasThumbnail" v-oc-tooltip="tooltipLabelIcon" :aria-label="tooltipLabelIcon">
+        <oc-img
+          :key="thumbnail"
+          :src="thumbnail"
+          class="oc-resource-thumbnail"
+          width="40"
+          height="40"
+        />
+        <span v-if="showStatusIcon" class="oc-resource-thumbnail-status-badge">
+          <oc-icon v-bind="statusIconAttrs" size="xsmall" />
+        </span>
+      </span>
       <oc-resource-icon
         v-else
         v-oc-tooltip="tooltipLabelIcon"
         :aria-label="tooltipLabelIcon"
         :resource="resource"
-      >
-        <template v-if="showStatusIcon" #status>
-          <oc-icon v-bind="statusIconAttrs" size="xsmall" />
-        </template>
-      </oc-resource-icon>
-      <span v-if="showStatusIcon && hasThumbnail" class="oc-resource-thumbnail-status-badge">
-        <oc-icon v-bind="statusIconAttrs" size="xsmall" />
-      </span>
+      />
     </oc-resource-link>
     <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
       <oc-resource-link
@@ -285,16 +280,22 @@ export default defineComponent({
     max-width: $oc-size-icon-default * 1.5;
 
     &-status-badge {
+      background: rgba(155, 155, 155, 0.8);
       position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       bottom: 0px;
-      right: 0px;
-      width: var(--oc-space-small);
-      height: var(--oc-space-small);
-      padding: var(--oc-space-xsmall);
-      line-height: var(--oc-space-small);
+      right: -7px;
+      border: 2px solid var(--oc-color-background-default);
       border-radius: 30px;
-      background: rgba(155, 155, 155, 0.8);
-      color: white;
+      padding: 3px;
+
+      .oc-icon {
+        svg {
+          fill: var(--oc-color-background-default) !important;
+        }
+      }
     }
   }
 

packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap

@@ -11,7 +11,6 @@ exports[`OcResource displays parent folder name default if calculated name is em
       </span>
       <!--v-if-->
     </span>
-    <!--v-if-->
   </button>
   <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">

packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue

@@ -1,22 +1,28 @@
 <template>
   <span>
     <oc-icon
+      ref="iconRef"
       :key="`resource-icon-${icon.name}`"
       :name="icon.name"
       :color="icon.color"
       :size="size"
       :class="['oc-resource-icon', iconTypeClass]"
-    />
-    <span v-if="$slots.status" class="oc-resource-icon-status-badge">
-      <span class="oc-resource-icon-status-badge-inner" :style="{ background: icon.color }">
-        <slot name="status" />
-      </span>
+      @loaded="iconLoaded = true"
+    >
+    </oc-icon>
+    <span
+      v-if="Object.keys(badgeIconAttrs).length"
+      ref="badgeRef"
+      class="oc-resource-icon-status-badge"
+      :style="{ background: `${icon.color}`, ...badgeStyle }"
+    >
+      <oc-icon v-bind="badgeIconAttrs" />
     </span>
   </span>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, unref } from 'vue'
+import { computed, defineComponent, inject, nextTick, PropType, ref, unref, watch } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -66,6 +72,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const iconRef = ref()
+    const iconLoaded = ref(false)
+    const badgeRef = ref()
+    const badgeStyle = ref({})
     const iconMappingInjection = inject<OcResourceIconMapping>(ocResourceIconMappingInjectionKey)
 
     const isFolder = computed(() => {
@@ -104,6 +114,43 @@ export default defineComponent({
       }
     })
 
+    watch([() => props.size, iconLoaded], async () => {
+      await nextTick()
+
+      if (!unref(iconLoaded)) {
+        return false
+      }
+
+      const iconBoundingClientRect = unref(iconRef)?.$el?.getBoundingClientRect()
+      if (!iconBoundingClientRect) {
+        return
+      }
+
+      const innerIconBoundingClientRect = unref(iconRef)
+        ?.$el?.getElementsByTagName('path')?.[1]
+        ?.getBoundingClientRect()
+      if (!innerIconBoundingClientRect) {
+        return
+      }
+
+      const iconOffsetHeight =
+        (iconBoundingClientRect.height - innerIconBoundingClientRect.height) / 2
+      const iconOffsetWidth = (iconBoundingClientRect.width - innerIconBoundingClientRect.width) / 2
+
+      const badgeBoundingClientRect = unref(badgeRef)?.getBoundingClientRect()
+      if (!badgeBoundingClientRect) {
+        return
+      }
+
+      const badgeBottom = iconOffsetHeight - badgeBoundingClientRect.height / 4
+      const badgeRight = iconOffsetWidth - badgeBoundingClientRect.width / 3
+
+      badgeStyle.value = {
+        right: `${badgeRight}px`,
+        bottom: `${badgeBottom}px`
+      }
+    })
+
     const iconTypeClass = computed(() => {
       if (unref(isSpace)) {
         return 'oc-resource-icon-space'
@@ -114,9 +161,42 @@ export default defineComponent({
       return 'oc-resource-icon-file'
     })
 
+    const badgeIconSize = computed(() => {
+      if (['xxxlarge', 'xxlarge'].includes(props.size)) {
+        return 'medium'
+      }
+
+      return 'xsmall'
+    })
+
+    const badgeIconAttrs = computed(() => {
+      if (props.resource.locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill',
+          size: unref(badgeIconSize)
+        }
+      }
+      if (props.resource.processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line',
+          size: unref(badgeIconSize)
+        }
+      }
+
+      return {}
+    })
+
     return {
       icon,
-      iconTypeClass
+      iconRef,
+      badgeRef,
+      badgeStyle,
+      iconTypeClass,
+      badgeIconAttrs,
+      badgeIconSize,
+      iconLoaded
     }
   }
 })
@@ -127,30 +207,25 @@ export default defineComponent({
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
+
   &-file svg {
     height: 70%;
   }
 }
+
 .oc-resource-icon-status-badge {
   position: absolute;
-  bottom: -3px;
-  right: -2px;
-  width: 12px;
-  height: 12px;
-  padding: var(--oc-space-xsmall);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--oc-color-background-default);
   border-radius: 30px;
-  transition: background-color 200ms ease-in-out;
-  background: var(--oc-color-background-default);
-
-  &-inner {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: var(--oc-space-small);
-    height: var(--oc-space-small);
-    padding: var(--oc-space-xsmall);
-    line-height: var(--oc-space-small);
-    border-radius: 30px;
+  padding: 3px;
+
+  .oc-icon {
+    svg {
+      fill: var(--oc-color-background-default) !important;
+    }
   }
 }
 </style>

packages/design-system/src/components/OcTile/OcTile.vue

@@ -260,18 +260,6 @@ export default defineComponent({
     height: 100%;
     width: 100%;
     text-align: center;
-
-    .oc-resource-icon-status-badge {
-      background: var(--oc-color-background-highlight) !important;
-      .oc-icon {
-        svg {
-          fill: var(--oc-color-background-highlight) !important;
-        }
-      }
-      .oc-spinner {
-        color: var(--oc-color-background-highlight) !important;
-      }
-    }
   }
 
   &-hover {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -16,7 +16,11 @@
         v-else
         class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb"
       >
-        <oc-resource-icon class="details-icon" :resource="resource" size="xxxlarge" />
+        <oc-resource-icon
+          class="details-icon oc-position-relative"
+          :resource="resource"
+          size="xxxlarge"
+        />
       </div>
       <div
         v-if="!isPublicLinkContext && shareIndicators.length"

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -5,15 +5,14 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
   <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
     <div class="file_info oc-flex oc-flex-between oc-p-s">
       <div class="oc-flex oc-flex-middle">
-        <span class="file_info__icon oc-mr-s">
+        <span class="file_info__icon oc-mr-s oc-position-relative">
           <span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder">
             <!---->
           </span>
           <!--v-if-->
         </span>
         <div class="file_info__body oc-text-overflow">
           <h3 class="oc-font-semibold oc-flex oc-flex-center">
-            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->
@@ -25,7 +24,7 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
     <div class="oc-mb" id="oc-file-details-sidebar">
       <div>
         <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-          <span class="details-icon">
+          <span class="details-icon oc-position-relative">
             <span class="oc-icon oc-icon-xxxl oc-icon-passive oc-resource-icon oc-resource-icon-folder">
               <!---->
             </span>

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -1208,59 +1208,4 @@ export default defineComponent({
     display: none;
   }
 }
-
-.oc-resource-icon-status-badge,
-.oc-resource-thumbnail-status-badge {
-  .oc-icon {
-    margin-top: -2px;
-    margin-left: -1.5px;
-
-    svg {
-      fill: var(--oc-color-background-default) !important;
-    }
-  }
-
-  .oc-spinner {
-    margin-left: -2px;
-    margin-top: -2px;
-    color: var(--oc-color-background-default) !important;
-  }
-}
-
-// reduce the bottom spacing of the status badge in condensed mode
-.condensed {
-  .oc-resource-icon-status-badge {
-    bottom: 2px !important;
-  }
-}
-
-// on table row hover change the status badge background color
-.oc-tbody-tr:hover .oc-resource-icon-status-badge {
-  background: var(--oc-color-background-hover) !important;
-
-  .oc-icon {
-    svg {
-      fill: var(--oc-color-background-hover) !important;
-    }
-  }
-
-  .oc-spinner {
-    color: var(--oc-color-background-hover) !important;
-  }
-}
-
-// on table row highlight change the status badge background color
-.oc-table-highlighted .oc-resource-icon-status-badge {
-  background: var(--oc-color-background-highlight) !important;
-
-  .oc-icon {
-    svg {
-      fill: var(--oc-color-background-highlight) !important;
-    }
-  }
-
-  .oc-spinner {
-    color: var(--oc-color-background-highlight) !important;
-  }
-}
 </style>