Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Bug 1011604 - [Messages] Update to use <gaia-header> #23203

Merged
merged 1 commit into from Aug 29, 2014
Merged

Bug 1011604 - [Messages] Update to use <gaia-header> #23203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 21 additions & 44 deletions apps/sms/index.html
View file
Open in desktop
Expand Up @@ -12,7 +12,6 @@
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
<link rel="stylesheet" type="text/css" href="shared/style/edit_mode.css">
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
<link rel="stylesheet" type="text/css" href="shared/style/switches.css">
<link rel="stylesheet" type="text/css" href="shared/style/lists.css">
Expand All @@ -31,6 +30,11 @@
<link rel="resource" type="application/l10n" href="locales/locales.ini">
<link rel="resource" type="application/l10n" href="shared/locales/date.ini">
<link rel="resource" type="application/l10n" href="shared/locales/sim_picker.ini">
<!-- Web Components -->
<script defer src="/shared/elements/config.js"></script>
<script defer src="/shared/elements/gaia-header/dist/script.js"></script>
<link rel="stylesheet" type="text/css" href="/shared/elements/gaia-theme/style.css" />
<!-- <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-icons/style.css" /> -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need commented style link here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gaia-icons is a dependency of gaia-header. This ensures the gaia-icons package get copied across from shared/.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, got it!

<!-- Shared code -->
<script defer src="shared/js/l10n.js"></script>
<script defer src="shared/js/l10n_date.js"></script>
Expand Down Expand Up @@ -89,26 +93,19 @@
<script defer src="js/activity_handler.js"></script>
<script defer src="js/contact_renderer.js"></script>
<script defer src="js/information.js"></script>
<script defer src="shared/js/font_size_utils.js"></script>
-->
<!-- Elements -->
<link rel="import" href="/shared/elements/sim_picker.html">
</head>

<body role="application" class="skin-comms">
<body role="application" class="skin-comms theme-communications">
<article id="main-wrapper" class="wrapper" data-position='right'>
<section id="thread-list" class="panel" role="region">
<header class="view-header regular-header">
<menu type="toolbar">
<a href="#composer" id="icon-add">
<span class="icon icon-compose"></span>
</a>
<a id="threads-options-icon">
<span class="icon icon-options"></span>
</a>
</menu>
<gaia-header class="view-header regular-header">
<h1 data-l10n-id="messages">Messages</h1>
</header>
<a href="#composer" id="icon-add" data-icon="compose"></a>
<a id="threads-options-icon" data-icon="more"></a>
</gaia-header>
<article id="threads-container" class="view-body edit-container" data-type="list">
</article>

Expand All @@ -120,16 +117,11 @@ <h1 data-l10n-id="messages">Messages</h1>
</div>

<form id="threads-edit-form" role="dialog" data-type="edit">
<section role="region">
<header>
<button id="threads-cancel-button">
<span data-l10n-id="cancel" class="icon icon-close">close</span>
</button>
<menu type="toolbar">
<button id="threads-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</menu>
<section role="region" class="theme-settings">
<gaia-header id="threads-edit-header" action="close">
<h1 id="threads-edit-mode" data-l10n-id="selectThreads-title">Select</h1>
</header>
<button id="threads-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</gaia-header>
</section>
<menu>
<button id="threads-delete-button" data-l10n-id="delete">delete</button>
Expand All @@ -144,20 +136,10 @@ <h1 id="threads-edit-mode" data-l10n-id="selectThreads-title">Select</h1>
</section>

<section id="thread-messages" class="panel" role="region">
<header class="view-header regular-header">
<a role="link" id="messages-back-button">
<span class="icon icon-back"></span>
</a>
<a role="link" id="messages-close-button">
<span class="icon icon-close"></span>
</a>
<menu type="toolbar">
<a id="messages-options-icon">
<span class="icon icon-options"></span>
</a>
</menu>
<gaia-header id="messages-header" class="view-header regular-header" action="back">
<h1 id="messages-header-text" aria-hidden="true"></h1>
</header>
<a id="messages-options-icon" data-icon="more"></a>
</gaia-header>
<div id="messages-subheader" class="subheader">
<section id="messages-to-field">
<section data-l10n-id="to" id="to-label">
Expand Down Expand Up @@ -276,16 +258,11 @@ <h1 id="messages-header-text" aria-hidden="true"></h1>
</div>
</article>
<form role="dialog" id="messages-edit-form" data-type="edit" >
<section role="region">
<header>
<button id="messages-cancel-button">
<span data-l10n-id="cancel" class="icon icon-close">close</span>
</button>
<menu type="toolbar">
<button id="messages-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</menu>
<section role="region" class="theme-settings">
<gaia-header id="messages-edit-header" action="close">
<h1 id="messages-edit-mode" data-l10n-id="deleteMessages-title">Delete Messages</h1>
</header>
<button id="messages-check-uncheck-all-button" class="edit-button" data-l10n-id="select-all"></button>
</gaia-header>
</section>
<menu>
<button id="messages-delete-button" data-l10n-id="delete">delete</button>
Expand Down
13 changes: 0 additions & 13 deletions apps/sms/js/activity_handler.js
View file
Open in desktop
Expand Up @@ -20,9 +20,6 @@ const ActivityDataType = {
};

var ActivityHandler = {
// CSS class applied to the body element when app requested via activity
REQUEST_ACTIVITY_MODE_CLASS_NAME: 'request-activity-mode',

isLocked: false,

// Will hold current activity object
Expand Down Expand Up @@ -59,7 +56,6 @@ var ActivityHandler = {
if (!value) {
throw new Error('Activity should be defined!');
}
this._toggleActivityRequestMode(true);
this._activity = value;
},

Expand Down Expand Up @@ -166,13 +162,6 @@ var ActivityHandler = {
);
},

