Permalink
Browse files

Bug 1020306 - Make the thread/message edit mode to match the style us…

…ed by other applications r=gsvelto,julien
  • Loading branch information...
1 parent e57ea93 commit 1ff9755c563a08c0f8061719fb8738e6ebd2b1b5 @kumarrishav kumarrishav committed with julienw Jul 24, 2014
View
@@ -124,18 +124,13 @@ <h1 data-l10n-id="messages">Messages</h1>
<span data-l10n-id="cancel" class="icon icon-close">close</span>
</button>
<menu type="toolbar">
- <button id="threads-delete-button" data-l10n-id="delete">delete</button>
+ <button id="threads-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</menu>
- <h1 id="threads-edit-mode" data-l10n-id="deleteMessages-title">Delete messages</h1>
+ <h1 id="threads-edit-mode" data-l10n-id="selectThreads-title">Select</h1>
</header>
</section>
<menu>
- <button id="threads-uncheck-all-button" disabled class="edit-button" data-l10n-id="deselect-all">
- None
- </button>
- <button id="threads-check-all-button" class="edit-button" data-l10n-id="select-all">
- All
- </button>
+ <button id="threads-delete-button" data-l10n-id="delete">delete</button>
</menu>
</form>
@@ -285,18 +280,13 @@ <h1 id="messages-header-text" aria-hidden="true"></h1>
<span data-l10n-id="cancel" class="icon icon-close">close</span>
</button>
<menu type="toolbar">
- <button id="messages-delete-button" data-l10n-id="delete">delete</button>
+ <button id="messages-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</menu>
<h1 id="messages-edit-mode" data-l10n-id="deleteMessages-title">Delete Messages</h1>
</header>
</section>
<menu>
- <button id="messages-uncheck-all-button" disabled class="edit-button" data-l10n-id="deselect-all">
- None
- </button>
- <button id="messages-check-all-button" class="edit-button" data-l10n-id="select-all">
- All
- </button>
+ <button id="messages-delete-button" data-l10n-id="delete">delete</button>
</menu>
</form>
<section id="messages-recipient-suggestions" class="article-list hide" data-type="list">
@@ -465,7 +455,7 @@ <h1 class="message-subject">
<div id="messages-thread-tmpl" class="hide">
<!--
- <label class="pack-checkbox danger">
+ <label class="pack-checkbox negative">
<input type="checkbox" value="${id}" data-mode="${mode}">
<span></span>
</label>
@@ -34,7 +34,7 @@ var ThreadListUI = {
// TODO: https://bugzilla.mozilla.org/show_bug.cgi?id=854413
[
'container', 'no-messages',
- 'check-all-button', 'uncheck-all-button',
+ 'check-uncheck-all-button',
'delete-button', 'cancel-button',
'options-icon', 'edit-mode', 'edit-form', 'draft-saved-banner'
].forEach(function(id) {
@@ -51,12 +51,8 @@ var ThreadListUI = {
'click', this.launchComposer.bind(this)
);
- this.checkAllButton.addEventListener(
- 'click', this.toggleCheckedAll.bind(this, true)
- );
-
- this.uncheckAllButton.addEventListener(
- 'click', this.toggleCheckedAll.bind(this, false)
+ this.checkUncheckAllButton.addEventListener(
+ 'click', this.toggleCheckedAll.bind(this)
);
this.deleteButton.addEventListener(
@@ -239,18 +235,16 @@ var ThreadListUI = {
var selected = ThreadListUI.selectedInputs.length;
if (selected === ThreadListUI.allInputs.length) {
- this.checkAllButton.disabled = true;
+ navigator.mozL10n.localize(this.checkUncheckAllButton, 'deselect-all');
} else {
- this.checkAllButton.disabled = false;
+ navigator.mozL10n.localize(this.checkUncheckAllButton, 'select-all');
}
if (selected) {
- this.uncheckAllButton.disabled = false;
this.deleteButton.disabled = false;
navigator.mozL10n.localize(this.editMode, 'selected', {n: selected});
} else {
- this.uncheckAllButton.disabled = true;
this.deleteButton.disabled = true;
- navigator.mozL10n.localize(this.editMode, 'deleteMessages-title');
+ navigator.mozL10n.localize(this.editMode, 'selectThreads-title');
}
},
@@ -265,17 +259,18 @@ var ThreadListUI = {
this.checkInputs();
},
- toggleCheckedAll: function thlui_select(value) {
+ // if no thread or few are checked : select all the threads
+ // and if all threads are checked : deselect them all.
+ toggleCheckedAll: function thlui_select() {
+ var selected = ThreadListUI.selectedInputs.length;
+ var allSelected = (selected === ThreadListUI.allInputs.length);
var inputs = this.container.querySelectorAll(
'input[type="checkbox"]' +
- // value ?
- // true : query for currently unselected threads
- // false: query for currently selected threads
- (value ? ':not(:checked)' : ':checked')
+ (!allSelected ? ':not(:checked)' : ':checked')
);
var length = inputs.length;
for (var i = 0; i < length; i++) {
- inputs[i].checked = value;
+ inputs[i].checked = !allSelected;
}
this.checkInputs();
},
@@ -438,7 +433,7 @@ var ThreadListUI = {
// Add delete option when list is not empty
if (ThreadListUI.noMessages.classList.contains('hide')) {
params.items.unshift({
- l10nId: 'deleteMessages-label',
+ l10nId: 'selectThreads-label',
method: this.startEdit.bind(this)
});
}
@@ -95,7 +95,7 @@ var ThreadUI = {
// Fields with 'messages' label
[
'container', 'subheader', 'to-field', 'recipients-list', 'recipient',
- 'input', 'compose-form', 'check-all-button', 'uncheck-all-button',
+ 'input', 'compose-form', 'check-uncheck-all-button',
'contact-pick-button', 'back-button', 'close-button', 'send-button',
'attach-button', 'delete-button', 'cancel-button', 'subject-input',
'new-message-notice', 'options-icon', 'edit-mode', 'edit-form',
@@ -167,12 +167,8 @@ var ThreadUI = {
'click', this.close.bind(this)
);
- this.checkAllButton.addEventListener(
- 'click', this.toggleCheckedAll.bind(this, true)
- );
-
- this.uncheckAllButton.addEventListener(
- 'click', this.toggleCheckedAll.bind(this, false)
+ this.checkUncheckAllButton.addEventListener(
+ 'click', this.toggleCheckedAll.bind(this)
);
this.cancelButton.addEventListener(
@@ -1699,17 +1695,19 @@ var ThreadUI = {
this.checkInputs();
},
- toggleCheckedAll: function thui_select(value) {
+ // if no message or few are checked : select all the messages
+ // and if all messages are checked : deselect them all.
+ toggleCheckedAll: function thui_select() {
+ var selected = this.selectedInputs;
+ var allInputs = this.allInputs;
+ var allSelected = (selected.length === allInputs.length);
var inputs = this.container.querySelectorAll(
'input[type="checkbox"]' +
- // value ?
- // true : query for currently unselected threads
- // false: query for currently selected threads
- (value ? ':not(:checked)' : ':checked')
+ (!allSelected ? ':not(:checked)' : ':checked')
);
var length = inputs.length;
for (var i = 0; i < length; i++) {
- inputs[i].checked = value;
+ inputs[i].checked = !allSelected;
this.chooseMessage(inputs[i]);
}
this.checkInputs();
@@ -1734,10 +1732,10 @@ var ThreadUI = {
}
});
- // If we are on a thread, we can call to DeleteMessages
+ // If we are on a thread, we can call to SelectMessages
if (Navigation.isCurrentPanel('thread')) {
params.items.push({
- l10nId: 'deleteMessages-label',
+ l10nId: 'selectMessages-label',
method: this.startEdit.bind(this)
});
}
@@ -1875,14 +1873,18 @@ var ThreadUI = {
var isAnySelected = selected.length > 0;
// Manage buttons enabled\disabled state
- this.checkAllButton.disabled = selected.length === allInputs.length;
- this.uncheckAllButton.disabled = !isAnySelected;
- this.deleteButton.disabled = !isAnySelected;
+ if (selected.length === allInputs.length) {
+ navigator.mozL10n.localize(this.checkUncheckAllButton, 'deselect-all');
+ } else {
+ navigator.mozL10n.localize(this.checkUncheckAllButton, 'select-all');
+ }
if (isAnySelected) {
+ this.deleteButton.disabled = false;
navigator.mozL10n.localize(this.editMode, 'selected',
{n: selected.length});
} else {
+ this.deleteButton.disabled = true;
navigator.mozL10n.localize(this.editMode, 'deleteMessages-title');
}
},
@@ -1,6 +1,7 @@
# Headers
messages = Messages
deleteMessages-title = Delete messages
+selectThreads-title = Select
# Contact title
thread-header-text = {[ plural(n) ]}
@@ -30,7 +31,8 @@ selected[many] = {{n}} selected
selected[other] = {{n}} selected
# Options menu
-deleteMessages-label = Delete Messages
+selectThreads-label = Select Threads
+selectMessages-label = Select Messages
settings = Settings
add-subject = Add subject
remove-subject = Remove subject
@@ -107,7 +107,7 @@ form[role="dialog"][data-type="edit"] > menu {
}
#threads-container[data-type="list"] ul {
- padding: 0 1.5rem;
+ padding: 0 1.0rem;
background-color: #fff;
}
@@ -132,7 +132,11 @@ form[role="dialog"][data-type="edit"] > menu {
[data-type="list"] aside.icon-unread {
margin: 0;
- width: 1.5rem;
+ width: 1.9rem;
+}
+
+[data-type="list"] aside.pack-end {
+ margin: 0 5px 0 0.5px;
}
[data-type="list"] .unread aside.icon-unread {
@@ -165,10 +169,22 @@ form[role="dialog"][data-type="edit"] > menu {
}
/* Lists: edit mode */
+.edit #threads-container[data-type="list"] ul {
+ padding: 0 1.5rem;
+}
+
+.edit [data-type="list"] li > a {
+ left: -2rem;
+}
+
.edit [data-type="list"] li > label {
opacity: 1;
pointer-events: auto;
- left: -1.4rem;
+ left: -2.4rem;
+}
+
+.edit [data-type="list"] .danger {
+ left: -1.3rem;
}
.edit [data-type="list"] li > .pack-checkbox input ~ span:after {
@@ -178,20 +194,21 @@ form[role="dialog"][data-type="edit"] > menu {
}
.edit [data-type="list"] li > a > aside.icon-unread {
- opacity: 0;
+ opacity: 1;
+ left: 5rem;
}
.edit [data-type="list"] li > a > p {
- transform: translateX(3.5rem);
+ transform: translateX(5.0rem);
margin-right: 3.5rem;
}
.edit #threads-container[data-type="list"] aside.pack-end {
- margin: 0 0 0 -3rem;
+ margin: 0 0.5rem 0 -3rem;
}
.edit #threads-container[data-type="list"] aside.pack-end span {
- transform: translateX(7.5rem);
+ transform: translateX(9.5rem);
}
/* Panel handling */
Oops, something went wrong.

0 comments on commit 1ff9755

Please sign in to comment.