Polish the interface

This commit is contained in:
doanguyen 2020-01-08 19:49:26 +01:00
parent 0e7016b2e0
commit fd31b77b06
1 changed files with 52 additions and 46 deletions

View File

@ -19,7 +19,7 @@
<div class="page-header row"> <div class="page-header row">
<div class="col-lg-3 col-sm-12 p-0 mt-1"> <div class="col-lg-3 col-sm-12 p-0 mt-1">
<form method="get"> <form method="get">
<input type="search" name="query" autofocus placeholder="Enter to search for alias" class="form-control" <input type="search" name="query" autofocus placeholder="Enter to search for alias" class="form-control shadow"
value="{{ query }}"> value="{{ query }}">
</form> </form>
</div> </div>
@ -30,36 +30,36 @@
<input type="hidden" name="form-name" value="create-custom-email"> <input type="hidden" name="form-name" value="create-custom-email">
<button data-toggle="tooltip" <button data-toggle="tooltip"
title="Create a custom alias" title="Create a custom alias"
class="btn btn-primary mr-2">New Email Alias class="btn btn-primary mr-2"><i class="fa fa-plus"></i> New Email Alias
</button> </button>
</form> </form>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="create-random-email"> <input type="hidden" name="form-name" value="create-random-email">
<button data-toggle="tooltip" <button data-toggle="tooltip"
title="Create a totally random alias" title="Create a totally random alias"
class="btn btn-success">Random Alias class="btn btn-success"><i class="fa fa-random"></i> Random Alias
</button>
</form>
<button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"> </form>
<div class=""> <button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle"
<form method="post"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="hidden" name="form-name" value="create-random-email"> </button>
<input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.word.value }}"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
<button class="dropdown-item">By random words</button> <div class="">
</form> <form method="post">
</div> <input type="hidden" name="form-name" value="create-random-email">
<div class=""> <input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.word.value }}">
<form method="post"> <button class="dropdown-item">By Random Words</button>
<input type="hidden" name="form-name" value="create-random-email"> </form>
<input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.uuid.value }}">
<button class="dropdown-item">By UUID</button>
</form>
</div>
</div> </div>
<div class="">
<form method="post">
<input type="hidden" name="form-name" value="create-random-email">
<input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.uuid.value }}">
<button class="dropdown-item">By UUID</button>
</form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -70,17 +70,17 @@
{% for alias_info in aliases %} {% for alias_info in aliases %}
{% set gen_email = alias_info.gen_email %} {% set gen_email = alias_info.gen_email %}
<div class="col-md-6" <div class="col-md-6">
{% if loop.index ==1 %} <div class="card p-3 shadow-sm border-0 {% if alias_info.highlight %} highlight-row {% endif %}">
data-intro="This is an <b>alias</b>. <br><br>
<b>All</b> emails sent to an alias will be forwarded to your inbox. <br><br>
Alias is a great way to hide your personal email address so feel free to
use it whenever possible, for example on untrusted websites 😎"
{% endif %}
>
<div class="card p-3 {% if alias_info.highlight %} highlight-row {% endif %}">
<div> <div>
<span class="clipboard cursor mb-0" <span class="clipboard cursor mb-0"
{% if loop.index ==1 %}
data-intro="This is an <em>alias</em>. <br><br>
<b>All</b> emails sent to an alias will be <em>forwarded</em> to your inbox. <br><br>
Alias is a great way to hide your personal email address so feel free to
use it whenever possible, for example when signing up for a newsletter or creating a new account on a suspicious website 😎"
data-step="2"
{% endif %}
{% if gen_email.enabled %} {% if gen_email.enabled %}
data-toggle="tooltip" data-toggle="tooltip"
title="Copy to clipboard" title="Copy to clipboard"
@ -127,11 +127,12 @@
{% endif %} {% endif %}
{% if loop.index ==1 %} {% if loop.index ==1 %}
data-intro="By turning off an alias, emails sent to this alias will <b>NOT</b> data-intro="By turning off an alias, emails sent to this alias will <em>not</em>
be forwarded to your inbox. <br><br> be forwarded to your inbox. <br><br>
This should be used with care as others might This should be used with care as others might
not be able to reach you after ... not be able to reach you after ...
" "
data-step="3"
{% endif %} {% endif %}
style="padding-left: 0px" style="padding-left: 0px"
> >
@ -149,14 +150,17 @@
{% if gen_email.enabled %} {% if gen_email.enabled %}
<a href="{{ url_for('dashboard.alias_contact_manager', alias=gen_email.email) }}" <a href="{{ url_for('dashboard.alias_contact_manager', alias=gen_email.email) }}"
{% if alias_info.show_intro_test_send_email %} {% if alias_info.show_intro_test_send_email %}
data-intro="Not only alias can receive emails, it can send emails too!" data-intro="Not only alias can receive emails, it can <em>send</em> emails too! <br><br>
You can add a new <em>contact</em> to for your alias here. <br><br>
To send an email to your contact, SimpleLogin will create a <em>special</em> email address. <br><br>
Sending an email to this email address will <em>forward</em> the email to your contact"
data-step="4"
{% endif %} {% endif %}
class="btn btn-sm btn-outline-primary" class="btn btn-sm btn-outline-primary"
data-toggle="tooltip" data-toggle="tooltip"
title="Send email from alias" title="Not only an alias can receive emails, it can send emails too"
> >
Send Email &nbsp; &nbsp; Send Email&nbsp; &nbsp;<i class="fe fe-send"></i>
<span class="badge badge-info">Beta</span>
</a> </a>
{% endif %} {% endif %}
</div> </div>
@ -167,8 +171,8 @@
<input type="hidden" name="gen-email-id" value="{{ gen_email.id }}"> <input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
<input type="hidden" name="alias" class="alias" value="{{ gen_email.email }}"> <input type="hidden" name="alias" class="alias" value="{{ gen_email.email }}">
<span class="delete-email btn btn-link btn-sm float-right"> <span class="delete-email btn btn-link btn-sm float-right text-danger">
Delete&nbsp; &nbsp;<i class="dropdown-icon fe fe-trash-2"></i> Delete&nbsp; &nbsp;<i class="dropdown-icon fe fe-trash-2 text-danger"></i>
</span> </span>
</form> </form>
</div> </div>
@ -183,10 +187,12 @@
{% if client_users %} {% if client_users %}
<div class="page-header row"> <div class="page-header row">
<h3 class="page-title col" data-intro="Here you can find the list of website/app on which <h3 class="page-title col"
you have used the <b>Connect with SimpleLogin</b> button <br><br> data-intro="Here you can find the list of website/app on which
You also see what information that SimpleLogin has communicated to these website/app when you sign in. you have used the <em>Connect with SimpleLogin</em> button <br><br>
"> You also see what information that SimpleLogin has communicated to these website/app when you sign in."
data-step="5"
>
Apps Apps
</h3> </h3>
</div> </div>