diff --git a/react/CozyDialogs/PermissionDialog.jsx b/react/CozyDialogs/PermissionDialog.jsx
new file mode 100644
index 0000000000..514d4d938e
--- /dev/null
+++ b/react/CozyDialogs/PermissionDialog.jsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import cx from 'classnames'
+
+import { makeStyles } from '../styles'
+import CozyTheme from '../CozyTheme'
+import ConfirmDialog from './ConfirmDialog'
+import PropTypes from 'prop-types'
+import Icon from '../Icon'
+import Paper from '../Paper'
+
+const useStyles = makeStyles({
+ floatingIcon: {
+ top: '-2.25rem',
+ width: '4.5rem',
+ height: '4.5rem'
+ }
+})
+
+/**
+ * Dialog for confirmation actions linked to the Cozy system (permissions, authentication, etc.)
+ */
+const PermissionDialog = ({
+ open,
+ icon,
+ title,
+ content,
+ actions,
+ actionsLayout,
+ onClose
+}) => {
+ const styles = useStyles()
+
+ return (
+
+
+
+
+
+
+
+ {title}
+ >
+ }
+ content={content}
+ actions={actions}
+ actionsLayout={actionsLayout}
+ onClose={onClose}
+ />
+
+ )
+}
+
+PermissionDialog.propTypes = {
+ /** To open/close the modal */
+ open: PropTypes.bool.isRequired,
+ /** Icon to describe the action to be taken */
+ icon: PropTypes.func.isRequired,
+ /** Title of the modal */
+ title: PropTypes.string.isRequired,
+ /** Content of the modal */
+ content: PropTypes.node,
+ /** Actions of the modal */
+ actions: PropTypes.node,
+ /** Actions can be displayed as "rows" or "columns" */
+ actionsLayout: PropTypes.oneOf(['row', 'column']),
+ /** Triggered function on modal close action */
+ onClose: PropTypes.func
+}
+
+export default PermissionDialog
diff --git a/react/CozyDialogs/Readme.md b/react/CozyDialogs/Readme.md
index 49f4efaca9..0b05a09812 100644
--- a/react/CozyDialogs/Readme.md
+++ b/react/CozyDialogs/Readme.md
@@ -59,7 +59,8 @@ import {
ConfirmDialog,
IllustrationDialog,
FixedDialog,
- FixedActionsDialog
+ FixedActionsDialog,
+ PermissionDialog
} from 'cozy-ui/transpiled/react/CozyDialogs'
import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
@@ -77,6 +78,7 @@ import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
import BottomSheet, { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
import Stack from 'cozy-ui/transpiled/react/Stack'
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
import BackgroundImg from './background.png'
@@ -133,7 +135,8 @@ const dialogTitles = {
IllustrationDialog: ,
FixedDialog: 'Fixed Dialog',
FixedActionsDialog: 'Fixed Actions Dialog',
- Dialog: 'Dialog'
+ Dialog: 'Dialog',
+ PermissionDialog: 'Are you sure ?'
}
const dialogContents = {
@@ -141,7 +144,8 @@ const dialogContents = {
IllustrationDialog: "An IllustrationDialog contains short content." + content.ada.short,
FixedDialog: "A FixedDialog can contain very long content. Actions are at the bottom of the content are not visible to the user if she has not scrolled to the bottom. " + content.ada.long,
FixedActionsDialog: "A FixedActionsDialog can contain very long content. Actions are visible even without scrolling. " + content.ada.long,
- Dialog: "A normal Dialog should contain short content. " + content.ada.short
+ Dialog: "A normal Dialog should contain short content. " + content.ada.short,
+ PermissionDialog: "Content of a confirm dialog, precising what the actions will do, and asking the user if she is sure.",
}
const dialogActions = {
@@ -149,7 +153,8 @@ const dialogActions = {
IllustrationDialog: ,
FixedDialog: ,
FixedActionsDialog: ,
- Dialog:
+ Dialog: ,
+ PermissionDialog: ,
}
const dialogs = [
@@ -157,7 +162,8 @@ const dialogs = [
ConfirmDialog,
IllustrationDialog,
FixedDialog,
- FixedActionsDialog
+ FixedActionsDialog,
+ PermissionDialog
]
const StateRadio = ({ name, ...props }) => {
@@ -326,6 +332,7 @@ const setFlagshipVars = () => {
}
disableGutters={variant.disableGutters}
background={variant.withBackground ? `var(--paperBackgroundColor) repeat-x url(${BackgroundImg})` : undefined}
+ icon={DialogComponent === PermissionDialog ? CloudIcon : undefined}
content={
<>
diff --git a/react/CozyDialogs/index.jsx b/react/CozyDialogs/index.jsx
index c73231b028..bab9fc8a00 100644
--- a/react/CozyDialogs/index.jsx
+++ b/react/CozyDialogs/index.jsx
@@ -6,6 +6,7 @@ export { default as ConfirmDialog } from './ConfirmDialog'
export { default as FixedActionsDialog } from './FixedActionsDialog'
export { default as FixedDialog } from './FixedDialog'
export { default as IllustrationDialog } from './IllustrationDialog'
+export { default as PermissionDialog } from './PermissionDialog'
export { default as useCozyDialog } from './useCozyDialog'
export { default as TopAnchoredDialog } from './TopAnchoredDialog'
export { InstallFlagshipAppDialog } from './SpecificDialogs'
diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
index 963f1316d7..04364513f1 100644
--- a/react/MuiCozyTheme/makeOverrides.js
+++ b/react/MuiCozyTheme/makeOverrides.js
@@ -404,6 +404,9 @@ export const makeOverrides = theme => ({
width: '800px',
maxWidth: '800px'
}
+ },
+ '&.overflow': {
+ overflowY: 'visible !important' // Allow the icon to overflow the dialog, otherwise it will be cut off
}
},
scrollPaper: {