[age-viewer] branch main updated: Auto resizing textarea (#53)

[hb...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hbshin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/age-viewer.git


The following commit(s) were added to refs/heads/main by this push:
     new 1fed6ea  Auto resizing textarea (#53)
1fed6ea is described below

commit 1fed6ea0b9587bce1bbd0b03c766b286c4fec663
Author: MJinH <97...@users.noreply.github.com>
AuthorDate: Sat Nov 26 03:19:41 2022 -0800

    Auto resizing textarea (#53)
    
    * added hover effect on refresh/close buttons; added block element to have fixed size of select box and prevent text from taking more than 1 line when graph name is short; modified css of editor for auto-expanding textarea; removed white space in new line when pressing enter after copying and pasting
    
    * changed max-height to 600px; resize grabber icon on the bottom right coner was missing
    
    * select box which grap to show metadata information for
    
    * Revert "select box which grap to show metadata information for"
    
    This reverts commit 9e39d63f8cc0f77e3864a68528c5116caa929805.
    
    * removed max-height; added scroll bar to editor div so that a user can move the content up and down when having a lot of text inside
    
    Co-authored-by: moon19960501@gmail.com <we...@gmail.com>
    Co-authored-by: Hanbyeol Shin /  David Shin / 신한별 <76...@users.noreply.github.com>
---
 .../components/editor/presentations/CodeMirrorWrapper.jsx  |  6 ++++++
 .../components/sidebar/presentations/SidebarComponents.jsx |  1 +
 frontend/src/static/style.css                              | 14 +++++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/editor/presentations/CodeMirrorWrapper.jsx b/frontend/src/components/editor/presentations/CodeMirrorWrapper.jsx
index 02d6ecf..ab70aa5 100644
--- a/frontend/src/components/editor/presentations/CodeMirrorWrapper.jsx
+++ b/frontend/src/components/editor/presentations/CodeMirrorWrapper.jsx
@@ -39,6 +39,9 @@ const CodeMirrorWrapper = ({
         mode: 'cypher',
         tabSize: 4,
         lineNumbers: true,
+        spellcheck: false,
+        autocorrect: false,
+        autocapitalize: false,
         lineNumberFormatter: () => '$',
         extraKeys: {
           'Shift-Enter': (editor) => {
@@ -88,6 +91,9 @@ const CodeMirrorWrapper = ({
             editor.setValue(commandHistory[commandHistoryIndex + 1]);
             setCommandHistoryIndex(commandHistoryIndex + 1);
           },
+          Enter: (editor) => {
+            editor.replaceSelection('\n', 'end');
+          },
         },
       }}
       onChange={(editor) => {
diff --git a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
index 977ed10..5cfa812 100644
--- a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
+++ b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
@@ -94,6 +94,7 @@ const GraphSelectDropdown = ({
 }) => {
   const selectStyle = {
     marginTop: '1rem',
+    display: 'block',
   };
   const handleGraphClick = (e) => {
     const graphName = graphs.find((graph) => graph[1] === e)[0];
diff --git a/frontend/src/static/style.css b/frontend/src/static/style.css
index 9566da7..8ed65f8 100644
--- a/frontend/src/static/style.css
+++ b/frontend/src/static/style.css
@@ -201,6 +201,7 @@ a[data-toggle="collapse"] {
     right: 0;
     z-index: 0;
     padding: 20px 15px 0 15px;
+    overflow-y: auto;
 }
 
 .editor {
@@ -223,9 +224,10 @@ a[data-toggle="collapse"] {
     margin-top: 1px;
     min-height: 60px;
     padding: 0;
+    border: 1px solid;
     resize: vertical;
     overflow: auto;
-    border: 1px solid;
+    height:auto;
 }
 
 .editor-button-wrapper {
@@ -253,6 +255,10 @@ a[data-toggle="collapse"] {
     padding-top: 25px;
 }
 
+.CodeMirror-hscrollbar {
+    height: 10px;
+}
+
 /* ---------------------------------------------------
     FRAME TAB STYLE CONTROLL
 ----------------------------------------------------- */
@@ -749,6 +755,9 @@ textarea.editorTextarea
     position:relative;
     top:1px;
 }
+.close_session:hover {
+    opacity: 0.6;
+}
 
 .refresh_button {
     background-color: #18CCC5;
@@ -764,4 +773,7 @@ textarea.editorTextarea
 .refresh_button:active {
     position:relative;
     top:1px;
+}
+.refresh_button:hover {
+    opacity: 0.6;
 }
\ No newline at end of file