CRO-97: Storefront admin bar

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Add storefront admin bar to replace store not launched preview panel [#997](https://github.com/bigcommerce/cornerstone/pull/997)
 
 ## 1.7.0 (2017-04-26)
 - Upgrade to Webpack 2 with code splitting and tree shaking [964](https://github.com/bigcommerce/cornerstone/pull/964)

assets/js/theme/cart.js

@@ -32,7 +32,7 @@ export default class Cart extends PageManager {
         // Does not quality for min/max quantity
         if (newQty < minQty) {
             return alert(minError);
-        } else if (newQty > maxQty) {
+        } else if (maxQty > 0 && newQty > maxQty) {
             return alert(maxError);
         }
 

assets/js/theme/global/maintenanceMode.js

@@ -7,17 +7,51 @@ import $ from 'jquery';
 export default function (maintenanceMode = {}) {
     const header = maintenanceMode.header;
     const notice = maintenanceMode.notice;
+    const password = maintenanceMode.password || false;
+    const securePath = maintenanceMode.securePath || '';
 
-    if (!(header && notice)) {
+    function isInIframe() {
+        try {
+            return window.location !== window.parent.location;
+        } catch (e) {
+            return true;
+        }
+    }
+
+    // Return if header & notice is null or if isInIframe is false (inside theme editor)
+    if (!(header && notice) || isInIframe()) {
         return;
     }
 
-    const $element = $('<div>', {
-        id: 'maintenance-notice',
-        class: 'maintenanceNotice',
-    });
+    if (password) {
+        const $element = $('<div>', {
+            class: 'adminBar',
+        });
+
+        const url = encodeURIComponent((new URL(window.location.href).pathname + window.location.search).replace(/^\/|\/$/g, ''));
+
+        $element.html(`<div class="adminBar-logo">
+            <a href="${securePath}/manage/dashboard"><svg><use xlink:href="#logo-small"></use></svg></a></div>
+            <div class="adminBar-content">
+                <a href="${securePath}/manage/theme-editor?redirectIframeUrl=${url}" target="_blank">Customize Theme</a>
+                <div class="adminBar-private">
+                    <span>Your storefront is private.</span>
+                    <span class="preview">Share your site with preview code: ${password}</span>
+                </div>
+            </div>`);
 
-    $element.html(`<p class="maintenanceNotice-header">${header}</p>${notice}`);
 
-    $('body').append($element);
+        $('body').addClass('hasAdminBar');
+        $('body').prepend($element);
+    } else {
+        const $element = $('<div>', {
+            id: 'maintenance-notice',
+            class: 'maintenanceNotice',
+        });
+
+
+        $element.html(`<p class="maintenanceNotice-header">${header}</p>${notice}`);
+
+        $('body').append($element);
+    }
 }

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

@@ -26,3 +26,90 @@
     font-family: $maintenanceNotice-header-font-family;
     margin: $maintenanceNotice-header-margin;
 }
+
+// =============================================================================
+// ADMIN BAR MODE (CSS)
+// =============================================================================
+
+body.hasAdminBar {
+    padding-top: 101px; // 55px (Mobile Header) + 46px (Admin Bar)
+
+    @include breakpoint("medium") {
+        padding-top: 0;
+
+        .banners {
+            margin-top: $adminBar-height;
+        }
+
+        .header {
+            padding-top: 0;
+        }
+    }
+
+    .header {
+        padding-top: $adminBar-height;
+    }
+
+    .navPages-container.is-open {
+        padding-top: 101px;
+    }
+}
+
+.adminBar {
+    background-color: $adminBar-color;
+    box-shadow: 0 remCalc(2) remCalc(7) 0 rgba(0, 0, 0, 0.2);
+    color: $adminBar-text-color;
+    float: left;
+    font-family: "Source Sans Pro", arial, "sans serif", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    height: $adminBar-height;
+    left: 0;
+    position: fixed;
+    text-decoration: none;
+    top: 0;
+    width: 100%;
+    z-index: 10000;
+}
+
+.adminBar-logo {
+    background-color: $adminBar-logo-color;
+    float: left;
+    height: $adminBar-height;
+    width: 45px;
+
+    svg {
+        height: 100%;
+        padding: 7px 10px 11px 7px;
+        width: 100%;
+    }
+}
+
+.adminBar-content {
+    align-items: center;
+    display: flex;
+    height: $adminBar-height;
+    justify-content: space-between;
+    margin-left: 45px;
+    padding: 17px 20.5px 14px 20px;
+
+    a {
+        color: $adminBar-contentLink-color;
+        font-weight: 600;
+        text-decoration: none;
+    }
+}
+
+.adminBar-private {
+    float: right;
+    text-align: right;
+
+    span {
+        white-space: nowrap;
+    }
+}
+
+.preview {
+    font-weight: 400;
+    padding-left: 9px;
+}

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

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