Add compose window
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
119
mail.css
|
|
@ -1328,3 +1328,122 @@ div
|
|||
{
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.compose
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.compose .actions
|
||||
{
|
||||
padding: 5px;
|
||||
height: 42px;
|
||||
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
|
||||
background: -webkit-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
|
||||
border-bottom: 1px solid #aca9a7;
|
||||
}
|
||||
|
||||
.compose .flex
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.compose .flex .headers
|
||||
{
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.compose .flex .text
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.compose .headers
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.compose .headers .headers-table
|
||||
{
|
||||
display: table;
|
||||
width: 80%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.compose .headers .header
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.compose .headers .header > div
|
||||
{
|
||||
display: table-cell;
|
||||
padding: 4px;
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.compose .headers .header .field
|
||||
{
|
||||
font-weight: bold;
|
||||
padding: 4px 20px 4px 10px;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.compose .headers .header .value input, .compose .headers .header .value select
|
||||
{
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.compose .headers .header .value input
|
||||
{
|
||||
border: 1px solid #cac6c5;
|
||||
}
|
||||
|
||||
.compose .headers .attach
|
||||
{
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.compose .headers .attach .no-attach
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: url(icons/attachment_bg2.png) 50% 50% no-repeat;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.compose .headers .attach .no-attach:hover
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.compose .text textarea
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font: 16px/20px Consolas;
|
||||
outline: 0;
|
||||
padding: 4px;
|
||||
border: 0;
|
||||
border-top: 1px solid #cac6c5;
|
||||
}
|
||||
|
|
|
|||
65
mail.htm
|
|
@ -300,12 +300,70 @@
|
|||
<div class="tab selected noclose" id="t-tab1"><img src="icons/mail_unread.png" /> Unread (64)</div>
|
||||
<div class="tab" id="t-tab2"><a class="close"></a> <img src="icons/mail_drafts.png" class="i16" /> Compose Message</div>
|
||||
<div class="tab" id="t-tab3"><a class="close"></a> <img src="icons/mail_drafts.png" class="i16" /> Compose Message</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab2" style="display: none">
|
||||
|
||||
</div>
|
||||
<div class="tab-content" id="tab3" style="display: none">
|
||||
|
||||
</div>
|
||||
<div class="tab-content" id="tab2" style="display: none">
|
||||
<div class="compose">
|
||||
<div class="actions">
|
||||
<a class="button"><img src="icons/mail_send.png" />Send</a>
|
||||
<a class="button"><img src="icons/delete.png" /></a>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="headers">
|
||||
<div class="headers-table">
|
||||
<div class="header">
|
||||
<div class="field">From</div>
|
||||
<div class="value">
|
||||
<select>
|
||||
<option>"Виталий Филиппов" <vitalif@mail.ru></option>
|
||||
<option>"Виталий Филиппов" <vitalif@yourcmc.ru></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="field">To</div>
|
||||
<div class="value"><input /></div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="field">Cc</div>
|
||||
<div class="value"><input /></div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="field">Bcc</div>
|
||||
<div class="value"><input /></div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="field">Subject</div>
|
||||
<div class="value"><input /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attach">
|
||||
<div class="no-attach"></div>
|
||||
<div class="attach-list" style="display: none">
|
||||
<div class="title">
|
||||
<div class="name">Attachment</div>
|
||||
<div class="size">Size</div>
|
||||
</div>
|
||||
<div class="attach">
|
||||
<div class="name">selectedcolor1.png</div>
|
||||
<div class="size">8.1 KB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<textarea>
|
||||
|
||||
|
||||
--
|
||||
С наилучшими пожеланиями,
|
||||
Виталий Филиппов
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content message-on-right" id="tab1">
|
||||
<div class="message-list">
|
||||
|
|
@ -525,7 +583,6 @@
|
|||
</div>
|
||||
<script>
|
||||
<!--
|
||||
// TODO: compose window
|
||||
// TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll)
|
||||
// TODO: keyboard navigation in dropdowns
|
||||
// TODO: message multiselect in list
|
||||
|
|
|
|||