338 lines
10 KiB
JavaScript
338 lines
10 KiB
JavaScript
const React = require('react');
|
||
const ReactDOM = require('react-dom');
|
||
const ComposeWindow = require('./ComposeWindow.js');
|
||
const DropDownMenu = require('./DropDownMenu.js');
|
||
const FolderList = require('./FolderList.js');
|
||
const ListSortSettingsWindow = require('./ListSortSettingsWindow.js');
|
||
const MailSettingsWindow = require('./MailSettingsWindow.js');
|
||
const MessageList = require('./MessageList.js');
|
||
const MessageView = require('./MessageView.js');
|
||
const TabPanel = require('./TabPanel.js');
|
||
const Store = require('./Store.js');
|
||
|
||
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame;
|
||
|
||
var WeekDays = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
|
||
var Months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
|
||
|
||
var dropdown_account = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'account',
|
||
items: [ {
|
||
icon: 'mail_unread',
|
||
i16: true,
|
||
text: 'Read vitalif@mail.ru'
|
||
}, {
|
||
icon: 'folder',
|
||
text: 'IMAP Folders',
|
||
}, {
|
||
icon: 'properties',
|
||
text: 'Properties...'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_reply = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'reply',
|
||
items: [ {
|
||
hotkey: 'R',
|
||
icon: 'mail_reply',
|
||
text: 'Reply'
|
||
}, {
|
||
icon: 'mail_reply',
|
||
text: 'Reply to Sender',
|
||
}, {
|
||
disabled: true,
|
||
icon: 'mail_reply_all',
|
||
text: 'Reply to List'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_forward = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'forward',
|
||
items: [ {
|
||
hotkey: 'F',
|
||
icon: 'mail_forward',
|
||
text: 'Reply'
|
||
}, {
|
||
hotkey: 'D',
|
||
text: 'Redirect'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_delete = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'delete',
|
||
items: [ {
|
||
text: 'Move to Trash'
|
||
}, {
|
||
icon: 'delete',
|
||
text: 'Delete Permanently'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_check_send = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'check-send',
|
||
items: [ {
|
||
hotkey: 'Ctrl-K',
|
||
icon: 'mail_check',
|
||
text: 'Check All'
|
||
}, {
|
||
hotkey: 'Ctrl-Shift-K',
|
||
icon: 'mail_send',
|
||
text: 'Send Queued'
|
||
}, { split: true }, {
|
||
icon: 'mail_check',
|
||
text: 'vitalif@mail.ru'
|
||
}, {
|
||
icon: 'mail_check',
|
||
text: 'vitalif@yourcmc.ru'
|
||
}, { split: true }, {
|
||
text: 'Resynchronize All Messages'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_threads = React.createElement(
|
||
DropDownMenu, {
|
||
id: 'threads',
|
||
items: [ {
|
||
icon: 'thread',
|
||
text: 'Show Message Thread'
|
||
}, {
|
||
text: 'Follow Thread'
|
||
}, {
|
||
text: 'Ignore Thread'
|
||
}, { split: true }, {
|
||
hotkey: 'M',
|
||
icon: 'read',
|
||
text: 'Mark Thread as Read'
|
||
}, { split: true }, {
|
||
hotkey: 'N',
|
||
text: 'Mark Thread and Go to Next Unread'
|
||
} ]
|
||
}
|
||
);
|
||
|
||
var dropdown_list_sort = React.createElement(
|
||
ListSortSettingsWindow, {
|
||
id: 'list-sort',
|
||
window: true,
|
||
folder: 'INBOX',
|
||
override: false,
|
||
sorting: {},
|
||
defaultSorting: {
|
||
sort: {
|
||
sortby: 'sent date',
|
||
group: 'date',
|
||
ascending: false,
|
||
threaded: false
|
||
}
|
||
},
|
||
show: {
|
||
read: true,
|
||
trash: false,
|
||
spam: false,
|
||
lists: true,
|
||
sent: true,
|
||
dups: true
|
||
}
|
||
}
|
||
);
|
||
|
||
var dropdown_settings = React.createElement(
|
||
MailSettingsWindow, {
|
||
id: 'settings',
|
||
window: true,
|
||
markDelay: -1,
|
||
defaultSorting: {
|
||
sort: {
|
||
sortby: 'sent date',
|
||
group: 'date',
|
||
ascending: false,
|
||
threaded: false
|
||
}
|
||
}
|
||
}
|
||
);
|
||
|
||
var accounts = [
|
||
{
|
||
name: 'All Messages',
|
||
accountId: null,
|
||
unreadCount: 65,
|
||
folders: [
|
||
{ name: 'Unread', icon: 'mail_unread', unreadCount: 65 },
|
||
{ name: 'Received', icon: 'mail_received', unreadCount: 65 },
|
||
{ name: 'Pinned', icon: 'mail_pinned' },
|
||
{ name: 'Outbox', icon: 'mail_outbox' },
|
||
{ name: 'Sent', icon: 'mail_sent' },
|
||
{ name: 'Drafts', icon: 'mail_drafts', unreadCount: 507 },
|
||
{ name: 'Spam', icon: 'mail_spam' },
|
||
{ name: 'Trash', icon: 'mail_trash', unreadCount: 423 },
|
||
],
|
||
},
|
||
{
|
||
name: 'vitalif@mail.ru',
|
||
accountId: 1,
|
||
unreadCount: 48,
|
||
warning: true,
|
||
folders: [
|
||
{ name: 'Unread', icon: 'mail_unread', unreadCount: 48 },
|
||
{ name: 'INBOX', icon: 'folder', unreadCount: 48 },
|
||
{ name: 'TODO', icon: 'folder' },
|
||
{ name: 'Архив', icon: 'folder' },
|
||
{ name: 'Корзина', icon: 'mail_trash' },
|
||
{ name: 'Отправленные', icon: 'mail_sent' },
|
||
{ name: 'Спам', icon: 'mail_spam' },
|
||
{ name: 'Черновики', icon: 'mail_drafts' },
|
||
{ name: 'Pinned', icon: 'mail_pinned' },
|
||
],
|
||
},
|
||
{
|
||
name: 'vitalif@yourcmc.ru',
|
||
accountId: 2,
|
||
unreadCount: 16,
|
||
loading: true,
|
||
folders: [
|
||
{ name: 'Unread', icon: 'mail_unread', unreadCount: 16 },
|
||
{ name: 'Drafts', icon: 'mail_drafts' },
|
||
{ name: 'HAM', icon: 'folder' },
|
||
{ name: 'INBOX', icon: 'folder', unreadCount: 16 },
|
||
{ name: 'intermedia_su', icon: 'folder' },
|
||
{ name: 'Sent', icon: 'mail_sent' },
|
||
{ name: 'SPAM', icon: 'mail_spam' },
|
||
{ name: 'TRASH', icon: 'mail_trash' },
|
||
{ name: 'Pinned', icon: 'mail_pinned' },
|
||
],
|
||
}
|
||
];
|
||
|
||
var composeAccounts = [
|
||
{ name: 'Виталий Филиппов', email: 'vitalif@mail.ru' },
|
||
{ name: 'Vitaliy Filippov', email: 'vitalif@yourcmc.ru' }
|
||
];
|
||
|
||
var msg2 = [];
|
||
msg2[5] = {
|
||
subject: 'кошку хочешь?))',
|
||
sent: true,
|
||
from: 'Виталий Филиппов',
|
||
fromEmail: 'vitalif@mail.ru',
|
||
to: 'Margarita Philippova',
|
||
time: '2016-06-14 21:24',
|
||
body: 'к нам тут пришла какая-то и к нам в дом рвётся, симпатишная) потеряшка какая-то, но явно домашняя, не боится людей))',
|
||
thread: [ {
|
||
subject: 'Re: кошку хочешь?))',
|
||
from: 'Margarita Philippova',
|
||
fromEmail: 'philippova.marga@gmail.com',
|
||
to: 'Виталий Филиппов',
|
||
time: '2016-06-14 22:31',
|
||
level: 1,
|
||
body: 'Нет, конечно, не хочу. Я уеду в Баку, а кошка как? Уеду в Астану - а кошка как? Наташа меня Сухорукова приглашает в Барселону - а кошку куда? Я только испытала радость облегчения от того, что у меня больше нет горшочных цветов - и кошку мне? НЕт! Папику предложи - у него уже много зверья, одной кошкой больше - одной меньше - какая разница?'
|
||
} ]
|
||
};
|
||
|
||
var listGroups = [ {
|
||
name: 'TODAY',
|
||
messageCount: 10,
|
||
messages: [ {
|
||
subject: 'The Glossary of Happiness By Emily Anthes , May 12, 2016',
|
||
from: 'Margarita Philippova',
|
||
fromEmail: 'philippova.marga@gmail.com',
|
||
to: 'Виталий Филиппов',
|
||
time: '2016-06-20 00:11:18',
|
||
unread: true,
|
||
body: '<pre><a href="http://www.newyorker.com/tech/elements/the-glossary-of-happiness">http://www.newyorker.com/tech/elements/the-glossary-of-happiness</a><br />\
|
||
<br />\
|
||
--<br />\
|
||
Best regards,<br />\
|
||
Margarita Philippova</pre>'
|
||
} ]
|
||
}, {
|
||
name: 'LAST WEEK',
|
||
messageCount: 15,
|
||
messages: msg2
|
||
} ];
|
||
|
||
var AllTabs = React.createClass({
|
||
componentDidMount: function()
|
||
{
|
||
Store.on('layout', this.setLayout);
|
||
},
|
||
componentWillUnmount: function()
|
||
{
|
||
Store.un('layout', this.setLayout);
|
||
},
|
||
setLayout: function()
|
||
{
|
||
var oldLayout = this.state.layout;
|
||
this.setState({ layout: Store.layout });
|
||
window.scrollBy(0, 0);
|
||
var self = this;
|
||
requestAnimationFrame(function()
|
||
{
|
||
var btn;
|
||
if (oldLayout == 'message-on-right' &&
|
||
Store.layout != 'message-on-right')
|
||
{
|
||
btn = self.refs.list.refs.setBtn;
|
||
}
|
||
else if (oldLayout != 'message-on-right' &&
|
||
Store.layout == 'message-on-right')
|
||
{
|
||
btn = self.refs.view.refs.setBtn;
|
||
}
|
||
if (btn)
|
||
{
|
||
btn.setState({ pressed: false });
|
||
btn.toggle();
|
||
}
|
||
});
|
||
},
|
||
getInitialState: function()
|
||
{
|
||
return { layout: Store.layout };
|
||
},
|
||
render: function()
|
||
{
|
||
return React.createElement(TabPanel, { tabs: [
|
||
{
|
||
className: this.state.layout,
|
||
noclose: true,
|
||
icon: 'mail_unread',
|
||
title: 'Unread (64)',
|
||
children: [ <MessageList ref="list" groups={listGroups} />, <MessageView ref="view" /> ]
|
||
},
|
||
{
|
||
icon: 'mail_drafts',
|
||
i16: true,
|
||
title: 'Compose Message',
|
||
children: <ComposeWindow accounts={composeAccounts} />
|
||
}
|
||
] });
|
||
}
|
||
});
|
||
|
||
ReactDOM.render(
|
||
<div>
|
||
{dropdown_account}
|
||
{dropdown_reply}
|
||
{dropdown_forward}
|
||
{dropdown_delete}
|
||
{dropdown_check_send}
|
||
{dropdown_threads}
|
||
{dropdown_list_sort}
|
||
{dropdown_settings}
|
||
<FolderList accounts={accounts} progress="33" />
|
||
<AllTabs />
|
||
</div>,
|
||
document.body
|
||
);
|