Merge pull request #4107 from mathesar-foundation/4053_db_object_type…

…_in_page_title Add entity type names to database and schema pages
mathesar-foundation · Jan 8, 2025 · 9115c1c · 9115c1c
2 parents 1d42750 + f1f07ef
commit 9115c1c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/mathesar_ui/src/components/AppSecondaryHeader.svelte b/mathesar_ui/src/components/AppSecondaryHeader.svelte
@@ -25,7 +25,7 @@
   .content {
     padding: var(
       --AppSecondaryHeader__padding,
-      var(--size-x-large) var(--page-padding-x)
+      var(--size-large) var(--page-padding-x)
     );
   }
   .content.restrict-width {

diff --git a/mathesar_ui/src/components/PageTitleAndMeta.svelte b/mathesar_ui/src/components/PageTitleAndMeta.svelte
@@ -4,7 +4,8 @@
 
   export let icon: IconProps;
   export let name: string;
-  export let description: string | undefined = undefined;
+  export let entityTypeName: string | undefined = undefined;
+  export let subText: string | undefined = undefined;
 </script>
 
 <div class="container">
@@ -15,9 +16,12 @@
           <Icon {...icon} size="1.5em" />
         </div>
         <div class="left-meta-container">
+          {#if entityTypeName}
+            <span class="entity-type-name">{entityTypeName}</span>
+          {/if}
           <span class="entity-name">{name}</span>
-          {#if description}
-            <span class="entity-description">{description}</span>
+          {#if subText}
+            <span>{subText}</span>
           {/if}
         </div>
       </div>
@@ -67,6 +71,14 @@
     gap: var(--size-super-ultra-small);
   }
 
+  .entity-type-name {
+    font-size: var(--text-size-x-small);
+    font-weight: 500;
+    line-height: 1;
+    color: var(--sand-700);
+    text-transform: uppercase;
+  }
+
   .entity-name {
     font-weight: 500;
     font-size: var(--text-size-xx-large);

diff --git a/mathesar_ui/src/pages/database/DatabasePageWrapper.svelte b/mathesar_ui/src/pages/database/DatabasePageWrapper.svelte
@@ -120,10 +120,9 @@
     slot="secondary-header"
     pageTitleAndMetaProps={{
       name: database.name,
+      entityTypeName: $_('database'),
       icon: iconDatabase,
-      description: `${$_(
-        'db_server',
-      )}: ${database.server.getConnectionString()}`,
+      subText: `${$_('db_server')}: ${database.server.getConnectionString()}`,
     }}
   >
     <div slot="action">

diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte
@@ -101,6 +101,7 @@
     pageTitleAndMetaProps={{
       name: $name,
       icon: iconSchema,
+      entityTypeName: $_('schema'),
     }}
   >
     <div slot="action">