You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.5 KiB
88 lines
2.5 KiB
<app-sidebar>
|
|
<div class={ getCssClasses() }>
|
|
<div class="sidebar__inner">
|
|
|
|
<!-- header -->
|
|
<div class="bar">
|
|
<div class="bar__main">
|
|
<slot name="title" />
|
|
</div>
|
|
<div class="bar__end">
|
|
<button class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
|
|
<svg class="icon fill-danger fill-text-hover" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div class="sidebar__body">
|
|
<slot name="form" />
|
|
<app-loading loading={ props.loading }></app-loading>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div class="sidebar__footer">
|
|
<button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading }>
|
|
Save
|
|
<svg class="icon fill-success p-left-3" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-check"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading } close>
|
|
Save and Close
|
|
<svg class="icon fill-success p-left-3" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import * as riot from 'riot'
|
|
|
|
import AppLoading from './loading.riot'
|
|
riot.register('app-loading', AppLoading)
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
handleClose()
|
|
{
|
|
this.props.close()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
getCssClasses()
|
|
{
|
|
const classes = [
|
|
'sidebar'
|
|
]
|
|
|
|
if (this.props.open === true) {
|
|
classes.push('sidebar--open')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</app-sidebar> |