parent
dbf67b3e27
commit
f3cc6f3e90
@ -1,16 +1,5 @@
|
||||
{
|
||||
"/public/js/spritemap.js": "/public/js/spritemap.js?id=2dda73ecee3bb668b395026efda6524c",
|
||||
"/public/js/app.js": "/public/js/app.js?id=3af721e60a47e6147d71c98308c2b6e1",
|
||||
"/public/css/styles.css": "/public/css/styles.css?id=d8096bd2ff84ae29cb0ecf810064b218",
|
||||
"/public/css/demo.html": "/public/css/demo.html?id=a54a5d205e3152fb64b33dda63ffa555",
|
||||
"/public/css/IBMPlexMono-Bold.eot": "/public/css/IBMPlexMono-Bold.eot?id=ef1fadf711db80a00542b202ab14f7ee",
|
||||
"/public/css/IBMPlexMono-Bold.ttf": "/public/css/IBMPlexMono-Bold.ttf?id=e46cace25a93f48a2ec32800717827cb",
|
||||
"/public/css/IBMPlexMono-Bold.woff": "/public/css/IBMPlexMono-Bold.woff?id=8864bd7cb954c4646045e3fc0bdec90c",
|
||||
"/public/css/IBMPlexMono-Bold.woff2": "/public/css/IBMPlexMono-Bold.woff2?id=c6d3f08fe7a9fecab40d748b98c87cc5",
|
||||
"/public/css/IBMPlexMono.eot": "/public/css/IBMPlexMono.eot?id=d68f064d6b86ff47b38ad486a3362d82",
|
||||
"/public/css/IBMPlexMono.ttf": "/public/css/IBMPlexMono.ttf?id=60d8ae961dba3289c1d2d54e0b85c9b7",
|
||||
"/public/css/IBMPlexMono.woff": "/public/css/IBMPlexMono.woff?id=18a7a5a76b4176759e2e1b3e674a7f82",
|
||||
"/public/css/IBMPlexMono.woff2": "/public/css/IBMPlexMono.woff2?id=428bd06c5eb0362494016994c26188b4",
|
||||
"/public/css/OFL.txt": "/public/css/OFL.txt?id=5c7bb1d9d37e52d30b53224261c955b2",
|
||||
"/public/css/stylesheet.css": "/public/css/stylesheet.css?id=a3e561da46246c3c582cddec544ad25f"
|
||||
"/public/js/app.js": "/public/js/app.js?id=1c9307a192e1817119e543e388f2a43b",
|
||||
"/public/css/styles.css": "/public/css/styles.css?id=72a43d98017bdbcb83928c41f6289210"
|
||||
}
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
<app-loading>
|
||||
<div class="loading-wrapper" if={ props.loading }>
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
</app-loading>
|
||||
@ -0,0 +1,115 @@
|
||||
<app-notification>
|
||||
<div class="toast-wrapper toast-wrapper--right" if={ state.items.length > 0 }>
|
||||
<div
|
||||
id={ item.id } class={ item.classes.join(' ') }
|
||||
each={ item in state.items }
|
||||
onclick={ (event) => { this.handleClick(event, item) } }>
|
||||
|
||||
<div class="toast__body">
|
||||
{ item.message }
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import notificationStore from './../stores/notification'
|
||||
|
||||
/**
|
||||
* notification
|
||||
*
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.tentakelfabrik.de/herrhase/shiny-dashboard
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
items: [],
|
||||
timeout: 2500
|
||||
},
|
||||
|
||||
/**
|
||||
* on mounted
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {object} state
|
||||
*
|
||||
*/
|
||||
onMounted(props, state)
|
||||
{
|
||||
// adding service for notifications and listen to "update"
|
||||
notificationStore.on('update', (item) => {
|
||||
|
||||
// adding attributes
|
||||
item.id = 'toast-' + uuidv4()
|
||||
item.classes = [
|
||||
'toast',
|
||||
'toast--' + item.type
|
||||
]
|
||||
|
||||
// create timeout to remove notification
|
||||
item.timeout = setTimeout(() => {
|
||||
this.removeItem(item)
|
||||
}, this.state.timeout)
|
||||
|
||||
this.state.items.push(item)
|
||||
this.update()
|
||||
|
||||
// add animation
|
||||
requestAnimationFrame(() => {
|
||||
this.$('#' + item.id).classList.add('toast--animation')
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* remove single item
|
||||
*
|
||||
*
|
||||
* @param {object} item
|
||||
*
|
||||
*/
|
||||
removeItem(item)
|
||||
{
|
||||
// adding event if animationend remove html element
|
||||
this.$('#' + item.id).addEventListener('transitionend', () => {
|
||||
|
||||
// find item in state and remove it
|
||||
for (let i = 0; i < this.state.items.length; i++) {
|
||||
if (this.state.items[i].id === item.id) {
|
||||
clearTimeout(this.state.items[i].timeout)
|
||||
this.state.items.splice(i, 1)
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
})
|
||||
|
||||
// add animation
|
||||
requestAnimationFrame(() => {
|
||||
this.$('#' + item.id).classList.remove('toast--animation')
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* remove item by clicked on it
|
||||
*
|
||||
* @param {[type]} event
|
||||
* @param {[type]} item
|
||||
*
|
||||
*/
|
||||
handleClick(event, item)
|
||||
{
|
||||
this.removeItem(item)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</app-notification>
|
||||
@ -0,0 +1,49 @@
|
||||
import observable from '@riotjs/observable'
|
||||
|
||||
/**
|
||||
* NotificationService
|
||||
*
|
||||
*
|
||||
*/
|
||||
export default observable({
|
||||
|
||||
SUCCESS: 'success',
|
||||
DANGER: 'danger',
|
||||
INFO: 'info',
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
success(message) {
|
||||
this._add(message, this.SUCCESS)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
danger(message) {
|
||||
this._add(message, this.DANGER)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
info(message) {
|
||||
this._add(message, this.INFO)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {[type]} message [description]
|
||||
* @param {[type]} type [description]
|
||||
*/
|
||||
_add(message, type) {
|
||||
this.trigger('update', {
|
||||
message: message,
|
||||
type: type
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -1,21 +0,0 @@
|
||||
import observable from '@riotjs/observable'
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
const sidebarDispatcher = {
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onAfterSuccess(data)
|
||||
{
|
||||
this.trigger('sidebar-success', data)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default observable(sidebarDispatcher)
|
||||
@ -0,0 +1,7 @@
|
||||
// format list of errors
|
||||
.field-error {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
.loading-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
.loading {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff45;
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,6 @@
|
||||
@import
|
||||
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
|
||||
|
||||
'@tiny-components/plain-ui/src/scss/plain-ui',
|
||||
|
||||
'components/field-error',
|
||||
'components/loading';
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 66 KiB |
Loading…
Reference in new issue