Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Another improvement to font-size adjustments

Browse Source
This commit is contained in:
Colin McLeod
2015-07-09 13:10:01 -07:00
parent faa8759851
commit 164e9f5c8a
8 changed files with 136 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@@ -57,7 +57,7 @@
<body style="background-color:#000;"> <body style="background-color:#000;">
<div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div> <div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>
<shipyard-header></shipyard-header> <shipyard-header></shipyard-header>
<div id="main" ui-view ng-click="bgClicked($event)" ng-style="{'font-size': fontSize + 'em'}"></div> <div id="main" ui-view ng-click="bgClicked($event)" ng-style="{'font-size': sizeRatio + 'em'}"></div>
<div ui-view="modal" ng-click="bgClicked($event)"></div> <div ui-view="modal" ng-click="bgClicked($event)"></div>

2
app/js/app.js
View File

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

7
app/js/directives/directive-header.js
View File

@@ -1,5 +1,6 @@
angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) { angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) {
return { return {
restrict: 'E', restrict: 'E',
templateUrl: 'views/_header.html', templateUrl: 'views/_header.html',
@@ -12,6 +13,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
scope.allComparisons = Persist.comparisons; scope.allComparisons = Persist.comparisons;
scope.bs = Persist.state; scope.bs = Persist.state;
var win = angular.element($window); // Angularized window object for event triggering
var insIndex = _.findIndex($rootScope.insurance.opts, 'name', Persist.getInsurance()); var insIndex = _.findIndex($rootScope.insurance.opts, 'name', Persist.getInsurance());
var savedDiscounts = Persist.getDiscount() || [1, 1]; var savedDiscounts = Persist.getDiscount() || [1, 1];
$rootScope.insurance.current = $rootScope.insurance.opts[insIndex != -1 ? insIndex : 0]; $rootScope.insurance.current = $rootScope.insurance.opts[insIndex != -1 ? insIndex : 0];
@@ -80,10 +82,9 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
}); });
scope.textSizeChange = function(size) { scope.textSizeChange = function(size) {
$rootScope.fontSize = size; $rootScope.sizeRatio = size;
$rootScope.fontSizePx = size * parseFloat(getComputedStyle(document.documentElement).fontSize);
document.getElementById('main').style.fontSize = size + 'em'; document.getElementById('main').style.fontSize = size + 'em';
$rootScope.$broadcast('render'); win.triggerHandler('resize');
}; };
scope.$watchCollection('allBuilds', function() { scope.$watchCollection('allBuilds', function() {

96
app/js/directives/directive-power-bands.js
View File

@@ -1,4 +1,8 @@
<<<<<<< HEAD
angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) { 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 { return {
restrict: 'A', restrict: 'A',
scope: { scope: {
@@ -6,11 +10,14 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
available: '=' available: '='
}, },
link: function(scope, element) { link: function(scope, element) {
var margin = { top: 20, right: 130, bottom: 20, left: 40 }, var bands = null,
barHeight = 20, available = 0,
bands = null, maxBand,
innerHeight = (barHeight * 2) + 3, maxPwr,
height = innerHeight + margin.top + margin.bottom + 1, deployedSum = 0,
retractedSum = 0,
retBandsSelected = false,
depBandsSelected = false,
wattScale = d3.scale.linear(), wattScale = d3.scale.linear(),
pctScale = d3.scale.linear().domain([0, 1]), pctScale = d3.scale.linear().domain([0, 1]),
wattFmt = d3.format('.2f'), wattFmt = d3.format('.2f'),
@@ -19,7 +26,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom').tickFormat(d3.format('%')), pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom').tickFormat(d3.format('%')),
// Create chart // Create chart
svg = d3.select(element[0]).append('svg'), svg = d3.select(element[0]).append('svg'),
vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') vis = svg.append('g'),
deployed = vis.append('g').attr('class', 'power-band'), deployed = vis.append('g').attr('class', 'power-band'),
retracted = vis.append('g').attr('class', 'power-band'); retracted = vis.append('g').attr('class', 'power-band');
@@ -30,7 +37,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
bands[i].retSelected = false; bands[i].retSelected = false;
bands[i].depSelected = false; bands[i].depSelected = false;
} }
render(); dataChange();
} }
}); });
@@ -43,26 +50,53 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
var depVal = vis.append('text').attr('y', barHeight + 18); var depVal = vis.append('text').attr('y', barHeight + 18);
// Watch for changes to data and events // Watch for changes to data and events
scope.$watchCollection('available', render); scope.$watchCollection('available', dataChange);
angular.element($window).bind('orientationchange resize pwrchange', render); angular.element($window).bind('pwrchange', dataChange);
angular.element($window).bind('orientationchange resize', render);
updateFormats(); updateFormats();
function render() { function render() {
bands = scope.bands; bands = scope.bands;
available = scope.available;
maxBand = bands[bands.length - 1];
deployedSum = 0;
retractedSum = 0;
retBandsSelected = false;
depBandsSelected = false;
maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
var available = scope.available, for (var b = 0, l = bands.length; b < l; b++) {
if (bands[b].retSelected) {
retractedSum += bands[b].retracted + bands[b].retOnly;
retBandsSelected = true;
}
if (bands[b].depSelected) {
deployedSum += bands[b].deployed + bands[b].retracted;
depBandsSelected = true;
}
}
render();
}
function render() {
var size = $rootScope.sizeRatio;
mTop = Math.round(25 * size),
mRight = Math.round(130 * size),
mBottom = Math.round(25 * size),
mLeft = Math.round(40 * size),
barHeight = Math.round(20 * size),
width = element[0].offsetWidth, width = element[0].offsetWidth,
w = width - margin.left - margin.right, innerHeight = (barHeight * 2) + 2,
maxBand = bands[bands.length - 1], height = innerHeight + mTop + mBottom,
deployedSum = 0, w = width - mLeft - mRight,
retractedSum = 0, repY = (barHeight / 2),
retBandsSelected = false, depY = (barHeight * 1.5) - 1;
depBandsSelected = false,
maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
// Update chart size // Update chart size
svg.attr('width', width).attr('height', height); svg.attr('width', width).attr('height', height);
vis.attr('transform', 'translate(' + mLeft + ',' + mTop + ')');
// Remove existing elements // Remove existing elements
retracted.selectAll('rect').remove(); retracted.selectAll('rect').remove();
@@ -76,6 +110,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
vis.selectAll('.watt.axis').call(wattAxis); vis.selectAll('.watt.axis').call(wattAxis);
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis); vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
<<<<<<< HEAD
for (var b = 0, l = bands.length; b < l; b++) { for (var b = 0, l = bands.length; b < l; b++) {
if (bands[b].retSelected) { if (bands[b].retSelected) {
retractedSum += bands[b].retracted + bands[b].retOnly; retractedSum += bands[b].retracted + bands[b].retOnly;
@@ -92,53 +127,56 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
retracted.selectAll('rect').data(bands).enter().append('rect') retracted.selectAll('rect').data(bands).enter().append('rect')
.attr('height', barHeight) .attr('height', barHeight)
.attr('width', function(d) { return Math.max(wattScale(d.retracted + d.retOnly) - 1, 0); }) .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.retracted + d.retOnly), 0)); })
.attr('x', function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly); }) .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly), 0)); })
.attr('y', 1) .attr('y', 1)
.on('click', function(d) { .on('click', function(d) {
d.retSelected = !d.retSelected; d.retSelected = !d.retSelected;
render(); dataChange();
}) })
.attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); }); .attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); });
retracted.selectAll('text').data(bands).enter().append('text') retracted.selectAll('text').data(bands).enter().append('text')
.attr('x', function(d) { return wattScale(d.retractedSum) - (wattScale(d.retracted + d.retOnly) / 2); }) .attr('x', function(d) { return wattScale(d.retractedSum) - (wattScale(d.retracted + d.retOnly) / 2); })
.attr('y', 15) .attr('y', repY)
.attr('dy', '0.5em')
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr('class', 'primary-bg') .attr('class', 'primary-bg')
.on('click', function(d) { .on('click', function(d) {
d.retSelected = !d.retSelected; d.retSelected = !d.retSelected;
render(); dataChange();
}) })
.text(function(d, i) { return bandText(d.retracted + d.retOnly, i); }); .text(function(d, i) { return bandText(d.retracted + d.retOnly, i); });
deployed.selectAll('rect').data(bands).enter().append('rect') deployed.selectAll('rect').data(bands).enter().append('rect')
.attr('height', barHeight) .attr('height', barHeight)
.attr('width', function(d) { return Math.max(wattScale(d.deployed + d.retracted) - 1, 0); }) .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.deployed + d.retracted), 0)); })
.attr('x', function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); }) .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed), 0)); })
.attr('y', barHeight + 2) .attr('y', barHeight + 1)
.on('click', function(d) { .on('click', function(d) {
d.depSelected = !d.depSelected; d.depSelected = !d.depSelected;
render(); dataChange();
}) })
.attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); }); .attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); });
deployed.selectAll('text').data(bands).enter().append('text') deployed.selectAll('text').data(bands).enter().append('text')
.attr('x', function(d) { return wattScale(d.deployedSum) - ((wattScale(d.retracted) + wattScale(d.deployed)) / 2); }) .attr('x', function(d) { return wattScale(d.deployedSum) - ((wattScale(d.retracted) + wattScale(d.deployed)) / 2); })
.attr('y', barHeight + 17) .attr('y', depY)
.attr('dy', '0.5em')
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr('class', 'primary-bg') .attr('class', 'primary-bg')
.on('click', function(d) { .on('click', function(d) {
d.depSelected = !d.depSelected; d.depSelected = !d.depSelected;
render(); dataChange();
}) })
.text(function(d, i) { return bandText(d.deployed + d.retracted, i); }); .text(function(d, i) { return bandText(d.deployed + d.retracted, i); });
} }
function updateLabel(lbl, width, selected, sum, available) { function updateLabel(lbl, width, y, selected, sum, available) {
lbl lbl
.attr('x', width + 5 ) .attr('x', width + 5 )
.attr('y', y)
.attr('class', getClass(selected, sum, available)) .attr('class', getClass(selected, sum, available))
.text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')'); .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')');
} }

