@equinor/echo-framework 0.7.12 → 0.7.13

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.
Files changed (11) hide show
  1. package/dist/hooks/useScreenOrientation.d.ts +1 -1
  2. package/dist/src/components/containers/layouts.js +5 -5
  3. package/dist/src/components/panel/corePanelLeft.js +1 -1
  4. package/dist/src/components/panel/corePanelLeft.module.css.js +1 -1
  5. package/dist/src/components/panel/corePanelRight.js +2 -1
  6. package/dist/src/components/panel/corePanelRight.module.css.js +1 -1
  7. package/dist/src/coreApplication/EchoBarComponent.js +2 -2
  8. package/dist/src/coreApplication/EchoContent.js +6 -2
  9. package/dist/src/coreApplication/EchoContent.module.css.js +2 -1
  10. package/dist/src/hooks/useScreenOrientation.js +17 -11
  11. package/package.json +1 -1
package/dist/hooks/useScreenOrientation.d.ts CHANGED
@@ -1 +1 @@
1
- export declare function useScreenOrientation(): "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary";
1
+ export declare function useScreenOrientation(): string;
package/dist/src/components/containers/layouts.js CHANGED
@@ -31,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
31
31
  var MainLayout = function MainLayout(_ref) {
32
32
  var children = _ref.children;
33
33
  var screenOrientation = useScreenOrientation.useScreenOrientation();
34
- var isLandscape = screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary';
34
+ var isLandscape = screenOrientation === 'landscape';
35
35
  return /*#__PURE__*/React__default["default"].createElement("div", {
36
36
  className: layout_module["default"].applicationWrapper
37
37
  }, isLandscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
@@ -46,7 +46,7 @@ var MainLayout = function MainLayout(_ref) {
46
46
  var ColorLayout = function ColorLayout(_ref2) {
47
47
  var children = _ref2.children;
48
48
  var screenOrientation = useScreenOrientation.useScreenOrientation();
49
- var isLandscape = screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary';
49
+ var isLandscape = screenOrientation === 'landscape';
50
50
  return /*#__PURE__*/React__default["default"].createElement("div", {
51
51
  className: layout_module["default"].echoContentContainer
52
52
  }, isLandscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
@@ -61,7 +61,7 @@ var ColorLayout = function ColorLayout(_ref2) {
61
61
  var PdfViewerNative = function PdfViewerNative(_ref3) {
62
62
  var children = _ref3.children;
63
63
  var screenOrientation = useScreenOrientation.useScreenOrientation();
64
- var isLandscape = screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary';
64
+ var isLandscape = screenOrientation === 'landscape';
65
65
  return /*#__PURE__*/React__default["default"].createElement("div", {
66
66
  className: layout_module["default"].echoContentContainer
67
67
  }, isLandscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
@@ -76,7 +76,7 @@ var PdfViewerNative = function PdfViewerNative(_ref3) {
76
76
  var CameraLayout = function CameraLayout(_ref4) {
77
77
  var children = _ref4.children;
78
78
  var screenOrientation = useScreenOrientation.useScreenOrientation();
79
- var isLandscape = screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary';
79
+ var isLandscape = screenOrientation === 'landscape';
80
80
  return /*#__PURE__*/React__default["default"].createElement("div", {
81
81
  className: layout_module["default"].echoContentContainer
82
82
  }, isLandscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
@@ -91,7 +91,7 @@ var CameraLayout = function CameraLayout(_ref4) {
91
91
  var DefaultLayout = function DefaultLayout(_ref5) {
92
92
  var children = _ref5.children;
93
93
  var screenOrientation = useScreenOrientation.useScreenOrientation();
94
- var isLandscape = screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary';
94
+ var isLandscape = screenOrientation === 'landscape';
95
95
  return /*#__PURE__*/React__default["default"].createElement("div", {
96
96
  className: layout_module["default"].echoContentContainer
97
97
  }, isLandscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
package/dist/src/components/panel/corePanelLeft.js CHANGED
@@ -74,7 +74,7 @@ var CorePanelLeft = function CorePanelLeft(_ref) {
74
74
  style: panelUI.panelButton
75
75
  }, panels.map(function (panel, i) {
76
76
  var Icon = panel.icon;
77
- var showPanel = isToggleButtonVisible || panel.key !== 'echoCoreMain';
77
+ var showPanel = isToggleButtonVisible || panel.key !== EchoCore.ECHO_CORE_SEARCH;
78
78
  return showPanel && /*#__PURE__*/React__default["default"].createElement(panelButton["default"], {
79
79
  key: i,
80
80
  onClick: function onClick(e) {
package/dist/src/components/panel/corePanelLeft.module.css.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
6
6
 
7
7
  var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
8
8
 
9
- var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:all .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel)}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}@media screen and (max-width:927px) and (orientation:landscape){.corePanelLeft-module_buttonContainer__bs-Uu{right:-118px}}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
9
+ var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:all .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel)}@media screen and (max-width:927px) and (orientation:landscape){.corePanelLeft-module_active__-A3TW{left:48px}}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}@media screen and (max-width:927px) and (orientation:landscape){.corePanelLeft-module_buttonContainer__bs-Uu{right:-118px}}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
10
10
  var style = {
11
11
  "wrapper": "corePanelLeft-module_wrapper__d2Omx",
12
12
  "wrapperClosed": "corePanelLeft-module_wrapperClosed__Zd1CL",
package/dist/src/components/panel/corePanelRight.js CHANGED
@@ -76,7 +76,8 @@ var CorePanelRight = function CorePanelRight(_ref) {
76
76
  style: panelUI.panelButton
77
77
  }, panels.map(function (panel, i) {
78
78
  var PanelIcon = panel.icon;
79
- return isToggleButtonVisible && /*#__PURE__*/React__default["default"].createElement(panelButton["default"], {
79
+ var showPanel = isToggleButtonVisible || panel.key !== EchoCore.ECHO_CORE_MAIN;
80
+ return showPanel && /*#__PURE__*/React__default["default"].createElement(panelButton["default"], {
80
81
  key: i,
81
82
  label: panel.label,
82
83
  variant: panel.key === EchoCore.ECHO_CORE_MAIN ? panelButton.Variants.NotificationButton : panelButton.Variants.OpenCloseButton,
package/dist/src/components/panel/corePanelRight.module.css.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
6
6
 
7
7
  var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
8
8
 
9
- var css_248z = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:550px;position:fixed;right:-352px;top:0;transition:all .4s ease-in-out;width:352px;z-index:2}@media screen and (max-width:550px){.corePanelRight-module_active__RIMQt{width:100%}}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel)}@media screen and (max-width:927px) and (orientation:landscape){.corePanelRight-module_wrapper__YN3Zr{left:-352px}.corePanelRight-module_active__RIMQt{left:0;z-index:var(--echo-framework-z-level-panel)}}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
9
+ var css_248z = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:550px;position:fixed;right:-352px;top:0;transition:all .4s ease-in-out;width:352px;z-index:2}@media screen and (max-width:550px){.corePanelRight-module_active__RIMQt{width:100%}}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel)}@media screen and (max-width:927px) and (orientation:landscape){.corePanelRight-module_wrapper__YN3Zr{left:-352px}.corePanelRight-module_active__RIMQt{left:48px;z-index:var(--echo-framework-z-level-panel)}}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
10
10
  var style = {
11
11
  "wrapper": "corePanelRight-module_wrapper__YN3Zr",
12
12
  "active": "corePanelRight-module_active__RIMQt",
package/dist/src/coreApplication/EchoBarComponent.js CHANGED
@@ -142,7 +142,7 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
142
142
  style: {
143
143
  zIndex: 'var( --echo-framework-z-level-bottom-bar)'
144
144
  }
145
- }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
145
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
146
146
  className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'home' ? EchoContent_module["default"].activeButton : '')
147
147
  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
148
148
  variant: "ghost_icon",
@@ -183,7 +183,7 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
183
183
  }) : /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
184
184
  name: 'menu',
185
185
  color: echoComponents.themeConst.echoText
186
- }))))) : null;
186
+ })))) : null;
187
187
  };
