diff --git a/front/core/components/chip/style.scss b/front/core/components/chip/style.scss index 3778c62b9..974a55a82 100644 --- a/front/core/components/chip/style.scss +++ b/front/core/components/chip/style.scss @@ -12,6 +12,15 @@ vn-chip { max-width: 100%; box-sizing: border-box; + &.small { + height: 1.5em; + + & > div { + padding: 0.6em; + font-size: 0.8rem; + } + } + &.colored { background-color: $color-main; color: $color-font-bg; diff --git a/front/core/components/snackbar/snackbar.js b/front/core/components/snackbar/snackbar.js index 2c794bdae..9eaf42bc3 100644 --- a/front/core/components/snackbar/snackbar.js +++ b/front/core/components/snackbar/snackbar.js @@ -63,13 +63,54 @@ export default class Controller extends Component { show(data) { this.actionHandler = data.actionHandler; - let shape = this.createShape(data); + let shape; - setTimeout(() => - this.hide(shape), data.timeout || 3000); + const lastShape = this.lastShape; + const lastShapeData = lastShape && lastShape.data; + const isEqual = lastShape && (lastShapeData.shapeType == data.shapeType && lastShapeData.message == data.message); - setTimeout(() => - shape.classList.add('shown'), 30); + if (this.lastShape && isEqual) { + shape = this.lastShape.element; + + const shapeText = shape.querySelector('.text'); + let chip = shapeText.querySelector('vn-chip'); + + if (chip) { + const text = chip.querySelector('span'); + const number = parseInt(text.innerHTML); + + text.innerHTML = number + 1; + } else { + chip = document.createElement('vn-chip'); + chip.setAttribute('class', 'warning small'); + let parent = document.createElement('div'); + let span = document.createElement('span'); + let text = document.createTextNode(0); + span.append(text); + parent.append(span); + chip.append(parent); + + shapeText.appendChild(chip); + } + + if (this.hideTimeout) + clearTimeout(this.hideTimeout); + } else { + shape = this.createShape(data); + + setTimeout(() => + shape.classList.add('shown'), 30); + } + + this.hideTimeout = setTimeout(() => { + this.hide(shape); + this.lastShape = null; + }, data.timeout || 3000); + + this.lastShape = { + data: data, + element: shape + }; } /** diff --git a/front/core/components/snackbar/style.scss b/front/core/components/snackbar/style.scss index e7c073b0c..91f3619da 100644 --- a/front/core/components/snackbar/style.scss +++ b/front/core/components/snackbar/style.scss @@ -19,10 +19,17 @@ vn-snackbar .shape { border-radius: .2em; margin-bottom: 15px; color: white; - padding: 1em; + padding: 0.8em; - &.text { - text-align: center + & > .text { + position: relative; + text-align: center; + + vn-chip { + position: absolute; + left: -1.5em; + top: -1.5em; + } } &.shown {