Skip to content

Commit 0b0182f

Browse files
nielslyngsoenielslyngsoe
authored
Apply the Umbraco logo to BackOffice (#11949)
* adding logo as text in replacement of umbraco_logo_white, this will enable existing configuration to continue to work and minimise the breaking change of this PR. * adjust logo position to fit with logged-in logomark. Allowing for the logo and customised logo to be very wide. * adding logomark in topbar of backoffice * login box style * correction of shadow * Logo modal, to display more information about the product including linking to the website * rename to modal * stop hidden when mouse is out * Version line without Umbraco * focus link and use blur as the indication for closing. * correcting to rgba * focus and click outside needs a little help to work well * use @zindexUmbOverlay to ensure right depth going forward. * adding large logo svg * append ; * tidy logo svg file
1 parent a6ce7bc commit 0b0182f

File tree

8 files changed

+344
-104
lines changed

8 files changed

+344
-104
lines changed

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
(function () {
22
"use strict";
33

4-
function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService, overlayService) {
4+
function AppHeaderDirective(eventsService, appState, userService, focusService, overlayService, $timeout) {
55

6-
function link(scope, el, attr, ctrl) {
6+
function link(scope, element) {
77

88
var evts = [];
99

@@ -84,6 +84,35 @@
8484
overlayService.open(dialog);
8585
};
8686

87+
scope.logoModal = {
88+
show: false,
89+
text: "",
90+
timer: null
91+
};
92+
scope.showLogoModal = function() {
93+
$timeout.cancel(scope.logoModal.timer);
94+
scope.logoModal.show = true;
95+
scope.logoModal.text = "version "+Umbraco.Sys.ServerVariables.application.version;
96+
$timeout(function () {
97+
const anchorLink = element[0].querySelector('.umb-app-header__logo-modal');
98+
if(anchorLink) {
99+
anchorLink.focus();
100+
}
101+
});
102+
};
103+
scope.keepLogoModal = function() {
104+
$timeout.cancel(scope.logoModal.timer);
105+
};
106+
scope.hideLogoModal = function() {
107+
$timeout.cancel(scope.logoModal.timer);
108+
scope.logoModal.timer = $timeout(function () {
109+
scope.logoModal.show = false;
110+
}, 100);
111+
};
112+
scope.stopClickEvent = function($event) {
113+
$event.stopPropagation();
114+
};
115+
87116
}
88117

89118
var directive = {

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,65 @@
22
background: @blueExtraDark;
33
display: flex;
44
align-items: center;
5-
justify-content: space-between;
65
max-width: 100%;
76
height: @appHeaderHeight;
87
padding: 0 20px;
98
}
109

10+
.umb-app-header__logo {
11+
margin-right: 30px;
12+
button {
13+
img {
14+
height: 30px;
15+
}
16+
}
17+
}
18+
19+
.umb-app-header__logo-modal {
20+
position: absolute;
21+
z-index: @zindexUmbOverlay;
22+
top: 50px;
23+
left: 17px;
24+
font-size: 13px;
25+
26+
border-radius: 6px;
27+
28+
width: 160px;
29+
padding: 20px 20px;
30+
background-color:@white;
31+
color: @blueExtraDark;
32+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .14), 0 1px 6px 1px rgba(0, 0, 0, .14);
33+
text-decoration: none;
34+
35+
text-align: center;
36+
37+
&::before {
38+
content:'';
39+
position: absolute;
40+
transform: rotate(45deg);
41+
background-color:@white;
42+
top: -4px;
43+
left: 14px;
44+
width: 8px;
45+
height: 8px;
46+
}
47+
48+
img {
49+
display: block;
50+
height: auto;
51+
width: 120px;
52+
margin-left: auto;
53+
margin-right: auto;
54+
margin-bottom: 3px;
55+
}
56+
}
57+
58+
.umb-app-header__right {
59+
display: flex;
60+
align-items: center;
61+
margin-left: auto;
62+
}
63+
1164
.umb-app-header__actions {
1265
display: flex;
1366
list-style: none;

‎src/Umbraco.Web.UI.Client/src/less/pages/login.less

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,15 @@
2828

2929
.login-overlay__logo {
3030
position: absolute;
31-
top: 22px;
32-
left: 25px;
33-
width: 30px;
31+
top: 12.5px;
32+
left: 20px;
33+
right: 25px;
3434
height: 30px;
3535
z-index: 1;
3636
}
37+
.login-overlay__logo img {
38+
height: 100%;
39+
}
3740

3841
.login-overlay .umb-modalcolumn {
3942
background: none;
@@ -66,7 +69,8 @@
6669
margin-right: 25px;
6770
margin-top: auto;
6871
margin-bottom: auto;
69-
border-radius: @baseBorderRadius;
72+
border-radius: @doubleBorderRadius;
73+
box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.12);
7074
}
7175

7276
.login-overlay .form input[type="text"],

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

Lines changed: 82 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,112 @@
1-
21
<div>
3-
42
<div class="umb-app-header">
5-
<umb-sections
6-
ng-if="authenticated"
7-
sections="sections">
8-
</umb-sections>
3+
<div class="umb-app-header__logo">
4+
<button type="button" class="btn-reset" ng-click="showLogoModal()">
5+
<img
6+
src="assets/img/application/umbraco_logomark_white.svg"
7+
alt="Umbraco"
8+
/>
9+
</button>
10+
<div
11+
tabindex="0"
12+
on-outside-click="hideLogoModal()"
13+
ng-click="stopClickEvent($event)"
14+
ng-focus="keepLogoModal()"
15+
ng-blur="hideLogoModal()"
16+
class="umb-app-header__logo-modal"
17+
ng-if="logoModal.show"
18+
>
19+
<img
20+
src="assets/img/application/umbraco_logo_large_blue.svg"
21+
alt="Umbraco — The Friendly CMS"
22+
/>
23+
<small> {{logoModal.text}} </small>
24+
<br /><br />
25+
<a
26+
href="https://umbraco.com"
27+
title="Umbraco website"
28+
target="_blank"
29+
rel="noopener"
30+
ng-focus="keepLogoModal()"
31+
ng-blur="hideLogoModal()"
32+
>Umbraco.com</a
33+
>
34+
</div>
35+
</div>
36+
37+
<umb-sections ng-if="authenticated" sections="sections"> </umb-sections>
938

10-
<div class="flex items-center">
39+
<div class="umb-app-header__right">
1140
<ul class="umb-app-header__actions">
1241
<li data-element="global-search" class="umb-app-header__action">
13-
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" localize="title" title="@general_search">
42+
<button
43+
type="button"
44+
class="umb-app-header__button btn-reset"
45+
hotkey="ctrl+space"
46+
ng-click="searchClick()"
47+
ng-mousedown="rememberFocus()"
48+
localize="title"
49+
title="@general_search"
50+
>
1451
<span class="sr-only">
15-
<localize key="visuallyHiddenTexts_openBackofficeSearch">Open backoffice search</localize>...
52+
<localize
53+
key="visuallyHiddenTexts_openBackofficeSearch"
54+
>Open backoffice search</localize
55+
>...
1656
</span>
17-
<umb-icon icon="icon-search" class="umb-app-header__action-icon"></umb-icon>
57+
<umb-icon
58+
icon="icon-search"
59+
class="umb-app-header__action-icon"
60+
></umb-icon>
1861
</button>
1962
</li>
2063
<li data-element="global-help" class="umb-app-header__action">
21-
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" localize="title" title="@general_help">
64+
<button
65+
type="button"
66+
class="umb-app-header__button btn-reset"
67+
hotkey="ctrl+shift+h"
68+
ng-click="helpClick()"
69+
localize="title"
70+
title="@general_help"
71+
>
2272
<span class="sr-only">
23-
<localize key="visuallyHiddenTexts_openCloseBackofficeHelp">Open/Close backoffice help</localize>...
73+
<localize
74+
key="visuallyHiddenTexts_openCloseBackofficeHelp"
75+
>Open/Close backoffice help</localize
76+
>...
2477
</span>
25-
<umb-icon icon="icon-help-alt" class="umb-app-header__action-icon"></umb-icon>
78+
<umb-icon
79+
icon="icon-help-alt"
80+
class="umb-app-header__action-icon"
81+
></umb-icon>
2682
</button>
2783
</li>
2884
<li data-element="global-user" class="umb-app-header__action">
29-
<button type="button" class="umb-app-header__button btn-reset" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}">
85+
<button
86+
type="button"
87+
class="umb-app-header__button btn-reset"
88+
ng-click="avatarClick()"
89+
hotkey="ctrl+shift+u"
90+
title="{{user.name}}"
91+
>
3092
<span class="sr-only">
31-
<localize key="visuallyHiddenTexts_openCloseBackofficeProfileOptions">Open/Close your profile options</localize>...
93+
<localize
94+
key="visuallyHiddenTexts_openCloseBackofficeProfileOptions"
95+
>Open/Close your profile options</localize
96+
>...
3297
</span>
3398
<umb-avatar
3499
class="umb-app-header__action-icon"
35100
size="xxs"
36101
color="secondary"
37102
name="{{user.name}}"
38103
img-src="{{avatar[0].value}}"
39-
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
104+
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x"
105+
>
40106
</umb-avatar>
41107
</button>
42108
</li>
43109
</ul>
44110
</div>
45-
46111
</div>
47-
48112
</div>

0 commit comments

Comments
 (0)