Implement closed-by-default email list. #54 (#57)

* Implement closed-by-default email list. #54
* reload on empty page
* simple styling
This commit is contained in:
Aravindo Wingeier 2018-06-16 21:09:18 +02:00 committed by GitHub
parent eacc2c0f1c
commit 7d2b6eb0fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 4 deletions

View file

@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
## [Unreleased]
### Changed
- Show list of mails and show them only on click.
- Removed Turbolinks to allow for simpler code in new features. Add new mail alert.
- Rewrote to use mostly pure php. Uses Javascript only where its necessary.
- fixed problem where only one domain is defined

View file

@ -44,7 +44,7 @@ Disposable-mailbox can be installed by copying the src directory to a webserver.
2. download a [release](https://github.com/synox/disposable-mailbox/releases) or clone this repository
3. copy the files in the `src` directory to your web server (not the whole repo!).
4. rename `config.sample.php` to `config.php` and apply the imap settings. Move `config.php` to a safe location outside the `public_html`.
5. edit `index.php` and set the new path to `config.php`.
5. edit `index.php` and `json-api.php`: set the new path to `config.php`.
6. open it in your browser, check your php error log for messages.

View file

@ -38,6 +38,9 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
<link rel="stylesheet" href="spinner.css">
<script>
var mailCount = <?php echo count($emails)?>;
function copyToClipboard(text) {
var inp = document.createElement('input');
document.body.appendChild(inp);
@ -47,6 +50,21 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
inp.remove();
}
function toggle_email_visibility(email_id) {
var mailPreviewHeader = document.getElementById("email-preview-header-" + email_id);
var mailFullHeader = document.getElementById("email-fullheader-" + email_id);
var mailBody = document.getElementById("email-content-" + email_id);
if (mailPreviewHeader.style.display !== 'none') {
mailPreviewHeader.style.display = 'none';
mailFullHeader.style.display = 'block';
mailBody.style.display = 'block';
} else {
mailPreviewHeader.style.display = 'block';
mailFullHeader.style.display = 'none';
mailBody.style.display = 'none';
}
}
setInterval(function () {
var r = new XMLHttpRequest();
@ -56,6 +74,11 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
if (r.responseText > 0) {
console.log("There are", r.responseText, "new mails.");
document.getElementById("new-content-avalable").style.display = 'block';
// If there are no emails displayed, we can reload the page without looing any state.
if (mailCount === 0) {
location.reload();
}
}
};
r.send();
@ -157,7 +180,43 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
<div class="email-table">
<div class="card email">
<div class="card-block header-shadow">
<!-- preview header -->
<div class="card-block header-shadow email-preview-header"
id="email-preview-header-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
<div class="row">
<div class="col-sm-12">
<b class="card-title">
<?php echo filter_var($email->subject, FILTER_SANITIZE_SPECIAL_CHARS); ?>
</b>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h6 class="card-subtitle mt-1 text-muted">
<?php
echo filter_var($email->fromName, FILTER_SANITIZE_SPECIAL_CHARS);
echo ' &lt;';
echo filter_var($email->fromAddress, FILTER_SANITIZE_SPECIAL_CHARS);
echo '&gt;';
?>
</h6>
</div>
<div class="col-sm-4">
<h6 class="card-subtitle mt-1 text-muted"
style="text-align: right">
<?php echo filter_var($email->date, FILTER_SANITIZE_SPECIAL_CHARS); ?>
</h6>
</div>
</div>
</div>
<!-- full header -->
<div class="card-block header-shadow email-fullheader"
id="email-fullheader-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
<div class="row">
<div class="col-sm-8">
<h3 class="card-title">
@ -197,7 +256,10 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
</div>
</div>
<div class="card-block">
<!-- email content -->
<div class="card-block email-content"
id="email-content-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>">
<h6 class="card-subtitle text-muted">
To: <?php echo filter_var($email->toString, FILTER_SANITIZE_SPECIAL_CHARS); ?></h6>
@ -249,4 +311,4 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
| <a href="https://github.com/synox/disposable-mailbox">Contribute to the development on Github.</a></p>
</footer>
</body>
</html>
</html>

View file

@ -40,6 +40,18 @@ div.min-height {
text-align: center;
}
.email-fullheader {
display: none;
}
.email-preview-header {
cursor: pointer;
}
.email-content {
display: none;
}
#new-content-avalable {
display: none;
}