diff --git a/website/client/config/storybook/config.js b/website/client/config/storybook/config.js index ffcb7d4e98..adbe37b67f 100644 --- a/website/client/config/storybook/config.js +++ b/website/client/config/storybook/config.js @@ -2,38 +2,9 @@ import { configure } from '@storybook/vue'; import './margin.css'; import '../../src/assets/scss/index.scss'; -import '../../src/assets/css/sprites.css'; -import '../../src/assets/css/sprites/spritesmith-main-0.css'; -import '../../src/assets/css/sprites/spritesmith-main-1.css'; -import '../../src/assets/css/sprites/spritesmith-main-2.css'; -import '../../src/assets/css/sprites/spritesmith-main-3.css'; -import '../../src/assets/css/sprites/spritesmith-main-4.css'; -import '../../src/assets/css/sprites/spritesmith-main-5.css'; -import '../../src/assets/css/sprites/spritesmith-main-6.css'; -import '../../src/assets/css/sprites/spritesmith-main-7.css'; -import '../../src/assets/css/sprites/spritesmith-main-8.css'; -import '../../src/assets/css/sprites/spritesmith-main-9.css'; -import '../../src/assets/css/sprites/spritesmith-main-10.css'; -import '../../src/assets/css/sprites/spritesmith-main-11.css'; -import '../../src/assets/css/sprites/spritesmith-main-12.css'; -import '../../src/assets/css/sprites/spritesmith-main-13.css'; -import '../../src/assets/css/sprites/spritesmith-main-14.css'; -import '../../src/assets/css/sprites/spritesmith-main-15.css'; -import '../../src/assets/css/sprites/spritesmith-main-16.css'; -import '../../src/assets/css/sprites/spritesmith-main-17.css'; -import '../../src/assets/css/sprites/spritesmith-main-18.css'; -import '../../src/assets/css/sprites/spritesmith-main-19.css'; -import '../../src/assets/css/sprites/spritesmith-main-20.css'; -import '../../src/assets/css/sprites/spritesmith-main-21.css'; -import '../../src/assets/css/sprites/spritesmith-main-22.css'; -import '../../src/assets/css/sprites/spritesmith-main-23.css'; -import '../../src/assets/css/sprites/spritesmith-main-24.css'; -import '../../src/assets/css/sprites/spritesmith-main-25.css'; -import '../../src/assets/css/sprites/spritesmith-main-26.css'; -import '../../src/assets/css/sprites/spritesmith-main-27.css'; -import '../../src/assets/css/sprites/spritesmith-main-28.css'; -import '../../src/assets/css/sprites/spritesmith-main-29.css'; +import '../../src/assets/scss/sprites.scss'; + import Vue from 'vue'; import BootstrapVue from 'bootstrap-vue'; import StoreModule from '@/libs/store'; diff --git a/website/client/src/app.vue b/website/client/src/app.vue index 0ebc5df4dc..3904600b01 100644 --- a/website/client/src/app.vue +++ b/website/client/src/app.vue @@ -520,37 +520,5 @@ export default { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/website/client/src/assets/scss/sprites.scss b/website/client/src/assets/scss/sprites.scss new file mode 100644 index 0000000000..98434473b5 --- /dev/null +++ b/website/client/src/assets/scss/sprites.scss @@ -0,0 +1,5 @@ +@import url("../css/sprites.css"); + +@for $i from 0 through 31 { + @import url("../css/sprites/spritesmith-main-#{$i}.css"); +} diff --git a/website/client/src/components/snackbars/notification.stories.js b/website/client/src/components/snackbars/notification.stories.js new file mode 100644 index 0000000000..483bdbe070 --- /dev/null +++ b/website/client/src/components/snackbars/notification.stories.js @@ -0,0 +1,215 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { storiesOf } from '@storybook/vue'; +import { boolean, withKnobs } from '@storybook/addon-knobs'; + +import Notification from './notification'; +import Notifications from './notifications'; +import notificationsMixin from '../../mixins/notifications'; + +const stories = storiesOf('Notifications', module); + +stories.addDecorator(withKnobs); + +stories + .add('notifications overview', () => ({ + components: { + Notification, + }, + template: ` +
+
+ + +
+
+
+ `, + + data () { + const notifications = []; + + notifications.push({ + type: 'hp', + sign: '+', + text: '+2', + }); + + notifications.push({ + type: 'hp', + sign: '-', + text: '-2', + }); + + notifications.push({ + type: 'mp', + sign: '+', + text: '+2', + }); + + notifications.push({ + type: 'mp', + sign: '-', + text: '-2', + }); + + notifications.push({ + type: 'xp', + sign: '+', + text: '+12', + }); + + notifications.push({ + type: 'xp', + sign: '-', + text: '-12', + }); + + notifications.push({ + type: 'gp', + sign: '+', + text: '+12', + }); + + notifications.push({ + type: 'gp', + sign: '-', + text: '-12', + }); + + notifications.push({ + type: 'streak', + text: '12', + }); + + + notifications.push({ + type: 'damage', + sign: '+', + text: '12', + }); + + notifications.push({ + type: 'drop', + icon: 'shop_weapon_wizard_2', + text: 'Dropped something with a longer text to try', + }); + + notifications.push({ + type: 'drop', + icon: 'Pet_Egg_FlyingPig', + text: 'Dropped flying pig egg', + }); + + notifications.push({ + type: 'drop', + icon: 'Pet_Food_Strawberry', + text: 'You’ve found a Strawberry!', + }); + + notifications.push({ + type: 'info', + text: 'Info', + }); + + notifications.push({ + type: 'success', + text: 'Success!', + }); + notifications.push({ + type: 'crit', + text: 'Crit!', + }); + notifications.push({ + type: 'lvl', + text: 'Lvl Up', + }); + + notifications.push({ + type: 'error', + text: 'This is an error message. If it is too long, we can wrap to show the rest of the message', + }); + + return { + notifications, + }; + }, + props: { + showBounds: { + default: boolean('show bounds', false), + }, + }, + })) + .add('trigger notifications', () => ({ + components: { + Notifications, + }, + template: ` +
+ + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + + + +
+ `, + props: { + showBounds: { + default: boolean('show bounds', false), + }, + preventQueue: { + default: boolean('prevent removing', false), + }, + debugMode: { + default: boolean('debug mode', true), + }, + }, + data () { + return {}; + }, + mixins: [notificationsMixin], + methods: { + addNotification () { + this.text('notification!!'); + this.text('notification2!!'); + this.text('notification3!!'); + this.error('This should stay visible'); + this.text('notification4!!'); + this.exp(125); + this.damage(-2); + + this.error('This should stay visible too'); + this.text('notification5!!'); + this.exp(125); + this.damage(-2); + }, + }, + })); diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue index cc6d05eec6..0a007a4f4d 100644 --- a/website/client/src/components/snackbars/notification.vue +++ b/website/client/src/components/snackbars/notification.vue @@ -1,189 +1,211 @@ @@ -193,12 +215,13 @@ import gold from '@/assets/svg/gold.svg'; import star from '@/assets/svg/star.svg'; import mana from '@/assets/svg/mana.svg'; import sword from '@/assets/svg/sword.svg'; +import CloseIcon from '../shared/closeIcon'; export default { - props: ['notification'], + components: { CloseIcon }, + props: ['notification', 'visibleAmount'], data () { return { - timer: null, icons: Object.freeze({ health, gold, @@ -206,7 +229,6 @@ export default { mana, sword, }), - show: true, }; }, computed: { @@ -233,34 +255,12 @@ export default { return `${this.notification.type} ${this.negative}`; }, }, - watch: { - show () { - this.$store.dispatch('snackbars:remove', this.notification); - }, - }, - created () { - const timeout = ( - this.notification - && this.notification.timeout !== undefined - && this.notification.timeout !== null - ) ? this.notification.timeout : true; - - if (timeout) { - let delay = this.notification.delay || 1500; - delay += this.$store.state.notificationStore.length * 1000; - this.timer = setTimeout(() => { - this.show = false; - }, delay); - } - }, - beforeDestroy () { - clearTimeout(this.timer); - }, methods: { handleOnClick () { if (typeof this.notification.onClick === 'function') { this.notification.onClick(); } + this.$emit('clicked'); this.show = false; }, }, diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue index 3d44089a8a..bd1436cde8 100644 --- a/website/client/src/components/snackbars/notifications.vue +++ b/website/client/src/components/snackbars/notifications.vue @@ -1,14 +1,24 @@ @@ -19,40 +29,294 @@ width: 350px; z-index: 1400; // 1400 is above modal backgrounds - &-top-pos { - &-normal { - top: 65px; - } + top: var(--current-scrollY); - &-sleeping { - top: 105px; - } - } + justify-content: flex-end; + display: flex; + } + + .animations-holder { + position: relative; + display: block; + } + + .notification-item { + transition: transform 0.25s ease-in, opacity 0.25s ease-in; + } + + .notifications-move { + // transition: transform .5s; + } + + .notifications-enter-active { + // transition: opacity .5s; + } + + .notifications-leave-active { + position: absolute; + right: 0; + } + + .notifications-enter, + .notifications-leave-to { + opacity: 0; + right: 0; }