Skip to content

Commit 7ccb8d8

Browse files
FrencilFrencil
authored
Redesign (#18)
* 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
1 parent 1c10c7b commit 7ccb8d8

File tree

111 files changed

+10736
-6570
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

111 files changed

+10736
-6570
lines changed

‎lib/components/AopDataViewer/AopDataViewer.js‎

Lines changed: 5 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
9595
iframe: {
9696
minWidth: "".concat(MIN_IFRAME_WIDTH),
9797
minHeight: "".concat(MIN_IFRAME_WIDTH),
98-
border: "1px solid ".concat(theme.palette.grey[700]),
99-
borderRadius: theme.spacing(0.5)
98+
border: "1px solid ".concat(theme.palette.grey[700])
10099
},
101100
divider: {
102101
margin: theme.spacing(2, 0)
@@ -109,88 +108,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
109108
optgroup: {
110109
fontWeight: _Theme.default.typography.fontWeightMedium
111110
},
112-
tooltip: {
113-
marginLeft: theme.spacing(0.25)
114-
},
115111
tooltipIconButton: {
116-
marginTop: theme.spacing(-0.25)
117-
},
118-
tooltipPopper: {
119-
'& > div': {
120-
padding: theme.spacing(1, 1.5),
121-
fontSize: '0.85rem',
122-
fontWeight: 300,
123-
backgroundColor: theme.palette.grey[800]
124-
},
125-
'& a': {
126-
color: theme.palette.grey[100]
127-
}
112+
marginTop: theme.spacing(-0.5),
113+
marginLeft: theme.spacing(0.5)
128114
}
129115
};
130116
});
131-
132-
var boxShadow = function boxShadow(alpha) {
133-
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)");
134-
};
135-
136-
var YearSlider = (0, _styles.withStyles)({
137-
root: {
138-
marginBottom: _Theme.default.spacing(0)
139-
},
140-
rail: {
141-
height: 5,
142-
borderRadius: 2
143-
},
144-
track: {
145-
display: 'none'
146-
},
147-
mark: {
148-
height: 16,
149-
width: 5,
150-
borderRadius: 2,
151-
marginTop: -5,
152-
marginLeft: -2,
153-
backgroundColor: _Theme.default.palette.primary.main
154-
},
155-
markLabel: {
156-
marginTop: _Theme.default.spacing(1)
157-
},
158-
thumb: {
159-
height: _Theme.default.spacing(3.5),
160-
width: _Theme.default.spacing(1.5),
161-
backgroundColor: _Theme.default.palette.grey[50],
162-
boxShadow: boxShadow(0.13),
163-
border: "2px solid ".concat(_Theme.default.palette.primary.main),
164-
borderRadius: _Theme.default.spacing(0.5),
165-
marginTop: _Theme.default.spacing(-1.5),
166-
marginLeft: _Theme.default.spacing(-0.75),
167-
'&:focus,&:hover,&active': {
168-
boxShadow: boxShadow(0.3),
169-
// Reset on touch devices, it doesn't add specificity
170-
'@media (hover: none)': {
171-
boxShadow: boxShadow(0.13)
172-
}
173-
}
174-
},
175-
valueLabel: {
176-
left: 'initial',
177-
fontWeight: 600,
178-
top: -20,
179-
whiteSpace: 'nowrap',
180-
'& span': {
181-
width: 'auto',
182-
height: 'auto',
183-
padding: _Theme.default.spacing(0.5, 1),
184-
borderRadius: _Theme.default.spacing(0.5),
185-
transform: 'none',
186-
'& span': {
187-
transform: 'none',
188-
padding: 0,
189-
borderRadius: 0
190-
}
191-
}
192-
}
193-
})(_Slider.default);
194117
/**
195118
Function: Parse the response from the Visus API from its original shape
196119
into an object keyed by sites each containing an object keyed by years
@@ -566,8 +489,7 @@ var AopDataViewer = function AopDataViewer(props) {
566489
return /*#__PURE__*/_react.default.createElement("div", {
567490
style: {
568491
width: '100%',
569-
display: 'flex',
570-
padding: _Theme.default.spacing(0.25, 0, 2.25, 0)
492+
display: 'flex'
571493
}
572494
}, /*#__PURE__*/_react.default.createElement("div", {
573495
style: {
@@ -589,7 +511,7 @@ var AopDataViewer = function AopDataViewer(props) {
589511
style: {
590512
flexGrow: 1
591513
}
592-
}, /*#__PURE__*/_react.default.createElement(YearSlider, {
514+
}, /*#__PURE__*/_react.default.createElement(_Slider.default, {
593515
"data-selenium": "aop-data-viewer.year-slider",
594516
value: currentSelection.year,
595517
step: null,
@@ -670,10 +592,6 @@ var AopDataViewer = function AopDataViewer(props) {
670592
}, "".concat(input.substr(0, 1).toUpperCase()).concat(input.substr(1)), tooltip ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
671593
placement: "right",
672594
title: tooltip,
673-
className: classes.tooltip,
674-
PopperProps: {
675-
className: classes.tooltipPopper
676-
},
677595
interactive: true
678596
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
679597
size: "small",

‎lib/components/DataProductAvailability/AvailabilityGrid.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,8 @@ var styles = {
135135
fontSize: "".concat(SVG.LABEL_FONT_SIZE, "px")
136136
},
137137
timeHighlight: {
138-
fill: _Theme.COLORS.ORANGE[400],
139-
stroke: _Theme.COLORS.ORANGE[700],
138+
fill: _Theme.COLORS.GOLD[300],
139+
stroke: _Theme.COLORS.GOLD[500],
140140
strokeWidth: '1px',
141141
opacity: 0
142142
},
@@ -181,7 +181,7 @@ var applyStyles = function applyStyles(node, styleName) {
181181

182182
var touchRipple = function touchRipple(selection) {
183183
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
184-
selection.style('fill', 'rgba(199, 110, 0, 0.75)').transition((0, _d3Transition.transition)().duration(duration)).style('fill', 'rgba(199, 110, 0, 0.25)');
184+
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"));
185185
};
186186
/**
187187
* AvailabilityGrid generator function
@@ -567,7 +567,7 @@ function AvailabilityGrid(config) {
567567

568568

569569
var rowHover = svg.append('rect').attr('class', 'rowHover');
570-
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);
570+
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);
571571
/**
572572
SVG: Left and Right bounds
573573
*/
@@ -695,7 +695,7 @@ function AvailabilityGrid(config) {
695695
var transform = getRowTranslation(rowKey, rowIdx);
696696
var labelX = getLabelWidth() - SVG.CELL_PADDING;
697697
var rowLabelG = rowLabelsG.append('g').attr('transform', transform);
698-
var fill = selectionEnabled && setSitesValue && viewSelections[rowKey] ? _Theme.default.palette.secondary.contrastText : _Theme.default.palette.grey[700];
698+
var fill = selectionEnabled && setSitesValue && viewSelections[rowKey] ? _Theme.default.palette.primary.contrastText : _Theme.default.palette.grey[700];
699699
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));
700700
applyStyles(text, 'rowLabel');
701701
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 () {
@@ -781,7 +781,7 @@ function AvailabilityGrid(config) {
781781
}).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) {
782782
switch (rowData[d]) {
783783
case 'available':
784-
return _Theme.default.palette.primary.main;
784+
return _Theme.COLORS.NEON_BLUE[700];
785785

786786
default:
787787
return _Theme.default.palette.grey[100];
@@ -841,8 +841,8 @@ function AvailabilityGrid(config) {
841841

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

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

887887
var startX = getYearMonthGutterX(dateRange.value[0], 'left');

‎lib/components/DataProductAvailability/AvailabilityLegend.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function AvailabilityLegend(props) {
8585
width: _AvailabilityGrid.SVG.CELL_WIDTH,
8686
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
8787
rx: _AvailabilityGrid.SVG.CELL_RX,
88-
fill: _Theme.default.palette.primary.main
88+
fill: _Theme.COLORS.NEON_BLUE[700]
8989
}), /*#__PURE__*/_react.default.createElement("text", {
9090
className: classes.legendText,
9191
x: cellOffset,
@@ -133,7 +133,7 @@ function AvailabilityLegend(props) {
133133
width: _AvailabilityGrid.SVG.CELL_WIDTH,
134134
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
135135
rx: _AvailabilityGrid.SVG.CELL_RX,
136-
fill: _Theme.default.palette.primary.main
136+
fill: _Theme.COLORS.NEON_BLUE[700]
137137
}), /*#__PURE__*/_react.default.createElement("text", {
138138
className: classes.legendText,
139139
x: columnX(0) + cellOffset,
@@ -179,8 +179,8 @@ function AvailabilityLegend(props) {
179179
var handleAttribs = {
180180
width: _AvailabilityGrid.SVG.DATE_RANGE_HANDLE_WIDTH,
181181
height: _AvailabilityGrid.SVG.CELL_HEIGHT,
182-
fill: _Theme.COLORS.SECONDARY_BLUE[300],
183-
stroke: _Theme.default.palette.secondary.main,
182+
fill: _Theme.COLORS.LIGHT_BLUE[300],
183+
stroke: _Theme.default.palette.primary.main,
184184
strokeWidth: 1.5
185185
};
186186
/* eslint-disable max-len */
@@ -194,7 +194,7 @@ function AvailabilityLegend(props) {
194194
y: rowY(0) + 1.5,
195195
width: selectionWidth,
196196
height: _AvailabilityGrid.SVG.CELL_HEIGHT - 2,
197-
fill: _Theme.default.palette.secondary.main
197+
fill: _Theme.COLORS.LIGHT_BLUE[500]
198198
}), /*#__PURE__*/_react.default.createElement("rect", _extends({
199199
x: 0.5,
200200
y: rowY(0) + 0.5
@@ -210,7 +210,7 @@ function AvailabilityLegend(props) {
210210
y: rowY(1) + 1.5,
211211
width: selectionWidth,
212212
height: _AvailabilityGrid.SVG.CELL_HEIGHT - 2,
213-
fill: _Theme.COLORS.SECONDARY_BLUE[200]
213+
fill: _Theme.COLORS.LIGHT_BLUE[200]
214214
}), /*#__PURE__*/_react.default.createElement("rect", _extends({
215215
x: 0.5,
216216
y: rowY(1) + 0.5

0 commit comments

Comments
 (0)