@longline/aqua-ui 1.0.90 → 1.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/containers/GlassPane/GlassPane.js +1 -1
- package/containers/InfoBox/InfoBox.d.ts +8 -1
- package/containers/InfoBox/InfoBox.js +3 -3
- package/containers/InfoBox/elements/Content.d.ts +4 -0
- package/containers/InfoBox/elements/Content.js +7 -5
- package/map/markers/RiskMarker/RiskMarker.d.ts +5 -0
- package/map/markers/RiskMarker/RiskMarker.js +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ var GlassPaneBase = function (props) {
|
|
|
32
32
|
var GRADIENT_0 = "rgb(255,255,255,0.6)";
|
|
33
33
|
var GRADIENT_1 = "rgb(255,255,255,0.3)";
|
|
34
34
|
var Anim = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n backdrop-filter: contrast(130%) brightness(120%) blur(0);\n }\n 100% {\n opacity: 1;\n backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n }\n"], ["\n 0% {\n opacity: 0;\n backdrop-filter: contrast(130%) brightness(120%) blur(0);\n }\n 100% {\n opacity: 1;\n backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n }\n"])));
|
|
35
|
-
var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n z-index: 1;\n flex: 1;\n ", ";\n\n // Content:\n overflow: hidden;\n\n ", "\n\n // Appearance:\n backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n color: ", ";\n box-shadow: ", ";\n\n background:\n // Adds a light source:\n 0 0/300% 100% radial-gradient(\n ellipse at 16.7% -10%,\n hsla(0, 0%, 100%, 0.44) 24%,\n hsla(0, 0%, 100%, 0.4) 25%,\n hsla(0, 0%, 100%, 0.2) 45%,\n hsla(0, 0%, 100%, 0.1)\n ) padding-box,\n // General milky background:\n linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n // Border gradient:\n linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n border-radius: ", "px;\n border: solid ", "px transparent;\n"], ["\n // Position and size:\n position: relative;\n z-index: 1;\n flex: 1;\n ", ";\n\n // Content:\n overflow: hidden;\n\n ", "\n\n // Appearance:\n backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n color: ", ";\n box-shadow: ", ";\n\n background:\n // Adds a light source:\n 0 0/300% 100% radial-gradient(\n ellipse at 16.7% -10%,\n hsla(0, 0%, 100%, 0.44) 24%,\n hsla(0, 0%, 100%, 0.4) 25%,\n hsla(0, 0%, 100%, 0.2) 45%,\n hsla(0, 0%, 100%, 0.1)\n ) padding-box,\n // General milky background:\n linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n // Border gradient:\n linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n border-radius: ", "px;\n border: solid ", "px transparent;\n"
|
|
35
|
+
var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n z-index: 1;\n flex: 1;\n ", ";\n display: flex;\n flex-direction: column;\n\n // Content:\n overflow: hidden;\n\n ", "\n\n // Appearance:\n backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n color: ", ";\n box-shadow: ", ";\n\n background:\n // Adds a light source:\n 0 0/300% 100% radial-gradient(\n ellipse at 16.7% -10%,\n hsla(0, 0%, 100%, 0.44) 24%,\n hsla(0, 0%, 100%, 0.4) 25%,\n hsla(0, 0%, 100%, 0.2) 45%,\n hsla(0, 0%, 100%, 0.1)\n ) padding-box,\n // General milky background:\n linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n // Border gradient:\n linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n border-radius: ", "px;\n border: solid ", "px transparent;\n"], ["\n // Position and size:\n position: relative;\n z-index: 1;\n flex: 1;\n ", ";\n display: flex;\n flex-direction: column;\n\n // Content:\n overflow: hidden;\n\n ", "\n\n // Appearance:\n backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n color: ", ";\n box-shadow: ", ";\n\n background:\n // Adds a light source:\n 0 0/300% 100% radial-gradient(\n ellipse at 16.7% -10%,\n hsla(0, 0%, 100%, 0.44) 24%,\n hsla(0, 0%, 100%, 0.4) 25%,\n hsla(0, 0%, 100%, 0.2) 45%,\n hsla(0, 0%, 100%, 0.1)\n ) padding-box,\n // General milky background:\n linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n // Border gradient:\n linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n border-radius: ", "px;\n border: solid ", "px transparent;\n"
|
|
36
36
|
/**
|
|
37
37
|
* A `GlassPane` is used over a colorful background, like a map.
|
|
38
38
|
*
|
|
@@ -29,6 +29,13 @@ interface IProps {
|
|
|
29
29
|
* Optional footer JSX.
|
|
30
30
|
*/
|
|
31
31
|
footer?: React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Does content scroll? If an Infobox is placed in a flex container,
|
|
34
|
+
* like `Dockable.fill`, then it will the area available to it.
|
|
35
|
+
* The content scrolling must then be activated.
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
scroll?: boolean;
|
|
32
39
|
}
|
|
33
|
-
declare const InfoBox: ({ width, minHeight, padded, ...props }: IProps) => React.JSX.Element;
|
|
40
|
+
declare const InfoBox: ({ width, minHeight, padded, scroll, ...props }: IProps) => React.JSX.Element;
|
|
34
41
|
export { InfoBox, IProps };
|
|
@@ -33,13 +33,13 @@ import { Footer } from './elements/Footer';
|
|
|
33
33
|
*/
|
|
34
34
|
var InfoBoxBase = function (props) {
|
|
35
35
|
return React.createElement("div", { className: props.className },
|
|
36
|
-
React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight }, props.children),
|
|
36
|
+
React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight, scroll: props.scroll }, props.children),
|
|
37
37
|
props.footer && React.createElement(Footer, null, props.footer));
|
|
38
38
|
};
|
|
39
39
|
var InfoBoxStyled = styled(InfoBoxBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n width: ", "px;\n // Will flex if in flex-container:\n flex: 1;\n\n // Behavior:\n user-select: none;\n pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n // Content:\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: start;\n"], ["\n // Position and size:\n position: relative;\n width: ", "px;\n // Will flex if in flex-container:\n flex: 1;\n\n // Behavior:\n user-select: none;\n pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n // Content:\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: start;\n"])), function (p) { return p.width; });
|
|
40
40
|
var InfoBox = function (_a) {
|
|
41
|
-
var _b = _a.width, width = _b === void 0 ? 360 : _b, _c = _a.minHeight, minHeight = _c === void 0 ? 0 : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["width", "minHeight", "padded"]);
|
|
42
|
-
return React.createElement(InfoBoxStyled, __assign({ width: width, minHeight: minHeight, padded: padded }, props));
|
|
41
|
+
var _b = _a.width, width = _b === void 0 ? 360 : _b, _c = _a.minHeight, minHeight = _c === void 0 ? 0 : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, _e = _a.scroll, scroll = _e === void 0 ? false : _e, props = __rest(_a, ["width", "minHeight", "padded", "scroll"]);
|
|
42
|
+
return React.createElement(InfoBoxStyled, __assign({ width: width, minHeight: minHeight, padded: padded, scroll: scroll }, props));
|
|
43
43
|
};
|
|
44
44
|
export { InfoBox };
|
|
45
45
|
var templateObject_1;
|
|
@@ -21,17 +21,19 @@ var ContentBase = function (props) {
|
|
|
21
21
|
return React.createElement("div", { className: props.className },
|
|
22
22
|
React.createElement(GlassPane, { bordered: true },
|
|
23
23
|
props.header && React.createElement(Header, null, props.header),
|
|
24
|
-
React.createElement(PaneContent, null,
|
|
24
|
+
React.createElement(PaneContent, null,
|
|
25
|
+
React.createElement(Scroller, { "$scroll": props.scroll, "$padded": props.padded }, props.children))));
|
|
25
26
|
};
|
|
26
|
-
var
|
|
27
|
-
var
|
|
27
|
+
var Scroller = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (p) { return p.$scroll && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0; \n overflow-y: scroll;\n "], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0; \n overflow-y: scroll;\n "]))); }, function (p) { return p.$padded == true && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 10px 22px 10px 22px;\n "], ["\n padding: 10px 22px 10px 22px;\n "]))); });
|
|
28
|
+
var PaneContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n box-sizing: border-box;\n"], ["\n position: relative;\n flex: 1;\n box-sizing: border-box;\n"])));
|
|
29
|
+
var ContentStyled = styled(ContentBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n flex: 1;\n\n // Content:\n display: flex;\n\n // Appearance:\n color: ", ";\n font: ", ";\n\n // Behavior:\n pointer-events: all; // undo InfoBox's events blocking.\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n flex: 1;\n\n // Content:\n display: flex;\n\n // Appearance:\n color: ", ";\n font: ", ";\n\n // Behavior:\n pointer-events: all; // undo InfoBox's events blocking.\n"
|
|
28
30
|
/**
|
|
29
31
|
* InfoBox.Content fills up all vertical space it can get.
|
|
30
32
|
*/
|
|
31
|
-
])), function (p) { return p.minHeight ? "".concat(p.minHeight, "px") : 'none'; }, function (p) { return p.
|
|
33
|
+
])), function (p) { return p.minHeight ? "".concat(p.minHeight, "px") : 'none'; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; });
|
|
32
34
|
/**
|
|
33
35
|
* InfoBox.Content fills up all vertical space it can get.
|
|
34
36
|
*/
|
|
35
37
|
var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };
|
|
36
38
|
export { Content };
|
|
37
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
39
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -6,8 +6,13 @@ interface IProps {
|
|
|
6
6
|
* Fired when marker is clicked.
|
|
7
7
|
*/
|
|
8
8
|
onClick?: () => void;
|
|
9
|
+
/** Is the marker currently selected? */
|
|
10
|
+
active?: boolean;
|
|
11
|
+
/** Are there actions pending? */
|
|
9
12
|
actioned?: boolean;
|
|
13
|
+
/** Number of audits */
|
|
10
14
|
value?: number;
|
|
15
|
+
/** Risk color */
|
|
11
16
|
color?: string;
|
|
12
17
|
}
|
|
13
18
|
/**
|
|
@@ -36,7 +36,7 @@ var RiskMarkerBase = function (props) {
|
|
|
36
36
|
React.createElement("path", { className: "no-action", fill: props.color, d: "M42.3623 11.1596C42.366 11.1624 42.3702 11.1646 42.374 11.1673C42.0952 10.9667 41.8147 10.7682 41.5257 10.5811C41.526 10.5812 41.5255 10.5811 41.5257 10.5811C41.524 10.5874 41.5205 10.5932 41.5185 10.5995C38.2075 8.45041 34.2622 7.17529 30.0006 7.17529C25.7501 7.17529 21.815 8.44472 18.5087 10.5835L18.5072 10.5811C12.7877 14.2844 8.97314 20.6539 8.97314 27.9018C8.97314 33.595 11.3058 38.7493 15.0775 42.4946L19.0258 38.6037C16.2649 35.8544 14.557 32.0755 14.557 27.9018C14.557 22.7029 17.2828 18.0472 21.3201 15.3016C23.7952 13.6421 26.7811 12.6672 30.0005 12.6672C33.2389 12.6672 36.2422 13.6518 38.7257 15.3292C38.722 15.3333 38.719 15.338 38.715 15.342C42.7762 18.0838 45.443 22.6843 45.443 27.9018C45.443 32.1043 43.7145 35.9088 40.9199 38.6627L44.8682 42.5537C48.6733 38.8039 51.027 33.6237 51.027 27.9017C51.0272 21.0153 47.6086 14.9265 42.3623 11.1596Z" }),
|
|
37
37
|
React.createElement("path", { className: "action", fill: "#fff", d: "M30 13.9319C33.017 13.9319 35.4628 11.5697 35.4628 8.65588C35.4628 5.74203 33.017 3.37988 30 3.37988C26.983 3.37988 24.5374 5.74203 24.5374 8.65588C24.5374 11.5697 26.983 13.9319 30 13.9319Z" }))));
|
|
38
38
|
};
|
|
39
|
-
var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n // Translate icon so that pin is exactly at center of lat/lng.\n transform: translateX(0.5px) translateY(-34px);\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n
|
|
39
|
+
var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n // Translate icon so that pin is exactly at center of lat/lng.\n transform: translateX(0.5px) translateY(-34px);\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n &.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n }\n"], ["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n // Translate icon so that pin is exactly at center of lat/lng.\n transform: translateX(0.5px) translateY(-34px);\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n &.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n }\n"
|
|
40
40
|
/**
|
|
41
41
|
* A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
|
|
42
42
|
* component on its own.
|