Make notifications widget flexible (#5791)
* Make notifications widget flexible * fix
This commit is contained in:
parent
1f8334dcb7
commit
db24dddeff
3 changed files with 53 additions and 9 deletions
|
@ -929,7 +929,7 @@ export default Vue.extend({
|
|||
> div {
|
||||
position: sticky;
|
||||
top: calc(#{$header-height} + var(--margin));
|
||||
height: calc(100vh - #{$header-height} - var(--margin) * 2);
|
||||
height: calc(100vh - #{$header-height} - var(--margin));
|
||||
|
||||
&.edit {
|
||||
overflow: auto;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="mkw-notifications">
|
||||
<mk-container :show-header="!props.compact">
|
||||
<div class="mkw-notifications" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`">
|
||||
<mk-container :show-header="!props.compact" class="container">
|
||||
<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
|
||||
|
||||
<div style="height: 300px; overflow: auto; background: var(--bg);">
|
||||
<div class="tl">
|
||||
<x-notifications/>
|
||||
</div>
|
||||
</mk-container>
|
||||
|
@ -17,10 +17,14 @@ import XNotifications from '../components/notifications.vue';
|
|||
import define from './define';
|
||||
import i18n from '../i18n';
|
||||
|
||||
const basisSteps = [25, 50, 75, 100]
|
||||
const previewHeights = [200, 300, 400, 500]
|
||||
|
||||
export default define({
|
||||
name: 'notifications',
|
||||
props: () => ({
|
||||
compact: false
|
||||
compact: false,
|
||||
basisStep: 0
|
||||
})
|
||||
}).extend({
|
||||
i18n,
|
||||
|
@ -36,11 +40,51 @@ export default define({
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
basis(): number {
|
||||
return basisSteps[this.props.basisStep] || 25
|
||||
},
|
||||
|
||||
previewHeight(): number {
|
||||
return previewHeights[this.props.basisStep] || 200
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
func() {
|
||||
this.props.compact = !this.props.compact;
|
||||
if (this.props.basisStep === basisSteps.length - 1) {
|
||||
this.props.basisStep = 0
|
||||
this.props.compact = !this.props.compact;
|
||||
} else {
|
||||
this.props.basisStep += 1
|
||||
}
|
||||
|
||||
this.save();
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mkw-notifications {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
min-height: 0; // https://www.gwtcenter.com/min-height-required-on-firefox-flexbox
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tl {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mkw-timeline" :style="`flex-basis: ${basis}%; height: ${previewHeight}px;`">
|
||||
<div class="mkw-timeline" :style="`flex-basis: calc(${basis}% - var(--margin)); height: ${previewHeight}px;`">
|
||||
<mk-container :show-header="!props.compact" class="container">
|
||||
<template #header>
|
||||
<button @click="choose" class="_button">
|
||||
|
@ -61,7 +61,7 @@ export default define({
|
|||
},
|
||||
|
||||
previewHeight(): number {
|
||||
return previewHeights[this.props.basisStep] || 300
|
||||
return previewHeights[this.props.basisStep] || 200
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in a new issue