Commit 1c60a6bd authored by MrMan's avatar MrMan

Working selection mechanism

parent 175374a0
......@@ -120,7 +120,7 @@ var ELLIPSIS_CHAR_LIMIT = 60;
function EmailService() {
this.selectedEmailId = null;
this.checkedEmailIds = {};
this.allEmailsChecked = false;
this._allEmailsChecked = false;
}
EmailService.prototype.selectEmailById = function(id, opts) {
......@@ -131,7 +131,7 @@ EmailService.prototype.selectEmailById = function(id, opts) {
if (opts && opts.redraw) { m.redraw(); }
};
EmailService.prototype.getEmailSelectedStatus = function(id) {
EmailService.prototype.getEmailSelectedStatusById = function(id) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
return this.selectedEmailId === id;
};
......@@ -147,11 +147,11 @@ EmailService.prototype.checkEmailById = function(id, opts) {
EmailService.prototype.getEmailCheckedStatusById = function(id) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
return this.allEmailsChecked ? true : id in this.checkedEmailIds;
return this._allEmailsChecked ? true : id in this.checkedEmailIds;
};
EmailService.prototype.clearCheckedEmails = function(opts) {
this.allEmailsChecked = false;
this._allEmailsChecked = false;
this.checkedEmailIds = {};
console.log("[email-svc] cleared checked emails");
......@@ -159,12 +159,21 @@ EmailService.prototype.clearCheckedEmails = function(opts) {
};
EmailService.prototype.checkAllEmails = function(opts) {
this.allEmailsChecked = true;
this._allEmailsChecked = true;
console.log("[email-svc] checked all emails");
if (opts && opts.redraw) { m.redraw(); }
};
EmailService.prototype.allEmailsChecked = function(opts) {
return this._allEmailsChecked;
};
EmailService.prototype.oneOrMoreEmailsChecked = function(opts) {
// Object.keys isn't supported on some IE browsers, but Mithril doesn't support older than IE11 anyway IIRC
return this._allEmailsChecked || Object.keys(this.checkedEmailIds).length > 0;
};
var EMAIL_SVC = new EmailService();
////////////////////
......@@ -317,11 +326,34 @@ var RHSHeader = {
};
var MultiSelectCheckbox = {
view: function() {
return m("span.component.multi-select-checkbox.gray-boxed.clickable", [
m("input[type=checkbox]"),
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
]);
view: function(vnode) {
var allEmailsChecked = vnode.attrs.allEmailsChecked;
var oneOrMoreEmailsChecked = vnode.attrs.oneOrMoreEmailsChecked;
var dropdownContentClasses = [];
var dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true;
if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); }
var selectionIconSrc = "static/images/icons/square.svg";
if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; }
if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; }
var selectionText = "Select All";
if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
if (allEmailsChecked) { selectionText = "Unselect All"; }
var clickHandler = function() { EMAIL_SVC.checkAllEmails(); };
if (allEmailsChecked || oneOrMoreEmailsChecked) { clickHandler = function() { EMAIL_SVC.clearCheckedEmails(); }; }
return m(
"span.component.multi-select-checkbox.gray-boxed.clickable",
{onclick: clickHandler},
[
m("span", [
m("img.icon", {src: selectionIconSrc}),
m("span.xs-margin-left", selectionText),
]),
]);
}
};
......@@ -366,13 +398,14 @@ var EmailListItem = {
var textContent = email.text || "";
var formattedSendDate = email.sendDate.toLocaleString();
var isSelected = EMAIL_SVC.getEmailSelectedStatus(email.id);
var isSelected = EMAIL_SVC.getEmailSelectedStatusById(email.id);
var isChecked = EMAIL_SVC.getEmailCheckedStatusById(email.id);
var additionalClasses = [];
if (isSelected) { additionalClasses.push("selected"); }
return m(
".component.email-list-item",
".component.email-list-item.clickable",
{
class: additionalClasses.join(" "),
onclick: function() { EMAIL_SVC.selectEmailById(email.id); }
......@@ -381,11 +414,8 @@ var EmailListItem = {
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
onclick: function() {
if (vnode.attrs.onSelected) {
vnode.attrs.onSelected(email);
}
}
checked: isChecked,
onclick: function() { EMAIL_SVC.checkEmailById(email.id); }
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
......@@ -425,10 +455,17 @@ var EmailList = {
var MailPageSubNav = {
view: function(vnode) {
var allEmailsChecked = EMAIL_SVC.allEmailsChecked();
var oneOrMoreEmailsChecked = EMAIL_SVC.oneOrMoreEmailsChecked();
// Container with buttons
return m(".component.mail-page-subnav", [
m(".lhs", [
m(MultiSelectCheckbox),
m(MultiSelectCheckbox, {
allEmailsChecked: allEmailsChecked,
oneOrMoreEmailsChecked: oneOrMoreEmailsChecked,
}),
m(ButtonGroup, {class: "sm-margin-left"}, [
m("button.clickable", "Archive"),
m("button.clickable", "Spam"),
......
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment