Skip to content

Commit

Permalink
Redesign (#18)
Browse files Browse the repository at this point in the history 
* start teaching NeonContext how to load header/footer

* NeonContext auth conform to other fetches

* Working header+footer+css, stub loading

* add basic skeleton for loading state

* remove unneeded css file

* include jquery dependency in index.html for header.js

* fix IDs on header/footer skeleton components

* defer loading of CSS and header.js

* correct auth fetch initialization

* set Inter as primary theme font

* initial border radius and palette grey adjustments

* more border radius adjustments

* more typography adjustments, buttons, and gutters

* SiteMap external linking, updated typography

* updates to buttons, toggles, callouts

* carve out space for MUI components styleguide check

* availability, time series, external host etc. updates

* more adjustments to time series viewer styles

* fix TSV date registration and series render bugs

* expose useCoreHeader prop on NeonPage and NeonContext

* legacy header and icon button styles

* clean up page and notification styles

* fix dialog z-index and table pagination styles

* styling for sliders

* unsticky the drupal header with a prop

* export COLORs driectly inside Theme for use in other apps

* styling on form controls (checkbox, radio, switch)

* clean up button group and dialog backdrop styles

* update drupal header src; SiteMap manual resize support

* fix minor SiteMap table bugs

* NeonPage sidebar links support

* minor NeonPage sidebar tweaks

* fix NeonPage loading bugs and table styles

* NeonPage support arbitrary sidebar content

* fix zIndex bugs and defer header html loading until css loaded

* SiteMap smart fetch for plot bounds

* more drupal header z-index tweaks

* make tooltips consistent through Theme

* better NeonPage sidebar flexibility (optional unsticky)

* fix drupal header zindex override bug

* fix NeonPage sm viewport scaling bugs

* fix NeonPage sidebar/title alignment bug

* fix NeonPage overlay spacing bug

* fix one more zIndex overlay bug

* siteMap display bug fixes and show observatory button

* bump version to 1.4.0
  • Loading branch information
@Frencil
Frencil authored Jul 18, 2020
1 parent 1c10c7b commit 7ccb8d8
Show file tree
Hide file tree
Showing 111 changed files with 10,736 additions and 6,570 deletions.
92 changes: 5 additions & 87 deletions lib/components/AopDataViewer/AopDataViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
iframe: {
minWidth: "".concat(MIN_IFRAME_WIDTH),
minHeight: "".concat(MIN_IFRAME_WIDTH),
border: "1px solid ".concat(theme.palette.grey[700]),
borderRadius: theme.spacing(0.5)
border: "1px solid ".concat(theme.palette.grey[700])
},
divider: {
margin: theme.spacing(2, 0)
Expand All @@ -109,88 +108,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
optgroup: {
fontWeight: _Theme.default.typography.fontWeightMedium
},
tooltip: {
marginLeft: theme.spacing(0.25)
},
tooltipIconButton: {
marginTop: theme.spacing(-0.25)
},
tooltipPopper: {
'& > div': {
padding: theme.spacing(1, 1.5),
fontSize: '0.85rem',
fontWeight: 300,
backgroundColor: theme.palette.grey[800]
},
'& a': {
color: theme.palette.grey[100]
}
marginTop: theme.spacing(-0.5),
marginLeft: theme.spacing(0.5)
}
};
});

var boxShadow = function boxShadow(alpha) {
return "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,".concat(alpha, "),0 0 0 1px rgba(0,0,0,0.02)");
};

