cozy-bar 18.0.0 → 18.1.0

package/dist/components/Apps/ButtonCozyHome.js

@@ -17,18 +17,12 @@ var _cozyDeviceHelper = require("cozy-device-helper");
 
 var _cozyIntent = require("cozy-intent");
 
-var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
-
 var _IconCozyHome = _interopRequireDefault(require("./IconCozyHome"));
 
 var ButtonCozyHome = function ButtonCozyHome(_ref) {
   var homeHref = _ref.homeHref,
       isInvertedTheme = _ref.isInvertedTheme;
   var webviewIntent = (0, _cozyIntent.useWebviewIntent)();
-
-  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
-      isMobile = _useBreakpoints.isMobile;
-
   if ((0, _cozyDeviceHelper.isFlagshipApp)() || (0, _cozyFlags.default)('flagship.debug')) return /*#__PURE__*/_react.default.createElement("a", {
     onClick: function onClick() {
       webviewIntent.call('backToHome');
@@ -37,7 +31,6 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
     "data-testid": "buttonCozyHome"
   }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
     className: "coz-nav-apps-btns-home-svg",
-    isMobile: isMobile,
     isInvertedTheme: isInvertedTheme
   }));
 
@@ -47,7 +40,6 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
       className: "coz-nav-apps-btns-home"
     }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
       className: "coz-nav-apps-btns-home-svg",
-      isMobile: isMobile,
       isInvertedTheme: isInvertedTheme
     }));
   }
@@ -56,7 +48,6 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
     className: "coz-nav-apps-btns-home"
   }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
     className: "coz-nav-apps-btns-home-svg",
-    isMobile: isMobile,
     isInvertedTheme: isInvertedTheme
   }));
 };

package/dist/components/Apps/IconCozyHome.js

