Update SUSE banner and support left-justified text overlay

shell/assets/brand/suse/metadata.json

@@ -1,3 +1,7 @@
 {
-    "hasStylesheet": "true"
+  "hasStylesheet": "true",
+  "banner": {
+    "bannerClass": "suse-banner-graphic",
+    "textAlign": "left"
+  }
 }

shell/assets/styles/themes/_suse.scss

@@ -81,4 +81,21 @@
     --toggle-off-bg: #{$grey-70};
     --sortable-table-selected-bg: #3f4350;
   }
+
+  // SUSE Theme uses a smaller banner graphic
+  .suse-banner-graphic {
+    height: 160px;
+
+    > img {
+      object-position: right;
+    }
+  }
+}
+
+// Ensure that with a small window size, the banner centers, so that the text does not overlay
+// directly on the heavier part of the graphic
+@media (max-width: 860px) {
+  .suse .suse-banner-graphic > img {
+    object-position: center;
+  }  
 }

shell/components/BannerGraphic.vue

@@ -1,6 +1,9 @@
 <script>
 import Closeable from '@shell/mixins/closeable';
 import BrandImage from '@shell/components/BrandImage';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   components: { BrandImage },
@@ -15,22 +18,31 @@ export default {
       type:    String,
       default: null,
     },
-
-    small: {
-      type:    Boolean,
-      default: false
-    }
   },
+
+  data() {
+    const globalSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+    const setting = globalSettings?.find((gs) => gs.id === SETTING.BRAND);
+    const brandMeta = getBrandMeta(setting?.value);
+    const banner = brandMeta?.banner || {};
+    const align = banner.textAlign || 'center';
+    const bannerClass = banner.bannerClass || '';
+
+    return { alignClass: `banner-text-${ align }`, bannerClass };
+  }
 };
 </script>
 
 <template>
   <div
     v-if="shown"
     class="banner-graphic"
-    :class="{'small': small}"
+    :class="{[alignClass]: true}"
   >
-    <div class="graphic">
+    <div
+      :class="bannerClass"
+      class="graphic banner-graphic-height"
+    >
       <BrandImage
         class="banner"
         data-testid="banner-brand__img"
@@ -56,16 +68,14 @@ export default {
 </template>
 
 <style lang="scss">
-  $banner-height: 240px;
-  $banner-height-small: 200px;
+  $banner-height: 200px;
 
   .banner-graphic {
     position: relative;
 
     .graphic {
       display: flex;
       flex-direction: column;
-      height: $banner-height;
       overflow: hidden;
       > img.banner {
         flex: 1;
@@ -74,22 +84,31 @@ export default {
     }
     .title {
       display: flex;
-      justify-content: center;
       align-items: center;
       position: absolute;
       text-align: center;
       top: 0;
       height: 100%;
       width: 100%;
-      margin-top: -20px;
     }
-    &.small {
-      .graphic {
-        height: $banner-height-small;
-        img.banner {
-          margin-top: math.div(($banner-height-small - $banner-height), 2);
-        }
+
+    &.banner-text-center {
+      .title {
+        justify-content: center;
+        margin-top: -20px;
+      }
+    }
+
+    &.banner-text-left {
+      .title {
+        justify-content: left;
+        padding-left: 20px;
       }
     }
   }
+
+  // Use top-level style so that a theme style can easily override via its own style without having to worry about specificity of CSS styles
+  .banner-graphic-height {
+    height: $banner-height;
+  }
 </style>

shell/pages/home.vue

@@ -604,7 +604,6 @@ export default defineComponent({
       {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
     <BannerGraphic
-      :small="true"
       :title="t('landing.welcomeToRancher', {vendor})"
       :pref="HIDE_HOME_PAGE_CARDS"
       pref-key="welcomeBanner"

shell/store/prefs.js

@@ -1,6 +1,7 @@
 import { SETTING } from '@shell/config/settings';
 import { MANAGEMENT, STEVE } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
+import { getBrandMeta } from '@shell/utils/brand';
 
 const definitions = {};
 /**
@@ -526,8 +527,7 @@ export const actions = {
 
         if (brandSetting && brandSetting.value && brandSetting.value !== '') {
           const brand = brandSetting.value;
-
-          const brandMeta = require(`~shell/assets/brand/${ brand }/metadata.json`);
+          const brandMeta = getBrandMeta(brand);
           const hasStylesheet = brandMeta.hasStylesheet === 'true';
 
           if (hasStylesheet) {

shell/utils/brand.ts

@@ -0,0 +1,29 @@
+/**
+ * Brand/Theme metadata
+ */
+export interface BrandMeta {
+  // Does the banner have a stylesheet?
+  hasStylesheet?: string;
+  banner?: {
+    // Text alignment for the banner text overlayed on the banner image
+    textAlign?: string;
+  }
+}
+
+/**
+ * Get the brand/theme meta information for the specified brand
+ *
+ * @param brand - The brand identifier
+ * @returns Brand meta information or empty object if none available
+ */
+export function getBrandMeta(brand: string): BrandMeta {
+  let brandMeta: BrandMeta = {};
+
+  if (brand) {
+    try {
+      brandMeta = require(`~shell/assets/brand/${ brand }/metadata.json`);
+    } catch {}
+  }
+
+  return brandMeta;
+}