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

Bug 1038723 - [Utility Tray] Visual Refresh (system app) #23572

Merged
merged 1 commit into from Sep 1, 2014
Merged

Bug 1038723 - [Utility Tray] Visual Refresh (system app) #23572

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
135 changes: 59 additions & 76 deletions apps/system/index.html
View file
Open in desktop
Expand Up @@ -3,6 +3,9 @@
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/style.css">

<!-- Init Logo -->
<link rel="stylesheet" type="text/css" href="style/system/initlogo.css">

Expand Down Expand Up @@ -535,16 +538,15 @@
<div id="utility-tray" data-z-index-level="utility-tray">
<!-- Placeholder for notifications -->
<div id="notifications-placeholder"></div>

<div id="utility-tray-grippy">
</div>
</div>

<!-- Notifications -->
<div id="utility-tray-notifications" data-l10n-id="utilityTray" role="dialog" aria-label="Utility tray" data-z-index-level="utility-tray-notifications">
<div id="notification-bar">
<span id="notification-some" data-l10n-id="notifications">Notifications</span>

<div id="notification-bar" class="fake-notification">
<div data-icon="notifications"></div>
<div id="notification-some" class="title-container" data-l10n-id="notifications">Notifications</div>
<button id="notification-clear" data-l10n-id="clear-all" disabled>Clear all</button>
</div>

Expand All @@ -553,88 +555,72 @@
<div id="attention-window-notifications-container"></div>
<!-- Update Manager -->
<div id="update-manager-container" class="fake-notification" role="link">
<div class="icon">
</div>
<div class="activity">
</div>
<div class="message">
</div>
<div data-icon="download-circle"></div>
<div class="icon activity"></div>
<div class="title-container"></div>
</div>
<!-- Emergency callback Manager -->
<!-- Emergency callback manager -->
<div id="emergency-callback-notification" class="fake-notification" hidden role="link">
<div class="icon">
</div>
<div class="message" data-l10n-id="emergency-callback-mode">
</div>
<div class="timer">
</div>
<div data-icon="call-emergency" class="alert"></div>
<div class="title-container" data-l10n-id="emergency-callback-mode"></div>
<div class="timer detail"></div>
</div>
<!-- Storage watcher notification -->
<div id="storage-watcher-container" class="fake-notification" role="link">
<div class="icon">
</div>
<div class="message">
</div>
<div class="available-space">
</div>
<div data-icon="storage-circle"></div>
<div class="title-container"></div>
<div class="detail"></div>
</div>
<!-- Media playback notification -->
<div id="media-playback-container" class="fake-notification" hidden>
<div class="media-playback-nowplaying">
<div class="icon">
</div>
<div class="albumart">
</div>
<div class="title" data-l10n-id="mediaPlaybackTitle">
</div>
<div class="artist" data-l10n-id="mediaPlaybackArtist">
</div>
</div>
<div class="media-playback-controls" role="toolbar" data-l10n-id="mediaPlaybackControls">
<button class="previous" data-l10n-id="mediaPlaybackPrevious"></button>
<button class="play-pause"></button>
<button class="next" data-l10n-id="mediaPlaybackNext"></button>
</div>
</div>
<!-- App Install Manager -->
<!-- App install manager notification -->
<div id="install-manager-notification-container">
</div>
<!-- bluetooth transfer -->
<!-- Bluetooth transfer -->
<div id="bluetooth-transfer-status-list">
</div>
<!-- Another entry to show IME list when the keyboard is activated -->
<!-- IME list -->
<div id="keyboard-show-ime-list">
<div class="fake-notification" role="link">
<div class="message">
</div>
<div class="tip">
</div>
<div data-icon="keyboard-circle"></div>
<div class="title-container"></div>
<div class="detail"></div>
</div>
</div>
<!-- media recording status -->
<div id="media-recoding-status-list" role="list">
<!-- Media recording status -->
<div id="media-recording-status-list" role="list">
</div>

<!-- Notifications container -->
<div id="desktop-notifications-container">
<div class='priority-notifications'></div>
<div class='other-notifications'></div>
<div class="priority-notifications"></div>
<div class="other-notifications"></div>
</div>
</div>

<!-- credit module -->
<div id="cost-control-widget"></div>

<!-- quick settings -->
<div id="quick-settings" role="toolbar">
<a href="#" id="quick-settings-wifi" data-enabled="false" role="button"></a>
<div class="separator"></div>
<a href="#" id="quick-settings-data" data-enabled="false" role="button"></a>
<div class="separator"></div>
<a href="#" id="quick-settings-bluetooth" data-enabled="false" role="button"></a>
<div class="separator"></div>
<a href="#" id="quick-settings-airplane-mode" data-enabled="false" role="button"></a>
<div class="separator"></div>
<a href="#" id="quick-settings-full-app" data-enabled="false" role="button" data-l10n-id="settingsButton"></a>
<div id="utility-tray-footer">
<!-- Media playback notification -->
<div id="media-playback-container" class="media-playback-container fake-notification" hidden>
<div class="media-playback-nowplaying">
<div class="track" data-l10n-id="mediaPlaybackTrack"></div>
</div>
<div class="media-playback-controls" role="toolbar" data-l10n-id="mediaPlaybackControls">
<button data-icon="skip-back" class="previous" data-l10n-id="mediaPlaybackPrevious"></button>
<button data-icon="play" class="play-pause"></button>
<button data-icon="skip-forward" class="next" data-l10n-id="mediaPlaybackNext"></button>
</div>
</div>

