Further improvement to size ratio

This commit is contained in:
Colin McLeod
2015-07-26 22:38:01 -07:00
parent 164e9f5c8a
commit ab18228131
8 changed files with 45 additions and 21 deletions

View File

@@ -51,7 +51,7 @@ function($rootScope, $location, $window, $doc, $state, $translate, localeFormat,
$rootScope.discounts = { opts: Discounts };
$rootScope.STATUS = ['', 'disabled', 'off', 'on'];
$rootScope.STATUS_CLASS = ['', 'disabled', 'warning', 'secondary-disabled'];
$rootScope.sizeRatio = 1;
$rootScope.sizeRatio = Persist.getSizeRatio();
$rootScope.title = 'Coriolis';
$rootScope.changeLanguage = function() {

View File

@@ -11,7 +11,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0) {
tspan.attr('x', -9).attr('dy', 12);
tspan.attr('x', -9).attr('dy', '1em');
}
}
}
@@ -71,7 +71,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
var data = scope.data,
width = element[0].offsetWidth,
w = width - margin.left - margin.right,
height = 45 + (30 * data.length),
height = 45 + (30 * data.length * $rootScope.sizeRatio),
h = height - margin.top - margin.bottom,
maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); });

View File

@@ -1,4 +1,4 @@
angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) {
angular.module('app').directive('shipyardHeader', ['lodash', '$window', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $window, $rootScope, $state, Persist, Serializer, ships) {
return {
@@ -84,6 +84,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
scope.textSizeChange = function(size) {
$rootScope.sizeRatio = size;
document.getElementById('main').style.fontSize = size + 'em';
Persist.setSizeRatio(size);
win.triggerHandler('resize');
};

View File

@@ -51,7 +51,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
// Create and Add tooltip
var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2;
var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2.5;
var tips = vis.append('g').style('display', 'none');
var background = vis.append('rect') // Background to capture hover/drag
@@ -83,7 +83,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
function render() {
var width = element[0].parentElement.offsetWidth,
height = width * 0.5,
height = width * 0.5 * $rootScope.sizeRatio,
xMax = seriesConfig.xMax,
xMin = seriesConfig.xMin,
yMax = seriesConfig.yMax,

View File

@@ -1,8 +1,4 @@
<<<<<<< HEAD
angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
=======
angular.module('app').directive('powerBands', ['$window', '$rootScope', function($window, $rootScope) {
>>>>>>> Another improvement to font-size adjustments
return {
restrict: 'A',
scope: {
@@ -44,6 +40,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
// Create Y Axis SVG Elements
vis.append('g').attr('class', 'watt axis');
vis.append('g').attr('class', 'pct axis');
var retLbl = vis.append('text').attr('x', -35).attr('y', 16).attr('class', 'primary upp');
var depLbl = vis.append('text').attr('x', -35).attr('y', barHeight + 18).attr('class', 'primary upp');
var retVal = vis.append('text').attr('y', 16);
@@ -81,7 +78,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
}
function render() {
var size = $rootScope.sizeRatio;
var size = $rootScope.sizeRatio,
mTop = Math.round(25 * size),
mRight = Math.round(130 * size),
mBottom = Math.round(25 * size),
@@ -110,7 +107,6 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
vis.selectAll('.watt.axis').call(wattAxis);
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
<<<<<<< HEAD
for (var b = 0, l = bands.length; b < l; b++) {
if (bands[b].retSelected) {
retractedSum += bands[b].retracted + bands[b].retOnly;
@@ -173,16 +169,16 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function
}
function updateLabel(lbl, width, y, selected, sum, available) {
function updateLabel(lbl, width, y, selected, sum, avail) {
lbl
.attr('x', width + 5 )
.attr('y', y)
.attr('class', getClass(selected, sum, available))
.text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')');
.attr('class', getClass(selected, sum, avail))
.text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / avail)) + ')');
}
function getClass(selected, sum, available) {
return selected ? 'secondary' : (sum > available) ? 'warning' : 'primary';
function getClass(selected, sum, avail) {
return selected ? 'secondary' : (sum > avail) ? 'warning' : 'primary';
}
function bandText(val, index) {

View File

@@ -21,7 +21,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
xAxisContainer = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
x = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12);
xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12),
slider = vis.append('g').attr('class', 'slider'),
filled = slider.append('path').attr('class', 'filled').attr('transform', 'translate(0,' + h / 2 + ')'),
brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on('brush', brushed),

View File

@@ -257,7 +257,7 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window,
/**
* Retrieve the last router state from local storage
* @param {object} state State object containing state name and params
* @return {object} state State object containing state name and params
*/
this.getState = function() {
if (this.lsEnabled) {
@@ -279,6 +279,30 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window,
}
};
/**
* Retrieve the last router state from local storage
* @return {number} size Ratio
*/
this.getSizeRatio = function() {
if (this.lsEnabled) {
var ratio = localStorage.getItem('sizeRatio');
if (!isNaN(ratio) && ratio > 0.6) {
return ratio
}
}
return 1;
};
/**
* Save the current size ratio to localstorage
* @param {number} sizeRatio
*/
this.setSizeRatio = function(sizeRatio) {
if (this.lsEnabled) {
localStorage.setItem('sizeRatio', sizeRatio);
}
};
/**
* Check if localStorage is enabled/active
* @return {Boolean} True if localStorage is enabled

View File

@@ -73,11 +73,14 @@
<li><a href="#" class="block" ui-sref="modal.delete" translate="delete all"></a></li>
</ul>
<hr />
<table style="width: 100%;background-color:transparent">
<table style="width: 300px;background-color:transparent">
<tr>
<td style="width: 20px"><u>A</u></td>
<td slider min="0.65" def="sizeRatio" max="1.2" on-change="textSizeChange(val)"></td>
<td style="width: 40px" ng-click="textSizeChange(1)"><span style="font-size: 30px">A</span><svg class="icon lg primary"><use xlink:href="#switch"></use></svg></td>
<td style="width: 20px"><span style="font-size: 30px">A</span></td>
</tr>
<tr>
<td></td><td style="text-align:center" class="primary-disabled" ng-click="textSizeChange(1)">Reset</td><td></td>
</tr>
</table>
<hr />