📋 ctrl-v

From 22c58b4d7d864414c599761f92212a5825003950 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sun, 10 May 2020 00:25:31 -0700 Subject: input length check and component splitting --- frontend/public/index.html | 2 +- frontend/src/components/CharLimit.js | 37 +++++++++++++++++++++++++++++++ frontend/src/components/Inputs.js | 43 +++++++++++++++++++++++++----------- frontend/src/components/PasteArea.js | 14 ++++++++++-- frontend/src/css/index.css | 3 ++- 5 files changed, 82 insertions(+), 17 deletions(-) create mode 100644 frontend/src/components/CharLimit.js diff --git a/frontend/public/index.html b/frontend/public/index.html index 1e1d637..46d87ba 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -10,7 +10,7 @@ /> - 📋 ctrl-v + ctrl-v diff --git a/frontend/src/components/CharLimit.js b/frontend/src/components/CharLimit.js new file mode 100644 index 0000000..623b378 --- /dev/null +++ b/frontend/src/components/CharLimit.js @@ -0,0 +1,37 @@ +import React from 'react'; +import styled, { css } from 'styled-components' + +// show char limit if length > half of max +const Chars = styled.p` + color: #11111100; + font-family: 'Roboto Mono', monospace; + position: absolute; + font-size: 0.8em; + writing-mode: vertical-rl; + top: 50%; + transform: translate(5em, -50%); + right: 0; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + ${props => + ((props.content.length / props.maxLength) > 0.5) && + css` + color: #111111; + `}; + + ${props => + ((props.content.length / props.maxLength) > 1) && + css` + color: #ee1111; + `}; +`; + +class CharLimit extends React.Component { + render() { + return ( + {this.props.maxLength - this.props.content.length}/{this.props.maxLength} + ); + } +} + +export default CharLimit \ No newline at end of file diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js index 777e3c6..d2238af 100644 --- a/frontend/src/components/Inputs.js +++ b/frontend/src/components/Inputs.js @@ -1,15 +1,27 @@ import React from 'react'; +import CharLimit from './CharLimit' +import styled from 'styled-components' + +const CharLimitContainer = styled.div` + position: relative; +` class TitleInput extends React.Component { render() { return ( - + + + + ); } } @@ -17,12 +29,17 @@ class TitleInput extends React.Component { class PasteInput extends React.Component { render() { return ( -

+            <CharLimitContainer>
+                <textarea
+                    name="content"
+                    placeholder="Paste your text here"
+                    value={this.props.content}
+                    onChange={this.props.onChange}
+                    className="lt-shadow" />
+                <CharLimit
+                    content={this.props.content}
+                    maxLength={this.props.maxLength} />
+            </CharLimitContainer>
         );
     }
 }
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
index fb3db64..f026ef9 100644
--- a/frontend/src/components/PasteArea.js
+++ b/frontend/src/components/PasteArea.js
@@ -13,6 +13,14 @@ class PasteArea extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    componentDidUpdate() {
+        if (this.state.title === "") {
+            document.title = `ctrl-v`;
+        } else {
+            document.title = `ctrl-v | ${this.state.title}`;
+        }
+    }
+
     handleChange(event) {
         const target = event.target;
         const name = target.name;
@@ -33,10 +41,12 @@ class PasteArea extends React.Component {
             <form onSubmit={this.handleSubmit}>
                 <TitleInput 
                     onChange={this.handleChange}
-                    value={this.state.title} />
+                    value={this.state.title}
+                    maxLength="100" />
                 <PasteInput
                     onChange={this.handleChange}
-                    content={this.state.content} />
+                    content={this.state.content}
+                    maxLength="100000" />
                 <br />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
             </form>
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 9a5a149..902a096 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -22,7 +22,7 @@ textarea, input[type=text] {
   border-radius: 3px;
   border: 1px solid #565656;
   outline: none;
-  margin-bottom: 1.5em;
+  margin: 1.2em 0;
 }
 
 textarea {
@@ -38,6 +38,7 @@ input[type=submit] {
   font-weight: 700;
   color: #faf9f5;
   background-color: #111111;
+  padding: 0.75em 2em;
 }
 
 input[type=submit]:focus {
-- 
cgit v1.2.3