fix: some logos won't be shown in top bar (#2627)

Author: AlexAndBear

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

@@ -2,13 +2,6 @@
   <component :is="tag" class="oc-card">
     <div v-if="hasSlotHeader" class="oc-card-header" :class="headerClass">
       <slot name="header">
-        <img
-          v-if="logoUrl"
-          :src="logoUrl"
-          alt=""
-          :aria-hidden="true"
-          class="max-w-48 max-h-48 absolute -translate-y-16"
-        />
         <component :is="titleTag" v-if="title" class="mt-0">
           {{ title }}
         </component>
@@ -41,11 +34,6 @@ export interface Props {
    * @default 'h2'
    */
   titleTag?: string
-  /**
-   * @docs The url of the logo to be rendered in the header of this card.
-   * @default ''
-   */
-  logoUrl?: string
   /**
    * @docs The classes to be applied on the card header
    * @default ''
@@ -82,7 +70,6 @@ const {
   tag = 'div',
   title,
   titleTag = 'h2',
-  logoUrl = '',
   headerClass = '',
   bodyClass = '',
   footerClass = ''
@@ -91,7 +78,7 @@ const {
 const slots = defineSlots<Slots>()
 
 const hasSlotHeader = computed(() => {
-  return Object.hasOwn(slots, 'header') || !!unref(title) || !!unref(logoUrl)
+  return Object.hasOwn(slots, 'header') || !!unref(title)
 })
 const hasSlotFooter = computed(() => {
   return Object.hasOwn(slots, 'footer')

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTile component > renders default space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
+"<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
     <!--v-if-->
@@ -26,7 +26,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
+"<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
     <!--v-if-->

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -15,7 +15,7 @@
           <oc-image
             :src="currentTheme.logo"
             :alt="sidebarLogoAlt"
-            class="oc-logo-image align-middle ml-1 max-h-[28px] select-none"
+            class="oc-logo-image align-middle ml-1 h-[28px] w-auto select-none"
           />
         </picture>
       </router-link>

packages/web-runtime/src/pages/accessDenied.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-screen flex flex-col justify-center items-center p-4">
+    <img v-if="logoImg" :src="logoImg" alt="" :aria-hidden="true" class="max-w-48 max-h-48 mb-4" />
     <oc-card
-      :logo-url="logoImg"
       :title="cardTitle"
       body-class="text-center"
       header-class="text-center"

packages/web-runtime/src/pages/logout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-screen flex flex-col justify-center items-center p-4">
+    <img v-if="logoImg" :src="logoImg" alt="" :aria-hidden="true" class="max-w-48 max-h-48 mb-4" />
     <oc-card
-      :logo-url="logoImg"
       :title="cardTitle"
       body-class="text-center"
       header-class="text-center"

packages/web-runtime/src/pages/missingOrInvalidConfig.vue

@@ -3,8 +3,8 @@
     class="bg-role-chrome h-dvh max-h-dvh overflow-y-hidden flex flex-col justify-center items-center p-4"
   >
     <h1 class="sr-only" v-text="$gettext('Error')" />
+    <img v-if="logoImg" :src="logoImg" alt="" :aria-hidden="true" class="max-w-48 max-h-48 mb-4" />
     <oc-card
-      :logo-url="logoImg"
       :title="$gettext('Missing or invalid config')"
       body-class="text-center"
       header-class="text-center"

packages/web-runtime/src/pages/oidcCallback.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="h-screen flex flex-col justify-center items-center">
-    <oc-card
-      :logo-url="logoImg"
-      :title="cardTitle"
-      body-class="w-sm text-center"
-      class="rounded-lg"
-    >
+    <img v-if="logoImg" :src="logoImg" alt="" :aria-hidden="true" class="max-w-48 max-h-48 mb-4" />
+    <oc-card :title="cardTitle" body-class="w-sm text-center" class="rounded-lg">
       <p v-text="cardHint" />
       <template #footer>
         <p v-text="footerSlogan" />

packages/web-runtime/src/pages/resolvePublicLink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center p-4">
+    <img v-if="logoImg" :src="logoImg" alt="" :aria-hidden="true" class="max-w-48 max-h-48 mb-4" />
     <oc-card
-      :logo-url="logoImg"
       :title="headerTitle"
       body-class="text-center"
       header-class="text-center"

packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`access denied page > renders component 1`] = `
-"<div class="h-screen flex flex-col justify-center items-center p-4">
+"<div class="h-screen flex flex-col justify-center items-center p-4"><img src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true" class="max-w-48 max-h-48 mb-4">
   <div class="oc-card w-full sm:w-sm rounded-lg">
-    <div class="oc-card-header text-center"><img src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true" class="max-w-48 max-h-48 absolute -translate-y-16">
+    <div class="oc-card-header text-center">
       <h2 class="mt-0">Not logged in</h2>
     </div>
     <div class="oc-card-body text-center">