Add config to hide backoffice logo (#11999)

* Added config to hide backoffice logo

* rename to hideBackofficeLogo

* hide on mobile

* add hideBackofficeLogo

* implement hideBackofficeLogo + toggle on click

* Updated c# syntax

Co-authored-by: Niels Lyngsø <[email protected]>

Author: bergmania

src/Umbraco.Core/Configuration/UmbracoSettings/ContentElement.cs

@@ -46,6 +46,9 @@ internal class ContentElement : UmbracoConfigurationElement, IContentSection
         [ConfigurationProperty("loginLogoImage")]
         internal InnerTextConfigurationElement<string> LoginLogoImage => GetOptionalTextElement("loginLogoImage", "assets/img/application/umbraco_logo_white.svg");
 
+        [ConfigurationProperty("hideBackofficeLogo")]
+        internal InnerTextConfigurationElement<bool> HideBackOfficeLogo => GetOptionalTextElement("hideBackofficeLogo", false);
+
         string IContentSection.NotificationEmailAddress => Notifications.NotificationEmailAddress;
 
         bool IContentSection.DisableHtmlEmail => Notifications.DisableHtmlEmail;
@@ -71,5 +74,6 @@ internal class ContentElement : UmbracoConfigurationElement, IContentSection
         string IContentSection.LoginBackgroundImage => LoginBackgroundImage;
 
         string IContentSection.LoginLogoImage => LoginLogoImage;
+        bool IContentSection.HideBackOfficeLogo => HideBackOfficeLogo;
     }
 }

src/Umbraco.Core/Configuration/UmbracoSettings/IContentSection.cs

@@ -12,11 +12,11 @@ public interface IContentSection : IUmbracoConfigurationSection
         IEnumerable<string> ImageFileTypes { get; }
 
         IEnumerable<IImagingAutoFillUploadField> ImageAutoFillProperties { get; }
-        
+
         bool ResolveUrlsFromTextString { get; }
 
         IEnumerable<IContentErrorPage> Error404Collection { get; }
-        
+
         string PreviewBadge { get; }
 
         MacroErrorBehaviour MacroErrorBehaviour { get; }
@@ -36,5 +36,6 @@ public interface IContentSection : IUmbracoConfigurationSection
         string LoginBackgroundImage { get; }
 
         string LoginLogoImage { get; }
+        bool HideBackOfficeLogo { get; }
     }
 }

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js

@@ -16,6 +16,7 @@
                 { value: "assets/img/application/[email protected]" },
                 { value: "assets/img/application/[email protected]" }
             ];
+            scope.hideBackofficeLogo = Umbraco.Sys.ServerVariables.umbracoSettings.hideBackofficeLogo;
 
             // when a user logs out or timesout
             evts.push(eventsService.on("app.notAuthenticated", function () {
@@ -104,15 +105,26 @@
                 $timeout.cancel(scope.logoModal.timer);
             };
             scope.hideLogoModal = function() {
-                $timeout.cancel(scope.logoModal.timer);
-                scope.logoModal.timer = $timeout(function () {
-                    scope.logoModal.show = false;
-                }, 100);
+                if(scope.logoModal.show === true) {
+                    $timeout.cancel(scope.logoModal.timer);
+                    scope.logoModal.timer = $timeout(function () {
+                        scope.logoModal.show = false;
+                    }, 100);
+                }
             };
             scope.stopClickEvent = function($event) {
                 $event.stopPropagation();
             };
 
+            scope.toggleLogoModal = function() {
+                if(scope.logoModal.show) {
+                    $timeout.cancel(scope.logoModal.timer);
+                    scope.logoModal.show = false;
+                } else {
+                    scope.showLogoModal();
+                }
+            };
+
         }
 
         var directive = {

src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less

@@ -9,11 +9,18 @@
 
 .umb-app-header__logo {
     margin-right: 30px;
+    flex-shrink: 0;
     button {
         img {
             height: 30px;
         }
     }
+    
+}
+@media (max-width: 1279px) {
+    .umb-app-header__logo {
+        display: none;
+    }
 }
 
 .umb-app-header__logo-modal {

src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html

@@ -1,7 +1,11 @@
 <div>
     <div class="umb-app-header">
-        <div class="umb-app-header__logo">
-            <button type="button" class="btn-reset" ng-click="showLogoModal()">
+        <div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
+            <button
+                type="button"
+                class="btn-reset"
+                ng-click="toggleLogoModal()"
+            >
                 <img
                     src="assets/img/application/umbraco_logomark_white.svg"
                     alt="Umbraco"

src/Umbraco.Web/Editors/BackOfficeServerVariables.cs

@@ -57,7 +57,7 @@ internal Dictionary<string, object> BareMinimumServerVariables()
             var keepOnlyKeys = new Dictionary<string, string[]>
             {
                 {"umbracoUrls", new[] {"authenticationApiBaseUrl", "serverVarsJs", "externalLoginsUrl", "currentUserApiBaseUrl", "iconApiBaseUrl"}},
-                {"umbracoSettings", new[] {"allowPasswordReset", "imageFileTypes", "maxFileSize", "loginBackgroundImage", "loginLogoImage", "canSendRequiredEmail", "usernameIsEmail", "minimumPasswordLength", "minimumPasswordNonAlphaNum"}},
+                {"umbracoSettings", new[] {"allowPasswordReset", "imageFileTypes", "maxFileSize", "loginBackgroundImage", "loginLogoImage", "canSendRequiredEmail", "usernameIsEmail", "minimumPasswordLength", "minimumPasswordNonAlphaNum", "hideBackofficeLogo"}},
                 {"application", new[] {"applicationPath", "cacheBuster"}},
                 {"isDebuggingEnabled", new string[] { }},
                 {"features", new [] {"disabledFeatures"}}
@@ -356,6 +356,7 @@ internal Dictionary<string, object> GetServerVariables()
                         {"allowPasswordReset", Current.Configs.Settings().Security.AllowPasswordReset},
                         {"loginBackgroundImage",  Current.Configs.Settings().Content.LoginBackgroundImage},
                         {"loginLogoImage", Current.Configs.Settings().Content.LoginLogoImage },
+                        {"hideBackofficeLogo", Current.Configs.Settings().Content.HideBackOfficeLogo },
                         {"showUserInvite", EmailSender.CanSendRequiredEmail},
                         {"canSendRequiredEmail", EmailSender.CanSendRequiredEmail},
                         {"showAllowSegmentationForDocumentTypes", false},