Add onboarding page. fixes #256
This commit is contained in:
mic
parent
e4f31feaea
commit
87d22ff9b1
6 changed files with 280 additions and 0 deletions
|
|
@ -26,6 +26,17 @@ import { mzta_specialCommand } from './js/mzta-special-commands.js';
|
|||
import { getSpamFilterPrompt } from './js/mzta-prompts.js';
|
||||
import { taSpamReport } from './js/mzta-spamreport.js';
|
||||
|
||||
browser.runtime.onInstalled.addListener(({ reason, previousVersion }) => {
|
||||
console.log(">>>>>>>>>>> onInstalled: " + JSON.stringify(reason) + ", previousVersion: " + previousVersion);
|
||||
if (reason === "install"
|
||||
|| (reason === "update" && (previousVersion.startsWith("2.") || previousVersion.startsWith("1.")))
|
||||
|| (reason === "update" && ((previousVersion.startsWith("3.") && parseInt(previousVersion.split(".")[1]) <= 2)))
|
||||
//|| (reason === "update") // only for testing
|
||||
) {
|
||||
browser.tabs.create({ url: "/pages/onboarding/onboarding.html" });
|
||||
}
|
||||
});
|
||||
|
||||
await migrateCustomPromptsStorage();
|
||||
await migrateDefaultPromptsPropStorage();
|
||||
|
||||
|
|
|
|||
BIN
pages/onboarding/images/autospamfilter.png
Normal file
BIN
pages/onboarding/images/autospamfilter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
pages/onboarding/images/customprompts.png
Normal file
BIN
pages/onboarding/images/customprompts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
pages/onboarding/images/prompts-button.png
Normal file
BIN
pages/onboarding/images/prompts-button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
183
pages/onboarding/onboarding.css
Normal file
183
pages/onboarding/onboarding.css
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
* Portions Copyright (C) Philipp Kewisch
|
||||
* This is a modified version of the original file of Quick Folder Move:
|
||||
* https://github.com/kewisch/quickmove-extension/blob/v3.1.0/src/onboarding/onboarding.html */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color-scheme: light dark;
|
||||
background-color: light-dark(#f4f4f4, #151516);
|
||||
color: light-dark(#666, #f4f4f5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.6;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body.platform-mac .platform-default,
|
||||
body:not(.platform-mac) .platform-mac {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: light-dark(#333, #fff);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 2em;
|
||||
padding: 2em;
|
||||
background: light-dark(#fff, #27272a);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
text-align: left;
|
||||
padding: 1ex 0 0;
|
||||
}
|
||||
.section:not(:last-child) {
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
padding: 1ex 0;
|
||||
}
|
||||
.section.header,
|
||||
.section.footer {
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-icon{
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.section.image-right img {
|
||||
float: right;
|
||||
margin: 15px 0 35px 35px;
|
||||
}
|
||||
.section.image-left img {
|
||||
float: left;
|
||||
margin: 15px 35px 45px 0;
|
||||
}
|
||||
.section ul {
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
|
||||
.section.image-left ul {
|
||||
padding-inline-start: calc(50% + 2em);
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.section > img {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section p.warning {
|
||||
border: 1px solid #eed936;
|
||||
background: #fff7b8;
|
||||
border-radius: 3px;
|
||||
padding-inline-start: 90px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.section p.warning::before {
|
||||
content: "⚠️";
|
||||
font-size: 50px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5em);
|
||||
left: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.section p {
|
||||
color: light-dark(#666, #ddd);
|
||||
}
|
||||
.section p.donatebutton {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 3ex;
|
||||
}
|
||||
.section p.donatebutton .button {
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.section p.donatebutton .button .icon-box {
|
||||
background-color: light-dark(#fff, #27272a);
|
||||
padding: 7px 5px 3px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.section form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
|
||||
.section input[type="text"] {
|
||||
padding: 10px;
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.section input[type="radio"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.section input[type="submit"],
|
||||
.section .button {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
background-color: #0a84ff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
0.3s background-color,
|
||||
0.3s box-shadow,
|
||||
0.3s margin;
|
||||
}
|
||||
|
||||
.section .button:hover {
|
||||
box-shadow: inset 4px 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.section .button img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section .button:active {
|
||||
box-shadow: inset 5px 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
86
pages/onboarding/onboarding.html
Normal file
86
pages/onboarding/onboarding.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
- Portions Copyright (C) Philipp Kewisch
|
||||
- This is a modified version of the original file of Quick Folder Move:
|
||||
- https://github.com/kewisch/quickmove-extension/blob/v3.1.0/src/onboarding/onboarding.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to ThunderAI!</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="onboarding.css">
|
||||
<link rel="icon" href="../../images/icon-16px.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="section header">
|
||||
<h1><img src="../../images/icon.png" class="title-icon"/>ThunderAI</h1>
|
||||
<p>
|
||||
Welcome to ThunderAI!
|
||||
<br>This add-on is designed to enhance your email management with the power of AI.
|
||||
<br>With ThunderAI, you can streamline your inbox, generate smart replies, summarize emails, and much more—all with the help of artificial intelligence.
|
||||
<br><br>On this page, you'll find an overview of the key features available to help you make the most of ThunderAI.
|
||||
<br>Get ready to experience a smarter, more efficient way to handle your emails!
|
||||
<br><br>Let's see how to make best use of this add-on!
|
||||
</p>
|
||||
</div>
|
||||
<div class="section image-left">
|
||||
<h2>Using Prompts</h2>
|
||||
<img src="images/prompts-button.png" alt="Prompts menu button" />
|
||||
<p>
|
||||
On each message, there is a button that will allow you to open the prompts menu.
|
||||
<br>Here you can choose the prompt in different ways:
|
||||
<ul>
|
||||
<li><b>Search box</b>: Use this to search for part of the prompt.</li>
|
||||
<li><b>Down/Up Arrow</b>: Move through the prompts.</li>
|
||||
<li><b>Press a number</b>: Press a number on the kayboard to choose the corresponding prompt.</li>
|
||||
<li><b>Enter</b>: When you've picked the prompt you'd like, press enter to execute it.</li>
|
||||
</ul>
|
||||
In the ThunderAI options page you could find some option regarding this menu.
|
||||
<br>The first two prompts are special ones, that are available only when using an API integration. They work directly without opening the AI Chat webpage.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section image-right">
|
||||
<h2>Defining your Custom Prompts</h2>
|
||||
<img src="images/customprompts.png" alt="Managing Custom Prompts"/>
|
||||
<p>
|
||||
From the options page you can open the Custom Prompts page.
|
||||
<br>From there you can add your prompts, and also disable the default ones.
|
||||
<br>You can find more info <a href="https://micz.it/thunderbird-addon-thunderai/custom-prompts/" target="_blank">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
While defining your own prompts you can also use data placeholders, that will be substituted with the corresponding information when using the prompt.
|
||||
<br>You can find more info <a href="https://micz.it/thunderbird-addon-thunderai/data-placeholders/" target="_blank">here</a>.
|
||||
</p>
|
||||
<p class="clear">
|
||||
For example, you can use the placeholder <i>{%mail_subject%}</i> to refer to the subject of the email or <i>{%tags_current_email%}</i> to refer to the tags of the current email.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section image-left">
|
||||
<h2>Automatic features</h2>
|
||||
<img src="images/autospamfilter.png" alt="Auto spam filter" />
|
||||
<p>
|
||||
There are also two automatic features available when using an API integration, which can be activated from the options page:
|
||||
<br><br>
|
||||
<ul>
|
||||
<li><b>Auto Spam Filter</b>: automatically moves the email to the spam folder if it is detected as spam.</li>
|
||||
<li><b>Auto Tagging</b>: automatically assigns tags to the email.</li>
|
||||
</ul>
|
||||
<br>For each of these features, there is an options page to specify the settings and the custom prompt to be used.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section footer">
|
||||
<p style="text-align:center;">
|
||||
If you have any questions or suggestions, please open an issue on the <a href="https://github.com/micz/ThunderAI/" target="_blank">GitHub page</a>.
|
||||
</p>
|
||||
<p style="text-align:center;"><br>
|
||||
Do you enjoy ThunderAI?
|
||||
</p>
|
||||
<p class="donatebutton">
|
||||
<a class="button" href="https://paypal.me/miczit" target="_blank">Make a donation!</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue