From 164e9f5c8aadddba1f4b0b510081afee5f361dfd Mon Sep 17 00:00:00 2001 From: Colin McLeod Date: Thu, 9 Jul 2015 13:10:01 -0700 Subject: [PATCH] Another improvement to font-size adjustments --- app/index.html | 2 +- app/js/app.js | 2 +- app/js/directives/directive-header.js | 7 +- app/js/directives/directive-power-bands.js | 96 +++++++++++++++------- app/js/directives/directive-slider.js | 2 +- app/less/outfit.less | 5 ++ app/less/slider.less | 55 +++++++++++++ app/views/_header.html | 4 +- 8 files changed, 136 insertions(+), 37 deletions(-) diff --git a/app/index.html b/app/index.html index 8c7ce40f..47d180fa 100755 --- a/app/index.html +++ b/app/index.html @@ -57,7 +57,7 @@
<%= svgContent %>
-
+
diff --git a/app/js/app.js b/app/js/app.js index 0ba7fe7e..1ba7ae8b 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -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.fontSize = 1; + $rootScope.sizeRatio = 1; $rootScope.title = 'Coriolis'; $rootScope.changeLanguage = function() { diff --git a/app/js/directives/directive-header.js b/app/js/directives/directive-header.js index 3d243751..152c23a7 100755 --- a/app/js/directives/directive-header.js +++ b/app/js/directives/directive-header.js @@ -1,5 +1,6 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) { + return { restrict: 'E', templateUrl: 'views/_header.html', @@ -12,6 +13,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta scope.allComparisons = Persist.comparisons; 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 savedDiscounts = Persist.getDiscount() || [1, 1]; $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) { - $rootScope.fontSize = size; - $rootScope.fontSizePx = size * parseFloat(getComputedStyle(document.documentElement).fontSize); + $rootScope.sizeRatio = size; document.getElementById('main').style.fontSize = size + 'em'; - $rootScope.$broadcast('render'); + win.triggerHandler('resize'); }; scope.$watchCollection('allBuilds', function() { diff --git a/app/js/directives/directive-power-bands.js b/app/js/directives/directive-power-bands.js index 93b78e3f..e466c20f 100644 --- a/app/js/directives/directive-power-bands.js +++ b/app/js/directives/directive-power-bands.js @@ -1,4 +1,8 @@ +<<<<<<< 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: { @@ -6,11 +10,14 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc available: '=' }, link: function(scope, element) { - var margin = { top: 20, right: 130, bottom: 20, left: 40 }, - barHeight = 20, - bands = null, - innerHeight = (barHeight * 2) + 3, - height = innerHeight + margin.top + margin.bottom + 1, + var bands = null, + available = 0, + maxBand, + maxPwr, + deployedSum = 0, + retractedSum = 0, + retBandsSelected = false, + depBandsSelected = false, wattScale = d3.scale.linear(), pctScale = d3.scale.linear().domain([0, 1]), 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('%')), // Create chart 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'), 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].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); // Watch for changes to data and events - scope.$watchCollection('available', render); - angular.element($window).bind('orientationchange resize pwrchange', render); + scope.$watchCollection('available', dataChange); + angular.element($window).bind('pwrchange', dataChange); + angular.element($window).bind('orientationchange resize', render); updateFormats(); function render() { 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, - w = width - margin.left - margin.right, - maxBand = bands[bands.length - 1], - deployedSum = 0, - retractedSum = 0, - retBandsSelected = false, - depBandsSelected = false, - maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum); + innerHeight = (barHeight * 2) + 2, + height = innerHeight + mTop + mBottom, + w = width - mLeft - mRight, + repY = (barHeight / 2), + depY = (barHeight * 1.5) - 1; // Update chart size svg.attr('width', width).attr('height', height); + vis.attr('transform', 'translate(' + mLeft + ',' + mTop + ')'); // Remove existing elements retracted.selectAll('rect').remove(); @@ -76,6 +110,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc 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; @@ -92,53 +127,56 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc retracted.selectAll('rect').data(bands).enter().append('rect') .attr('height', barHeight) - .attr('width', function(d) { return Math.max(wattScale(d.retracted + d.retOnly) - 1, 0); }) - .attr('x', function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly); }) + .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.retracted + d.retOnly), 0)); }) + .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly), 0)); }) .attr('y', 1) .on('click', function(d) { d.retSelected = !d.retSelected; - render(); + dataChange(); }) .attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); }); retracted.selectAll('text').data(bands).enter().append('text') .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') .attr('class', 'primary-bg') .on('click', function(d) { d.retSelected = !d.retSelected; - render(); + dataChange(); }) .text(function(d, i) { return bandText(d.retracted + d.retOnly, i); }); deployed.selectAll('rect').data(bands).enter().append('rect') .attr('height', barHeight) - .attr('width', function(d) { return Math.max(wattScale(d.deployed + d.retracted) - 1, 0); }) - .attr('x', function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); }) - .attr('y', barHeight + 2) + .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.deployed + d.retracted), 0)); }) + .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed), 0)); }) + .attr('y', barHeight + 1) .on('click', function(d) { d.depSelected = !d.depSelected; - render(); + dataChange(); }) .attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); }); deployed.selectAll('text').data(bands).enter().append('text') .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') .attr('class', 'primary-bg') .on('click', function(d) { d.depSelected = !d.depSelected; - render(); + dataChange(); }) .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 .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)) + ')'); } diff --git a/app/js/directives/directive-slider.js b/app/js/directives/directive-slider.js index 9bde1384..bc6b8e9f 100644 --- a/app/js/directives/directive-slider.js +++ b/app/js/directives/directive-slider.js @@ -40,7 +40,7 @@ angular.module('app').directive('slider', ['$window', function($window) { render(); }); - angular.element($window).bind('orientationchange resize', render); + //angular.element($window).bind('orientationchange resize', render); function render() { var width = element[0].offsetWidth, w = width - margin.left - margin.right; diff --git a/app/less/outfit.less b/app/less/outfit.less index 43483bf6..675d5bab 100755 --- a/app/less/outfit.less +++ b/app/less/outfit.less @@ -210,6 +210,11 @@ table.total { text, rect { cursor: pointer; } + + rect { + stroke-width: 1px; + stroke: #000; + } } #componentPriority { diff --git a/app/less/slider.less b/app/less/slider.less index d76afd17..43d19a87 100644 --- a/app/less/slider.less +++ b/app/less/slider.less @@ -41,3 +41,58 @@ 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; + } +} diff --git a/app/views/_header.html b/app/views/_header.html index aaccdd00..dbaf0c77 100755 --- a/app/views/_header.html +++ b/app/views/_header.html @@ -76,8 +76,8 @@ - - + +
AAA