@@ -19,6 +19,8 @@ var _stack = _interopRequireDefault(require("../../lib/stack"));
 
 var _isTwakeTheme = require("cozy-ui/transpiled/react/helpers/isTwakeTheme");
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _TwakeWorkplace = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/TwakeWorkplace"));
@@ -45,9 +47,11 @@ function SvgIconCozyHome(props) {
 
 var IconCozyHome = function IconCozyHome(_ref) {
   var className = _ref.className,
-      isMobile = _ref.isMobile,
       isInvertedTheme = _ref.isInvertedTheme;
 
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
   if ((0, _isTwakeTheme.isTwakeTheme)()) {
     return /*#__PURE__*/_react.default.createElement(_Icon.default, {
       icon: _TwakeWorkplace.default,

package/dist/components/AppsMenu/AppsMenuContent.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
+var _applications = require("cozy-client/dist/models/applications");
+
 var _AppItem = _interopRequireDefault(require("./components/AppItem"));
 
 var _AppItemPlaceholder = _interopRequireDefault(require("./components/AppItemPlaceholder"));
@@ -43,8 +45,6 @@ var AppsMenuContent = function AppsMenuContent(_ref) {
   var _useI18n = (0, _useI18n2.default)(),
       t = _useI18n.t;
 
-  var translateAppWithLocales = translateApp(t);
-
   if (!isFetchingApps && (!apps || !apps.length)) {
     return /*#__PURE__*/_react.default.createElement(_Typography.default, {
       className: "u-mh-half",
@@ -67,7 +67,7 @@ var AppsMenuContent = function AppsMenuContent(_ref) {
   var homeSlug = homeApp && homeApp.slug;
   var displayedApps = apps.filter(function (app) {
     return app.slug !== homeSlug;
-  }).sort(sorter(translateAppWithLocales));
+  }).sort(sorter(_applications.getAppDisplayName));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: styles['apps-menu-grid']
   }, displayedApps.map(function (app, index) {
@@ -90,18 +90,6 @@ AppsMenuContent.propTypes = {
   className: _propTypes.default.string
 };
 
-var translateApp = function translateApp(t) {
-  return function (app) {
-    var namePrefix = app.namePrefix ? t("".concat(app.slug, ".namePrefix"), {
-      _: app.namePrefix
-    }) : null;
-    var name = t("".concat(app.slug, ".name"), {
-      _: app.name
-    });
-    return namePrefix ? "".concat(namePrefix, " ").concat(name) : "".concat(name);
-  };
-};
-
 var mapStateToProps = function mapStateToProps(state) {
   return {
     isFetchingApps: (0, _reducers.isFetchingApps)(state),

package/dist/components/AppsMenu/components/AppItem.js

@@ -11,9 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _cozyClient = require("cozy-client");
+var _applications = require("cozy-client/dist/models/applications");
 
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
 
@@ -34,13 +32,10 @@ var styles = {
   "apps-menu-grid-item-wrapper": "apps-menu-grid-item-wrapper",
   "apps-menu-grid-item": "apps-menu-grid-item"
 };
-var getAppDisplayName = (0, _get.default)(_cozyClient.models, 'applications.getAppDisplayName', function (app) {
-  return app.namePrefix && app.namePrefix.toLowerCase() !== 'cozy' ? "".concat(app.namePrefix, " ").concat(app.name) : app.name;
-});
 
 var AppItem = function AppItem(_ref) {
   var app = _ref.app;
-  var appName = getAppDisplayName(app);
+  var appName = (0, _applications.getAppDisplayName)(app);
   return /*#__PURE__*/_react.default.createElement(_AppLinker.default, {
     href: app.href || '',
     app: app

package/dist/components/AppsMenu/index.js

@@ -33,6 +33,7 @@ var AppsMenu = function AppsMenu() {
       isOpen = _useState2[0],
       setOpen = _useState2[1];
 
+  var containerRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
 
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
@@ -42,22 +43,23 @@ var AppsMenu = function AppsMenu() {
     setOpen(!isOpen);
   };
 
-  return /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     ref: buttonRef,
     onClick: toggleMenu,
     className: "u-p-half"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Mosaic.default,
     size: "18"
-  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.Dialog, {
+  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.ConfirmDialog, {
     open: isOpen,
-    size: "small",
     onClose: toggleMenu,
     content: /*#__PURE__*/_react.default.createElement(_AppsMenuContent.default, null)
   }) : /*#__PURE__*/_react.default.createElement(_Menu.default, {
     open: isOpen,
     anchorEl: buttonRef.current,
-    container: buttonRef.current,
+    container: containerRef.current,
     getContentAnchorEl: null,
     onClose: toggleMenu,
     anchorOrigin: {
@@ -65,7 +67,8 @@ var AppsMenu = function AppsMenu() {
       horizontal: 'left'
     },
     transformOrigin: {
-      vertical: -10
+      vertical: -10,
+      horizontal: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_AppsMenuContent.default, null)));
 };

package/dist/components/Bar.js

@@ -19,6 +19,10 @@ var _reactRedux = require("react-redux");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Grid = _interopRequireDefault(require("cozy-ui/transpiled/react/Grid"));
+
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
 var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
@@ -162,10 +166,16 @@ var Bar = function Bar(_ref) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
+      return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+        container: true,
+        alignItems: "center",
+        className: "u-w-auto"
+      }, /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
         homeHref: homeHref
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "coz-nav-apps-btns-sep u-mr-half"
+      }), /*#__PURE__*/_react.default.createElement(_Divider.default, {
+        orientation: "vertical",
+        className: "u-mr-half",
+        flexItem: true
       }), /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
         slug: appSlug
       }));
@@ -194,9 +204,14 @@ var Bar = function Bar(_ref) {
   };
 
   var renderTwakeRight = function renderTwakeRight() {
-    // Special case because search on Drive still rely on old search UI
-    // that modifies the cozy-bar
-    // Can be removed when https://github.com/cozy/cozy-drive/pull/3320 is merged
+    // Special case because search on Drive on mobile still rely
+    // on old search UI that is injected in the cozy-bar and
+    // not in a modal as the new search UI
+    // So we need to hide these menu buttons when old search UI
+    // is injected in the cozy-bar
+    // When https://github.com/cozy/cozy-drive/pull/3320 will be merged
+    // Drive will rely on cozy-bar embedded search and we will be able
+    // to remove this special case
     if (appSlug === 'drive' && isMobile && barSearch) return null;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HelpLink.default, null), /*#__PURE__*/_react.default.createElement(_AppsMenu.default, null), /*#__PURE__*/_react.default.createElement(_UserMenu.default, {
       onLogOut: onLogOut

package/dist/components/UserMenu/UserMenuContent.js

@@ -76,6 +76,14 @@ var UserMenuContent = function UserMenuContent(_ref) {
       humanDiskQuota = _makeDiskInfos.humanDiskQuota,
       humanDiskUsage = _makeDiskInfos.humanDiskUsage;
 
+  var profileLink = (0, _helpers.getSettingsLink)({
+    client: client,
+    hash: 'profile'
+  });
+  var storageLink = (0, _helpers.getSettingsLink)({
+    client: client,
+    hash: 'storage'
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['user-menu-content'], 'u-flex u-flex-column')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -98,11 +106,8 @@ var UserMenuContent = function UserMenuContent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     button: true,
     size: "small",
-    onClick: function onClick() {
-      return (0, _helpers.openProfileLink)({
-        client: client
-      });
-    }
+    component: "a",
+    href: profileLink
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _FromUser.default
   })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
@@ -117,11 +122,8 @@ var UserMenuContent = function UserMenuContent(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     button: true,
     size: "small",
-    onClick: function onClick() {
-      return (0, _helpers.openStorageLink)({
-        client: client
-      });
-    }
+    component: "a",
+    href: storageLink
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Cloud.default
   })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {

package/dist/components/UserMenu/components/AvatarMyself.js

@@ -11,14 +11,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _cozyClient = require("cozy-client");
 
+var _contact = require("cozy-client/dist/models/contact");
+
 var _Avatar = _interopRequireDefault(require("cozy-ui/transpiled/react/Avatar"));
 
 var _Skeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeleton"));
 
 var _queries = require("../../../lib/queries");
 
-var getInitials = _cozyClient.models.contact.getInitials;
-
 var AvatarMyself = function AvatarMyself(_ref) {
   var className = _ref.className,
       _ref$size = _ref.size,
@@ -40,7 +40,7 @@ var AvatarMyself = function AvatarMyself(_ref) {
   var me = data[0];
 
   if (me) {
-    var initials = getInitials(me);
+    var initials = (0, _contact.getInitials)(me);
     return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
       className: className,
       size: size

package/dist/components/UserMenu/helpers.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logOut = exports.openStorageLink = exports.openProfileLink = void 0;
+exports.logOut = exports.getSettingsLink = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -26,36 +26,16 @@ var getSettingsLink = function getSettingsLink(_ref) {
   });
 };
 
-var openProfileLink = function openProfileLink(_ref2) {
-  var client = _ref2.client;
-  var link = getSettingsLink({
-    client: client,
-    hash: 'profile'
-  });
-  window.open(link, '_self');
-};
-
-exports.openProfileLink = openProfileLink;
-
-var openStorageLink = function openStorageLink(_ref3) {
-  var client = _ref3.client;
-  var link = getSettingsLink({
-    client: client,
-    hash: 'storage'
-  });
-  window.open(link, '_self');
-};
-
-exports.openStorageLink = openStorageLink;
+exports.getSettingsLink = getSettingsLink;
 
 var logOut = /*#__PURE__*/function () {
-  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
     var client, webviewIntent, onLogOut, res;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            client = _ref4.client, webviewIntent = _ref4.webviewIntent, onLogOut = _ref4.onLogOut;
+            client = _ref2.client, webviewIntent = _ref2.webviewIntent, onLogOut = _ref2.onLogOut;
 
             if (!(onLogOut && typeof onLogOut === 'function')) {
               _context.next = 8;
@@ -92,7 +72,7 @@ var logOut = /*#__PURE__*/function () {
   }));
 
   return function logOut(_x) {
-    return _ref5.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 

package/dist/components/UserMenu/index.js

@@ -35,6 +35,7 @@ var UserMenu = function UserMenu(_ref) {
       isOpen = _useState2[0],
       setOpen = _useState2[1];
 
+  var containerRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
 
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
@@ -49,16 +50,17 @@ var UserMenu = function UserMenu(_ref) {
     setOpen(!isOpen);
   };
 
-  return /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     ref: buttonRef,
     onClick: toggleMenu,
     disabled: !isLoaded,
     className: "u-p-0 u-ml-half"
   }, /*#__PURE__*/_react.default.createElement(_AvatarMyself.default, {
     size: isMobile ? 's' : 'm'
-  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.Dialog, {
+  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.ConfirmDialog, {
     open: isOpen,
-    size: "small",
     onClose: toggleMenu,
     content: /*#__PURE__*/_react.default.createElement(_UserMenuContent.default, {
       onLogOut: onLogOut,
@@ -68,7 +70,7 @@ var UserMenu = function UserMenu(_ref) {
   }) : /*#__PURE__*/_react.default.createElement(_Menu.default, {
     open: isOpen,
     anchorEl: buttonRef.current,
-    container: buttonRef.current,
+    container: containerRef.current,
     getContentAnchorEl: null,
     onClose: toggleMenu,
     anchorOrigin: {
@@ -76,7 +78,8 @@ var UserMenu = function UserMenu(_ref) {
       horizontal: 'left'
     },
     transformOrigin: {
-      vertical: -10
+      vertical: -10,
+      horizontal: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_UserMenuContent.default, {
     onLogOut: onLogOut,

package/dist/index.js

@@ -82,5 +82,5 @@ var _BarProvider = _interopRequireDefault(require("./components/BarProvider"));
 var _reducers = require("./lib/reducers");
 
 /* global __VERSION__ */
-var version = "\"18.0.0\"";
+var version = "\"18.1.0\"";
 exports.version = version;

package/dist/styles/apps-menu.styl

@@ -1,20 +1,20 @@
 .apps-menu-grid
-    display: flex
-    flex-wrap: wrap
-    width: 100%
-    box-sizing: border-box
-    padding-left: 0.5rem
-    padding-right: 0.5rem
+    display flex
+    flex-wrap wrap
+    width 100%
+    box-sizing border-box
+    padding-left .5rem
+    padding-right .5rem
   
 .apps-menu-grid-item-wrapper
-    width: 33%
-    aspect-ratio: 1
+    width 33%
+    aspect-ratio 1 // @stylint ignore Property is valid but unknown by stylint which is old and should be replaced
 
 .apps-menu-grid-item
-    display: flex
-    flex-direction: column
-    justify-content: center
-    align-items: center
-    text-decoration: none
-    width: 60%
-    min-width: 48px
+    display flex
+    flex-direction column
+    justify-content center
+    align-items center
+    text-decoration none
+    width 60%
+    min-width 48px

package/dist/styles/user-menu.styl

@@ -1,10 +1,10 @@
 @require 'settings/breakpoints'
 
 .user-menu-content
-    width: 320px
+    width auto
     
-    +small-screen()
-        width: auto
+    +desktop()
+        width 320px
 
 .user-menu-content-add-account
-    width: calc(100% - 32px)
+    width calc(100% - 32px)

package/dist/stylesheet.css

@@ -24,11 +24,11 @@
 /*  imported from user-menu.styl  */
 
 .user-menu-content {
-  width: 320px;
+  width: auto;
 }
-@media (max-width: 48rem) {
+@media (min-width: 64rem) {
   .user-menu-content {
-    width: auto;
+    width: 320px;
   }
 }
 .user-menu-content-add-account {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-bar",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "description": "cozy-bar.js library, a small lib provided by cozy-stack to inject the Cozy-bar component into each app",
   "main": "dist/index.js",
   "author": "Cozy Cloud <contact@cozycloud.cc> (https://cozy.io/)",
@@ -20,7 +20,9 @@
     "build": "env BABEL_ENV=transpilation babel ./src -d ./dist --extensions .js,.jsx --ignore '**/*.spec.jsx','**/*.spec.js' --copy-files",
     "prepublishOnly": "yarn build",
     "clean": "rm -rf ./dist/*",
-    "lint": "eslint '{config,src,examples,test}/**/*.{js,jsx}'",
+    "lint": "yarn lint:js && yarn lint:styles",
+    "lint:js": "eslint '{config,src,examples,test}/**/*.{js,jsx}'",
+    "lint:styles": "stylint src --config ./node_modules/stylus-config-cozy-app/.stylintrc",
     "prebuild": "npm-run-all clean",
     "prewatch": "npm-run-all clean",
     "tx": "tx pull --all || true",
@@ -58,7 +60,9 @@
     "react-dom": "16.10.1",
     "react-router-dom": "6.14.2",
     "semantic-release": "15.13.24",
-    "stylus": "0.57.0"
+    "stylint": "^2.0.0",
+    "stylus": "0.57.0",
+    "stylus-config-cozy-app": "^0.1.0"
   },
   "dependencies": {
     "cozy-search": "0.2.0",