diff --git a/assets/js/notifications.js b/assets/js/notifications.js new file mode 100644 index 000000000..f04cdd810 --- /dev/null +++ b/assets/js/notifications.js @@ -0,0 +1,46 @@ +// Get notification cookie name +function notificationCookieName(el) { + return "influx-" + $(el).attr('id') + "-notification-seen" +} + +// Show notifications that are within scope and haven't been ssen +function showNotifications() { + $('#docs-notifications > .notification').each(function() { + + // Check if the path includes paths defined in the data-scope attribute + // of the notification html element + function inScope(path, scope) { + for(let i = 0; i < scope.length; i++){ + if (path.includes(scope[i])) { + return true; + }; + } + return false; + } + + var scope = $(this).data('scope').split(',') + var pageInScope = inScope(window.location.pathname, scope) + var notificationCookie = Cookies.get( notificationCookieName(this) ) + + if (pageInScope && notificationCookie != 'true') { + $(this).show().animate({right: 0, opacity: 1}, 200, 'swing') + } + }); +} + +// Hide a notification and set cookie as true +function hideNotification(el) { + $(el).closest('.notification').animate({height: 0, opacity: 0}, 200, 'swing', function(){ + $(this).hide(); + Cookies.set(notificationCookieName(this), true); + }); +} + +// Show notifications on page load +showNotifications() + +// Hide a notification and set see cookie to true +$('.close-notification').click(function(e) { + e.preventDefault(); + hideNotification(this); +}) \ No newline at end of file diff --git a/assets/styles/layouts/_notifications.scss b/assets/styles/layouts/_notifications.scss new file mode 100644 index 000000000..ee834a5b9 --- /dev/null +++ b/assets/styles/layouts/_notifications.scss @@ -0,0 +1,93 @@ +#docs-notifications { + position: fixed; + top: 10px; + right: 10px; + z-index: 100; + width: calc(100vw - 20px); + max-width: 500px; + transition: all .4s ease; + + .notification { + display: none; // initial hidden state + right: -50px; // initial hidden state + opacity: 0; // initial hidden state + + position: relative; + border-radius: $radius; + box-shadow: 2px 2px 6px rgba($g2-kevlar, .35); + + .notification-content { + padding: 1.25rem 2.35rem .5rem 1.25rem; + margin-bottom: 10px; + font-size: .95rem; + color: $g20-white; + } + + .close-notification { + position: absolute; + top: 8px; + right: 8px; + font-size: 1.1rem; + cursor: pointer; + transition: color .2s; + font-weight: bold; + color: rgba($g20-white, .5); + &:hover{ color: $g20-white } + } + + &.note { + @include gradient($grad-GarageBand); + a:hover { color: $gr-gypsy; } + code { color: $gr-gypsy; background: rgba($gr-gypsy, .25); } + pre { background: rgba($gr-gypsy, .25); } + } + + &.warn { + @include gradient($grad-FuyuPersimmon, 225deg); + a:hover { color: $r-basalt; } + code { color: #ffbbdd; background: rgba($r-basalt, .35); } + pre { background: rgba($r-basalt, .35); } + } + + //////////// Basic HTML element styles for notification content //////////// + + h1,h2,h3,h4,h5,h6 { + font-weight: 500; + margin: 1rem 0 .75rem; + &:first-child { margin-top: 0; } + } + + h1,h2 { font-size: 1.5rem; } + h3 { font-size: 1.25rem; } + h4 { font-size: 1.1rem; } + h5 { font-size: 1rem; } + h6 { font-size: .95rem; font-style: italic; } + + p,li { line-height: 1.4rem; } + + p { margin: 0 0 .75rem; } + + a { + font-weight: bold; + text-decoration: none; + color: $g20-white; + transition: color .2s; + } + + ul,ol { padding-left: 1.5rem; } + + code { + padding: .15rem .4rem; + border-radius: $radius; + font-weight: bold; + } + + pre { + padding: 1rem; + border-radius: $radius; + overflow: scroll; + code { background: transparent !important; } + } + + } +} \ No newline at end of file diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index a7ef67807..513530306 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -25,7 +25,8 @@ "layouts/error-page", "layouts/url-selector", "layouts/feature-callouts", - "layouts/v1-overrides"; + "layouts/v1-overrides", + "layouts/notifications"; // Import Product-specifc color schemes @import "product-overrides/telegraf", diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index 647715392..78cf16c6a 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -138,6 +138,7 @@ $grad-PastelGothic: $p-comet, $b-laser; $grad-GarageBand: $b-pool, $gr-rainforest; $grad-LowDifficulty: $b-pool, $gr-honeydew; $grad-DesertFestival: $r-curacao, $p-star; +$grad-FuyuPersimmon: $y-tiger, $r-fire; $grad-SavannaHeat: $y-topaz, $r-ruby; $grad-ScotchBonnet: $y-pineapple,$r-curacao; diff --git a/data/notifications.yaml b/data/notifications.yaml new file mode 100644 index 000000000..dd84da652 --- /dev/null +++ b/data/notifications.yaml @@ -0,0 +1,20 @@ +# Notification data structure +# +# - id: unqiue ID for notification, cannot start with digit, no spaces, a-z and 0-9 +# level: note or warn +# scope: +# - list of URL paths to show notification on, no scope shows everywhere +# message: | +# Markdown message content. + +- id: rc0-upgrade + level: warn + scope: + - /influxdb/v2.0/ + message: | + ### InfluxDB OSS 2.0 release candidate 0 + + **InfluxDB OSS v2.0.rc0** includes **breaking changes** that require a manual + upgrade from all alpha and beta versions. For information, see: + + [Upgrade to InfluxDB OSS v2.0.rc0](#) \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 1b3228328..446a0db01 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -9,6 +9,9 @@ {{ partial "footer/search.html" . }} + + {{ partial "footer/notifications.html" . }} + {{ partial "footer/javascript.html" . }} diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 56ad03440..97df84c1d 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -3,7 +3,8 @@ {{ $searchInteractions := resources.Get "js/search-interactions.js" }} {{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }} {{ $influxdbURLs := resources.Get "js/influxdb-url.js" }} -{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }} +{{ $notifications := resources.Get "js/notifications.js" }} +{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $notifications | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}