Skip to content

Commit

Permalink
excel theme added
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevewirts
stevewirts committed Jan 29, 2015
1 parent ef9d05b commit 2b97d21
Show file tree
Hide file tree
Showing 7 changed files with 672 additions and 21 deletions.
3 changes: 2 additions & 1 deletion demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>fin-hypergrid Demo</title>
<link rel="stylesheet" href="themes/the-times.css" shim-shadowdom="">
<link rel="stylesheet" href="themes/excel.css" shim-shadowdom="">
<script src="../webcomponentsjs/webcomponents.js"></script>
<script src="../accountingjs/accounting.min.js"></script>
<link rel="import" href="../paper-tabs/paper-tabs.html">
Expand Down Expand Up @@ -230,6 +230,7 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
var scope = document.querySelector('#themeDropDown');

scope.themes = [
'excel',
'candy',
'classical',
'dark-side',
Expand Down
12 changes: 6 additions & 6 deletions features/fin-hypergrid-feature-column-moving.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
var scrollLeft = grid.getHScrollValue();
var numFixedColumns = grid.getFixedColumnCount();
var columnWidth = columnIndex < 0 ? grid.getFixedColumnWidth(numFixedColumns + columnIndex + scrollLeft) : grid.getColumnWidth(columnIndex + scrollLeft);
var colHeight = grid.clientHeight;
var colHeight = grid.clientHeight - grid.constants.scrollerSize + 1;
var d = this.floatColumn;
var style = d.style;
var location = grid.getBoundingClientRect();
Expand All @@ -219,8 +219,8 @@
style.boxShadow = '2px 2px 2px #888888';
style.width = columnWidth + 'px'; //Math.round(columnWidth / hdpiRatio) + 'px';
style.height = colHeight + 'px'; //Math.round(colHeight / hdpiRatio) + 'px';
style.borderTop = '1px solid ' + grid.constants.lineColor;
style.backgroundColor = grid.constants.backgroundColor;
style.borderTop = '1px solid ' + grid.renderer.theme.lineColor;
style.backgroundColor = grid.renderer.theme.backgroundColor;

var startX = grid.renderer.renderedColumnWidths[columnIndex + numFixedColumns];
startX = startX * hdpiRatio;
Expand Down Expand Up @@ -260,7 +260,7 @@
var hdpiRatio = grid.getHiDPI(this.draggerCTX);

var columnWidth = columnIndex < 0 ? grid.getFixedColumnWidth(numFixedColumns + columnIndex + scrollLeft) : grid.getColumnWidth(columnIndex + scrollLeft);
var colHeight = grid.clientHeight;
var colHeight = grid.clientHeight - grid.constants.scrollerSize + 1;
var d = this.dragger;

var location = grid.getBoundingClientRect();
Expand All @@ -271,8 +271,8 @@
style.opacity = 0.85;
style.boxShadow = '5px 5px 5px #888888';
//style.zIndex = 100;
style.borderTop = '1px solid ' + grid.constants.lineColor;
style.backgroundColor = grid.constants.backgroundColor;
style.borderTop = '1px solid ' + grid.renderer.theme.lineColor;
style.backgroundColor = grid.renderer.theme.backgroundColor;

d.setAttribute('width', Math.round(columnWidth * hdpiRatio) + 'px');
d.setAttribute('height', Math.round(colHeight * hdpiRatio) + 'px');
Expand Down
8 changes: 4 additions & 4 deletions fin-hypergrid-cell-provider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@
defaultCellPaint: function(gc, x, y, width, height) {

var colHEdgeOffset = constants.cellPadding,
halignOffset = 0,
valignOffset = 0,
halignOffset = this.config.hoffset,
valignOffset = this.config.voffset,
halign = this.config.halign,
size,
textWidth;
Expand Down Expand Up @@ -122,7 +122,7 @@
}

halignOffset = Math.max(0, halignOffset);
valignOffset = height / 2;
valignOffset = valignOffset + Math.ceil(height / 2);

//fill background only if our bgColor is populated or we are a selected cell
if (this.config.bgColor || this.config.isSelected) {
Expand All @@ -131,7 +131,7 @@
}

//draw text
gc.fillStyle = this.config.isSelected ? this.config.bgColor : this.config.fgColor;
gc.fillStyle = this.config.isSelected ? this.config.fgSelColor : this.config.fgColor;
gc.fillText(this.config.value, x + halignOffset, y + valignOffset);

},
Expand Down
5 changes: 4 additions & 1 deletion fin-hypergrid-constants.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@
repaintIntervalRate: 15,
lineColor: '#C7C7C7',
gridLinesH: true,
gridLinesV: true
gridLinesV: true,
scrollerSize: 15,
voffset: '0px',
hoffset: '0px'
};

Polymer({ /* jshint ignore:line */
Expand Down
38 changes: 30 additions & 8 deletions fin-hypergrid-renderer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

// we need a reusable cellconfig object
var config = {};
var cellConfig = function(x, y, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign) {
var cellConfig = function(x, y, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign, hoffset, voffset) {
config.x = x;
config.y = y;
config.value = value;
Expand All @@ -43,6 +43,8 @@
config.font = font;
config.isSelected = isSelected;
config.halign = halign || 'center';
config.hoffset = hoffset;
config.voffset = voffset;
return config;
};

Expand Down Expand Up @@ -92,14 +94,21 @@
theme.backgroundDisabled = css.style.background;
theme.colorDisabled = css.style.color;

css = getCSSRule('html');//html .small, html /deep/ .small
css = getCSSRule('html');

//padding-left/top on html in css will translate to an offset for
//displaying text within a cell
theme['-hg-padding-top'] = css.style.paddingTop;
theme['-hg-padding-left'] = css.style.paddingLeft;

var fontFamily = css.style.fontFamily;

var fontFamily = css.style.fontFamily;
theme.font2 = css.style.fontSize + ' ' + fontFamily;

css = getCSSRule('html .small, html /deep/ .small');//
theme.font1 = css.style.fontSize + ' ' + fontFamily;


css = getCSSRule('html, body');
theme.color = css.style.color;
theme.background = css.style.backgroundColor;
Expand Down Expand Up @@ -135,6 +144,8 @@
theme.colorLink = css.style.color;
theme.backgroundLink = css.style.backgroundColor;

//lets let users override properties of anything if they want

return theme;
},
initializeThemeProperties: function() {
Expand All @@ -152,17 +163,19 @@

this.theme.fixedRowColor = polymerTheme.color;
this.theme.fixedRowBackgroundColor = polymerTheme.backgroundDisabled;
this.theme.fixedRowSelColor = polymerTheme.color;
this.theme.fixedRowFGSelColor = polymerTheme.colorInfo;
this.theme.fixedRowBGSelColor = polymerTheme.backgroundInfo;

this.theme.fixedColumnColor = polymerTheme.color;
this.theme.fixedColumnBackgroundColor = polymerTheme.backgroundDisabled;
this.theme.fixedColumnSelColor = polymerTheme.color;
this.theme.fixedColumnFGSelColor = polymerTheme.colorInfo;
this.theme.fixedColumnBGSelColor = polymerTheme.backgroundInfo;

this.theme.topLeftBackgroundColor = polymerTheme.backgroundDisabled;

this.theme.lineColor = polymerTheme.colorDisabled;
this.theme.hoffset = parseInt(polymerTheme['-hg-padding-left'] || constants.hoffset);
this.theme.voffset = parseInt(polymerTheme['-hg-padding-top'] || constants.voffset);
},
themeChangedNotification: function() {
this.initializeThemeProperties();
Expand Down Expand Up @@ -515,6 +528,9 @@
var scrollLeft = this.getScrollLeft();
var font = this.theme.fixedRowFont;

var voffset = this.theme.voffset;
var hoffset = this.theme.hoffset;

var fgColor = this.theme.fixedRowColor;
var bgColor = this.theme.fixedRowBackgroundColor;

Expand Down Expand Up @@ -543,7 +559,7 @@

//translatedX allows us to reorder columns
var translatedX = behavior.translateColumnIndex(c + scrollLeft);
var cell = cellProvider.getFixedRowCell(cellConfig(translatedX, r, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign));
var cell = cellProvider.getFixedRowCell(cellConfig(translatedX, r, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign, hoffset, voffset));
cell.paint(ctx, x, y, width, height);
y = y + height;
}
Expand All @@ -558,6 +574,9 @@

var font = this.theme.fixedColumnFont;

var voffset = this.theme.voffset;
var hoffset = this.theme.hoffset;

var fgColor = this.theme.fixedColumnColor;
var bgColor = this.theme.fixedColumnBackgroundColor;

Expand All @@ -583,7 +602,7 @@
break;
}
var value = behavior.getFixedColumnValue(c, r + scrollTop);
var cell = cellProvider.getFixedColumnCell(cellConfig(c, r + scrollTop, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign));
var cell = cellProvider.getFixedColumnCell(cellConfig(c, r + scrollTop, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, halign, hoffset, voffset));
cell.paint(ctx, x, y, width, height);
y = y + height;
}
Expand Down Expand Up @@ -613,6 +632,9 @@
var cellProvider = this.getGrid().getCellProvider();
var font = this.theme.font;

var voffset = this.theme.voffset;
var hoffset = this.theme.hoffset;

var fgColor = this.theme.color;
var bgColor = this.theme.backgroundColor;

Expand Down Expand Up @@ -649,7 +671,7 @@
//translatedX allows us to reorder columns
var translatedX = behavior.translateColumnIndex(c + scrollLeft);

var cell = cellProvider.getCell(cellConfig(translatedX, r + scrollTop, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, columnAlign));
var cell = cellProvider.getCell(cellConfig(translatedX, r + scrollTop, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, columnAlign, hoffset, voffset));

cell.paint(ctx, x, y, width, height);

Expand Down
2 changes: 1 addition & 1 deletion fin-hypergrid.min.html
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2b97d21

Please sign in to comment.