CRO-97: Storefront admin bar

assets/js/theme/global/maintenanceMode.js

@@ -7,17 +7,35 @@ import $ from 'jquery';
 export default function (maintenanceMode = {}) {
     const header = maintenanceMode.header;
     const notice = maintenanceMode.notice;
+    const password = maintenanceMode.password;
 
     if (!(header && notice)) {
         return;
     }
 
-    const $element = $('<div>', {
-        id: 'maintenance-notice',
-        class: 'maintenanceNotice',
-    });
+    if (password) {
+        const securePath = maintenanceMode.secure_path;
+        const $element = $('<div>', {
+            class: 'adminBar',
+        });
 
-    $element.html(`<p class="maintenanceNotice-header">${header}</p>${notice}`);
+        $element.html(`<div class="adminBarLogo" id="adminBarLogo">
+            <a href="${securePath}/manage/dashboard"><svg><use xlink:href="#logo-small"></use></svg></a></div>
+            <div class="adminBarContent">
+            <a href="${securePath}/manage/theme-editor" target="_blank">Customize Theme</a>
+            <span class="passcode">Share your site with passcode: <a href ="#">${password}</a></span>
+            <span>Your storefront is private.</span>
+            </div>`);
+        $('body').prepend($element);
+    } else {
+        const $element = $('<div>', {
+            id: 'maintenance-notice',
+            class: 'maintenanceNotice',
+        });
 
-    $('body').append($element);
+
+        $element.html(`<p class="maintenanceNotice-header">${header}</p>${notice}`);
+
+        $('body').append($element);
+    }
 }

assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss

@@ -26,3 +26,56 @@
     font-family: $maintenanceNotice-header-font-family;
     margin: $maintenanceNotice-header-margin;
 }
+
+.adminBar {
+    background-color: $adminBar-color;
+    color: $adminBar-contentLink-color;
+    float: left;
+    font-family: "Source Sans Pro", arial, "sans serif", sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    height: 46px;
+    left: 0;
+    position: inherit;
+    text-decoration: none;
+    top: 0;
+    width: 100%;
+    z-index: 10000;
+}
+
+.adminBarLogo {
+    background-color: $adminBar-logo-color;
+    float: left;
+    height: 46px;
+    width: 45px;
+
+    svg {
+        height: 100%;
+        padding: 7px 10px 11px 7px;
+        width: 100%;
+    }
+}
+
+.adminBarContent {
+    margin-left: 45px;
+    padding: 17px 20.5px 14px 20px;
+
+    a {
+        font-weight: 600;
+    }
+
+    span {
+        color: $adminBar-text-color;
+        float: right;
+    }
+}
+
+.passcode {
+    color: $adminBar-text-color;
+    font-weight: 300;
+    padding-left: 9px;
+
+    a {
+        border-bottom: 1px dashed $adminBar-contentLink-color;
+    }
+}

assets/scss/settings/stencil/maintenanceNotice/_settings.scss

@@ -14,3 +14,8 @@ $maintenanceNotice-z-index:             zIndex("highest");
 
 $maintenanceNotice-header-font-family:  stencilFontFamily("headings-font");
 $maintenanceNotice-header-margin:       0 0 spacing("half");
+
+$adminBar-color:                        #f6f7f9;
+$adminBar-logo-color:                   #273a8a;
+$adminBar-contentLink-color:            #4b71fc;
+$adminBar-text-color:                   #626568;