From 23756c05a0b6668330c2c35efa355b2b3fb1b2b9 Mon Sep 17 00:00:00 2001 From: Johan Reitan Date: Thu, 28 Aug 2025 12:16:11 +0200 Subject: [PATCH 1/2] Core done --- src/App.jsx | 88 ++++++++-------------------------------------------- src/main.jsx | 2 +- 2 files changed, 14 insertions(+), 76 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c902699..9f1fa78 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,11 @@ import { useState } from 'react' - import initialEmails from './data/emails' - import './styles/App.css' +import Header from './components/Header_component'; +import LeftMenu from './components/LeftMenu_component'; +import Emails from './components/Emails_component'; + const getReadEmails = emails => emails.filter(email => !email.read) const getStarredEmails = emails => emails.filter(email => email.starred) @@ -43,81 +45,17 @@ function App() { return (
-
-
- - - - - gmail logo -
- -
- -
-
- -
-
    - {filteredEmails.map((email, index) => ( -
  • -
    - toggleRead(email)} - /> -
    -
    - toggleStar(email)} - /> -
    -
    {email.sender}
    -
    {email.title}
    -
    • - ))} -
+
+ + +
+ +
+ +
) } -export default App +export default App \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index fce89a2..58c5c7b 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root')).render( , -) +) \ No newline at end of file From 1ff4f2d1429b4cebb90a8df4e1e9031d1fcf1a85 Mon Sep 17 00:00:00 2001 From: Johan Reitan Date: Fri, 5 Sep 2025 20:17:10 +0200 Subject: [PATCH 2/2] extension done, with stopProp --- src/App.jsx | 82 +++++++++++++++++-- src/styles/App.css | 199 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 275 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9f1fa78..b16cc9e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,6 +5,14 @@ import './styles/App.css' import Header from './components/Header_component'; import LeftMenu from './components/LeftMenu_component'; import Emails from './components/Emails_component'; +import EmailView from './components/EmailView_component'; +import EmailOrList from './components/EmailOrList_component'; + +import backArrow from './data/icons/back-arrow.png' +import downloadButton from './data/icons/download-button.png' +import rateStarButton from './data/icons/rate-star-button.png' +import rubbishButton from './data/icons/rubbish-bin-delete-button.png' +import flaticonWelcomeImage from './data/icons/flaticon-welcome-image.png' const getReadEmails = emails => emails.filter(email => !email.read) @@ -14,11 +22,44 @@ function App() { const [emails, setEmails] = useState(initialEmails) const [hideRead, setHideRead] = useState(false) const [currentTab, setCurrentTab] = useState('inbox') + const [currentEmail, setCurrentEmail] = useState({ + header: "", + senderName: "", + senderEmail: "", + receiverEmail: "", + dateAndTime: "", + emailContent: "", +}); const unreadEmails = emails.filter(email => !email.read) const starredEmails = emails.filter(email => email.starred) - const toggleStar = targetEmail => { + + const [isEmail, toggleIsEmail] = useState(false); + //let isEmail = useState(true) + + const changeState = (selectedEmail) => { + console.log("changeState"); + + + if(selectedEmail) { + setCurrentEmail({ + header: selectedEmail.title, + senderName: selectedEmail.sender, + senderEmail: `${selectedEmail.sender}@email.com`, + receiverEmail: `johan`, + }) + } + + toggleIsEmail(!isEmail) + + } + + + + const toggleStar = (targetEmail) => { + console.log("toggleStar"); + const updatedEmails = emails => emails.map(email => email.id === targetEmail.id @@ -28,13 +69,15 @@ function App() { setEmails(updatedEmails) } - const toggleRead = targetEmail => { + const toggleRead = (targetEmail) => { + console.log("toggleRead"); + const updatedEmails = emails => emails.map(email => email.id === targetEmail.id ? { ...email, read: !email.read } : email ) - setEmails(updatedEmails) - } + setEmails(updatedEmails) + } let filteredEmails = emails @@ -43,13 +86,40 @@ function App() { if (currentTab === 'starred') filteredEmails = getStarredEmails(filteredEmails) + + + + return (
-
+
+
+ + + + + gmail logo +
+ +
+ +
+
- + + + + + + + + {/* */}
diff --git a/src/styles/App.css b/src/styles/App.css index da375b1..3eb947d 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -144,3 +144,202 @@ .email .star-checkbox:checked::before { background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png); } + + + + +.app { + height: 100vh; + + display: grid; + grid-template: + 'header header' 50px + 'left-menu emails' 1fr / + 180px 1fr; +} + +.app > .header { + grid-area: header; + + display: grid; + grid-template-columns: 180px 1fr; + + border-bottom: solid 1px #00000020; +} + +.app > .header > .left-menu { + display: grid; + grid-auto-flow: column; + align-items: center; + justify-content: left; +} + +.app > .header > .left-menu .menu-icon { + width: 25px; + height: 25px; + margin: 10px; +} + +.app > .header > .search { + display: grid; + padding: 6px; +} + +.app > .header > .search .search-bar { + border: none; + border-radius: 5px; + background-color: rgb(240, 240, 240); + padding: 0 10px; + font-size: 1rem; +} + +.app > .left-menu { + grid-area: left-menu; + padding: 10px; + padding-left: 0; +} + +.app > .left-menu .inbox-list { + display: grid; + grid-gap: 10px; +} + +.app > .left-menu .inbox-list .item { + padding: 5px 10px; + display: grid; + grid-auto-flow: column; + justify-content: space-between; + align-items: center; + + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; +} + +.app > .left-menu .inbox-list .item.active { + background-color: #ff000050; +} + +.app > .left-menu .inbox-list .item.toggle { + background-color: transparent; +} + +.email-toolbar { + padding: 0.5rem 2rem; + + display: grid; + grid-template-columns: auto 1fr auto; + + border-bottom: 1px solid #eee; +} + +.email-toolbar > * { + display: grid; + grid-auto-flow: column; + align-items: center; + gap: 1rem; +} + +.email-toolbar > ul { + list-style-type: none; +} + +.email-toolbar .icon { + width: 24px; + height: 24px; +} + +.email-toolbar button { + padding: 0.25rem 0.5rem 0.4rem; + + border-radius: 0.5rem; + border: 1px solid #a1a1a1; + background-color: transparent; + + font-weight: bold; +} + +.title { + padding: 1rem; +} + +.title h1 { + padding-left: 56px; + + font-weight: normal; +} + +.email-content--header { + padding: 0.5rem 1rem; + + display: grid; + grid-template-columns: auto 1fr auto auto; + gap: 1rem; +} + +.email-content--header .avatar { + width: 56px; + height: 56px; + + border-radius: 100%; + background-color: #eee; +} + +.email-info { + padding: 0.25rem 0; +} + +.email-info .sender-info h2 { + margin-right: 1rem; + + display: inline-block; + + font-size: 0.925rem; +} + +.email-info .user-info { + margin-top: 0.5rem; +} + +.email-info .user-info p { + font-size: 0.825rem; +} + +.email-action-icons ul { + padding: 0; + margin: 0; + + display: grid; + grid-auto-flow: column; + gap: 0.25rem; + + list-style-type: none; +} + +.email-action-icons .icon { + width: 20px; + height: 20px; +} + +.email-body .content { + max-width: 600px; + margin: 0 auto; +} + +.email-body .content img { + width: 100%; +} + +.email-actions { + padding: 1rem 0.5rem; +} + +.email-actions button { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + + border-radius: 0.5rem; + border: 1px solid #a1a1a1; + background-color: transparent; + + font-weight: bold; +}