From 89d096df242fca70eac71aa96cb625f6d6cdbe38 Mon Sep 17 00:00:00 2001
From: Thor-Herman Van Eggelen <theggele@stud.ntnu.no>
Date: Thu, 17 Sep 2020 17:45:54 +0200
Subject: [PATCH] Add ability to change font #5
Only changes the font inside the ArtPAge. Can consider using Context to change the font on the top level entity
---
frontend/src/Components/ArtPage.tsx | 69 ++++++++++++++-------
frontend/src/Components/DropDown.tsx | 45 +++++---------
frontend/src/Components/DropDownSelect.tsx | 36 +++++++++++
frontend/src/Components/DropDownToggle.tsx | 39 ------------
frontend/src/Components/ExhibitionPiece.tsx | 4 +-
frontend/src/Components/MainPage.tsx | 2 +-
frontend/src/Style/ArtPage.css | 28 +++++++++
7 files changed, 126 insertions(+), 97 deletions(-)
create mode 100644 frontend/src/Components/DropDownSelect.tsx
delete mode 100644 frontend/src/Components/DropDownToggle.tsx
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 62bb94b..8532d8e 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Context} from 'react';
import ExhibitionPiece from './ExhibitionPiece';
import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
@@ -7,31 +7,52 @@ import '../Style/ArtPage.css';
type props = {
- pageId: number; // The id of the page
- changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
+ pageId: number; // The id of the page
+ changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
}
-class ArtPage extends React.Component<props> {
-
- constructor(props: props) {
- super(props);
- }
-
- render() {
- return (
- <div className={'artpage'}>
- <FavoriteButton/>
- <DropDown/>
- <ExhibitionPiece artId={this.props.pageId}/>
- <div className={'navbutton left'}>
- <NavButton changePage={this.props.changePage} direction={"left"}/>
- </div>
- <div className={'navbutton right'}>
- <NavButton changePage={this.props.changePage} direction={"right"}/>
- </div>
- </div>
- );
- }
+type options = { [key: string]: string };
+type state = {
+ options: options;
+ updateOption: (arg0: string, arg1: string) => void;
+};
+export const OptionsContext = React.createContext({} as state);
+
+class ArtPage extends React.Component<props, state> {
+
+ updateToggleChoice = (label: string, choice: string) => {
+ this.setState(current => ({
+ ...current,
+ options: {...current.options, [label.toLowerCase()]: choice.toLowerCase()}
+ }));
+ };
+
+ state = {
+ options: {
+ "sound": "",
+ "background": "one",
+ "font": "calibri"
+ },
+ updateOption: this.updateToggleChoice
+ };
+
+ render() {
+ return (
+ <div className={`artpage background-${this.state.options.background} font-${this.state.options.font}`}>
+ <FavoriteButton/>
+ <OptionsContext.Provider value={this.state}>
+ <DropDown/>
+ </OptionsContext.Provider>
+ <ExhibitionPiece artId={this.props.pageId}/>
+ <div className={'navbutton left'}>
+ <NavButton changePage={this.props.changePage} direction={"left"}/>
+ </div>
+ <div className={'navbutton right'}>
+ <NavButton changePage={this.props.changePage} direction={"right"}/>
+ </div>
+ </div>
+ );
+ }
}
export default ArtPage;
\ No newline at end of file
diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
index 9d76a14..aa254bb 100644
--- a/frontend/src/Components/DropDown.tsx
+++ b/frontend/src/Components/DropDown.tsx
@@ -1,45 +1,28 @@
import React, { useState } from 'react';
import '../Style/DropDown.css';
-import DropDownToggle from './DropDownToggle';
+import DropDownSelect from './DropDownSelect';
-type props = {}
-
-const DropDown = (props: props) => {
+const DropDown = () => {
const [clicked, setClicked] = useState(false);
- const OneOptions = [1, 2, 3, 4];
- const TwoOptions = ['Happy', 'Sombre', 'Peaceful'];
- const ThreeOptions = ["Upbeat", "Downbeat"];
-
- const option1Method = (value: string) => {
- console.log(value); // Temporary. Should alter something later
- };
-
- const option2Method = (value: string) => {
- console.log(value);
- };
-
- const option3Method = (value: string) => {
- console.log(value);
- };
+ const BackgroundOptions = ["One", "Two", "Three", "Four"];
+ const FontOptions = ['Calibri', 'Arial', 'Sans'];
+ const MusicOptions = ["Upbeat", "Downbeat"];
const determineRender = () => {
if (clicked) return (
<div className={'dropdown-menu'}>
- <DropDownToggle
- optionLabel={"Background "}
- options={OneOptions}
- parentFunction={option1Method}
+ <DropDownSelect
+ optionLabel={"Background"}
+ options={BackgroundOptions}
/>
- <DropDownToggle
- optionLabel={"Mood "}
- options={TwoOptions}
- parentFunction={option2Method}
+ <DropDownSelect
+ optionLabel={"Font"}
+ options={FontOptions}
/>
- <DropDownToggle
- optionLabel={"Music "}
- options={ThreeOptions}
- parentFunction={option3Method}
+ <DropDownSelect
+ optionLabel={"Sound"}
+ options={MusicOptions}
/>
</div>
);
diff --git a/frontend/src/Components/DropDownSelect.tsx b/frontend/src/Components/DropDownSelect.tsx
new file mode 100644
index 0000000..4a3b857
--- /dev/null
+++ b/frontend/src/Components/DropDownSelect.tsx
@@ -0,0 +1,36 @@
+import React, {useContext, useState} from 'react';
+import {OptionsContext} from "./ArtPage";
+
+type props = {
+ options: Array<string>; // Depends on if the user is choosing strings or numbers
+ optionLabel: "Background" | "Sound" | "Font";
+};
+
+const DropDownSelect = (props: props) => {
+ const context = useContext(OptionsContext); // Uses context defined in ArtPage
+ const [value, setValue] = useState(context.options[props.optionLabel.toLowerCase()]); // The currently submitted element
+
+ const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
+ event.preventDefault(); // To prevent default HTML behavior
+ const val = event.currentTarget.value;
+ setValue(val); // Update the value with the newly selected one
+ context.updateOption(props.optionLabel, val); // Calls the function of the parent with the submitted value
+ };
+
+ const renderOptions = () => { // To render a varying amount of options
+ return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
+ };
+
+ return (<div className={'drop-down-toggle'}>
+ <form>
+ <label>
+ {props.optionLabel}
+ <select value={value} onChange={handleChange}>
+ {renderOptions()}
+ </select>
+ </label>
+ </form>
+ </div>);
+};
+
+export default DropDownSelect;
\ No newline at end of file
diff --git a/frontend/src/Components/DropDownToggle.tsx b/frontend/src/Components/DropDownToggle.tsx
deleted file mode 100644
index 9738d4d..0000000
--- a/frontend/src/Components/DropDownToggle.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { FormEvent, useState } from 'react';
-
-type props = {
- parentFunction: (arg0: string) => void;
- options: Array<string | number>; // Depends on if the user is choosing strings or numbers
- optionLabel: string;
-}
-
-const DropDownToggle = (props: props) => {
- const [value, setValue] = useState(''); // The currently submitted element
-
- const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
- event.preventDefault(); // To prevent default HTML behavior
- setValue(event.currentTarget.value); // Update the value with the newly selected one
- };
-
- const handleSubmit = (event: FormEvent) => { // Called once the form is submitted using the button
- event.preventDefault(); // To prevent default HTML behavior
- props.parentFunction(value); // Calls the function of the parent with the submitted value
- };
-
- const renderOptions = () => { // To render a varying amount of options
- return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
- };
-
- return (<div className={'drop-down-toggle'}>
- <form onSubmit={handleSubmit}>
- <label>
- {props.optionLabel}
- <select value={value} onChange={handleChange}>
- {renderOptions()}
- </select>
- </label>
- <input type={'submit'} value={'Submit'}/>
- </form>
- </div>);
-};
-
-export default DropDownToggle;
\ No newline at end of file
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 9718f2b..4a57dc5 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -17,8 +17,8 @@ const ExhibitionPiece = (props: props) => {
return (
<div className={'exhibition-piece'}>
- <div className={"title"}>
- {title}
+ <div className={"exhibition-piece-title"}>
+ <h1>{title}</h1>
</div>
<div className={"author"}>
{author}
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 43122ba..e04dc91 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -25,7 +25,7 @@ class MainPage extends React.Component<props, state> {
changePage = (increment: boolean) => {
const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
- }
+ };
render() {
return (
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
index f8c2bdc..110b954 100644
--- a/frontend/src/Style/ArtPage.css
+++ b/frontend/src/Style/ArtPage.css
@@ -23,6 +23,34 @@
margin-top: 1rem;
}
+.background-one {
+ background-color: red;
+}
+
+.background-two {
+ background-color: purple;
+}
+
+.background-three {
+ background-color: grey;
+}
+
+.background-four {
+ background-color: green;
+}
+
+.font-arial {
+ font-family: Arial, serif;
+}
+
+.font-calibri {
+ font-family: Calibri, serif;
+}
+
+.font-sans {
+ font-family: "Comic Sans MS", serif;
+}
+
.navbutton {
grid-row: 3 / 4;
display: flex;
--
GitLab