{{ $t('action') }}:
{{ action.uri | readableUri }}
@@ -40,9 +41,10 @@
-
-
-
+
@@ -93,6 +95,52 @@ export default {
const lastItem = lastActionGroup.lastElementChild || lastActionGroup
historyElem.scrollTop = lastItem.offsetTop
}
+ },
+
+ onHistoryBarClick (e) {
+ const history = this.$refs.history
+ let mousePos = e.clientY
+
+ const onMouseMove = ({ clientY }) => {
+ if (!this.open) {
+ history.style.height = '0px'
+ this.open = true
+ }
+ const currentHeight = history.offsetHeight
+ const nextSize = currentHeight + (mousePos - clientY)
+ if (nextSize < 10 && nextSize < currentHeight) {
+ // Close the console and reset its size if the user reduce it to less than 10px.
+ mousePos = e.clientY
+ history.style.height = null
+ onMouseUp()
+ } else {
+ history.style.height = nextSize + 'px'
+ mousePos = clientY
+ }
+ }
+
+ // Delay the mouse move listener to distinguish a click from a drag.
+ const listenToMouseMove = setTimeout(() => {
+ history.style.height = history.offsetHeight + 'px'
+ history.classList.remove('with-max')
+ window.addEventListener('mousemove', onMouseMove)
+ }, 200)
+
+ const onMouseUp = () => {
+ // Toggle opening if no mouse movement
+ if (mousePos === e.clientY) {
+ // add a max-height class if the box's height is not custom
+ if (!history.style.height) {
+ history.classList.add('with-max')
+ }
+ this.open = !this.open
+ }
+ clearTimeout(listenToMouseMove)
+ window.removeEventListener('mousemove', onMouseMove)
+ window.removeEventListener('mouseup', onMouseUp)
+ }
+
+ window.addEventListener('mouseup', onMouseUp)
}
},
@@ -127,16 +175,19 @@ export default {
}
}
-#history {
- overflow-y: auto;
- max-height: 30vh;
-}
-
-#collapse {
+#console-collapse {
// disable collapse animation
transition: none !important;
}
+#history {
+ overflow-y: auto;
+
+ &.with-max {
+ max-height: 30vh;
+ }
+}
+
.list-group-item {
font-size: $font-size-sm;
padding: $tooltip-padding-y $tooltip-padding-x;