chore(admin-ui): Version info placement tweak (#2583)

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -20,20 +20,21 @@
             <hr />
             <vdr-main-nav displayMode="settings" (itemClick)="collapseNav()"></vdr-main-nav>
         </div>
-        <div class="mx-2">
-            <div *ngIf="devMode" class="flex center mb-2">
-                <vdr-dropdown>
-                    <button class="icon-button dev-mode-button" vdrDropdownTrigger title="DEV MODE">
-                        <clr-icon shape="code" size="24"></clr-icon> DEV MODE
-                    </button>
-                    <vdr-dropdown-menu>
-                        <div class="px-2 py-1">
-                            <div>Version: {{ version }}</div>
-                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>
-                        </div>
-                    </vdr-dropdown-menu>
-                </vdr-dropdown>
+        <div class="mx-2 flex center mb-2">
+            <div *ngIf="!hideVersion" class="version">
+                v{{ version }}
             </div>
+            <vdr-dropdown *ngIf="devMode">
+                <button class="icon-button dev-mode-button" vdrDropdownTrigger title="DEV MODE">
+                    <clr-icon shape="code" size="24"></clr-icon> DEV MODE
+                </button>
+                <vdr-dropdown-menu>
+                    <div class="px-2 py-1">
+                        <div>Version: {{ version }}</div>
+                        <div>View UI extension points: <kbd>CTRL + U</kbd></div>
+                    </div>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
     </div>
 

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -30,6 +30,10 @@
     }
 }
 
+.version {
+    color: var(--color-grey-300);
+}
+
 // fade in animation
 @keyframes fade-in {
     0% {

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.ts

@@ -31,6 +31,7 @@ export class AppShellComponent implements OnInit {
     direction$: LocalizationDirectionType;
     availableLanguages: LanguageCode[] = [];
     hideVendureBranding = getAppConfig().hideVendureBranding;
+    hideVersion = getAppConfig().hideVersion;
     pageTitle$: Observable<string>;
     mainNavExpanded$: Observable<boolean>;
     devMode = isDevMode();

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -70,13 +70,6 @@
                         </button>
                     </div>
                 </div>
-                <div class="version">
-                    <span *ngIf="brand"
-                        >{{ brand }} <span *ngIf="!hideVendureBranding || !hideVersion">-</span></span
-                    >
-                    <span *ngIf="!hideVendureBranding">vendure</span>
-                    <span *ngIf="!hideVersion">v{{ version }}</span>
-                </div>
             </form>
         </div>
         <img class="login-wrapper-logo" src="assets/logo-login.webp" *ngIf="!hideVendureBranding" />

packages/admin-ui/src/lib/login/src/components/login/login.component.ts

@@ -1,7 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig, LocalizationDirectionType, LocalizationService } from '@vendure/admin-ui/core';
+import {
+    ADMIN_UI_VERSION,
+    AuthService,
+    AUTH_REDIRECT_PARAM,
+    getAppConfig,
+    LocalizationDirectionType,
+    LocalizationService,
+} from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-login',
@@ -18,7 +25,6 @@ export class LoginComponent implements OnInit {
     errorMessage: string | undefined;
     brand = getAppConfig().brand;
     hideVendureBranding = getAppConfig().hideVendureBranding;
-    hideVersion = getAppConfig().hideVersion;
     customImageUrl = getAppConfig().loginImageUrl;
     imageUrl = '';
     imageUnsplashUrl = '';
@@ -26,7 +32,12 @@ export class LoginComponent implements OnInit {
     imageCreator = '';
     imageCreatorUrl = '';
 
-    constructor(private authService: AuthService, private router: Router, private httpClient: HttpClient, private localizationService: LocalizationService) {
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        private httpClient: HttpClient,
+        private localizationService: LocalizationService,
+    ) {
         if (this.customImageUrl) {
             this.imageUrl = this.customImageUrl;
         } else {