@blocklet/launcher-layout 1.5.48 → 1.5.51
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/lib/header.js +7 -7
- package/lib/nav.js +9 -3
- package/package.json +3 -2
package/lib/header.js
CHANGED
|
@@ -15,6 +15,8 @@ var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
|
|
|
15
15
|
|
|
16
16
|
var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
|
|
17
17
|
|
|
18
|
+
var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
|
|
19
|
+
|
|
18
20
|
var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
|
|
19
21
|
|
|
20
22
|
var _locale = require("./locale");
|
|
@@ -38,12 +40,10 @@ function AppHeader(_ref) {
|
|
|
38
40
|
const appNameRef = (0, _react.useRef)(null);
|
|
39
41
|
const [appNameSize, setAppNameSize] = (0, _react.useState)('');
|
|
40
42
|
|
|
41
|
-
let icon = /*#__PURE__*/_react.default.createElement(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
backgroundColor: '#eee'
|
|
46
|
-
}
|
|
43
|
+
let icon = /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
|
|
44
|
+
variant: "rect",
|
|
45
|
+
width: size,
|
|
46
|
+
height: size
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
if (logoUrl) {
|
|
@@ -104,4 +104,4 @@ AppHeader.defaultProps = {
|
|
|
104
104
|
const Container = _styledComponents.default.div.withConfig({
|
|
105
105
|
displayName: "header__Container",
|
|
106
106
|
componentId: "sc-1twhts3-0"
|
|
107
|
-
})(["display:flex;justify-content:flex-start;align-items:flex-start;", "{min-height:
|
|
107
|
+
})(["display:flex;justify-content:flex-start;align-items:flex-start;", "{min-height:70px;}.app-name-content{display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:16px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app_icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{display:flex;justify-content:center;align-items:center;color:", ";font-weight:500;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:14px;line-height:16px;margin-top:5px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('sm'));
|
package/lib/nav.js
CHANGED
|
@@ -19,6 +19,8 @@ var _icons = require("@material-ui/icons");
|
|
|
19
19
|
|
|
20
20
|
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
|
|
21
21
|
|
|
22
|
+
var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
|
|
23
|
+
|
|
22
24
|
var _header = _interopRequireDefault(require("./header"));
|
|
23
25
|
|
|
24
26
|
var _step = require("./context/step");
|
|
@@ -70,9 +72,13 @@ function Nav(_ref2) {
|
|
|
70
72
|
}, /*#__PURE__*/_react.default.createElement(_header.default, {
|
|
71
73
|
title: /*#__PURE__*/_react.default.createElement(AppLink, {
|
|
72
74
|
target: "_blank",
|
|
73
|
-
href: (0, _urlJoin.default)(blockletMeta.registryUrl, "/
|
|
75
|
+
href: (0, _urlJoin.default)(blockletMeta.registryUrl || '', "/blocklets/".concat(blockletMeta.did)),
|
|
74
76
|
title: blockletMeta.title
|
|
75
|
-
}, blockletMeta.title
|
|
77
|
+
}, blockletMeta.title || /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
|
|
78
|
+
variant: "text",
|
|
79
|
+
width: 150,
|
|
80
|
+
height: 18
|
|
81
|
+
})),
|
|
76
82
|
did: blockletMeta.did,
|
|
77
83
|
logoUrl: logoUrl,
|
|
78
84
|
locale: locale
|
|
@@ -124,7 +130,7 @@ const Div = _styledComponents.default.div.withConfig({
|
|
|
124
130
|
const StepContainer = _styledComponents.default.div.withConfig({
|
|
125
131
|
displayName: "nav__StepContainer",
|
|
126
132
|
componentId: "sc-1qwhj4c-2"
|
|
127
|
-
})(["display:flex;flex-direction:column;margin-top:
|
|
133
|
+
})(["display:flex;flex-direction:column;margin-top:50px;", "{margin-top:30px;}.step_line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;background-color:", ";}.step_icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step_name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";}.step_name_content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}.step_block{position:relative;display:flex;height:70px;overflow:hidden;transition:all ease 0.2s;&.step_optional{height:0;opacity:0;}&.step_checked{.step_icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step_line{background-color:", ";}}&.step_active{.step_icon{background-color:", ";}.step_icon:before{transform:scale(1);}.step_name{color:", ";}}&:last-child{.step_line{display:none;}}}"], props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
|
|
128
134
|
|
|
129
135
|
Nav.propTypes = {
|
|
130
136
|
blockletMeta: _propTypes.default.object.isRequired,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-layout",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.51",
|
|
4
4
|
"description": "Common ux components of launcher",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"@arcblock/ux": "^1.16.40",
|
|
43
43
|
"@material-ui/core": "^4.12.3",
|
|
44
44
|
"@material-ui/icons": "^4.11.2",
|
|
45
|
+
"@material-ui/lab": "^4.0.0-alpha.60",
|
|
45
46
|
"lodash.get": "^4.4.2",
|
|
46
47
|
"prop-types": "^15.8.1",
|
|
47
48
|
"styled-components": "^5.3.3",
|
|
@@ -55,5 +56,5 @@
|
|
|
55
56
|
"babel-plugin-inline-react-svg": "^2.0.1",
|
|
56
57
|
"babel-plugin-styled-components": "^1.10.7"
|
|
57
58
|
},
|
|
58
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "ec0b19e2d46c7bd89bdeb6ca5cabd4f3ab26a57e"
|
|
59
60
|
}
|