Skip to content

sidebar + some small details and stuff #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Sqaaakoi wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

sidebar + some small details and stuff #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b19b34
fix the build script
Sqaaakoi Oct 11, 2023
5ce589d
sidebar
Sqaaakoi Oct 11, 2023
2b8daa5
"cleanup" stuff for consistent button placement
Sqaaakoi Oct 11, 2023
297dd9d
rename directory from "popup" to "app"
Sqaaakoi Oct 12, 2023
3f5ffe1
update paths in manifest
Sqaaakoi Oct 12, 2023
0323c84
remove that button for now
Sqaaakoi Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ rm -rf build
mkdir -p build/chrome-dev
cp -r src/shared/* build/chrome-dev
cp -r src/chrome/* build/chrome-dev
sed -i "" "s~{{SERVER}}~$SERVER_DEV_ORIGIN~g" build/chrome-dev/api.js
sed -i "" "s~{{SERVER}}~$SERVER_DEV_HOST~g" build/chrome-dev/manifest.json
sed -i "s~{{SERVER}}~$SERVER_DEV_ORIGIN~g" build/chrome-dev/api.js
sed -i "s~{{SERVER}}~$SERVER_DEV_HOST~g" build/chrome-dev/manifest.json

mkdir -p build/chrome-prod
cp -r src/shared/* build/chrome-prod
cp -r src/chrome/* build/chrome-prod
sed -i "" "s~{{SERVER}}~$SERVER_PROD_ORIGIN~g" build/chrome-prod/api.js
sed -i "" "s~{{SERVER}}~$SERVER_PROD_HOST~g" build/chrome-prod/manifest.json
sed -i "s~{{SERVER}}~$SERVER_PROD_ORIGIN~g" build/chrome-prod/api.js
sed -i "s~{{SERVER}}~$SERVER_PROD_HOST~g" build/chrome-prod/manifest.json

mkdir -p build/firefox-dev
cp -r src/shared/* build/firefox-dev
cp -r src/firefox/* build/firefox-dev
sed -i "" "s~{{SERVER}}~$SERVER_DEV_ORIGIN~g" build/firefox-dev/api.js
sed -i "" "s~{{SERVER}}~$SERVER_DEV_HOST~g" build/firefox-dev/manifest.json
sed -i "s~{{SERVER}}~$SERVER_DEV_ORIGIN~g" build/firefox-dev/api.js
sed -i "s~{{SERVER}}~$SERVER_DEV_HOST~g" build/firefox-dev/manifest.json

mkdir -p build/firefox-prod
cp -r src/shared/* build/firefox-prod
cp -r src/firefox/* build/firefox-prod
sed -i "" "s~{{SERVER}}~$SERVER_PROD_ORIGIN~g" build/firefox-prod/api.js
sed -i "" "s~{{SERVER}}~$SERVER_PROD_HOST~g" build/firefox-prod/manifest.json
sed -i "s~{{SERVER}}~$SERVER_PROD_ORIGIN~g" build/firefox-prod/api.js
sed -i "s~{{SERVER}}~$SERVER_PROD_HOST~g" build/firefox-prod/manifest.json
7 changes: 5 additions & 2 deletions src/chrome/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@
"icons": {
"64": "icons/64.png"
},
"permissions": ["storage"],
"permissions": ["storage", "contextMenus", "sidePanel"],
"host_permissions": ["*://{{SERVER}}/*"],
"action": {
"default_popup": "popup/index.html"
"default_popup": "app/index.html"
},
"side_panel": {
"default_path": "app/sidebar.html"
},
"content_scripts": [
{
Expand Down
10 changes: 9 additions & 1 deletion src/firefox/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,17 @@
},
"permissions": ["storage", "*://{{SERVER}}/*"],
"browser_action": {
"default_popup": "popup/index.html",
"default_popup": "app/index.html",
"default_area": "navbar"
},
"sidebar_action": {
"default_icon": {
"64": "icons/64.png"
},
"default_title": "Sidebox",
"default_panel": "app/sidebar.html",
"open_at_install": true
},
"content_scripts": [
{
"matches": ["*://{{SERVER}}/*"],
Expand Down
36 changes: 19 additions & 17 deletions src/shared/popup/index.html → src/shared/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<link href="styles/main.css" rel="stylesheet" />
</head>

<body style="width: 256px; height: 384px">
<body class="popup">
<div class="screen loadingScreen" data-screen="loading">
<div class="inner">
<img class="icon" src="../icons/icon.svg" />
Expand All @@ -15,23 +15,25 @@
<header>
<h1 class="title">Sidebox</h1>

<button class="create">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
<div class="buttonsRight">
<button class="create">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
</div>
</header>

<div class="inboxes"></div>
<div class="inboxes scrollBox"></div>

<form class="createForm">
<div class="popup">
Expand Down Expand Up @@ -148,7 +150,7 @@ <h1 class="name"></h1>

<p class="loading">Loading...</p>
<p class="empty">Nothing here yet!</p>
<div class="messages"></div>
<div class="messages scrollBox"></div>

<form class="renameForm">
<div class="popup">
Expand Down
0 src/shared/popup/scripts/main.js → src/shared/app/scripts/main.js
View file
Open in desktop
File renamed without changes.
0 src/shared/popup/scripts/screens/home.js → src/shared/app/scripts/screens/home.js
View file
Open in desktop
File renamed without changes.
0 src/shared/popup/scripts/screens/inbox.js → src/shared/app/scripts/screens/inbox.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/shared/popup/scripts/screens/message.js → src/shared/app/scripts/screens/message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const renderMessageScreen = (
{ id, fromName, fromAddress, subject, date }
) => {
$(".subject").innerText = subject
$(".from").innerText = `${fromName} (${fromAddress})`
$(".from").innerText = `${fromName} <${fromAddress}>`
$(".date").innerText = Intl.DateTimeFormat(undefined, {
dateStyle: "medium",
timeStyle: "short",
Expand Down
0 src/shared/popup/scripts/util/address.js → src/shared/app/scripts/util/address.js
View file
Open in desktop
File renamed without changes.
0 src/shared/popup/scripts/util/icon.js → src/shared/app/scripts/util/icon.js
View file
Open in desktop
File renamed without changes.
6 changes: 6 additions & 0 deletions src/shared/app/scripts/util/screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const setScreen = (name) => {
document.body.dataset.screen = name;
document.body.querySelectorAll("[data-screen]").forEach((elem) => {
elem.classList[(elem.dataset.screen === name ? "add" : "remove")]("activeScreen");
})
}
216 changes: 216 additions & 0 deletions src/shared/app/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<link href="styles/main.css" rel="stylesheet" />
</head>

<body class="sidebar">
<div class="screen loadingScreen" data-screen="loading">
<div class="inner">
<img class="icon" src="../icons/icon.svg" />
</div>
</div>

<div class="screen homeScreen" data-screen="home">
<header>
<h1 class="title">Sidebox</h1>

<button class="create">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
</header>

<div class="inboxes scrollBox"></div>

<form class="createForm">
<div class="popup">
<p class="title">Create a new box</p>

<input placeholder="Box Name" />

<div class="buttons">
<button class="cancel" type="button">Nevermind</button>
<button class="confirm" type="submit">Create</button>
</div>
</div>
</form>
</div>

<div class="screen inboxScreen" data-screen="inbox">
<header>
<div class="buttons">
<button class="back">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="19" y1="12" x2="5" y2="12" />
<polyline points="12 19 5 12 12 5" />
</svg>
</button>

<div class="buttonsRight">
<button class="rename">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
></path>
</svg>
</button>

<button class="muted">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mutedOff"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>

<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mutedOn"
>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
<path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
<path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
<path d="M18 8a6 6 0 0 0-9.33-5"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
</button>

<button class="delete">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="3 6 5 6 21 6" />
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
/>
<line x1="10" y1="11" x2="10" y2="17" />
<line x1="14" y1="11" x2="14" y2="17" />
</svg>
</button>
</div>
</div>

<h1 class="name"></h1>
<button class="address"></button>
</header>

<p class="loading">Loading...</p>
<p class="empty">Nothing here yet!</p>
<div class="messages scrollBox"></div>

<form class="renameForm">
<div class="popup">
<p class="title">Rename this box</p>

<input placeholder="Box Name" />

<div class="buttons">
<button class="cancel" type="button">Nevermind</button>
<button class="confirm" type="submit">Rename</button>
</div>
</div>
</form>

<div class="deleteConfirm">
<div class="popup">
<p class="title">Delete this box?</p>
<p class="description">
You won't be able to regain access to this email address. Make sure
you don't have any accounts using it.
</p>

<div class="buttons">
<button class="cancel">Nevermind</button>
<button class="confirm">Delete</button>
</div>
</div>
</div>
</div>

<div class="screen messageScreen" data-screen="message">
<div class="inner">
<header>
<button class="back">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="19" y1="12" x2="5" y2="12" />
<polyline points="12 19 5 12 12 5" />
</svg>
</button>

<p class="subject"></p>
<p class="from"></p>
<p class="date"></p>
</header>

<iframe
title="Message Content"
class="content"
sandbox="allow-popups allow-popups-to-escape-sandbox"
referrerpolicy="no-referrer"
></iframe>
</div>
</div>

<script src="scripts/main.js" type="module"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions src/shared/app/styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
header .buttons {
display: flex;
justify-content: space-between;
}

header .buttons svg {
display: block;
width: 16px;
height: 16px;
}

header .buttonsRight {
display: flex;
}

header .buttonsRight> :not(:last-child) {
margin-right: 8px;
}

header .buttons .delete {
color: var(--red);
}
Loading