parent
dbf67b3e27
commit
f3cc6f3e90
@ -1,16 +1,5 @@
|
|||||||
{
|
{
|
||||||
"/public/js/spritemap.js": "/public/js/spritemap.js?id=2dda73ecee3bb668b395026efda6524c",
|
"/public/js/spritemap.js": "/public/js/spritemap.js?id=2dda73ecee3bb668b395026efda6524c",
|
||||||
"/public/js/app.js": "/public/js/app.js?id=3af721e60a47e6147d71c98308c2b6e1",
|
"/public/js/app.js": "/public/js/app.js?id=1c9307a192e1817119e543e388f2a43b",
|
||||||
"/public/css/styles.css": "/public/css/styles.css?id=d8096bd2ff84ae29cb0ecf810064b218",
|
"/public/css/styles.css": "/public/css/styles.css?id=72a43d98017bdbcb83928c41f6289210"
|
||||||
"/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"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
@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