From 6ba00d274c425d4a370d49c7859d28b2b3bedc33 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 24 May 2017 16:01:28 -0700 Subject: [PATCH] Slightly expand the input when the user focuses on it, unless they've already resized it. --- src/core_plugins/timelion/public/app.less | 2 +- .../directives/timelion_expression_input.html | 7 +-- .../directives/timelion_expression_input.js | 53 ++++++++++++++++++- src/core_plugins/timelion/public/index.html | 14 +++-- ui_framework/components/_mixins.scss | 4 ++ ui_framework/dist/ui_framework.css | 19 ++++++- 6 files changed, 84 insertions(+), 15 deletions(-) diff --git a/src/core_plugins/timelion/public/app.less b/src/core_plugins/timelion/public/app.less index a2e6a9aef0118..75385f4513c49 100644 --- a/src/core_plugins/timelion/public/app.less +++ b/src/core_plugins/timelion/public/app.less @@ -30,7 +30,7 @@ * 1. Anchor suggestions beneath input. * 2. Allow for option of positioning suggestions absolutely. */ -.timelionSearchInputContainer { +.timelionExpressionInputContainer { flex: 1 1 auto; display: flex; flex-direction: column; /* 1 */ diff --git a/src/core_plugins/timelion/public/directives/timelion_expression_input.html b/src/core_plugins/timelion/public/directives/timelion_expression_input.html index ab7e3b04c421c..b6d24cf499b15 100644 --- a/src/core_plugins/timelion/public/directives/timelion_expression_input.html +++ b/src/core_plugins/timelion/public/directives/timelion_expression_input.html @@ -1,16 +1,17 @@ -
+
{ scope.functionSuggestions.hide(); + + if (!hasExpressionInputResized) { + expressionInput.css('height', ''); + } + }; + + // We have to track resizing of the textarea by polling and comparing change in height because + // there is no native browser 'resize' event for textareas. + function checkIfExpressionInputIsResizing() { + const newExpressionInputHeight = getExpressionInputHeight(); + + if (newExpressionInputHeight !== expressionInputHeight) { + hasExpressionInputResized = true; + } + + expressionInputHeight = newExpressionInputHeight; + } + + scope.onMouseDownInput = () => { + isExpressionInputResizing = true; + checkIfExpressionInputIsResizingInterval = $interval(checkIfExpressionInputIsResizing, 100); }; + function onMouseUpDocument() { + if (isExpressionInputResizing) { + checkIfExpressionInputIsResizing(); + $interval.cancel(checkIfExpressionInputIsResizingInterval); + isExpressionInputResizing = false; + } + } + + $document.on('mouseup', onMouseUpDocument); + scope.onKeyDownInput = e => { // If we've pressed any non-navigational keys, then the user has typed something and we // can exit early without doing any navigation. The keyup handler will pull up suggestions. @@ -214,6 +261,10 @@ app.directive('timelionExpressionInput', function ($http, $timeout) { insertSuggestionIntoExpression(index); }; + scope.$on('$destroy', () => { + $document.off('mouseup', onMouseUpDocument); + }); + init(); } }; diff --git a/src/core_plugins/timelion/public/index.html b/src/core_plugins/timelion/public/index.html index 4290a57ae967b..2bce1a2defd71 100644 --- a/src/core_plugins/timelion/public/index.html +++ b/src/core_plugins/timelion/public/index.html @@ -27,14 +27,12 @@ class="kuiFieldGroup kuiFieldGroup--alignTop kuiVerticalRhythm" >
-
- -
+
diff --git a/ui_framework/components/_mixins.scss b/ui_framework/components/_mixins.scss index b5adaf0058a44..e8cc3beecfd10 100644 --- a/ui_framework/components/_mixins.scss +++ b/ui_framework/components/_mixins.scss @@ -140,12 +140,16 @@ } } +/** + * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height. + */ @mixin formControl($borderRadius: $globalBorderRadius) { @include formControlBase; background-color: #ffffff; border: 1px solid $globalFormControlBorderColor; border-radius: $borderRadius; transition: border-color $globalInputTransitionTiming; + min-height: 30px; /* 1 */ &:invalid { @include formControlInvalid; diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 6cada3ddee9ae..da722d15a72a4 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -24,6 +24,9 @@ /** * Nothing fancy, just the basics so we can use this for both regular and static controls. */ +/** + * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height. + */ /** * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet. * We only want invalid inputs to appear invalid after the user has had a chance to interact @@ -843,6 +846,8 @@ body { border: 1px solid #DEDEDE; border-radius: 4px; transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ padding-left: 28px; /* 1 */ width: 100%; @@ -879,6 +884,8 @@ body { border: 1px solid #DEDEDE; border-radius: 4px; transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ padding-right: 30px; /* 2 */ background-image: url('data:image/svg+xml;utf8,'); @@ -946,7 +953,9 @@ body { background-color: #ffffff; border: 1px solid #DEDEDE; border-radius: 4px; - transition: border-color 0.1s linear; } + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ } .theme-dark .kuiTextArea { color: #cecece; } .kuiTextArea:invalid:not(.ng-untouched) { @@ -984,7 +993,9 @@ body { background-color: #ffffff; border: 1px solid #DEDEDE; border-radius: 4px; - transition: border-color 0.1s linear; } + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ } .theme-dark .kuiTextInput { color: #cecece; } .kuiTextInput:invalid:not(.ng-untouched) { @@ -1794,6 +1805,8 @@ body { border: 1px solid #DEDEDE; border-radius: 4px; transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ -webkit-box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; @@ -1871,6 +1884,8 @@ body { border: 1px solid #DEDEDE; border-radius: 4px; transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ padding-right: 30px; /* 2 */ background-image: url('data:image/svg+xml;utf8,');