<!-- Credit module -->
<div id="cost-control-widget"></div>

<!-- Quick settings -->
<div id="quick-settings" role="toolbar">
<li>
<ul><a href="#" id="quick-settings-wifi" class="icon" data-icon="wifi-4" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-airplane-mode" class="icon" data-icon="airplane" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-bluetooth" class="icon" data-icon="bluetooth" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-data" class="icon" data-icon="data" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-full-app" class="icon" data-icon="settings" data-enabled="false" role="button" data-l10n-id="settingsButton"></a></ul>
</li>
</div>
</div>
</div>

Expand Down Expand Up @@ -1052,17 +1038,14 @@ <h1 data-l10n-id="ime-addkeyboards">Add keyboards</h1>
</div>
<div id="lockscreen-message" hidden></div>
<div id="lockscreen-area"></div>
<div id="lockscreen-media-container" hidden>
<div id="lockscreen-media-container" class="media-playback-container fake-notification" hidden>
<div class="media-playback-nowplaying">
<div class="icon"></div>
<div class="albumart"></div>
<div class="title" data-l10n-id="mediaPlaybackTitle"></div>
<div class="artist" data-l10n-id="mediaPlaybackArtist"></div>
<div class="track" data-l10n-id="mediaPlaybackTrack"></div>
</div>
<div class="media-playback-controls big" role="toolbar" data-l10n-id="mediaPlaybackControls">
<button class="previous" data-l10n-id="mediaPlaybackPrevious"></button>
<button class="play-pause"></button>
<button class="next" data-l10n-id="mediaPlaybackNext"></button>
<div class="media-playback-controls" role="toolbar" data-l10n-id="mediaPlaybackControls">
<button data-icon="skip-back" class="previous" data-l10n-id="mediaPlaybackPrevious"></button>
<button data-icon="play" class="play-pause"></button>
<button data-icon="skip-forward" class="next" data-l10n-id="mediaPlaybackNext"></button>
</div>
</div>
<div id="lockscreen-icon-container">
Expand Down
5 changes: 3 additions & 2 deletions apps/system/js/app_install_manager.js
View file
Open in desktop
Expand Up @@ -498,7 +498,8 @@ var AppInstallManager = {

var newNotif =
'<div class="fake-notification" role="link">' +
'<div class="message"></div>' +
'<div data-icon="rocket" class="alert"></div>' +
'<div class="title-container"></div>' +
'<progress></progress>' +
'</div>';

Expand All @@ -514,7 +515,7 @@ var AppInstallManager = {
appName: new ManifestHelper(manifest).name
});

newNode.querySelector('.message').textContent = message;
newNode.querySelector('.title-container').textContent = message;

var progressNode = newNode.querySelector('progress');
if (app.updateManifest && app.updateManifest.size) {
Expand Down
7 changes: 3 additions & 4 deletions apps/system/js/bluetooth_transfer.js
View file
Open in desktop
Expand Up @@ -341,16 +341,15 @@ var BluetoothTransfer = {
(evt.received == true) ?
_('bluetooth-receiving-progress') : _('bluetooth-sending-progress');
var content =
'<img src="style/bluetooth_transfer/images/transfer.png" ' +
'role="presentation" /><div class="bluetooth-transfer-progress">' +
transferMode + '</div>' +
'<div data-icon="bluetooth-transfer-circle"></div>' +
'<div class="title-container">' + transferMode + '</div>' +
// XXX: Bug 804533 - [Bluetooth]
// Need sending/receiving icon for Bluetooth file transfer
'<progress value="0" max="1"></progress>';

var transferTask = document.createElement('div');
transferTask.id = 'bluetooth-transfer-status';
transferTask.className = 'notification';
transferTask.className = 'fake-notification';
transferTask.setAttribute('data-id', address);
transferTask.setAttribute('role', 'link');
transferTask.innerHTML = content;
Expand Down
2 changes: 1 addition & 1 deletion apps/system/js/emergency_callback_manager.js
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@ var EmergencyCbManager = {
// Dom elements
this.notification =
document.getElementById('emergency-callback-notification');
this.message = this.notification.querySelector('.message');
this.message = this.notification.querySelector('.title-container');
this.notificationTimer = this.notification.querySelector('.timer');

this.toaster = document.getElementById('emergency-callback-toaster');
Expand Down
5 changes: 3 additions & 2 deletions apps/system/js/ime_switcher.js
View file
Open in desktop
Expand Up @@ -22,8 +22,9 @@
this._notificationContainer =
this._utilityTrayContainer.querySelector('.fake-notification');
this._notificationTitle =
this._notificationContainer.querySelector('.message');
this._notificationTip = this._notificationContainer.querySelector('.tip');
this._notificationContainer.querySelector('.title-container');
this._notificationTip =
this._notificationContainer.querySelector('.detail');

this._notificationContainer.addEventListener('mousedown', this);
};
Expand Down