synox
GitHub
parent
06d7b86d99
commit
05f79f7cfb
5 changed files with 152 additions and 87 deletions
22
CHANGELOG.md
Normal file
22
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# Change Log
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||
and this project does not adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Changed
|
||||
- Improved styling using card layout
|
||||
|
||||
## [0.1.3] - 2017-03-24
|
||||
### Changed
|
||||
- new nicer login form
|
||||
- layout optimized (show html now on the right)
|
||||
- tell user that mails will be deleted
|
||||
|
||||
### Added
|
||||
- set delete period in config
|
||||
|
||||
## [<=0.1.2]
|
||||
See https://github.com/synox/disposable-mailbox/releases
|
||||
59
src/client-libs/spinner.css
Normal file
59
src/client-libs/spinner.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* http://tobiasahlin.com/spinkit/ */
|
||||
|
||||
.spinner {
|
||||
margin: 20px auto;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.spinner .rect2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.spinner .rect3 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
.spinner .rect4 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.spinner .rect5 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
-webkit-transform: scaleY(0.4)
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scaleY(1.0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(1.0);
|
||||
-webkit-transform: scaleY(1.0);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
|
|
@ -28,50 +28,25 @@ header {
|
|||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.email-table > .email {
|
||||
border-top: 5px solid #7C96AB;
|
||||
|
||||
/* idea: card shadow arround:
|
||||
see https://blog.alexdevero.com/mastering-card-design-with-bootstrap-4/
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
*/
|
||||
}
|
||||
|
||||
.header-shadow {
|
||||
box-shadow: 0 2px 2px rgba(182, 182, 182, 0.75);
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.email {
|
||||
border-bottom: 1px solid #7C96AB;
|
||||
}
|
||||
|
||||
.email .email-summary {
|
||||
font-weight: bold;
|
||||
border-top: 5px solid #7C96AB;
|
||||
border-bottom: 1px solid #7C96AB;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.email .email-headers {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.email .email-headers dl {
|
||||
padding: 0 0 4px;
|
||||
color: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.email .email-headers dl dt {
|
||||
float: left;
|
||||
color: black;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
|
||||
.email .email-headers dl dd {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.email .mail-content {
|
||||
background-color: white;
|
||||
padding-left: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.waiting-screen {
|
||||
padding: 40px 15px;
|
||||
|
|
|
|||
107
src/index.html
107
src/index.html
|
|
@ -10,6 +10,7 @@
|
|||
<meta name="description" content="Mailbox">
|
||||
<link rel="shortcut icon" href="favicon.gif" type="image/x-icon">
|
||||
<link rel="stylesheet" href="client-libs/style.css">
|
||||
<link rel="stylesheet" href="client-libs/spinner.css">
|
||||
<link rel="stylesheet" href="client-libs/angular-stickyfill-0.1.0/angular-stickyfill.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
|
||||
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
|
||||
|
|
@ -48,74 +49,82 @@
|
|||
<div ng-if="$ctrl.error" class="alert alert-danger" role="alert">
|
||||
<p><strong>Sorry, there was a problem. </strong></p>
|
||||
<p> {{$ctrl.error.desc}} </p>
|
||||
<p>
|
||||
<pre>{{$ctrl.error.detail|json}}</pre>
|
||||
</p>
|
||||
<div>
|
||||
<pre>{{$ctrl.error.detail|json}}</pre>
|
||||
</div>
|
||||
<p> If you are the developer you might want to check the developer tools console of your web
|
||||
browser and your php error logs. </p>
|
||||
</div>
|
||||
|
||||
<div ng-if="$ctrl.username && $ctrl.mails.length == 0">
|
||||
<div class="waiting-screen">
|
||||
<p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
|
||||
<p>Emails will appear here automatically. They will be deleted after 30 days.</p>
|
||||
<p><br/>
|
||||
<img src="client-libs/spinner.gif">
|
||||
<br/>
|
||||
</p>
|
||||
<div class="card waiting-screen">
|
||||
<div class="card-block">
|
||||
<p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
|
||||
<p>Emails will appear here automatically. They will be deleted after 30 days.</p>
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="$ctrl.username" ng-repeat="mail in $ctrl.mails | orderBy:'-date' track by $index"
|
||||
class="email-table">
|
||||
|
||||
<section class="email" ng-init="htmlTabActive=false">
|
||||
<div class="row sticky-header" ec-stickyfill>
|
||||
<div class="col-sm-12 email-summary">{{mail.subject}}
|
||||
<form class="form-inline float-xs-right">
|
||||
<div class="card email">
|
||||
<div class="card-block header-shadow sticky-header" ec-stickyfill ng-init="htmlTabActive=false">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="card-title">{{mail.subject}}</h3>
|
||||
</div>
|
||||
<div class="col-sm-4 text-right">
|
||||
<form class="form-inline float-xs-right">
|
||||
|
||||
<button ng-show="htmlTabActive" class="btn btn-outline-info btn-sm"
|
||||
ng-click="htmlTabActive=false">show text
|
||||
</button>
|
||||
<button ng-show="mail.textHtml && !htmlTabActive" class="btn btn-outline-info btn-sm"
|
||||
ng-click="htmlTabActive=true">show html
|
||||
</button>
|
||||
<button ng-show="htmlTabActive" class="btn btn-outline-info btn-sm "
|
||||
ng-click="htmlTabActive=false">show text
|
||||
</button>
|
||||
<button ng-show="mail.textHtml && !htmlTabActive"
|
||||
class="btn btn-outline-info btn-sm"
|
||||
ng-click="htmlTabActive=true">show html
|
||||
</button>
|
||||
|
||||
<a role="button" class="btn btn-sm btn-outline-primary"
|
||||
href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
|
||||
download="true">Download
|
||||
</a>
|
||||
<a role="button" class="btn btn-sm btn-outline-primary "
|
||||
href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
|
||||
download="true">Download
|
||||
</a>
|
||||
|
||||
<button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
|
||||
class="btn btn-sm btn-outline-danger">Delete
|
||||
</button>
|
||||
</form>
|
||||
<button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
|
||||
class="btn btn-sm btn-outline-danger">Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h6 class="card-subtitle mt-1 text-muted">{{mail.fromName}}
|
||||
<{{mail.fromAddress}}></h6>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h6 class="card-subtitle mt-1 text-muted" style="text-align: right">{{mail.date}}</h6>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 email-headers">
|
||||
<dl>
|
||||
<dt>To:</dt>
|
||||
<dd>{{mail.toString}}</dd>
|
||||
<div ng-if="mail.cc" ng-repeat="(address,name) in mail.cc">
|
||||
<dt>CC:</dt>
|
||||
<dd>{{address}}</dd>
|
||||
</div>
|
||||
<dt>From:</dt>
|
||||
<dd>{{mail.fromName}} <{{mail.fromAddress}}></dd>
|
||||
<dt>Date:</dt>
|
||||
<dd>{{mail.date}}</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mail-content">
|
||||
<div ng-if="!htmlTabActive" class="mail-content"
|
||||
ng-bind-html="mail.textPlain | nl2br | autolink "></div>
|
||||
<div ng-if="htmlTabActive" class="mail-content" ng-bind-html="mail.textHtml"></div>
|
||||
<div class="card-block">
|
||||
<h6 class="card-subtitle text-muted">To: {{mail.toString}}</h6>
|
||||
<h6 ng-if="mail.cc" ng-repeat="(address,name) in mail.cc" class="card-subtitle text-muted">CC:
|
||||
{{address}}</h6>
|
||||
|
||||
<div class="mt-2 card-text">
|
||||
<div ng-if="!htmlTabActive" ng-bind-html="mail.textPlain | nl2br | autolink "></div>
|
||||
<div ng-if="htmlTabActive" ng-bind-html="mail.textHtml"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue