From ed1d73d03c178451a1fe50cc75b1a1957687733d Mon Sep 17 00:00:00 2001 From: Angus Holder Date: Fri, 31 Jan 2020 06:31:02 -0800 Subject: [PATCH] Make database plugin query textarea resizable (#760) Summary: In the database plugin, make the SQL text entry box vertically-resizable to improve UX when working with longer queries. I had wanted to make it a horizontal drag-to-resize divider like in DB Browser for SQLite (see below) as that feels like more what I'd expect to find for this use-case, but it seems to be [non-trivial in HTML and CSS](https://stackoverflow.com/questions/38983039/how-to-create-vertical-drag-to-resize-divider). ![image](https://user-images.githubusercontent.com/7407345/73128656-75c4d900-3fca-11ea-966d-d02e55eee1ad.png) Side-note, is there any good existing component (in React or Flipper itself) for doing query tabs like in the above screenshot? ## Changelog Make the database SQL text box vertically-resizable Pull Request resolved: https://github.com/facebook/flipper/pull/760 Test Plan: I wrote out a long query and was able to resize the text box to view the whole thing at once ![image](https://user-images.githubusercontent.com/7407345/73128460-b111d880-3fc7-11ea-8441-a83409364b00.png) Reviewed By: jknoxville Differential Revision: D19622361 Pulled By: mweststrate fbshipit-source-id: 2be6884fda24e46c44c7d4c73ecff14571cf10ca --- src/plugins/databases/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/databases/index.js b/src/plugins/databases/index.js index ed2aea0fa..a044c39e8 100644 --- a/src/plugins/databases/index.js +++ b/src/plugins/databases/index.js @@ -1311,6 +1311,7 @@ export default class DatabasesPlugin extends FlipperPlugin< marginLeft: 16, marginTop: '1%', marginBottom: '1%', + resize: 'vertical', }} onChange={this.onQueryChanged.bind(this)} onKeyPress={this.onQueryTextareaKeyPress}