188
188
 
189
189
  exports.EchoBarComponent = EchoBarComponent;
package/dist/src/coreApplication/EchoContent.js CHANGED
@@ -14,6 +14,8 @@ var corePanelLeft = require('../components/panel/corePanelLeft.js');
14
14
 
15
15
  var corePanelRight = require('../components/panel/corePanelRight.js');
16
16
 
17
+ var EchoContent_module = require('./EchoContent.module.css.js');
18
+
17
19
  function _interopDefaultLegacy(e) {
18
20
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
19
21
  'default': e
@@ -26,11 +28,13 @@ var EchoContent = function EchoContent(_ref) {
26
28
  var children = _ref.children,
27
29
  Legend = _ref.Legend,
28
30
  isToggleButtonVisible = _ref.isToggleButtonVisible;
29
- return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
31
+ return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement("div", {
32
+ className: EchoContent_module["default"].echoContent
33
+ }, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
30
34
  isToggleButtonVisible: isToggleButtonVisible
31
35
  }), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], {
32
36
  isToggleButtonVisible: isToggleButtonVisible
33
- }), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
37
+ }), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null)));
34
38
  };
35
39
 
36
40
  exports.EchoContent = EchoContent;
package/dist/src/coreApplication/EchoContent.module.css.js CHANGED
@@ -6,8 +6,9 @@ Object.defineProperty(exports, '__esModule', {
6
6
 
7
7
  var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
8
8
 
9
- var css_248z = ".EchoContent-module_mobileWrapper__I1UNf{height:calc(100% - 60px);position:relative}.EchoContent-module_echoContentContainer__-yhpr{height:100%}.EchoContent-module_echoModuleContainer__NsbOv{width:100%}.EchoContent-module_barButtons__F8xrV{height:100%;text-align:center;width:100%}.EchoContent-module_activeButton__5xhQu{border-top:2px solid var(--equiGreen1)}@media screen and (max-width:927px) and (orientation:landscape){.EchoContent-module_activeButton__5xhQu{border-right:2px solid var(--equiGreen1);border-top:0}}@media screen and (orientation:landscape){.EchoContent-module_echoContentContainer__-yhpr{display:flex;flex-direction:row}}@media screen and (orientation:portrait){.EchoContent-module_echoModuleContainer__NsbOv{height:calc(100% - 48px);overflow:hidden}}@keyframes EchoContent-module_spinAnimation__gNXNq{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.EchoContent-module_spinningIcon__am10d{animation:EchoContent-module_spinAnimation__gNXNq 1.5s linear infinite reverse}";
9
+ var css_248z = ".EchoContent-module_echoContent__DgKg-{height:100%;padding:env(safe-area-inset-top,20px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,20px) env(safe-area-inset-left,20px);width:100%}.EchoContent-module_mobileWrapper__I1UNf{height:calc(100% - 60px);position:relative}.EchoContent-module_echoContentContainer__-yhpr{height:100%}.EchoContent-module_echoModuleContainer__NsbOv{width:100%}.EchoContent-module_barButtons__F8xrV{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.EchoContent-module_activeButton__5xhQu{border-top:2px solid var(--equiGreen1)}@media screen and (max-width:927px) and (orientation:landscape){.EchoContent-module_activeButton__5xhQu{border-right:2px solid var(--equiGreen1);border-top:0}}@media screen and (orientation:landscape){.EchoContent-module_echoContentContainer__-yhpr{display:flex;flex-direction:row}}@media screen and (orientation:portrait){.EchoContent-module_echoModuleContainer__NsbOv{height:calc(100% - 48px);overflow:hidden}}@keyframes EchoContent-module_spinAnimation__gNXNq{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.EchoContent-module_spinningIcon__am10d{animation:EchoContent-module_spinAnimation__gNXNq 1.5s linear infinite reverse}";
10
10
  var style = {
11
+ "echoContent": "EchoContent-module_echoContent__DgKg-",
11
12
  "mobileWrapper": "EchoContent-module_mobileWrapper__I1UNf",
12
13
  "echoContentContainer": "EchoContent-module_echoContentContainer__-yhpr",
13
14
  "echoModuleContainer": "EchoContent-module_echoModuleContainer__NsbOv",
package/dist/src/hooks/useScreenOrientation.js CHANGED
@@ -18,26 +18,32 @@ Object.defineProperty(exports, '__esModule', {
18
18
 
19
19
  var React = require('react');
20
20
 
21
- var getOrientation = function getOrientation() {
22
- return window.screen.orientation.type;
23
- };
24
-
25
21
  function useScreenOrientation() {
26
- var _React$useState = React.useState(getOrientation()),
22
+ var _React$useState = React.useState(''),
27
23
  _React$useState2 = _slicedToArray(_React$useState, 2),
28
24
  orientation = _React$useState2[0],
29
25
  setOrientation = _React$useState2[1];
30
26
 
31
- var updateOrientation = function updateOrientation(event) {
32
- setOrientation(getOrientation());
33
- };
27
+ var updateOrientation = React.useCallback(function () {
28
+ var isMounted = true;
29
+
30
+ if (window.innerWidth > window.innerHeight && isMounted) {
31
+ setOrientation('landscape');
32
+ } else {
33
+ setOrientation('portrait');
34
+ }
34
35
 
35
- React.useEffect(function () {
36
- window.addEventListener('orientationchange', updateOrientation);
37
36
  return function () {
38
- window.removeEventListener('orientationchange', updateOrientation);
37
+ isMounted = false;
39
38
  };
40
39
  }, []);
40
+ React.useEffect(function () {
41
+ updateOrientation();
42
+ window.addEventListener('resize', updateOrientation);
43
+ return function () {
44
+ window.removeEventListener('resize', updateOrientation);
45
+ };
46
+ }, [updateOrientation]);
41
47
  return orientation;
42
48
  }
43
49
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/echo-framework",
3
- "version": "0.7.12",
3
+ "version": "0.7.13",
4
4
  "description": "Modules and components for EchoWeb, utilizing EchoCore",
5
5
  "main": "dist/src/index.js",
6
6
  "types": "dist/index.d.ts",