@blocklet/launcher-layout 1.5.89 → 1.5.92

package/lib/header.js

@@ -33,29 +33,33 @@ function AppHeader(_ref) {
     subTitle,
     logoUrl,
     did,
-    locale
+    locale,
+    navLogo
   } = _ref;
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('sm'));
-  const size = isMobile ? 32 : 48;
+  const blockletSize = isMobile ? 18 : 48;
   const appNameRef = (0, _react.useRef)(null);
   const [appNameSize, setAppNameSize] = (0, _react.useState)('');
 
-  let icon = /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  let blockletIcon = /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     variant: "rect",
-    width: size,
-    height: size
+    width: blockletSize,
+    height: blockletSize
   });
 
   if (logoUrl) {
-    icon = /*#__PURE__*/_react.default.createElement(_Img.default, {
-      width: size,
+    blockletIcon = /*#__PURE__*/_react.default.createElement(_Img.default, {
+      width: blockletSize,
       src: logoUrl,
-      size: "contain"
+      size: "contain",
+      style: {
+        verticalAlign: 'text-bottom'
+      }
     });
   } else if (did) {
-    icon = /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    blockletIcon = /*#__PURE__*/_react.default.createElement(_Avatar.default, {
       did: did,
-      size: size
+      size: blockletSize
     });
   }
 
@@ -70,9 +74,11 @@ function AppHeader(_ref) {
   }, [appNameSize, title]);
   return /*#__PURE__*/_react.default.createElement(Container, {
     className: appNameSize === 'small' ? 'center-mode' : ''
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, isMobile ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "app-icon"
+  }, navLogo) : /*#__PURE__*/_react.default.createElement("div", {
     className: "app-icon"
-  }, icon), /*#__PURE__*/_react.default.createElement("div", {
+  }, blockletIcon), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title"
   }, subTitle && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title-sub"
@@ -83,7 +89,7 @@ function AppHeader(_ref) {
   }, (0, _locale.getLaunchingText)(locale)), title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title-name ".concat(appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''),
     ref: appNameRef
-  }, title))));
+  }, isMobile ? blockletIcon : '', " ", title))));
 }
 
 AppHeader.propTypes = {
@@ -91,7 +97,8 @@ AppHeader.propTypes = {
   subTitle: _propTypes.default.any,
   logoUrl: _propTypes.default.string,
   did: _propTypes.default.string,
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+  navLogo: _propTypes.default.any.isRequired
 };
 AppHeader.defaultProps = {
   title: '',

package/lib/index.js

@@ -5,20 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Center = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _icons = require("@material-ui/icons");
-
-var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
-
 var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));
 
 var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
 
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
 var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
 
 var _step = require("./context/step");
@@ -31,10 +29,6 @@ var _nav = _interopRequireDefault(require("./nav"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const MobileContent = _styledComponents.default.div.withConfig({
   displayName: "src__MobileContent",
   componentId: "sc-11nbl7p-0"
@@ -43,7 +37,7 @@ const MobileContent = _styledComponents.default.div.withConfig({
 const PcContent = _styledComponents.default.div.withConfig({
   displayName: "src__PcContent",
   componentId: "sc-11nbl7p-1"
-})(["display:flex;overflow:auto;max-width:1245px;min-width:930px;max-height:880px;border-radius:8px;background-color:#fff;"]);
+})(["display:flex;max-width:1245px;min-width:930px;max-height:880px;border-radius:8px;background-color:#fff;"]);
 
 function Layout(_ref) {
   let {
@@ -56,16 +50,12 @@ function Layout(_ref) {
     pcHeight,
     navLogo
   } = _ref;
-  const [openNav, setOpenNav] = (0, _react.useState)(false);
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('sm'));
   const {
     activeStep,
     totalStepsCount
   } = (0, _step.useStepContext)();
   const Container = isMobile ? MobileContent : PcContent;
-
-  const toggleNav = value => setOpenNav(value);
-
   const translations = (0, _locale.getTranslations)(locale);
   return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement("header", {
     className: "root-header"
@@ -73,17 +63,30 @@ function Layout(_ref) {
     mdUp: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "left"
-  }, /*#__PURE__*/_react.default.createElement(_icons.Menu, {
-    onClick: () => toggleNav(true),
-    className: "menu__icon"
-  }), /*#__PURE__*/_react.default.createElement(_header.default, {
+  }, /*#__PURE__*/_react.default.createElement(_header.default, {
     title: blockletMeta.title ? /*#__PURE__*/_react.default.createElement("span", {
       className: "ellipsis-title"
     }, blockletMeta.title) : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
       variant: "text",
       width: 100
     }),
-    subTitle: "".concat(translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount),
+    navLogo: navLogo,
+    subTitle: /*#__PURE__*/_react.default.createElement("span", null, "".concat(translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/_react.default.createElement("span", {
+      className: "circular"
+    }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+      variant: "determinate",
+      value: 100,
+      size: 10,
+      thickness: 10,
+      style: {
+        color: '#dddddd'
+      }
+    }), /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+      variant: "determinate",
+      value: (activeStep + 1) / totalStepsCount * 100,
+      size: 10,
+      thickness: 10
+    }))),
     logoUrl: logoUrl,
     did: blockletMeta.did,
     locale: locale
@@ -91,17 +94,7 @@ function Layout(_ref) {
     className: "left"
   }, navLogo), headerEndAddons && /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
-  }, headerEndAddons)), /*#__PURE__*/_react.default.createElement(_Hidden.default, {
-    mdUp: true
-  }, /*#__PURE__*/_react.default.createElement(_Drawer.default, {
-    anchor: "left",
-    open: openNav,
-    onClose: () => toggleNav(false)
-  }, /*#__PURE__*/_react.default.createElement(_nav.default, {
-    locale: locale,
-    blockletMeta: blockletMeta,
-    logoUrl: logoUrl
-  }))), /*#__PURE__*/_react.default.createElement(Container, {
+  }, headerEndAddons)), /*#__PURE__*/_react.default.createElement(Container, {
     style: !isMobile ? {
       width: pcWidth,
       height: pcHeight
@@ -144,7 +137,7 @@ if (ua.includes('iphone os') && ua.includes('crios')) {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "src__Root",
   componentId: "sc-11nbl7p-2"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", "{background:#f6f8fa;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;height:56px;align-items:center;box-shadow:0px 1px 1px 0px rgba(168,180,197,0.12);", "{padding:24px;justify-content:flex-end;}", "{padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;.menu__icon{margin-right:16px;color:", ";}}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;height:56px;align-items:center;box-shadow:0px 1px 1px 0px rgba(168,180,197,0.12);", "{padding:24px;justify-content:flex-end;}", "{padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.down('sm'));
 
 const Center = _styledComponents.default.div.withConfig({
   displayName: "src__Center",

package/lib/wizard/server-eula.js

@@ -75,4 +75,4 @@ ServerEula.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "server-eula__Div",
   componentId: "sc-66fg47-0"
-})(["margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-trigger{cursor:pointer;", "{padding-right:24px;}", "{padding-top:16px;padding-bottom:16px;}font-size:14px;white-space:nowrap;&:hover{color:", ";}}.next-button{min-width:200px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);
+})(["margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-trigger{cursor:pointer;", "{padding-right:24px;}", "{padding:16px;}font-size:14px;white-space:nowrap;&:hover{color:", ";}}.next-button{min-width:200px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.5.89",
+  "version": "1.5.92",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -58,5 +58,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "3e9b16cae0f6b2df18099aa83064c329bdc82f9f"
+  "gitHead": "7f8786ddeec49da7f356d22c3fbebbab9fce7c8d"
 }