Skip to content

Commit 061fa61

Browse files
semanticdatasemanticdata
committed
new screenshots
1 parent 37b3cfa commit 061fa61

File tree

7 files changed

+51
-56
lines changed

7 files changed

+51
-56
lines changed

‎README.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
1-
<h1 align=center><img src="src/icon48.png" alt="logo" /> New Tab Notes</h1>
1+
<h1 align=center>📝 New Tab Notes</h1>
22

33
<p align=center>
44
<img alt="Mozilla Add-on" src="https://img.shields.io/amo/v/newtab-notes@semanticdata">
55
<img src="https://img.shields.io/amo/rating/newtab-notes@semanticdata" />
66
<img src="https://img.shields.io/amo/dw/newtab-notes@semanticdata" />
77
<img src="https://img.shields.io/amo/users/newtab-notes@semanticdata" />
88
<!-- <img src="https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes" /> -->
9+
<br>
10+
Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.
911
</p>
1012

11-
Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.
13+
## Screenshots
1214

13-
## Screenshot
15+
![screenshot light theme](screenshot.png)
16+
*Light mode*
1417

15-
![screenshot](screenshot.png)
18+
![screenshot dark theme](screenshot-dark.png)
19+
*Dark mode*
1620

1721
## TODO
1822

19-
- [x] Add a light and a dark theme. Add toggle to switch between the two.
20-
- [ ] Integrate a new [options](https://github.com/semanticdata/firefox-chatgpt-in-sidebar/blob/main/options/options.js) menu, or toggle. Could be used to store bg-color, txt-color, etc. This in theory allows the user to customize the editor.
23+
- [x] Add [Bulma](https://bulma.io/) for basic styling.
24+
- [x] Integrate w/ Firefox Sync. Notes content is preserved between machines.
25+
- [x] Add [Fira Code](https://fonts.google.com/specimen/Fira+Code) as font-family for the editor.
26+
- [x] Add light and dark themes incl. toggle.
27+
- [ ] Integrate a new [options](https://github.com/semanticdata/firefox-chatgpt-in-sidebar/blob/main/options/options.js) menu, or toggle.
28+
- Could be used to store bg-color, txt-color, etc. This in theory allows the user to customize the editor.
2129

2230
## Acknowledgments
2331

‎manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
"strict_min_version": "100.0"
88
}
99
},
10-
"version": "0.3.5",
10+
"version": "0.5.0",
1111
"author": "semanticdata",
1212
"icons": {
1313
"48": "src/icon48.png"
1414
},
15-
"description": "Transforms the New Tab into a minimalist, auto-saving text editor.",
15+
"description": "Transform your New Tab into a minimalist, auto-saving text editor.",
1616
"permissions": [
1717
"storage"
1818
],

‎screenshot-dark.png

29.6 KB
Loading

‎screenshot.png

23.3 KB
Loading

‎src/newtab.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
<head>
55
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8-
<title>New Tab</title>
8+
<title>📝 New Tab Notes</title>
99
<link rel="icon" type="image/png" sizes="48x48" href="icon48.png">
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
1111
<link rel="stylesheet" href="styles.css">
@@ -17,7 +17,6 @@
1717
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Code+Pro"> -->
1818
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" /> -->
1919
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"> -->
20-
<script type="text/javascript" src="tabnotes.js"></script>
2120
</head>
2221

2322
<body>
@@ -28,21 +27,22 @@ <h1 class="title">📝 New Tab Notes</h1>
2827
</div>
2928

3029
<div class="navbar-end">
31-
<button class="button" type="button" data-theme-toggle aria-label="Change to light theme">Change to light theme
30+
<button class="toggle" type="button" data-theme-toggle aria-label="Change to light theme">Change to light theme
3231
</button>
3332
</div>
3433
</nav>
3534

3635
<main class="container">
37-
<textarea class="textarea" id="notes" placeholder="Start writing..."></textarea>
36+
<textarea class="textarea" id="notes" placeholder="Write something..."></textarea>
3837
</main>
3938

4039
<footer class="footer container">
41-
<p>Made with <a class="heart" href="https://github.com/semanticdata/firefox-new-tab-notes">♥</a> by <a
40+
<p>Made with <a class="heart" href="https://github.com/semanticdata/firefox-new-tab-notes">❤</a> by <a
4241
href="https://github.com/semanticdata">SemanticData</a>.
4342
</p>
4443
</footer>
4544

45+
<script type="text/javascript" src="tabnotes.js"></script>
4646
<script type="text/javascript" src="toggle.js"></script>
4747
</body>
4848

‎src/styles.css

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
--bkg-color: #fff;
33
--text-color: #222;
44
--alt-color: #fafafa;
5+
--accent-color: #9000ff;
56
}
67

78
[data-theme="dark"] {
89
--bkg-color: #202020;
910
--text-color: #fff;
10-
--alt-color: #1a191b
11+
--alt-color: #1a191b;
12+
--accent-color: #e0b0ff;
1113
}
1214

1315
body {
@@ -22,7 +24,12 @@ main {
2224
padding-top: 1rem;
2325
}
2426

27+
a {
28+
color: var(--accent-color);
29+
}
30+
2531
a:hover {
32+
color: var(--text-color);
2633
text-decoration: underline;
2734
filter: brightness(80%);
2835
}
@@ -37,11 +44,10 @@ a:hover {
3744
font-family: "Fira Mono", monospace;
3845
border-radius: 10px;
3946
line-height: 1.75rem;
40-
height: 100vh;
41-
padding: 1rem;
42-
/* border: 0; */
47+
height: calc(100vh - 1rem);
4348
background: var(--alt-color);
4449
color: var(--text-color);
50+
padding: 1rem 2rem;
4551
}
4652

4753
.textarea::placeholder {
@@ -59,19 +65,17 @@ a:hover {
5965

6066
.footer {
6167
background: inherit;
62-
padding-top: 1rem;
6368
filter: opacity(0.75);
69+
padding-top: 1rem;
70+
padding-bottom: 1rem;
71+
text-align: right;
6472
}
6573

66-
.button {
67-
background: var(--alt-color);
68-
color: var(--text-color);
69-
}
70-
71-
.button:active,
72-
.button:focus,
73-
.button:hover {
74-
color: var(--text-color);
74+
.toggle {
75+
background: var(--bkg-color);
76+
border: 0;
77+
cursor: pointer;
78+
font-size: 24px;
7579
}
7680

7781
.heart:hover {

‎src/toggle.js

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
/**
2-
* Utility function to calculate the current theme setting.
1+
/* * Function to calculate current theme setting.
32
* Look for a local storage value.
43
* Fall back to system setting.
5-
* Fall back to light mode.
6-
*/
4+
* Fall back to light mode. */
75
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
86
if (localStorageTheme !== null) {
97
return localStorageTheme;
@@ -16,50 +14,35 @@ function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark })
1614
return "light";
1715
}
1816

19-
/**
20-
* Utility function to update the button text and aria-label.
21-
*/
17+
/* Function to update the button text and aria-label. */
2218
function updateButton({ buttonEl, isDark }) {
23-
const newCta = isDark ? "Change to light theme" : "Change to dark theme";
19+
// const newCta = isDark ? "Change to light theme" : "Change to dark theme";
20+
const newCta = isDark ? "🌗" : "🌓";
2421
// use an aria-label if you are omitting text on the button
2522
// and using a sun/moon icon, for example
2623
buttonEl.setAttribute("aria-label", newCta);
2724
buttonEl.innerText = newCta;
2825
}
2926

30-
/**
31-
* Utility function to update the theme setting on the html tag
32-
*/
27+
/* Utility function to update the theme setting on the html tag */
3328
function updateThemeOnHtmlEl({ theme }) {
3429
document.querySelector("html").setAttribute("data-theme", theme);
3530
}
3631

37-
38-
/**
39-
* On page load:
40-
*/
41-
42-
/**
43-
* 1. Grab what we need from the DOM and system settings on page load
44-
*/
32+
/* On page load: */
33+
/* 1. Grab what we need from the DOM and system settings on page load */
4534
const button = document.querySelector("[data-theme-toggle]");
4635
const localStorageTheme = localStorage.getItem("theme");
4736
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
4837

49-
/**
50-
* 2. Work out the current site settings
51-
*/
38+
/* 2. Work out the current site settings */
5239
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
5340

54-
/**
55-
* 3. Update the theme setting and button text accoridng to current settings
56-
*/
41+
/* 3. Update the theme setting and button text accoridng to current settings */
5742
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
5843
updateThemeOnHtmlEl({ theme: currentThemeSetting });
5944

60-
/**
61-
* 4. Add an event listener to toggle the theme
62-
*/
45+
/* 4. Add an event listener to toggle the theme */
6346
button.addEventListener("click", (event) => {
6447
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
6548

0 commit comments

Comments
 (0)