_toggleActivityRequestMode: function(toggle) {
document.body.classList.toggle(
this.REQUEST_ACTIVITY_MODE_CLASS_NAME,
toggle
);
},

/**
* Leaves current activity and toggles request activity mode.
* @param {string?} errorReason String message that indicates that something
Expand All @@ -187,8 +176,6 @@ var ActivityHandler = {
this._activity.postResult({ success: true });
}
this._activity = null;

this._toggleActivityRequestMode(false);
}
},

Expand Down
2 changes: 2 additions & 0 deletions apps/sms/js/information.js
View file
Open in desktop
Expand Up @@ -187,6 +187,7 @@ var VIEWS = {
navigator.mozL10n.setAttributes(ThreadUI.headerText, 'participant', {
n: participants.length
});
ThreadUI.setHeaderAction('back');
},

setEventListener: function setEventListener() {
Expand Down Expand Up @@ -290,6 +291,7 @@ var VIEWS = {
}).bind(this);

setL10nAttributes(ThreadUI.headerText, 'message-report');
ThreadUI.setHeaderAction('close');
},

onDeliverySuccess: function report_onDeliverySuccess(e) {
Expand Down
1 change: 0 additions & 1 deletion apps/sms/js/startup.js
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@ var Startup = {
'/shared/js/settings_url.js',
'/shared/js/mobile_operator.js',
'/shared/js/multi_sim_action_button.js',
'/shared/js/font_size_utils.js',
'js/waiting_screen.js',
'js/errors.js',
'js/dialog.js',
Expand Down
6 changes: 3 additions & 3 deletions apps/sms/js/thread_list_ui.js
View file
Open in desktop
Expand Up @@ -35,7 +35,7 @@ var ThreadListUI = {
[
'container', 'no-messages',
'check-uncheck-all-button',
'delete-button', 'cancel-button',
'delete-button', 'edit-header',
'options-icon', 'edit-mode', 'edit-form', 'draft-saved-banner'
].forEach(function(id) {
this[Utils.camelCase(id)] = document.getElementById('threads-' + id);
Expand All @@ -59,8 +59,8 @@ var ThreadListUI = {
'click', this.delete.bind(this)
);

this.cancelButton.addEventListener(
'click', this.cancelEdit.bind(this)
this.editHeader.addEventListener(
'action', this.cancelEdit.bind(this)
);

this.optionsIcon.addEventListener(
Expand Down
43 changes: 31 additions & 12 deletions apps/sms/js/thread_ui.js
View file
Open in desktop
Expand Up @@ -97,8 +97,8 @@ var ThreadUI = {
[
'container', 'subheader', 'to-field', 'recipients-list', 'recipient',
'input', 'compose-form', 'check-uncheck-all-button',
'contact-pick-button', 'back-button', 'close-button', 'send-button',
'attach-button', 'delete-button', 'cancel-button', 'subject-input',
'contact-pick-button', 'send-button', 'header', 'edit-header',
'attach-button', 'delete-button', 'subject-input',
'new-message-notice', 'options-icon', 'edit-mode', 'edit-form',
'tel-form', 'header-text', 'max-length-notice', 'convert-notice',
'resize-notice', 'dual-sim-information', 'new-message-notice',
Expand Down Expand Up @@ -152,6 +152,7 @@ var ThreadUI = {
this.sendButton.addEventListener(
'click', this.onSendClick.bind(this)
);

this.sendButton.addEventListener(
'contextmenu', this.onSendClick.bind(this)
);
Expand All @@ -160,20 +161,16 @@ var ThreadUI = {
'scroll', this.manageScroll.bind(this)
);

this.backButton.addEventListener(
'click', this.back.bind(this)
);

this.closeButton.addEventListener(
'click', this.close.bind(this)
);

this.checkUncheckAllButton.addEventListener(
'click', this.toggleCheckedAll.bind(this)
);

this.cancelButton.addEventListener(
'click', this.cancelEdit.bind(this)
this.editHeader.addEventListener(
'action', this.cancelEdit.bind(this)
);

this.header.addEventListener(
'action', this.onHeaderAction.bind(this)
);

this.optionsIcon.addEventListener(
Expand Down Expand Up @@ -327,6 +324,22 @@ var ThreadUI = {
}
},

/**
* When the header 'action' button is tapped
* we always go back to the previous pane,
* unless we're in an activity, then in
* select cases we exit the activity.
*
* @private
*/
onHeaderAction: function thui_onHeaderAction() {
var inActivity = ActivityHandler.isInActivity();
var isComposer = Navigation.isCurrentPanel('composer');
var isThread = Navigation.isCurrentPanel('thread');
var action = inActivity && (isComposer || isThread) ? 'close' : 'back';
this[action]();
},

// Initialize Recipients list and Recipients.View (DOM)
initRecipients: function thui_initRecipients() {
var recipientsChanged = (function recipientsChanged(length, record) {
Expand Down Expand Up @@ -442,6 +455,10 @@ var ThreadUI = {
}
},

setHeaderAction: function thui_setHeaderAction(icon) {
this.header.setAttribute('action', icon);
},

messageComposerInputHandler: function thui_messageInputHandler(event) {
if (Compose.type === 'sms') {
this.hideMaxLengthNotice();
Expand Down Expand Up @@ -550,6 +567,8 @@ var ThreadUI = {
* visible.
*/
beforeEnter: function thui_beforeEnter(args) {
this.setHeaderAction(ActivityHandler.isInActivity() ? 'close' : 'back');

Recipients.View.isFocusable = true;
if (!this.multiSimActionButton) {
// handles the various actions on the send button and encapsulates the
Expand Down