From 7cf9954f7f18d120af53a16895c9b1a4f461ab7e Mon Sep 17 00:00:00 2001 From: Camerin Figueroa Date: Thu, 23 Dec 2021 17:58:18 -0500 Subject: [PATCH] Fixed Missing Code from merge --- src/components/App.js | 2 ++ src/components/Article.js | 43 +++++++++++++++++++++++-- src/components/ArticleEditor.js | 34 +++++++++++++++++++ src/components/css/ArticleEditor.css | 42 ++++++++++++++++++++++++ src/components/css/Articles.css | 18 +++++++++++ src/components/css/Theater.css | 2 +- src/components/subcomponents/Listing.js | 5 +-- 7 files changed, 140 insertions(+), 6 deletions(-) create mode 100644 src/components/ArticleEditor.js create mode 100644 src/components/css/ArticleEditor.css diff --git a/src/components/App.js b/src/components/App.js index ac7986f..1d8cb1a 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,6 +4,7 @@ import "./css/App.css"; import Navigation from './Navigation'; import Github from './Github'; import Articles from './Articles'; +import ArticleEditor from './ArticleEditor'; import About from './About'; import Intro from './Intro'; @@ -18,6 +19,7 @@ const App = (props) => { } /> + diff --git a/src/components/Article.js b/src/components/Article.js index df8b1ef..0e81ab6 100644 --- a/src/components/Article.js +++ b/src/components/Article.js @@ -1,13 +1,49 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Theater from './subcomponents/Theater'; import './css/Articles.css'; const Article = ({article}) => { + const [show, setShow] = useState(""); + const [currArticle, setCurrArticle] = useState(""); + + useEffect(()=>{ + if (currArticle === ""){ // If no articles have been opened + if (show === "") { + // Set the current article and initiate the open animation + setCurrArticle(article); + setShow("open"); + + // Once the animation runs, open the entire article + setTimeout(() =>{ + setShow("show"); + }, 1024) + } + + } else if (currArticle !== article) { // If we've changed articles + // Change currArticle to the actual current article and initiate close animation + setCurrArticle(article); + setShow("close"); + + // Step through the close animation, open animation, and fully opening the article + setTimeout(()=>{ + setShow(""); + + setTimeout(()=>{ + + setShow("open"); + + setTimeout(() =>{ + setShow("show"); + }, 1024); + }, 1024); + }, 24); + } + }, [currArticle, article, show]); + let linkProcessor = (text) => { /** * Given some text, processes and returns jsx with any link represented as an anchor */ - let output = [""]; // Stores all text in a list let loc = 0; // Stores the current location in output that we're working with let tmp; @@ -127,6 +163,7 @@ const Article = ({article}) => { let text = linkProcessor(output[i]); // Process links text = newLineProcessor(text); + if (type[i] === 0){ // Return default text type return
{text}
; @@ -152,7 +189,7 @@ const Article = ({article}) => { }; return ( -
+
{ + const [content, setContent] = useState("Hello World"); + + let article = { + "id":"0", + "title": "Article Editor", + "desc":"This is a place to edit articles", + "contents": content + }; + + let copyToClipboard = () => { + navigator.clipboard.writeText(content).then(function() { + console.log('Async: Copying to clipboard was successful!'); + }, function(err) { + console.error('Async: Could not copy text: ', err); + }); + }; + + return ( +
+
+
Copy to Clipboard
+
+
+ +
+ ); +}; + +export default ArticleEditor; \ No newline at end of file diff --git a/src/components/css/ArticleEditor.css b/src/components/css/ArticleEditor.css new file mode 100644 index 0000000..43dd00e --- /dev/null +++ b/src/components/css/ArticleEditor.css @@ -0,0 +1,42 @@ +.ArticleEditor textarea { + width:100%; + height: 35vh; + border-style: solid; + border-color: lightgray; + border-radius: 2px; + border-width: 2px; + padding: 0.4em 0.4em 0.4em 0; + text-align: left; +} + +.ArticleEditor .toolbar { + width: 100%; + height: 56px; + display: flex; +} + +.ArticleEditor .toolbar .btn { + color: white; + background-color: darkgreen; + text-align: center; + align-items:center; + justify-content: center; + display: flex; + padding-left: 3px; + padding-right: 3px; +} +.ArticleEditor .toolbar .btn:hover{ + background-color: #005400 +} + +.ArticleEditor .article .open { + max-height:100vh; +} + +.ArticleEditor .article .Close { + max-height:100vh; +} + +.ArticleEditor .article { + max-height:100vh; +} \ No newline at end of file diff --git a/src/components/css/Articles.css b/src/components/css/Articles.css index b7a808b..24d8038 100644 --- a/src/components/css/Articles.css +++ b/src/components/css/Articles.css @@ -3,6 +3,24 @@ align-items: center; display: flex; flex-direction: column; + max-height:0; + overflow: hidden; + transition: max-height 1s ease; + +} + +.article.open { + max-height:100vh; + transition: max-height 1s ease; +} + +.article.close { + max-height:100vh; +} + +.article.show { + max-height:none; + } .article .content { diff --git a/src/components/css/Theater.css b/src/components/css/Theater.css index 0940f71..f912564 100644 --- a/src/components/css/Theater.css +++ b/src/components/css/Theater.css @@ -15,7 +15,7 @@ .theater-bg { - height: 100%; + height: inherit; width:100%; background-size: cover; background-image: url('../../img/background.webp'); diff --git a/src/components/subcomponents/Listing.js b/src/components/subcomponents/Listing.js index a9e7379..6fb3bb1 100644 --- a/src/components/subcomponents/Listing.js +++ b/src/components/subcomponents/Listing.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import '../css/Listing.css'; const Listing = (props) => { @@ -11,12 +12,12 @@ const Listing = (props) => { */ return ( ); };