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

Inital commit for font size adjust slider

Browse Source
This commit is contained in:
Colin McLeod
2015-06-29 16:29:09 -07:00
parent 42d51b7612
commit c2a84606a1
7 changed files with 48 additions and 20 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;">
<div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>
<shipyard-header></shipyard-header>
<div id="main" ui-view ng-click="bgClicked($event)"></div>
<div id="main" ui-view ng-click="bgClicked($event)" ng-style="{'font-size': fontSize + 'em'}"></div>
<div ui-view="modal" ng-click="bgClicked($event)"></div>

1
app/js/app.js
View File

@@ -51,6 +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.title = 'Coriolis';
$rootScope.changeLanguage = function() {

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

@@ -79,6 +79,11 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
scope.openedMenu = null;
});
scope.textSizeChange = function(size) {
$rootScope.fontSize = size;
document.getElementById('main').style.fontSize = size + 'em';
};
scope.$watchCollection('allBuilds', function() {
scope.buildsList = Object.keys(scope.allBuilds).sort();
});

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

@@ -3,18 +3,20 @@ angular.module('app').directive('slider', ['$window', function($window) {
return {
restrict: 'A',
scope: {
min: '=',
def: '=',
max: '=',
unit: '=',
change: '&onChange'
},
link: function(scope, element) {
var margin = { top: -10, right: 145, bottom: 0, left: 50 },
height = 40, // Height is fixed
var unit = scope.unit,
margin = unit ? { top: -10, right: 145, bottom: 0, left: 50 } : { top: 0, right: 10, bottom: 0, left: 10 },
height = unit ? 40 : 20, // Height is fixed
h = height - margin.top - margin.bottom,
fmt = d3.format('.2f'),
pct = d3.format('.1%'),
unit = scope.unit,
val = scope.max,
val = scope.def !== undefined ? scope.def : scope.max,
svg = d3.select(element[0]).append('svg'),
vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
xAxis = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
@@ -23,7 +25,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
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),
handle = slider.append('circle').attr('class', 'handle').attr('r', '0.6em'),
lbl = slider.append('g').append('text').attr('y', h / 2);
lbl = unit ? slider.append('g').append('text').attr('y', h / 2) : null;
slider.call(brush);
slider.select('.background').attr('height', h);
@@ -41,20 +43,21 @@ angular.module('app').directive('slider', ['$window', function($window) {
function render() {
var width = element[0].offsetWidth, w = width - margin.left - margin.right;
svg.attr('width', width).attr('height', height);
x.domain([0, scope.max]).range([0, w]).clamp(true);
x.domain([scope.min || 0, scope.max]).range([0, w]).clamp(true);
handle.attr('cx', x(val));
xAxis
.call(d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(function(d) { return d + unit; })
.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max])
.tickSize(0)
.tickPadding(12))
.select('.domain');
lbl.attr('x', w + 20);
if (unit) {
xAxis
.call(d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(function(d) { return d + unit; })
.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max])
.tickSize(0)
.tickPadding(12))
.select('.domain');
lbl.attr('x', w + 20);
}
slider.call(brush.extent([val, val])).call(brush.event);
slider.selectAll('.extent,.resize').remove();
}
@@ -65,7 +68,9 @@ angular.module('app').directive('slider', ['$window', function($window) {
val = x.invert(d3.mouse(this)[0]);
brush.extent([val, val]);
}
lbl.text(fmt(val) + ' ' + unit + ' ' + pct(val / scope.max));
if (unit) {
lbl.text(fmt(val) + ' ' + unit + ' ' + pct(val / scope.max));
}
scope.change({ val: val });
handle.attr('cx', x(val));
filled.attr('d', 'M0,0V0H' + x(val) + 'V0');

3
app/less/app.less
View File

@@ -25,6 +25,9 @@ html, body {
height: 100%;
width: 100%;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body {

8
app/less/outfit.less
View File

@@ -196,6 +196,14 @@ table.total {
width: 100% !important;
});
}
.smallTablet({
.axis.x {
g.tick:nth-child(2n + 1) text {
display: none;
}
}
});
}
.power-band {

8
app/views/_header.html
View File

@@ -73,7 +73,13 @@
<li><a href="#" class="block" ui-sref="modal.delete" translate="delete all"></a></li>
</ul>
<hr />
<a href="#" ui-sref="modal.about" class="block" translate="about"></a>
<table style="width: 100%"><tr>
<td style="width: 20px"><u>A</u></td>
<td slider min="0.65" def="fontSize" max="1.5" unit="null" on-change="textSizeChange(val)"></td>
<td style="width: 20px"><span style="font-size: 30px">A</span></td>
</tr></table>
<hr />
<a href="#" ui-sref="modal.about" class="block">About</a>
</div>
</div>