Skip to content

Commit

Permalink
Bug 1038723 - [Utility Tray] Visual Refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmarty
gmarty committed Aug 14, 2014
1 parent 8f955d8 commit 6662b12
Show file tree
Hide file tree
Showing 48 changed files with 1,429 additions and 593 deletions.
69 changes: 7 additions & 62 deletions apps/costcontrol/style/widget.css
View file
Expand Up @@ -44,11 +44,9 @@ p.meta {

/* Main layout */
#cost-control {
background-color: #414449;
position: relative;
overflow: hidden;
height: 4.5rem;
width: 100%;
}

#cost-control.full .credit,
Expand All @@ -72,19 +70,8 @@ p.meta {
background: url(images/widget/sim/no-sim.png) no-repeat center center;
}

#fte-view .icon {
float:left;
margin-left: 0.5rem;
width: 3.75rem;
height: 4.5rem;
background-size: 2.6rem;
vertical-align: middle;
background-position: center;
background-repeat: no-repeat;
}

#fte-view p.meta {
font-size:1.4em;
font-size: 1.4em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Expand All @@ -109,7 +96,6 @@ p.meta {
.view {
overflow: hidden;
height: 100%;
background: url(images/widget/icons/icon-go.png) no-repeat right -0.3rem center / 3rem;
background-color: #414449;
}

Expand All @@ -122,23 +108,6 @@ p.meta {
}

/* Credit */
.credit .icon {
width: 4.5rem;
height: 4.5rem;
vertical-align: middle;
background-position: center;
background-repeat: no-repeat;
}

/* Balance view */
#balance-view .icon,
#balance-view .info {
display: inline-block;
vertical-align: middle;
transform: translateX(-4.5rem);
transition: transform 0.5s;
}

#balance-view .info {
padding-left: 0;
}
Expand All @@ -148,37 +117,13 @@ p.meta {
background-color: #f9a722;
}

/* No balance credit warning */
#balance-view.no-credit {
background: url(images/widget/icons/icon-go.png) no-repeat calc(100% - 0.8rem) center, url(images/widget/ui/zero-credit.png) repeat-x left bottom;
}

/* Updating */
#balance-view.updating #balance-icon {
background-image: url(images/widget/icons/updating.png);
background-size: 3.1rem;
animation: balance-spin 1.75s infinite linear;
animation-delay: 0.5s;
}

/* Warning */
#balance-view.warning #balance-icon {
background-image: url(images/widget/icons/warning.png);
background-size: 3rem;
animation: none;
}

@keyframes balance-spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}

/* Updating & Warning */
#balance-view.updating .icon,
#balance-view.updating .info,
#balance-view.warning .icon,
#balance-view.warning .info {
transform: none;
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* Data */
Expand Down
115 changes: 50 additions & 65 deletions apps/system/index.html
View file
Expand Up @@ -502,95 +502,80 @@

<!-- Notifications -->
<div id="utility-tray-notifications" 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 class="icon icon-notification"></div>
<span id="notification-some" class="title-container" data-l10n-id="notifications">Notifications</span>
<button id="notification-clear" data-l10n-id="clear-all" disabled>Clear all</button>
</div>

<div id="notifications-container">
<!-- 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 class="icon icon-download"></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 class="icon icon-emergency-callback 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 class="icon icon-low-storage"></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 when keyboard is active -->
<div id="keyboard-show-ime-list">
<div class="fake-notification" role="link">
<div class="message">
</div>
<div class="tip">
</div>
<div class="icon icon-keyboard"></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>
</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="fake-notification" hidden>
<div class="media-playback-nowplaying">
<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="icon icon-rewind previous" data-l10n-id="mediaPlaybackPrevious"></button>
<button class="icon icon-play play-pause"></button>
<button class="icon icon-forward 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-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-airplane-mode" class="icon" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-bluetooth" class="icon" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-data" class="icon" data-enabled="false" role="button"></a></ul>
<ul><a href="#" id="quick-settings-full-app" class="icon" data-enabled="false" role="button" data-l10n-id="settingsButton"></a></ul>
</li>
</div>
</div>
</div>

Expand Down Expand Up @@ -1075,7 +1060,7 @@ <h1 data-l10n-id="ime-addkeyboards">Add keyboards</h1>
</div>

<div id="update-manager-toaster" data-z-index-level="notification-toaster" aria-live="assertive" aria-atomic="true">
<div class="icon">
<div class="icon icon-download">
</div>
<div class="message">
</div>
Expand Down
5 changes: 3 additions & 2 deletions apps/system/js/app_install_manager.js
View file
Expand Up @@ -412,7 +412,8 @@ var AppInstallManager = {

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

Expand All @@ -428,7 +429,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
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 class="icon icon-bluetooth-transfer"></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
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
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
14 changes: 10 additions & 4 deletions apps/system/js/media_playback.js
View file
Expand Up @@ -72,7 +72,9 @@ MediaPlaybackWidget.prototype = {
return;

this.origin = info.origin;
this.icon.style.backgroundImage = 'url(' + info.icon + ')';
if (this.icon) {
this.icon.style.backgroundImage = 'url(' + info.icon + ')';
}
},

updateNowPlaying: function mpw_updateNowPlaying(metadata) {
Expand All @@ -82,6 +84,10 @@ MediaPlaybackWidget.prototype = {
this.trackTitle.textContent = metadata.title;
this.trackArtist.textContent = metadata.artist;

if (!this.albumArt) {
return;
}

// The music app doesn't send a .picture attribute if it hasn't changed
// (and it was a placeholder image). Don't bother updating the picture if
// so. However, if .picture is null, something probably went wrong, so we
Expand All @@ -103,13 +109,13 @@ MediaPlaybackWidget.prototype = {
switch (status.playStatus) {
case 'PLAYING':
this.hidden = false;
this.playPauseButton.classList.remove('is-paused');
this.playPauseButton.classList.remove('icon-pause');
this.playPauseButton.setAttribute('aria-label',
_('mediaPlaybackPause'));
break;
case 'PAUSED':
this.hidden = false;
this.playPauseButton.classList.add('is-paused');
this.playPauseButton.classList.add('icon-pause');
this.playPauseButton.setAttribute('aria-label', _('mediaPlaybackPlay'));
break;
case 'STOPPED':
Expand Down Expand Up @@ -147,7 +153,7 @@ MediaPlaybackWidget.prototype = {
case this.playPauseButton:
// The play/pause indicator will get set once the music app replies with
// its "mode" message, but this will make us appear speedier.
target.classList.toggle('is-paused');
target.classList.toggle('icon-pause');
command = 'playpause';
break;
case this.nextButton:
Expand Down

0 comments on commit 6662b12

Please sign in to comment.