diff --git a/wherehows-web/app/components/dataset-author.js b/wherehows-web/app/components/dataset-author.js index 6f33694714..b2dbd45167 100644 --- a/wherehows-web/app/components/dataset-author.js +++ b/wherehows-web/app/components/dataset-author.js @@ -60,7 +60,7 @@ export default Component.extend({ removeFromSourceMessage, init() { - this._super(...arguments); + this._super(...Array.from(arguments)); // Sets a reference to the userNamesResolver function on instantiation. // Typeahead component uses this function to resolve matches for user @@ -147,14 +147,16 @@ export default Component.extend({ * * @param {Object} currentProps the current props on the currentProps * to be updated - * @param {String|Object} props the property to update on the currentProps in + * @param {...string|object|*} args + * @prop {String|Object} args[0] the property to update on the currentProps in * the list of owners. Props can be also be an Object containing the * properties mapped to updated values. - * @param {*} [value] optional value to set on the currentProps in + * @prop {*} [args[1]] value to set on the currentProps in * the source list, required is props is map of key -> value pairs * @private */ - _updateOwner(currentProps, ...[props, value]) { + _updateOwner(currentProps, ...args) { + const [props, value] = args; const sourceOwners = get(this, 'owners'); // Create a copy so in-flight mutations are not propagates to the ui const updatingOwners = [...sourceOwners]; diff --git a/wherehows-web/app/components/notifications-service.ts b/wherehows-web/app/components/notifications-service.ts new file mode 100644 index 0000000000..00d6fa37ed --- /dev/null +++ b/wherehows-web/app/components/notifications-service.ts @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +const { Component } = Ember; + +export default Component.extend({}); diff --git a/wherehows-web/app/styles/abstracts/_functions.scss b/wherehows-web/app/styles/abstracts/_functions.scss index e5d2d7d8ef..2eea0d7dd4 100644 --- a/wherehows-web/app/styles/abstracts/_functions.scss +++ b/wherehows-web/app/styles/abstracts/_functions.scss @@ -81,3 +81,42 @@ @function set-color($color, $hue) { @return map-get(map-get($color-scheme, $color), $hue); } + +/// Gets the item spacing length value from the map $item-spacings +/// @param {Number} @spacing-unit - the type of spacing to retrieve +@function item-spacing($spacing-unit) { + /// item-spacing maps, defines the spaces between elements in application layout + /// @type Map + /// @prop {String} key - number representing a spacing type + /// @prop {Length} value - pixel length + $item-spacings: ( + 1: 4px, + 2: 8px, + 3: 12px, + 4: 16px, + 5: 24px, + 6: 32px, + 7: 48px, + 8: 64px, + 9: 96px + ); + + + // If item-spacing is passed a list, for example: + // padding: item-spacing(1 2 3 4) + // map item-spacing onto each element in the list and return it. + @if type-of($spacing-unit) == list { + $result: (); + @each $i in $spacing-unit { + $result: append($result, item-spacing($i)); + } + @return $result; + } + + // negative types + @if ($spacing-unit < 0) { + @return -1 * map-get($item-spacings, -1 * $spacing-unit); + } + + @return map-get($item-spacings, $spacing-unit); +} diff --git a/wherehows-web/app/styles/components/_navbar.scss b/wherehows-web/app/styles/components/_navbar.scss index b8155fb9d0..0abffe7cf8 100644 --- a/wherehows-web/app/styles/components/_navbar.scss +++ b/wherehows-web/app/styles/components/_navbar.scss @@ -11,6 +11,7 @@ $item-spacing: 10px; * Explicitly sets the .navbar min-height to a shared value */ min-height: $nav-min-height; + &-inverse { /** * Overrides the styling for navbar @@ -18,6 +19,7 @@ $item-spacing: 10px; background-color: $brand-color; border-color: $brand-color; } + .navbar-nav { > .active { /** diff --git a/wherehows-web/app/styles/components/notifications/_all.scss b/wherehows-web/app/styles/components/notifications/_all.scss index d4bd6fb992..f41ca3a928 100644 --- a/wherehows-web/app/styles/components/notifications/_all.scss +++ b/wherehows-web/app/styles/components/notifications/_all.scss @@ -1,2 +1,4 @@ @import "notification-dot"; @import "action-notifications"; +@import "notification-toast"; +@import "notification-confirm-modal"; diff --git a/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss b/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss new file mode 100644 index 0000000000..1d29d7b59b --- /dev/null +++ b/wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss @@ -0,0 +1,51 @@ +/// Defines the styles for the notification confirm modal +/// Includes 3 structural elements: __header, __content, __footer +.notification-confirm-modal { + box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 12px 18px 1px rgba(0, 0, 0, .2); + position: relative; + display: flex; + flex-direction: column; + border-radius: 2px; + overflow: auto; + background-color: set-color(white, base); + max-height: calc(100vh - 64px); + min-height: 48px; + width: 520px; + + &__header, + &__content, + &__footer { + padding: item-spacing(2 4); + } + + &__header { + border-bottom: 1px solid rgba(0, 0, 0, .15); + } + + &__heading-text { + margin-top: 0; + } + + &__footer { + border-top: 1px solid rgba(0, 0, 0, .15); + display: flex; + justify-content: flex-end; + + button + button { + margin-left: item-spacing(2); + } + } +} + +.notification-confirm-modal-overlay { + position: fixed; + top: 0; + left: 0; + z-index: z('modal'); + display: flex; + height: 100vh; + width: 100vw; + align-items: center; + justify-content: center; + background-color: rgba(41, 39, 36, 0.75); +} diff --git a/wherehows-web/app/styles/components/notifications/_notification-toast.scss b/wherehows-web/app/styles/components/notifications/_notification-toast.scss new file mode 100644 index 0000000000..19f43a1af5 --- /dev/null +++ b/wherehows-web/app/styles/components/notifications/_notification-toast.scss @@ -0,0 +1,66 @@ +/// Defines the styles for the notification toast component +/// Contains the states --info, --success, --error +/// Also includes a __dismiss element when applicable i.e.shown +.notification-toast { + position: fixed; + text-align: left; + border-radius: 2px; + display: block; + width: 400px; + z-index: z('toast'); + bottom: item-spacing(7); + left: item-spacing(6); + background: set-color(white, base); + padding: 0; + overflow: hidden; + height: 96px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 6px 9px rgba(0, 0, 0, .2); + margin-top: 12px; + + &__content { + overflow: hidden; + height: 100%; + padding: item-spacing(4 6 4 8); + + &::before { + content: ''; + height: 100%; + width: 48px; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + &--info { + &::before { + background-color: set-color(grey, light); + } + } + + &--error { + &::before { + background-color: set-color(red, red5); + } + } + + &--success { + &::before { + background-color: set-color(green, green5); + } + } + } + + &__dismiss { + background-color: transparent; + border-radius: 0; + border: 0; + height: 100%; + position: absolute; + right: 0; + top: 0; + padding: 0; + width: 48px; + z-index: 1; + } +} diff --git a/wherehows-web/app/templates/application.hbs b/wherehows-web/app/templates/application.hbs index 40e4e545d5..030d9037ca 100644 --- a/wherehows-web/app/templates/application.hbs +++ b/wherehows-web/app/templates/application.hbs @@ -1,5 +1,6 @@ {{#if session.isAuthenticated}} {{partial "navbar"}} + {{#hero-container}}
Search for datasets, metrics and flows @@ -8,9 +9,12 @@ {{search-bar-form didSearch=(action "didSearch")}} {{/hero-container}} +
{{partial "main"}}
+ + {{notifications-service service=notifications}} {{else}} {{outlet "login"}} {{/if}}