Skip to content

Commit

Permalink
Updated CSS and latest changes to Thread view stuffs
Browse files Browse the repository at this point in the history
  • Loading branch information
@bnvk
bnvk committed Jan 7, 2014
1 parent 006fde2 commit 10a62fd
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 183 deletions.
87 changes: 41 additions & 46 deletions static/default/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5977,7 +5977,6 @@ text {
#container {
width: 100%;
min-width: 825px;
display: table;
z-index: 1;
padding: 0;
margin: 0;
Expand All @@ -5986,7 +5985,7 @@ text {
/* Content */
#content {
min-width: 775px;
display: table-cell;
margin-left: 225px;
box-sizing: border-box;
}
#content.cozy {
Expand Down Expand Up @@ -6028,14 +6027,17 @@ div.content-normal {
/* Sidebar */
#sidebar {
width: 225px;
display: table-cell;
background: #f2f2f2;
border-right: 1px solid #b3b3b3;
position: fixed;
box-sizing: border-box;
margin: 0;
padding: 0px;
border-spacing: 0px;
vertical-align: top;
top: 62px;
bottom: 0;
overflow-y: auto;
}
#sidebar.cozy {
width: 215px;
Expand Down Expand Up @@ -6198,6 +6200,42 @@ div.content-normal {
.navigation-text {
margin: 0 0 0 8px;
}
/* Compose - New */
.compose-from-avatar {
width: 45px;
}
.compose-from-address {
color: #b3b3b3;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}
#thread-reply {
min-height: 225px;
padding: 10px 15px;
background: #f2f2f2;
}
#thread-reply-actions {
padding: 10px;
}
#reply-textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 14px;
line-height: 18px;
}
#reply-textarea:focus {
outline: none;
border: 1px solid #b3b3b3;
}
#reply-options li {
margin-left: 25px;
}
#thread-reply-details {
display: none;
}
/* Compose */
.compose-headers {
min-height: 30px;
Expand Down Expand Up @@ -6645,49 +6683,6 @@ a.compose-show-field {
color: #4b7945;
text-transform: uppercase;
}
/* Thread Reply */
#thread-reply {
min-height: 225px;
padding: 10px 15px;
background: #f2f2f2;
border-top: 1px solid #b3b3b3;
}
#thread-reply-actions {
padding: 10px;
}
#reply-textarea {
padding: 10px;
width: 100%;
border: 1px solid #cccccc;
font-size: 14px;
line-height: 18px;
}
#reply-textarea:focus {
outline: none;
border: 1px solid #b3b3b3;
}
#reply-options li {
margin-left: 25px;
}
#thread-reply-details {
display: none;
}
.message-headers {
padding: 15px;
border-bottom: 1px solid #b3b3b3;
font-size: 18px;
line-height: 18px;
}
.message-headers li {
margin-bottom: 10px;
}
.message-headers a {
font-size: 18px;
}
.message-datetime {
font-family: Mailpile-300, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
float: right;
}
.message-email-address {
display: inline-block;
vertical-align: middle;
Expand Down
59 changes: 27 additions & 32 deletions static/default/html/message/draft.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,30 @@
{% extends "layouts/base.html" %}
{% block content %}
{% if result
%}{% set profiles = mailpile('settings', 'profiles').result.profiles
%}
{% if result %}
{% set profiles = mailpile('settings', 'profiles').result.profiles %}

<div id="compose">
{% for mid in result.thread_ids
%}{% set message = result.data.messages.get(mid)
%}{% set metadata = result.data.metadata[mid]
%}{% if message and metadata.flags.draft
%}
{% for mid in result.thread_ids %}
{% set message = result.data.messages.get(mid) %}
{% set metadata = result.data.metadata[mid] %}
{% if message and metadata.flags.draft %}
<form id="form-compose" name="compose" action="/message/update/" method="POST" enctype="multipart/form-data">
<input type="hidden" name="mid" value="{{mid}}">
<div class="compose-headers compose-to">
<label>{{_("To")}}</label>
<input id="compose-to" name="to" type="text" tabindex="1"
value="{{message.editing_strings.to|e}}">
<input id="compose-to" name="to" type="text" tabindex="1" value="{{message.editing_strings.to|e}}">
<div class="compose-cell" style="float: right">
<a class="compose-show-field" href="#">{{_("Bcc")}}</a>
<a class="compose-show-field" href="#">{{_("Cc")}}</a>
</div>
</div>
<div id="compose-cc-html" class="compose-headers compose-cc">
<label>{{_("Cc")}}</label>
<input id="compose-cc" name="cc" type="text"
value="{{message.editing_strings.cc|e}}">
<input id="compose-cc" name="cc" type="text" value="{{message.editing_strings.cc|e}}">
</div>
<div id="compose-bcc-html" class="compose-headers compose-bcc">
<label>{{_("Bcc")}}</label>
<input id="compose-bcc" name="bcc" type="text"
value="{{message.editing_strings.bcc|e}}">
<input id="compose-bcc" name="bcc" type="text" value="{{message.editing_strings.bcc|e}}">
</div>
<div class="compose-headers compose-from">
<div class="compose-cell">
Expand All @@ -47,43 +42,43 @@
<div class="compose-cell">
<input id="compose-subject" name="subject" tabindex="3" type="text"
{% if message.editing_strings.subject == _("New message") %}
placeholder="{{message.editing_strings.subject}}"
value=""
placeholder="{{message.editing_strings.subject}}" value=""
{% else %}
value="{{message.editing_strings.subject}}"
{% endif %}>
</div>
<div class="compose-cell animated">
<span class="message-privacy-state icon-unencrypted"
title="This message is not encrypted"></span>
<span class="message-privacy-state icon-unencrypted" title="This message is not encrypted"></span>
</div>
</div>
<div class="compose-message">
<textarea id="compose-body" tabindex="4" name="body"
placeholder="{{_("Your message...")}}"
>{{message.editing_strings.body}}</textarea>
<textarea id="compose-body" tabindex="4" name="body" placeholder="{{_("Your message...")}}">
{{message.editing_strings.body}}
</textarea>
</div>
<div class="compose-attachments">
<span class="icon-attachment"></span> {{_("No Attachments")}}
<input type="file" name="file-data">
<ul id="compose-attachments-list"></ul>
</div>
<div class="content-normal">
<button class="compose-action" type="submit" name="send" value="send"
><span class="icon-sent"></span> {{_("Send")}}</button>
<button class="compose-action" type="submit" name="save" value="save"
><span class="icon-compose"></span> {{_("Save")}}</button>
<button class="compose-action" type="submit" name="send" value="send">
<span class="icon-sent"></span> {{_("Send")}}
</button>
<button class="compose-action" type="submit" name="save" value="save">
<span class="icon-compose"></span> {{_("Save")}}
</button>
</div>
</form>
{% else
%}{# {{mailpile('http/redirect/url_thread', mid)}}
#}{% endif
%}{% endfor %}{# for mid ... #}
{% else %}
{# {{mailpile('http/redirect/url_thread', mid)}} #}
{% endif %}
{% endfor %}{# for mid ... #}
</div>

{% else %}{# if result #}
{% else %}{# if result #}

<h1>{{_("Message not found!")}}</h1>
<h1>{{_("Message not found!")}}</h1>

{% endif %}{# if result #}
{% endif %}{# if result #}
{% endblock %}
64 changes: 16 additions & 48 deletions static/default/html/message/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,48 +39,33 @@ <h1>{{ start_subject }}</h1>
{% set show_encryption = true %}
{% include("partials/thread_item_metadata.html") %}

<div class="message-headers">
From
<a class="message-email-address" href="/contact/{{from.address|e}}/">
<img src="{{ show_avatar(from) }}">{{from.fn|e}}</a>
<!--
FIXME: Here below, we need a django filter to extract the e-mail
addresses and iterate through multiple values in a single
header. We could also use metadata.to_eids, but that does
not differentiate between to/cc. Maybe we want an
intermediate header summary in the result JSON?
-->
<!--
FIXME: Here below, we need a django filter to extract the e-mail
addresses and iterate through multiple values in a single
header. We could also use metadata.to_eids, but that does
not differentiate between to/cc. Maybe we want an
intermediate header summary in the result JSON?
-->
{% for header in ("To", "Cc", "Bcc") %}
{% for hdr, val in message.header_list %}
{% if hdr.lower() == header.lower() %}
{{_(header)}}
<a class="message-email-address" href="/contact/FIXME/"><img src="{{ show_avatar(result.data.addresses[metadata.from_aid]) }}">{{val|e}}</a>
<a class="message-email-address" href="/contact/FIXME/"><img src="{{ show_avatar(result.data.addresses[metadata.to_aid]) }}">{{val|e}}</a>
{% endif %}
{% endfor %}
{% endfor %}
</div>


{% for part in message.text_parts %}
{% if part.data == "" %}
<em>Message is empty</em>
{% else %}

{% if part.data != "" %}
<div class="thread-item-text text-part-{{part.type}}">
<div class="pgp_encrypted_{{part.encryption_info.status}}">
<div class="pgp_encryptedheader">
{% if part.encryption_info.status == "none" %}<span class="icon-unencrypted" title="{{_("Warning: This message was not encrypted. It may have been intercepted en route to you and read by an unauthorized party.")}}"></span>{% endif %}
{% if part.encryption_info.status == "decrypted" %}<span class="icon-encrypted" title="{{_("Successfully decrypted message")}}"></span>{% endif %}
{% if part.encryption_info.status == "missingkey" %}<span class="icon-encrypted" title="{{_("You do not have any of the private keys that will decrypt this message")}}"></span>{% endif %}
<div class="thread-item-data-encrypted pgp_encrypted_{{part.encryption_info.status}}">
{% if part.encryption_info.status == "none" %}
<span class="icon-unencrypted" title="{{_("Warning: This message was not encrypted. It may have been intercepted en route to you and read by an unauthorized party.")}}"></span> Not Encrypted
{% endif %}
{% if part.encryption_info.status == "decrypted" %}<span class="icon-encrypted" title="{{_("Successfully decrypted message")}}"></span> Decrypted{% endif %}
{% if part.encryption_info.status == "missingkey" %}<span class="icon-key" title="{{_("You do not have any of the private keys that will decrypt this message")}}"></span> Missing Key{% endif %}
{% if part.encryption_info.status == "error" %}<span class="icon-unencrypted" title="{{_("Failed to decrypt message")}}"></span>{% endif %}
</div>
<div class="pgp_signature_{{part.signature_info.status}}">
<div class="pgp_signheader">
{% if part.signature_info.status == "none" %}<span class="icon-unverified" title="{{_("Warning: This message was not digitally signed. It may have been forged or altered.")}}"></span>{% endif %}
{% if part.signature_info.status == "good" %}<a href="/contact/{{part.signature_info.email}}"><span class="icon-verified" title="{{_("Signed by")}} {{part.signature_info.name}}"></span></a>{% endif %}
{% if part.signature_info.status == "invalid" %}<a href="/contact/{{part.signature_info.email}}"><span class="icon-unverified" title="{{_("Unknown signature from")}} {{part.signature_info.name}}"></span></a>{% endif %}
{% if part.signature_info.status == "unknown" %}<span class="icon-unverified" title="{{_("Signed with unknown key")}}"></span>{% endif %}
{% if part.signature_info.status == "error" %}<span class="icon-unverified" title="{{_("Signature error")}}"></span>{% endif %}
</div>
</div>
{{ part.data|e|urlize }}
</div>
Expand Down Expand Up @@ -121,21 +106,6 @@ <h1>{{ start_subject }}</h1>
<li><a href="#"><span class="icon-trash"></span> Trash</a></li>
</ul>
</div>

<div class="message-actions">
<form action="/message/reply/={{mid}}/" method=POST>
<button type="submit"><span class="icon-reply"></span> {{_("Reply")}}</button>
</form>
<form action="/message/reply/={{mid}}/" method=POST>
<button type="submit"><span class="icon-reply-all"></span> {{_("All")}}</button>
</form>
<form action="/message/forward/={{mid}}/" method=POST>
<button type="submit"><span class="icon-forward"></span> {{_("Forward")}}</button>
</form>
<button type="submit"><span class="icon-archive"></span></button>
<button type="submit"><span class="icon-spam"></span></button>
<button type="submit"><span class="icon-trash"></span></button>
</div>

{% include("partials/compose.html") %}

Expand All @@ -155,8 +125,6 @@ <h1>{{ start_subject }}</h1>
{% endif %}
{% endfor %}{# for mid ... #}
</div>

{% include("partials/details_search_speed.html") %}

{% else %}
{% set error_title = "message_missing" %}
Expand Down
4 changes: 2 additions & 2 deletions static/default/html/partials/compose.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<ul class="left">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="reply-from" href="#">
<img src="/static/img/avatar-default.png">
<img class="compose-from-avatar" src="/static/img/avatar-default.png">
You <span class="icon-arrow-left"></span>
<span>hi@brennannovak.com</span>
<span class="compose-from-address">hi@brennannovak.com</span>
</a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="reply-from">
{% for p in result.profiles %}
Expand Down
50 changes: 50 additions & 0 deletions static/default/less/app-web/compose.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,53 @@
/* Compose - New */

.compose-from-avatar {
width: 45px;
}

.compose-from-address {
color: @gray;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}


#thread-reply {
min-height: 225px;
padding: 10px 15px;
background: @grayLight;
}

#thread-reply-actions {
padding: 10px;
}

#reply-textarea {
width: 100%;
padding: 10px;
border: 1px solid @grayMid;
border-radius: 3px;
font-size: 14px;
line-height: 18px;
}

#reply-textarea:focus {
outline: none;
border: 1px solid @gray;
}

#reply-options li {
margin-left: 25px;
}


#thread-reply-details {
display: none;
}




/* Compose */

.compose-headers {
Expand Down

0 comments on commit 10a62fd

Please sign in to comment.