Merge pull request #480 from telamonian/resizable-commit-box

resizable commit message input box

Author: fcollonval

package.json

@@ -63,6 +63,7 @@
     "nbdime": "~5.0.1",
     "react": "~16.8.4",
     "react-dom": "~16.8.4",
+    "react-textarea-autosize": "^7.1.2",
     "typestyle": "^2.0.1"
   },
   "devDependencies": {
@@ -75,6 +76,7 @@
     "@types/jest": "^24",
     "@types/react": "~16.8.13",
     "@types/react-dom": "~16.0.5",
+    "@types/react-textarea-autosize": "^4.3.5",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.7.0",
     "husky": "1.3.1",

src/components/CommitBox.tsx

@@ -1,5 +1,9 @@
+import { ISettingRegistry } from '@jupyterlab/coreutils';
+
 import * as React from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 import { classes } from 'typestyle';
+
 import {
   stagedCommitButtonDisabledStyle,
   stagedCommitButtonReadyStyle,
@@ -12,6 +16,7 @@ import {
 export interface ICommitBoxProps {
   hasFiles: boolean;
   commitFunc: (message: string) => Promise<void>;
+  settings: ISettingRegistry.ISettings;
 }
 
 export interface ICommitBoxState {
@@ -73,16 +78,13 @@ export class CommitBox extends React.Component<
         className={stagedCommitStyle}
         onKeyPress={event => this.onKeyPress(event)}
       >
-        <textarea
+        <TextareaAutosize
           className={classes(textInputStyle, stagedCommitMessageStyle)}
           disabled={!this.props.hasFiles}
-          placeholder={
-            this.props.hasFiles
-              ? 'Input message to commit staged changes'
-              : 'Stage your changes before commit'
-          }
-          value={this.state.value}
+          minRows={2}
           onChange={this.handleChange}
+          placeholder={this._placeholder()}
+          value={this.state.value}
         />
         <input
           className={this.commitButtonStyle(this.props.hasFiles)}
@@ -97,4 +99,16 @@ export class CommitBox extends React.Component<
       </form>
     );
   }
+
+  protected _placeholder = (): string => {
+    if (this.props.settings.composite['simpleStaging']) {
+      return this.props.hasFiles
+        ? 'Input message to commit selected changes'
+        : 'Select changes to enable commit';
+    } else {
+      return this.props.hasFiles
+        ? 'Input message to commit staged changes'
+        : 'Stage your changes before commit';
+    }
+  };
 }

src/components/FileList.tsx

@@ -512,6 +512,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           <CommitBox
             hasFiles={this.markedFiles.length > 0}
             commitFunc={this.commitAllMarkedFiles}
+            settings={this.props.settings}
           />
           <div>
             <GitStageSimple
@@ -531,6 +532,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           <CommitBox
             hasFiles={this.props.stagedFiles.length > 0}
             commitFunc={this.commitAllStagedFiles}
+            settings={this.props.settings}
           />
           <div>
             <Staged />

src/style/BranchHeaderStyle.ts

@@ -87,17 +87,20 @@ export const branchListItemStyle = style({
   color: 'var(--jp-ui-font-color1)'
 });
 
+// need to override font-size from user agent stylesheet
 export const stagedCommitButtonStyle = style({
   backgroundColor: 'var(--jp-brand-color1)',
   backgroundImage: 'var(--jp-checkmark)',
   backgroundSize: '100%',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center',
-  color: 'white',
-  height: '42px',
-  width: '40px',
   border: '0',
-  flex: '1 1 auto'
+  color: 'white',
+  flex: '1 1 auto',
+  fontSize: 'var(--jp-ui-font-size1)',
+  height: 'calc(2 * (1.25em - 1px))',
+  padding: 'calc(var(--jp-code-padding) + 1px) 7px',
+  width: '40px'
 });
 
 export const stagedCommitButtonReadyStyle = style({
@@ -115,21 +118,22 @@ export const textInputStyle = style({
 export const stagedCommitStyle = style({
   resize: 'none',
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
   margin: '8px'
 });
 
+// need to override font-size from user agent stylesheet
 export const stagedCommitMessageStyle = style({
-  width: '75%',
-  fontWeight: 300,
-  height: '32px',
-  overflowX: 'auto',
+  backgroundColor: 'var(--jp-layout-color1)',
   border: 'var(--jp-border-width) solid var(--jp-border-color2)',
+  color: 'var(--jp-ui-font-color0)',
+  fontSize: 'var(--jp-ui-font-size1)',
+  fontWeight: 300,
   flex: '20 1 auto',
+  overflowX: 'auto',
+  padding: 'var(--jp-code-padding)',
   resize: 'none',
-  padding: '4px 8px',
-  backgroundColor: 'var(--jp-layout-color1)',
-  color: 'var(--jp-ui-font-color0)',
+  width: '75%',
 
   $nest: {
     '&:focus': {

src/style/GitStageStyle.ts

@@ -28,7 +28,7 @@ export const sectionAreaStyle = style({
 });
 
 export const sectionHeaderLabelStyle = style({
-  fontSize: 'var(--jp-ui-font-size)',
+  fontSize: 'var(--jp-ui-font-size1)',
   flex: '1 1 auto',
   textOverflow: 'ellipsis',
   overflow: 'hidden',

src/style/GitWidgetStyle.ts

@@ -6,5 +6,5 @@ export const gitWidgetStyle = style({
   minWidth: '300px',
   color: 'var(--jp-ui-font-color1)',
   background: 'var(--jp-layout-color1)',
-  fontSize: 'var(--jp-ui-font-size0)'
+  fontSize: 'var(--jp-ui-font-size1)'
 });

tests/test-components/CommitBox.spec.tsx

@@ -12,7 +12,8 @@ describe('CommitBox', () => {
     it('should update commit box state to be ready when changes are staged', () => {
       const box = new CommitBox({
         commitFunc: async () => {},
-        hasFiles: true
+        hasFiles: true,
+        settings: { composite: {} } as any
       });
 
       let actual = box.commitButtonStyle(true);
@@ -27,7 +28,8 @@ describe('CommitBox', () => {
     it('should update commit box state to be disabled when no changes are staged', () => {
       const box = new CommitBox({
         commitFunc: async () => {},
-        hasFiles: true
+        hasFiles: true,
+        settings: { composite: {} } as any
       });
 
       let actual = box.commitButtonStyle(false);
@@ -41,19 +43,15 @@ describe('CommitBox', () => {
     it('should be ready to commit with a message set.', () => {
       const box = new CommitBox({
         commitFunc: async () => {},
-        hasFiles: true
+        hasFiles: true,
+        settings: { composite: {} } as any
       });
-      box.setState(
-        {
-          value: 'message'
-        },
-        () => {
-          let actual = box.commitButtonStyle(true);
+      // can't use setState here, since the box hasn't actually mounted
+      box.state = { value: 'message' };
 
-          let expected = stagedCommitButtonStyle;
-          expect(actual).toEqual(expected);
-        }
-      );
+      let actual = box.commitButtonStyle(true);
+      let expected = stagedCommitButtonStyle;
+      expect(actual).toEqual(expected);
     });
   });
 });

yarn.lock

@@ -1476,6 +1476,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-textarea-autosize@^4.3.5":
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
+  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@~16.8.13", "@types/react@~16.8.18", "@types/react@~16.8.4":
   version "16.8.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.25.tgz#0247613ab58b1b11ba10fed662e1947c5f2bb89c"
@@ -5011,7 +5018,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5149,6 +5156,14 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.17.0"
 
+react-textarea-autosize@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
+  integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    prop-types "^15.6.0"
+
 react-transition-group@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"