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
This commit is contained in:
Niels Lyngsø
@@ -1,9 +1,9 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService, overlayService) {
|
||||
function AppHeaderDirective(eventsService, appState, userService, focusService, overlayService, $timeout) {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
function link(scope, element) {
|
||||
|
||||
var evts = [];
|
||||
|
||||
@@ -84,6 +84,35 @@
|
||||
overlayService.open(dialog);
|
||||
};
|
||||
|
||||
scope.logoModal = {
|
||||
show: false,
|
||||
text: "",
|
||||
timer: null
|
||||
};
|
||||
scope.showLogoModal = function() {
|
||||
$timeout.cancel(scope.logoModal.timer);
|
||||
scope.logoModal.show = true;
|
||||
scope.logoModal.text = "version "+Umbraco.Sys.ServerVariables.application.version;
|
||||
$timeout(function () {
|
||||
const anchorLink = element[0].querySelector('.umb-app-header__logo-modal');
|
||||
if(anchorLink) {
|
||||
anchorLink.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
scope.keepLogoModal = function() {
|
||||
$timeout.cancel(scope.logoModal.timer);
|
||||
};
|
||||
scope.hideLogoModal = function() {
|
||||
$timeout.cancel(scope.logoModal.timer);
|
||||
scope.logoModal.timer = $timeout(function () {
|
||||
scope.logoModal.show = false;
|
||||
}, 100);
|
||||
};
|
||||
scope.stopClickEvent = function($event) {
|
||||
$event.stopPropagation();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
|
||||
@@ -2,12 +2,65 @@
|
||||
background: @blueExtraDark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
height: @appHeaderHeight;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.umb-app-header__logo {
|
||||
margin-right: 30px;
|
||||
button {
|
||||
img {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.umb-app-header__logo-modal {
|
||||
position: absolute;
|
||||
z-index: @zindexUmbOverlay;
|
||||
top: 50px;
|
||||
left: 17px;
|
||||
font-size: 13px;
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
width: 160px;
|
||||
padding: 20px 20px;
|
||||
background-color:@white;
|
||||
color: @blueExtraDark;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .14), 0 1px 6px 1px rgba(0, 0, 0, .14);
|
||||
text-decoration: none;
|
||||
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
content:'';
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
background-color:@white;
|
||||
top: -4px;
|
||||
left: 14px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 120px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-app-header__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.umb-app-header__actions {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
@@ -28,12 +28,15 @@
|
||||
|
||||
.login-overlay__logo {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 25px;
|
||||
width: 30px;
|
||||
top: 12.5px;
|
||||
left: 20px;
|
||||
right: 25px;
|
||||
height: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
.login-overlay__logo img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-overlay .umb-modalcolumn {
|
||||
background: none;
|
||||
@@ -66,7 +69,8 @@
|
||||
margin-right: 25px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
border-radius: @baseBorderRadius;
|
||||
border-radius: @doubleBorderRadius;
|
||||
box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.login-overlay .form input[type="text"],
|
||||
|
||||
@@ -1,34 +1,99 @@
|
||||
|
||||
<div>
|
||||
|
||||
<div class="umb-app-header">
|
||||
<umb-sections
|
||||
ng-if="authenticated"
|
||||
sections="sections">
|
||||
</umb-sections>
|
||||
<div class="umb-app-header__logo">
|
||||
<button type="button" class="btn-reset" ng-click="showLogoModal()">
|
||||
<img
|
||||
src="assets/img/application/umbraco_logomark_white.svg"
|
||||
alt="Umbraco"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
tabindex="0"
|
||||
on-outside-click="hideLogoModal()"
|
||||
ng-click="stopClickEvent($event)"
|
||||
ng-focus="keepLogoModal()"
|
||||
ng-blur="hideLogoModal()"
|
||||
class="umb-app-header__logo-modal"
|
||||
ng-if="logoModal.show"
|
||||
>
|
||||
<img
|
||||
src="assets/img/application/umbraco_logo_large_blue.svg"
|
||||
alt="Umbraco — The Friendly CMS"
|
||||
/>
|
||||
<small> {{logoModal.text}} </small>
|
||||
<br /><br />
|
||||
<a
|
||||
href="https://umbraco.com"
|
||||
title="Umbraco website"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
ng-focus="keepLogoModal()"
|
||||
ng-blur="hideLogoModal()"
|
||||
>Umbraco.com</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<umb-sections ng-if="authenticated" sections="sections"> </umb-sections>
|
||||
|
||||
<div class="umb-app-header__right">
|
||||
<ul class="umb-app-header__actions">
|
||||
<li data-element="global-search" class="umb-app-header__action">
|
||||
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" localize="title" title="@general_search">
|
||||
<button
|
||||
type="button"
|
||||
class="umb-app-header__button btn-reset"
|
||||
hotkey="ctrl+space"
|
||||
ng-click="searchClick()"
|
||||
ng-mousedown="rememberFocus()"
|
||||
localize="title"
|
||||
title="@general_search"
|
||||
>
|
||||
<span class="sr-only">
|
||||
<localize key="visuallyHiddenTexts_openBackofficeSearch">Open backoffice search</localize>...
|
||||
<localize
|
||||
key="visuallyHiddenTexts_openBackofficeSearch"
|
||||
>Open backoffice search</localize
|
||||
>...
|
||||
</span>
|
||||
<umb-icon icon="icon-search" class="umb-app-header__action-icon"></umb-icon>
|
||||
<umb-icon
|
||||
icon="icon-search"
|
||||
class="umb-app-header__action-icon"
|
||||
></umb-icon>
|
||||
</button>
|
||||
</li>
|
||||
<li data-element="global-help" class="umb-app-header__action">
|
||||
<button type="button" class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" localize="title" title="@general_help">
|
||||
<button
|
||||
type="button"
|
||||
class="umb-app-header__button btn-reset"
|
||||
hotkey="ctrl+shift+h"
|
||||
ng-click="helpClick()"
|
||||
localize="title"
|
||||
title="@general_help"
|
||||
>
|
||||
<span class="sr-only">
|
||||
<localize key="visuallyHiddenTexts_openCloseBackofficeHelp">Open/Close backoffice help</localize>...
|
||||
<localize
|
||||
key="visuallyHiddenTexts_openCloseBackofficeHelp"
|
||||
>Open/Close backoffice help</localize
|
||||
>...
|
||||
</span>
|
||||
<umb-icon icon="icon-help-alt" class="umb-app-header__action-icon"></umb-icon>
|
||||
<umb-icon
|
||||
icon="icon-help-alt"
|
||||
class="umb-app-header__action-icon"
|
||||
></umb-icon>
|
||||
</button>
|
||||
</li>
|
||||
<li data-element="global-user" class="umb-app-header__action">
|
||||
<button type="button" class="umb-app-header__button btn-reset" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}">
|
||||
<button
|
||||
type="button"
|
||||
class="umb-app-header__button btn-reset"
|
||||
ng-click="avatarClick()"
|
||||
hotkey="ctrl+shift+u"
|
||||
title="{{user.name}}"
|
||||
>
|
||||
<span class="sr-only">
|
||||
<localize key="visuallyHiddenTexts_openCloseBackofficeProfileOptions">Open/Close your profile options</localize>...
|
||||
<localize
|
||||
key="visuallyHiddenTexts_openCloseBackofficeProfileOptions"
|
||||
>Open/Close your profile options</localize
|
||||
>...
|
||||
</span>
|
||||
<umb-avatar
|
||||
class="umb-app-header__action-icon"
|
||||
@@ -36,13 +101,12 @@
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{avatar[0].value}}"
|
||||
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
|
||||
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x"
|
||||
>
|
||||
</umb-avatar>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,79 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Boot Failed</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: local("LatoLatin Regular"), local("LatoLatin-Regular"),
|
||||
url(/umbraco/assets/fonts/lato/LatoLatin-Regular.woff2) format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: local("LatoLatin Bold"), local("LatoLatin-Bold"),
|
||||
url(/umbraco/assets/fonts/lato/LatoLatin-Bold.woff2) format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
background-image: url(/umbraco/assets/img/login.jpg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
background-color: #f3f3f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
.error-container {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.error {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
max-width: 500px;
|
||||
margin: auto 25px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.error h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="error-container">
|
||||
<img src="/umbraco/assets/img/application/umbraco_logo_white.svg" class="logo">
|
||||
<div class="error">
|
||||
<h1>Boot Failed</h1>
|
||||
<p>Umbraco failed to boot, if you are the owner of the website please see the log file for more details.</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Boot Failed</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: local("LatoLatin Regular"), local("LatoLatin-Regular"),
|
||||
url(/umbraco/assets/fonts/lato/LatoLatin-Regular.woff2)
|
||||
format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: local("LatoLatin Bold"), local("LatoLatin-Bold"),
|
||||
url(/umbraco/assets/fonts/lato/LatoLatin-Bold.woff2)
|
||||
format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
background-image: url(/umbraco/assets/img/login.jpg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
background-color: #f3f3f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
.error-container {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.error {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
max-width: 500px;
|
||||
margin: auto 25px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.error h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="error-container">
|
||||
<img
|
||||
src="/umbraco/assets/img/application/umbraco_logomark_white.svg"
|
||||
class="logo"
|
||||
/>
|
||||
<div class="error">
|
||||
<h1>Boot Failed</h1>
|
||||
<p>
|
||||
Umbraco failed to boot, if you are the owner of the website
|
||||
please see the log file for more details.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user