From 4f42b5a2b35cf61d6042562195755699f9de177f Mon Sep 17 00:00:00 2001
From: Renard
Date: Sun, 22 Sep 2019 00:28:21 -0300
Subject: Nightmode
---
src/App.css | 19 +++++++++++++++++++
src/App.js | 43 +++++++++++++++++++++++++++++++++++++++----
src/Board.js | 11 +++++++----
src/Home.js | 10 +++++++++-
src/Post.js | 4 ++--
src/ReplyForm.js | 10 ++++------
src/Thread.js | 21 ++++++++++++++-------
7 files changed, 94 insertions(+), 24 deletions(-)
diff --git a/src/App.css b/src/App.css
index a4cf972..9486e24 100644
--- a/src/App.css
+++ b/src/App.css
@@ -76,4 +76,23 @@
.playerContainer {
max-width: 400px;
padding-bottom: 0.75em;
+}
+
+.ui.attached:not(.top).header {
+ border-top: 1px solid !important;
+ border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+
+.ui.inverted.attached.header {
+ border-color: #555555 !important;
+}
+
+.ui.container.inverted {
+ background-color: #1c1c1c;
+ padding: 1em 2em;
+}
+
+.homeContainer.inverted {
+ color: #eaeaea !important;
+ background-color: #454647 !important;
}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index ff5e712..9ea8330 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,8 +22,10 @@ class App extends Component {
super();
this.state = {
boardList: [],
- isLoaded: false
+ isLoaded: false,
+ nightMode: true
};
+ this.toggleTheme = this.toggleTheme.bind(this);
}
componentDidMount() {
@@ -36,6 +38,18 @@ class App extends Component {
});
}
+ componentDidUpdate() {
+ if (this.state.nightMode) {
+ document.body.style.backgroundColor = "#313233";
+ } else {
+ document.body.style.backgroundColor = "#FFFFFF";
+ }
+ }
+
+ toggleTheme() {
+ this.setState({ nightMode: !this.state.nightMode });
+ }
+
render() {
if (!this.state.isLoaded) {
if (!this.state.isLoaded) {
@@ -87,15 +101,36 @@ class App extends Component {
)}
</Dropdown.Menu>
</Dropdown>
+ <Menu.Menu position="right">
+ <Menu.Item as="a" onClick={this.toggleTheme}>
+ {this.state.nightMode ? (
+ <Icon name="sun" />
+ ) : (
+ <Icon name="moon" />
+ )}
+ </Menu.Item>
+ </Menu.Menu>
</Container>
</Menu>
<Container className="main">
<Router>
- <Home boardList={this.state.boardList} path="/" />
- <Thread boardList={this.state.boardList} path="/:dir/read/:id">
+ <Home
+ boardList={this.state.boardList}
+ path="/"
+ nightMode={this.state.nightMode}
+ />
+ <Thread
+ boardList={this.state.boardList}
+ path="/:dir/read/:id"
+ nightMode={this.state.nightMode}
+ >
<Thread path=":active" />
</Thread>
- <Board boardList={this.state.boardList} path="/board/:dir" />
+ <Board
+ boardList={this.state.boardList}
+ path="/board/:dir"
+ nightMode={this.state.nightMode}
+ />
<NotFound default />
</Router>
</Container>
diff --git a/src/Board.js b/src/Board.js
index 34e3f52..5dd00a2 100644
--- a/src/Board.js
+++ b/src/Board.js
@@ -109,10 +109,11 @@ class Board extends Component {
return board.dir === this.props.dir;
});
document.title = currentBoard.name + " - B.a.I";
+ const nightMode = this.props.nightMode;
return (
<React.Fragment>
- <Breadcrumb>
+ <Breadcrumb className={nightMode ? "inverted" : ""}>
<Breadcrumb.Section link as={Link} to="/">
Home
</Breadcrumb.Section>
@@ -121,7 +122,7 @@ class Board extends Component {
</Breadcrumb>
{threadList.map(thread => (
<Segment.Group key={"seg_" + thread.timestamp + thread.id}>
- <Header as="h3" attached>
+ <Header as="h3" attached inverted={nightMode}>
<Link to={`/${this.props.dir}/read/${thread.id}`}>
{thread.subject}
</Link>
@@ -129,14 +130,15 @@ class Board extends Component {
{thread.total_replies} respuestas
</Header.Subheader>
</Header>
- <Segment attached>
- <Comment.Group>
+ <Segment attached inverted={nightMode}>
+ <Comment.Group className={nightMode ? "inverted" : ""}>
<Post
index={0}
post={thread}
locked={thread.locked}
threadId={thread.id}
currentBoard={currentBoard}
+ nightMode={nightMode}
/>
<Divider />
{thread.replies.map((reply, index, replies) => (
@@ -147,6 +149,7 @@ class Board extends Component {
threadId={thread.id}
key={"reply_" + reply.id}
currentBoard={currentBoard}
+ nightMode={nightMode}
/>
))}
</Comment.Group>
diff --git a/src/Home.js b/src/Home.js
index 292b8a1..5832ce4 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -106,7 +106,15 @@ class Home extends Component {
const { newThreadsList, lastAgeThreads, latestNews } = this.state;
document.title = "B.a.I Home";
return (
- <Grid columns={2} divided container doubling>
+ <Grid
+ columns={2}
+ divided
+ container
+ doubling
+ className={
+ this.props.nightMode ? "homeContainer inverted" : "homeContainer"
+ }
+ >
<Grid.Row>
<Grid.Column>
<Header as="h4">Hilos activos</Header>
diff --git a/src/Post.js b/src/Post.js
index b3e47ea..1140d49 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -22,7 +22,7 @@ const ImageModal = ({ href, trigger }) => (
</Modal>
);
-const Post = ({ index, post, locked, threadId, currentBoard }) => {
+const Post = ({ index, post, locked, threadId, currentBoard, nightMode }) => {
if (post.IS_DELETED > 0) {
return (
<Comment>
@@ -102,7 +102,7 @@ const Post = ({ index, post, locked, threadId, currentBoard }) => {
const youtubeVideos = post.message.match(youtubeRe);
return (
- <Comment>
+ <Comment inverted={nightMode}>
<Comment.Avatar
src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`}
/>
diff --git a/src/ReplyForm.js b/src/ReplyForm.js
index a9f461d..564ed88 100644
--- a/src/ReplyForm.js
+++ b/src/ReplyForm.js
@@ -73,7 +73,7 @@ class ReplyForm extends Component {
render() {
const { name, email, message, replyRes, attachment } = this.state;
- const { currentBoard } = this.props;
+ const { currentBoard, nightMode } = this.props;
if (this.props.locked === 1) {
return (
<Message negative>
@@ -83,7 +83,7 @@ class ReplyForm extends Component {
);
}
return (
- <Segment>
+ <Segment inverted={nightMode}>
{replyRes !== null ? (
replyRes.state === "success" ? (
<Message positive>
@@ -101,7 +101,7 @@ class ReplyForm extends Component {
</Message>
)
) : null}
- <Form onSubmit={this.handleSubmit}>
+ <Form onSubmit={this.handleSubmit} inverted={nightMode}>
<Form.Group widths="equal">
<Form.Input
label="Nombre"
@@ -143,9 +143,7 @@ class ReplyForm extends Component {
placeholder="( ･ω･) Cuentáme algo interesante ..."
onChange={this.handleChange}
/>
- <Button type="submit" secondary>
- Enviar
- </Button>
+ <Button type="submit">Enviar</Button>
</Form>
</Segment>
);
diff --git a/src/Thread.js b/src/Thread.js
index b390f54..fe9efff 100644
--- a/src/Thread.js
+++ b/src/Thread.js
@@ -6,7 +6,8 @@ import {
Message,
Comment,
Breadcrumb,
- Divider
+ Divider,
+ Container
} from "semantic-ui-react";
import Moment from "react-moment";
import "moment/locale/es";
@@ -100,6 +101,7 @@ class Thread extends Component {
render() {
const { isLoading, error } = this.state;
+ const { nightMode } = this.props;
if (isLoading) {
return (
@@ -135,8 +137,8 @@ class Thread extends Component {
document.title = subject + " - " + currentBoard.name + "@B.a.I";
return (
- <React.Fragment>
- <Breadcrumb>
+ <Container className={nightMode ? "inverted" : ""}>
+ <Breadcrumb className={nightMode ? "inverted" : ""}>
<Breadcrumb.Section link as={Link} to="/">
Home
</Breadcrumb.Section>
@@ -147,7 +149,7 @@ class Thread extends Component {
<Breadcrumb.Divider icon="right arrow" />
<Breadcrumb.Section active>{subject}</Breadcrumb.Section>
</Breadcrumb>
- <Header as="h1">
+ <Header as="h1" inverted={nightMode}>
<Header.Content className="postMessage">
{subject}
{locked ? <Icon name="lock" /> : null}
@@ -162,7 +164,7 @@ class Thread extends Component {
</Header>
<Divider />
- <Comment.Group>
+ <Comment.Group className={nightMode ? "inverted" : ""}>
{posts.map((post, index) => (
<Post
key={index}
@@ -175,14 +177,19 @@ class Thread extends Component {
))}
</Comment.Group>
- <ReplyForm currentBoard={currentBoard} parent={id} locked={locked} />
+ <ReplyForm
+ currentBoard={currentBoard}
+ parent={id}
+ locked={locked}
+ nightMode={nightMode}
+ />
<a
href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`}
>
API Link
</a>
- </React.Fragment>
+ </Container>
);
}
}
--
cgit v1.2.1-18-gbd029