@longline/aqua-ui 1.0.90 → 1.0.91
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.
|
@@ -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;
|