var YearSlider = (0, _styles.withStyles)({
root: {
marginBottom: _Theme.default.spacing(0)
},
rail: {
height: 5,
borderRadius: 2
},
track: {
display: 'none'
},
mark: {
height: 16,
width: 5,
borderRadius: 2,
marginTop: -5,
marginLeft: -2,
backgroundColor: _Theme.default.palette.primary.main
},
markLabel: {
marginTop: _Theme.default.spacing(1)
},
thumb: {
height: _Theme.default.spacing(3.5),
width: _Theme.default.spacing(1.5),
backgroundColor: _Theme.default.palette.grey[50],
boxShadow: boxShadow(0.13),
border: "2px solid ".concat(_Theme.default.palette.primary.main),
borderRadius: _Theme.default.spacing(0.5),
marginTop: _Theme.default.spacing(-1.5),
marginLeft: _Theme.default.spacing(-0.75),
'&:focus,&:hover,&active': {
boxShadow: boxShadow(0.3),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
boxShadow: boxShadow(0.13)
}
}
},
valueLabel: {
left: 'initial',
fontWeight: 600,
top: -20,
whiteSpace: 'nowrap',
'& span': {
width: 'auto',
height: 'auto',
padding: _Theme.default.spacing(0.5, 1),
borderRadius: _Theme.default.spacing(0.5),
transform: 'none',
'& span': {
transform: 'none',
padding: 0,
borderRadius: 0
}
}
}
})(_Slider.default);
/**
Function: Parse the response from the Visus API from its original shape
into an object keyed by sites each containing an object keyed by years
Expand Down Expand Up @@ -566,8 +489,7 @@ var AopDataViewer = function AopDataViewer(props) {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: '100%',
display: 'flex',
padding: _Theme.default.spacing(0.25, 0, 2.25, 0)
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
Expand All @@ -589,7 +511,7 @@ var AopDataViewer = function AopDataViewer(props) {
style: {
flexGrow: 1
}
}, /*#__PURE__*/_react.default.createElement(YearSlider, {
}, /*#__PURE__*/_react.default.createElement(_Slider.default, {
"data-selenium": "aop-data-viewer.year-slider",
value: currentSelection.year,
step: null,
Expand Down Expand Up @@ -670,10 +592,6 @@ var AopDataViewer = function AopDataViewer(props) {
}, "".concat(input.substr(0, 1).toUpperCase()).concat(input.substr(1)), tooltip ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
placement: "right",
title: tooltip,
className: classes.tooltip,
PopperProps: {
className: classes.tooltipPopper
},
interactive: true
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
size: "small",
Expand Down
18 changes: 9 additions & 9 deletions lib/components/DataProductAvailability/AvailabilityGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,8 @@ var styles = {
fontSize: "".concat(SVG.LABEL_FONT_SIZE, "px")
},
timeHighlight: {
fill: _Theme.COLORS.ORANGE[400],
stroke: _Theme.COLORS.ORANGE[700],
fill: _Theme.COLORS.GOLD[300],
stroke: _Theme.COLORS.GOLD[500],
strokeWidth: '1px',
opacity: 0
},
Expand Down Expand Up @@ -181,7 +181,7 @@ var applyStyles = function applyStyles(node, styleName) {

var touchRipple = function touchRipple(selection) {
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
selection.style('fill', 'rgba(199, 110, 0, 0.75)').transition((0, _d3Transition.transition)().duration(duration)).style('fill', 'rgba(199, 110, 0, 0.25)');
selection.style('fill', "".concat(_Theme.COLORS.LIGHT_BLUE[300], "30")).transition((0, _d3Transition.transition)().duration(duration)).style('fill', "".concat(_Theme.COLORS.LIGHT_BLUE[300], "c0"));
};
/**
* AvailabilityGrid generator function
Expand Down Expand Up @@ -567,7 +567,7 @@ function AvailabilityGrid(config) {


var rowHover = svg.append('rect').attr('class', 'rowHover');
rowHover.attr('x', 1).attr('y', -2 * SVG.CELL_HEIGHT).attr('width', svgWidth - 1).attr('height', SVG.CELL_HEIGHT + SVG.CELL_PADDING).attr('fill', 'none').attr('stroke', _Theme.COLORS.SECONDARY_BLUE[700]).attr('stroke-width', '1.5px').style('opacity', 0);
rowHover.attr('x', 1).attr('y', -2 * SVG.CELL_HEIGHT).attr('width', svgWidth - 1).attr('height', SVG.CELL_HEIGHT + SVG.CELL_PADDING).attr('fill', 'none').attr('stroke', _Theme.COLORS.LIGHT_BLUE[700]).attr('stroke-width', '1.5px').style('opacity', 0);
/**
SVG: Left and Right bounds
*/
Expand Down Expand Up @@ -695,7 +695,7 @@ function AvailabilityGrid(config) {
var transform = getRowTranslation(rowKey, rowIdx);
var labelX = getLabelWidth() - SVG.CELL_PADDING;
var rowLabelG = rowLabelsG.append('g').attr('transform', transform);
var fill = selectionEnabled && setSitesValue && viewSelections[rowKey] ? _Theme.default.palette.secondary.contrastText : _Theme.default.palette.grey[700];
var fill = selectionEnabled && setSitesValue && viewSelections[rowKey] ? _Theme.default.palette.primary.contrastText : _Theme.default.palette.grey[700];
var text = rowLabelG.append('text').attr('x', labelX).attr('y', SVG.LABEL_FONT_SIZE - SVG.CELL_PADDING).attr('fill', fill).text(data.getLabel.text(rowKey));
applyStyles(text, 'rowLabel');
var mask = rowLabelG.append('rect').attr('x', 0).attr('y', -1 * halfCellPad).attr('width', getLabelWidth()).attr('height', SVG.CELL_HEIGHT + SVG.CELL_PADDING).on('mouseover', function () {
Expand Down Expand Up @@ -781,7 +781,7 @@ function AvailabilityGrid(config) {
}).attr('y', 0).attr('width', "".concat(SVG.CELL_WIDTH, "px")).attr('height', "".concat(SVG.CELL_HEIGHT, "px")).attr('rx', "".concat(SVG.CELL_RX, "px")).attr('cursor', 'pointer').attr('fill', function (d) {
switch (rowData[d]) {
case 'available':
return _Theme.default.palette.primary.main;
return _Theme.COLORS.NEON_BLUE[700];

default:
return _Theme.default.palette.grey[100];
Expand Down Expand Up @@ -841,8 +841,8 @@ function AvailabilityGrid(config) {

return yBounds[1] - yBounds[0];
}).attr('fill', function (d) {
return isHighlighted(d) ? _Theme.COLORS.SECONDARY_BLUE[100] : _Theme.COLORS.SECONDARY_BLUE[300];
}).attr('stroke', _Theme.default.palette.secondary.main).style('stroke-width', '1.5px').style('display', sites.value.length ? null : 'none');
return isHighlighted(d) ? _Theme.COLORS.LIGHT_BLUE[100] : _Theme.COLORS.LIGHT_BLUE[300];
}).attr('stroke', _Theme.COLORS.LIGHT_BLUE[500]).style('stroke-width', '1.5px').style('display', sites.value.length ? null : 'none');
};
/**
SVG: Date Range Masks
Expand Down Expand Up @@ -881,7 +881,7 @@ function AvailabilityGrid(config) {
};

var fill = function fill(d) {
return viewSelections[d] === 'full' ? _Theme.default.palette.secondary.main : _Theme.COLORS.SECONDARY_BLUE[200];
return viewSelections[d] === 'full' ? _Theme.COLORS.LIGHT_BLUE[500] : _Theme.COLORS.LIGHT_BLUE[200];
};

var startX = getYearMonthGutterX(dateRange.value[0], 'left');
Expand Down
12 changes: 6 additions & 6 deletions lib/components/DataProductAvailability/AvailabilityLegend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ function AvailabilityLegend(props) {
width: _AvailabilityGrid.SVG.CELL_WIDTH,
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
rx: _AvailabilityGrid.SVG.CELL_RX,
fill: _Theme.default.palette.primary.main
fill: _Theme.COLORS.NEON_BLUE[700]
}), /*#__PURE__*/_react.default.createElement("text", {
className: classes.legendText,
x: cellOffset,
Expand Down Expand Up @@ -133,7 +133,7 @@ function AvailabilityLegend(props) {
width: _AvailabilityGrid.SVG.CELL_WIDTH,
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
rx: _AvailabilityGrid.SVG.CELL_RX,
fill: _Theme.default.palette.primary.main
fill: _Theme.COLORS.NEON_BLUE[700]
}), /*#__PURE__*/_react.default.createElement("text", {
className: classes.legendText,
x: columnX(0) + cellOffset,
Expand Down Expand Up @@ -179,8 +179,8 @@ function AvailabilityLegend(props) {
var handleAttribs = {
width: _AvailabilityGrid.SVG.DATE_RANGE_HANDLE_WIDTH,
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
fill: _Theme.COLORS.SECONDARY_BLUE[300],
stroke: _Theme.default.palette.secondary.main,
fill: _Theme.COLORS.LIGHT_BLUE[300],
stroke: _Theme.default.palette.primary.main,
strokeWidth: 1.5
};
/* eslint-disable max-len */
Expand All @@ -194,7 +194,7 @@ function AvailabilityLegend(props) {
y: rowY(0) + 1.5,
width: selectionWidth,
height: _AvailabilityGrid.SVG.CELL_HEIGHT - 2,
fill: _Theme.default.palette.secondary.main
fill: _Theme.COLORS.LIGHT_BLUE[500]
}), /*#__PURE__*/_react.default.createElement("rect", _extends({
x: 0.5,
y: rowY(0) + 0.5
Expand All @@ -210,7 +210,7 @@ function AvailabilityLegend(props) {
y: rowY(1) + 1.5,
width: selectionWidth,
height: _AvailabilityGrid.SVG.CELL_HEIGHT - 2,
fill: _Theme.COLORS.SECONDARY_BLUE[200]
fill: _Theme.COLORS.LIGHT_BLUE[200]
}), /*#__PURE__*/_react.default.createElement("rect", _extends({
x: 0.5,
y: rowY(1) + 0.5
Expand Down
Loading

0 comments on commit 7ccb8d8

Please sign in to comment.