yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed Logo button behavior to be more consistent with the rest of the header

Browse Source 
(cherry picked from commit 7d9ee69fbc)
This commit is contained in:
Sebastiaan Janssen
2022-10-21 17:47:51 +02:00
parent 67d6e9f3df
commit 2265d0a928
4 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,6 +97,8 @@
if(anchorLink) {
anchorLink.focus();
}
const anchorButton = element[0].querySelector('#umbraco-logo-mark');
anchorButton.classList.add("active");
});
};
scope.keepLogoModal = function() {
@@ -108,6 +110,8 @@
scope.logoModal.timer = $timeout(function () {
scope.logoModal.show = false;
}, 100);
const anchorButton = element[0].querySelector('#umbraco-logo-mark');
anchorButton.classList.remove("active");
}
};
scope.stopClickEvent = function($event) {

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

@@ -2,13 +2,32 @@
<div class="umb-app-header">
<div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
<button type="button"
id="umbraco-logo-mark"
class="btn-reset"
ng-click="toggleLogoModal()">
<img src="assets/img/application/umbraco_logomark_white.svg"
alt="Umbraco"
width="30"
height="30"
draggable="false" />
ng-click="toggleLogoModal()"
localize="title"
title="@general_umbracoInfo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.89 315.89" width="30" height="30">
<style type="text/css">
#umbraco-logo-mark svg {
vertical-align: top;
}
#umbraco-logo-mark svg path {
fill: white;
opacity: 0.8;
}
#umbraco-logo-mark:hover svg path {
opacity: 1;
}
#umbraco-logo-mark.active svg path {
fill: #f5c1bc;
opacity: 1;
}
</style>
<path d="M0,157.74A157.95,157.95,0,1,1,158,315.89,157.95,157.95,0,0,1,0,157.74Zm154.74,54.09a155.41,155.41,0,0,1-36.5-3.29,27.92,27.92,0,0,1-19.94-16q-5.35-12.34-5.21-38.1a243,243,0,0,1,1.69-26.84q1.55-13,3.09-21.46l1.07-5.59a2,2,0,0,0,0-.49,3.2,3.2,0,0,0-2.65-3.17L75.92,93.67h-.44a3.19,3.19,0,0,0-3.11,2.48c-.35,1.31-.56,2.27-1.17,5.38-1.16,6-2.24,11.85-3.43,20.38a264.17,264.17,0,0,0-2.3,27.94,145.24,145.24,0,0,0,0,19.57q.72,25.94,8.9,41.42t27.72,22.3q19.53,6.81,54.43,6.66h2.91q34.94.15,54.41-6.66t27.71-22.3q8.17-15.53,8.91-41.42a145.24,145.24,0,0,0,0-19.57,266.84,266.84,0,0,0-2.3-27.94c-1.2-8.44-2.27-14.26-3.44-20.38-.61-3.11-.81-4.07-1.16-5.38a3.21,3.21,0,0,0-3.12-2.48h-.52l-20.38,3.18a3.2,3.2,0,0,0-2.68,3.17,4,4,0,0,0,0,.49l1.08,5.59q1.55,8.48,3.12,21.46a245.68,245.68,0,0,1,1.65,26.84q.27,25.69-5.21,38.07a27.9,27.9,0,0,1-19.76,16.07,155.19,155.19,0,0,1-36.48,3.29Z"/>
</svg>
</button>
<div
tabindex="0"