2
app/js/directives/directive-slider.js
View File

@@ -40,7 +40,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
render(); render();
}); });
angular.element($window).bind('orientationchange resize', render); //angular.element($window).bind('orientationchange resize', render);
function render() { function render() {
var width = element[0].offsetWidth, w = width - margin.left - margin.right; var width = element[0].offsetWidth, w = width - margin.left - margin.right;

5
app/less/outfit.less
View File

@@ -210,6 +210,11 @@ table.total {
text, rect { text, rect {
cursor: pointer; cursor: pointer;
} }
rect {
stroke-width: 1px;
stroke: #000;
}
} }
#componentPriority { #componentPriority {

55
app/less/slider.less
View File

@@ -41,3 +41,58 @@
cursor: crosshair; cursor: crosshair;
} }
} }
input[type=range] {
-webkit-appearance: none;
border: 1px solid @bgBlack;
/*required for proper track sizing in FF*/
width: 300px;
&::-moz-range-track, &::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: @primary;
border: none;
border-radius: 3px;
}
&::-moz-range-thumb, &::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 1em;
width: 1em;
border-radius: 50%;
background: @primary;
}
&:focus {
outline: none;
}
/*hide the outline behind the border*/
&:-moz-focusring{
outline: 1px solid @bgBlack;
outline-offset: -1px;
}
&::-ms-track {
width: 300px;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
&::-ms-fill-lower {
background: @primary;
border-radius: 10px;
}
&::-ms-fill-upper {
background: @primary;
border-radius: 10px;
}
&::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
}

4
app/views/_header.html
View File

@@ -76,8 +76,8 @@
<table style="width: 100%;background-color:transparent"> <table style="width: 100%;background-color:transparent">
<tr> <tr>
<td style="width: 20px"><u>A</u></td> <td style="width: 20px"><u>A</u></td>
<td slider min="0.65" def="fontSize" max="1.2" on-change="textSizeChange(val)"></td> <td slider min="0.65" def="sizeRatio" max="1.2" on-change="textSizeChange(val)"></td>
<td style="width: 20px"><span style="font-size: 30px">A</span></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>
</tr> </tr>
</table> </table>
<hr /> <hr />