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

Commit

Permalink
Merge pull request #23153 from gmarty/Bug-1038723-Utility-Tray-Visual…
Browse files Browse the repository at this point in the history 
…-Refresh

Bug 1038723 - [Utility Tray] Visual Refresh
  • Loading branch information
@gmarty
gmarty committed Aug 29, 2014
2 parents c05ee27 + 6aa3b64 commit be46e59
Show file tree
Hide file tree
Showing 159 changed files with 586 additions and 1,061 deletions.
42 changes: 9 additions & 33 deletions apps/costcontrol/js/widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,39 +312,21 @@ var Widget = (function() {

// Content for data statistics
var requestObj = { type: 'datausage' };

costcontrol.request(requestObj, function _onDataStatistics(result) {
debug(result);
var stats = result.data;
var data = Formatting.roundData(stats.mobile.total);
if (isLimited) {

if (isLimited) {
// UI elements
var leftTag = views.limitedDataUsage.querySelector('dt.start');
var leftValue = views.limitedDataUsage.querySelector('dd.start');
var rightTag = views.limitedDataUsage.querySelector('dt.end');
var rightValue = views.limitedDataUsage.querySelector('dd.end');
var progress = views.limitedDataUsage.querySelector('progress');
var dataLimit = views.limitedDataUsage.querySelector('#data-limit');
var dataAvailable =
views.limitedDataUsage.querySelector('#data-available');

// Progress bar
var current = stats.mobile.total;
var limit = Common.getDataLimit(settings);
debug(limit);
progress.setAttribute('value', Math.min(current, limit));
progress.setAttribute('max', Math.max(current, limit));

// State
views.limitedDataUsage.classList.remove('nearby-limit');
views.limitedDataUsage.classList.remove('reached-limit');

// Limit trespassed
var limitTresspased = (current > limit);
if (limitTresspased) {
views.limitedDataUsage.classList.add('reached-limit');

// Warning percentage of the limit reached
} else if (current >= limit * costcontrol.getDataUsageWarning()) {
views.limitedDataUsage.classList.add('nearby-limit');
}

// Texts
var currentText = Formatting.roundData(current);
Expand All @@ -357,17 +339,11 @@ var Widget = (function() {
value: limitText[0],
unit: limitText[1]
});
Common.localize(
leftTag,
limitTresspased ? 'limit-passed' : 'used'
);
leftValue.textContent = limitTresspased ? limitText : currentText;
Common.localize(
rightTag,
limitTresspased ? 'used' : 'limit'
);
rightValue.textContent = limitTresspased ? currentText : limitText;

navigator.mozL10n.setAttributes(dataLimit, 'data-limit',
{ value: limitText });
navigator.mozL10n.setAttributes(dataAvailable, 'data-available',
{ value: currentText });
} else {
// Texts
document.getElementById('mobile-usage-value').textContent =
Expand Down
3 changes: 3 additions & 0 deletions apps/costcontrol/locales/costcontrol.en-US.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,9 @@ internet = Internet
phone = Phone
loading-interface-data = Loading interface data. Please retry in a while.

data-limit = Data Limit ({{value}})
data-available = {{value}} available

verbose-chart-date-format = {{em-month}} {{monthday-number}}

# Specif format for CC, string in format Today|Yesterday|<WeekDay>, hh:mm
Expand Down
211 changes: 26 additions & 185 deletions apps/costcontrol/style/widget.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,31 @@ button::-moz-focus-inner {
color: white;
}

p {
font-size: 2rem;
font-weight: 400;
color: white;
}

p.meta {
font-weight: 400;
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.5);
font: italic 1.2rem/1.2rem auto;
color: #858585;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

/* Main layout */
#cost-control {
background-color: #414449;
position: relative;
height: 5.2rem;
margin: 0 15px;
font: italic 1.4rem/2rem auto;
color: #e7e7e7;
overflow: hidden;
height: 4.5rem;
width: 100%;
}

#cost-control:before {
color: #858585;
font-size: 2.4rem;
line-height: 2.4rem;
position: absolute;
top: 1.4rem;
right: 0;
}

#cost-control.full .credit,
Expand All @@ -72,73 +78,40 @@ 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:not(.meta) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#fte-view p.meta {
font-size:1.4em;
font: italic 1.2rem/1.2rem auto;
color: #858585;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#fte-view p:not(.meta) {
font-weight: bold;
font-size: 1.5em;
}

/* Credit & Data structure */
.credit,
.data {
float: left;
width: 50%;
height: 100%;
-moz-box-sizing: border-box;
background: url(images/widget/ui/glossy-gradient.png) repeat-x left bottom / auto 100%;
box-sizing: border-box;
}

/* Inner structure */
.view {
overflow: hidden;
height: 100%;
background: url(images/widget/icons/icon-go.png) no-repeat right -0.3rem center / 3rem;
background-color: #414449;
}

.info {
padding: 0.7rem 0 0.7rem 0.8rem;
}

.info p:not(.meta) {
line-height: 1.5rem;
padding: 0.8rem 0 0.7rem 0;
}

/* 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 @@ -147,135 +120,3 @@ p.meta {
#balance-view.low-credit {
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;
}

/* Data */
.data .stats {
margin: 0.6rem 2.5rem 0 1rem;
position: relative;
}

.data .stats:before,
.data .stats progress,
.data .stats progress::-moz-progress-bar {
border-radius: 0.6rem;
height: 1.6rem;
}

/* Inner shadow */
.data .stats:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0.1rem;
z-index: 5;
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.9);
}

.data .stats progress {
width: 100%;
background: #35373a url(images/widget/ui/pattern-progress.png) repeat left top;
border: none;
border-top: solid 0.1rem rgba(0, 0, 0, 1);
border-bottom: solid 0.1rem rgba(255, 255, 255, 0.4);
overflow: hidden;
}

.data .stats progress::-moz-progress-bar {
background: #079d89;
}

/* Progress labels */
.data .stats dl {
font-size: 1.1rem;
}

.data .stats dt {
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
}

.data .stats dd {
font-weight: 600;
color: #fff;
}

.data .stats dl .start,
.data .stats dl .end {
position: absolute;
z-index: 1;
}

.data .stats dt.start,
.data .stats dd.start {
left: 0;
text-align: left;
}

.data .stats dt.end,
.data .stats dd.end {
right: 0;
text-align: right;
}

.data .stats dt.start,
.data .stats dt.end {
top: 2rem;
padding: 0 0.4rem;
}

.data .stats dd.start,
.data .stats dd.end {
top: 0.1rem;
line-height: 1.6rem;
border-radius: 0.5rem;
padding: 0 0.4rem;
}

/* States */

.nearby-limit .stats progress::-moz-progress-bar {
background: #ea9f2b;
}

.reached-limit .stats progress::-moz-progress-bar {
background: #9b0808;
border: solid 0.1rem #610707;
}

.reached-limit .stats progress {
background: #ca435b;
}
Loading

0 comments on commit be46e59

Please sign in to comment.