@selfcommunity/react-theme-default 0.1.0-alpha.16 → 0.1.0-alpha.160

package/lib/cjs/components/SCCommentsFeedObject.d.ts

@@ -22,8 +22,8 @@ declare const Component: {
             '& .SCCommentsObjectSkeleton-root': {
                 marginBottom: any;
             };
-            '& .SCReplyCommentObject-root': {
-                '& .SCReplyCommentObject-comment': {
+            '& .SCCommentObjectReply-root': {
+                '& .SCCommentObjectReply-comment': {
                     marginBottom: any;
                 };
             };

package/lib/cjs/components/SCCommentsFeedObject.js

@@ -24,8 +24,8 @@ const Component = {
             '& .SCCommentsObjectSkeleton-root': {
                 marginBottom: theme.spacing(0.5)
             },
-            '& .SCReplyCommentObject-root': {
-                '& .SCReplyCommentObject-comment': {
+            '& .SCCommentObjectReply-root': {
+                '& .SCCommentObjectReply-comment': {
                     marginBottom: theme.spacing(4)
                 }
             }

package/lib/cjs/components/SCComposer.d.ts

@@ -1,20 +1,45 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
-            '& .MuiDialog-paper': {
-                padding: any;
-            };
             '& .SCComposer-title': {
                 borderBottom: string;
                 padding: any;
                 lineHeight: number;
                 fontSize: string;
+                display: string;
+                flexDirection: string;
+                flexWrap: string;
+                justifyContent: string;
+                alignItems: string;
                 '& .SCComposer-types .MuiInputBase-input': {
                     fontWeight: any;
                     fontSize: string;
+                    minHeight: string;
+                };
+                '& > div': {
+                    flex: number;
+                    textAlign: string;
+                };
+                '& > div:first-of-type': {
+                    textAlign: string;
                 };
+                '& > div:last-of-type': {
+                    textAlign: string;
+                    display: string;
+                };
+            };
+            '& .SCComposer-types': {
+                flexDirection: string;
+                alignItems: string;
+            };
+            '& .SCComposer-avatar': {
+                width: any;
+                height: any;
+                display: string;
             };
             '& .SCComposer-content': {
+                position: string;
+                overflowY: string;
                 padding: any;
                 minHeight: number;
                 display: string;
@@ -23,13 +48,38 @@ declare const Component: {
                 '& .SCComposer-editor': {
                     padding: number;
                     fontSize: string;
-                    minHeight: string;
                     '& .SCEditor-placeholder': {
                         top: number;
                         left: number;
                     };
                     '& .SCEditor-actions': {
                         bottom: any;
+                        padding: any;
+                        '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
+                            marginLeft: any;
+                            marginRight: any;
+                            '&:first-of-type': {
+                                marginLeft: number;
+                            };
+                            '&:last-child': {
+                                marginRight: number;
+                            };
+                        };
+                        '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
+                            marginRight: any;
+                        };
+                        '& .MuiIconButton-sizeMedium': {
+                            fontSize: string;
+                        };
+                    };
+                    '&.SCEditor-toolbar': {
+                        '& .SCEditor-placeholder': {
+                            top: any;
+                            left: number;
+                        };
+                        '& .SCEditor-actions': {
+                            bottom: any;
+                        };
                     };
                 };
                 '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
@@ -48,6 +98,109 @@ declare const Component: {
                     };
                 };
             };
+            '& .SCComposer-mediaContent, & .SCComposer-audienceContent, & .SCComposer-locationContent': {
+                minHeight: number;
+            };
+            '& .SCComposer-audienceContent': {
+                maxWidth: number;
+                margin: any;
+                '& .MuiTabs-root': {
+                    margin: any;
+                    '& .MuiTabs-flexContainer': {
+                        justifyContent: string;
+                        '& .MuiTab-root': {
+                            minHeight: any;
+                            flexDirection: string;
+                            '& .MuiTab-iconWrapper': {
+                                marginRight: any;
+                                fontSize: string;
+                            };
+                        };
+                    };
+                };
+                '& .SCComposer-block': {
+                    marginBottom: any;
+                };
+            };
+            '& .SCComposer-block': {
+                padding: any;
+            };
+            '& .SCComposer-editor': {
+                minHeight: number;
+                '& .SCEditor-placeholder': {
+                    top: any;
+                    left: any;
+                };
+            };
+            '& .SCComposer-divider': {
+                borderTop: string;
+            };
+            '& .SCComposer-medias': {
+                margin: string;
+            };
+            '& .SCComposer-location, & .SCComposer-audience': {
+                padding: any;
+                paddingBottom: number;
+            };
+            '& .SCComposer-mediasActions': {
+                position: string;
+                left: number;
+                right: number;
+                background: any;
+                padding: any;
+                zIndex: number;
+                display: string;
+                flexWrap: string;
+                justifyContent: string;
+                '& .SCComposer-mediasActionsActions': {
+                    textAlign: string;
+                };
+            };
+            '& .SCComposer-sortableMedia': {
+                position: string;
+            };
+            '& .SCComposer-sortableMediaCover': {
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+                border: string;
+                borderRadius: number;
+                height: number;
+            };
+            '& .SCComposer-links': {
+                padding: any;
+            };
+            '& .SCComposer-actions': {
+                [x: number]: {
+                    display: string;
+                    flexDirection: string;
+                    flexWrap: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    '& .MuiTypography-alignLeft, & .MuiTypography-alignRight': {
+                        float: string;
+                    };
+                };
+                margin: number;
+                borderTop: string;
+                padding: any;
+                display: string;
+                '& .MuiTypography-alignLeft': {
+                    float: string;
+                };
+                '& .MuiTypography-alignRight': {
+                    float: string;
+                };
+            };
+            '& .SCComposer-actionInput': {
+                display: string;
+            };
+            '& .SCComposer-badgeError .MuiBadge-badge': {
+                padding: number;
+            };
+            '& .MuiDialog-paper': {
+                padding: any;
+            };
             '& .SCComposer-mediaContent': {
                 '& .SCMediaActionImage-root': {
                     padding: number;
@@ -84,41 +237,27 @@ declare const Component: {
                 padding: any;
                 minHeight: number;
             };
-            '& .SCComposer-actions': {
-                borderTop: string;
-                padding: any;
-                '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
-                    marginLeft: any;
-                    marginRight: any;
-                    '&:first-child': {
-                        marginLeft: number;
-                    };
-                    '&:last-child': {
-                        marginRight: number;
-                    };
-                };
-                '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
-                    marginRight: any;
-                };
-                '& .MuiIconButton-sizeMedium': {
-                    fontSize: string;
-                };
-            };
-            '& .SCComposer-block': {
-                padding: any;
-            };
-            '& .SCComposer-editor': {
-                '& .SCEditor-placeholder': {
-                    top: any;
-                    left: any;
-                };
-            };
             '& .MuiDialog-container': {
                 '& .MuiDialog-paper': {
                     [x: number]: {
                         borderRadius: any;
                     };
                     boxShadow: any;
+                    '&.MuiDialog-paperFullScreen': {
+                        height: string;
+                        minHeight: string;
+                    };
+                };
+            };
+            '& .SCCategoryAutocomplete-root': {
+                minWidth: number;
+                '& .MuiFormControl-root': {
+                    margin: number;
+                };
+            };
+            '& .MuiDialog-paperFullScreen': {
+                '& .SCComposer-actions > *:first-of-type': {
+                    marginBottom: any;
                 };
             };
         };

package/lib/cjs/components/SCComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SCComposer.d.ts","sourceRoot":"","sources":["../../../src/components/SCComposer.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS;;0BAEK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SCComposer.d.ts","sourceRoot":"","sources":["../../../src/components/SCComposer.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS;;0BAEK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4QtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/cjs/components/SCComposer.js

@@ -1,130 +1,276 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => ({
-            '& .MuiDialog-paper': {
-                padding: theme.spacing(2, 3, 3)
-            },
-            '& .SCComposer-title': {
-                borderBottom: `1px solid ${theme.palette.grey[400]}`,
-                padding: theme.spacing(0, 0, 2, 0),
-                lineHeight: 1,
-                fontSize: '1.143rem',
-                '& .SCComposer-types .MuiInputBase-input': {
-                    fontWeight: theme.typography.fontWeightBold,
-                    fontSize: '1.286rem'
-                }
-            },
-            '& .SCComposer-content': {
-                padding: theme.spacing(3, 0),
-                minHeight: 300,
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
+        root: ({ theme }) => {
+            let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
+            if (mediaActionBackground.startsWith('#')) {
+                mediaActionBackground = (0, material_1.hexToRgb)(mediaActionBackground).replace(')', ', .5)');
+            }
+            return {
+                '& .SCComposer-title': {
+                    borderBottom: `1px solid ${theme.palette.grey[400]}`,
+                    padding: theme.spacing(0, 0, 2, 0),
+                    lineHeight: 1,
+                    fontSize: '1.143rem',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    '& .SCComposer-types .MuiInputBase-input': {
+                        fontWeight: theme.typography.fontWeightBold,
+                        fontSize: '1.286rem',
+                        minHeight: 'auto'
+                    },
+                    '& > div': {
+                        flex: 1,
+                        textAlign: 'center'
+                    },
+                    '& > div:first-of-type': {
+                        textAlign: 'left'
+                    },
+                    '& > div:last-of-type': {
+                        textAlign: 'right',
+                        display: 'block'
+                    }
+                },
+                '& .SCComposer-types': {
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                '& .SCComposer-avatar': {
+                    width: theme.selfcommunity.user.avatar.sizeMedium,
+                    height: theme.selfcommunity.user.avatar.sizeMedium,
+                    display: 'inline-block'
+                },
+                '& .SCComposer-content': {
+                    position: 'relative',
+                    overflowY: 'visible',
+                    padding: theme.spacing(3, 0),
+                    minHeight: 300,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    '& .SCComposer-editor': {
+                        padding: 0,
+                        fontSize: '1rem',
+                        '& .SCEditor-placeholder': {
+                            top: 0,
+                            left: 0
+                        },
+                        '& .SCEditor-actions': {
+                            bottom: theme.spacing(4),
+                            padding: theme.spacing(3, 0, 0, 0),
+                            '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
+                                marginLeft: theme.spacing(0.3),
+                                marginRight: theme.spacing(0.3),
+                                '&:first-of-type': {
+                                    marginLeft: 0
+                                },
+                                '&:last-child': {
+                                    marginRight: 0
+                                }
+                            },
+                            '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
+                                marginRight: theme.spacing(1.5)
+                            },
+                            '& .MuiIconButton-sizeMedium': {
+                                fontSize: '1.429rem'
+                            }
+                        },
+                        '&.SCEditor-toolbar': {
+                            '& .SCEditor-placeholder': {
+                                top: theme.spacing(6),
+                                left: 0
+                            },
+                            '& .SCEditor-actions': {
+                                bottom: theme.spacing(2)
+                            }
+                        }
+                    },
+                    '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
+                        margin: theme.spacing(1, 0),
+                        padding: 0
+                    },
+                    '& .SCComposer-medias': {
+                        '& .SCComposer-mediasActions': {
+                            position: 'relative',
+                            borderTop: `1px solid ${theme.palette.grey[400]}`,
+                            backgroundColor: theme.palette.background.paper,
+                            padding: theme.spacing(1, 0),
+                            '& .SCComposer-mediasActionsTitle': {
+                                fontSize: '1.143rem'
+                            }
+                        }
+                    }
+                },
+                '& .SCComposer-mediaContent, & .SCComposer-audienceContent, & .SCComposer-locationContent': {
+                    minHeight: 300
+                },
+                '& .SCComposer-audienceContent': {
+                    maxWidth: 400,
+                    margin: theme.spacing(0, 'auto'),
+                    '& .MuiTabs-root': {
+                        margin: theme.spacing(4, 0),
+                        '& .MuiTabs-flexContainer': {
+                            justifyContent: 'center',
+                            '& .MuiTab-root': {
+                                minHeight: theme.spacing(6),
+                                flexDirection: 'row',
+                                '& .MuiTab-iconWrapper': {
+                                    marginRight: theme.spacing(1),
+                                    fontSize: '1.429rem'
+                                }
+                            }
+                        }
+                    },
+                    '& .SCComposer-block': {
+                        marginBottom: theme.spacing(4)
+                    }
+                },
+                '& .SCComposer-block': {
+                    padding: theme.spacing(1)
+                },
                 '& .SCComposer-editor': {
-                    padding: 0,
-                    fontSize: '1rem',
-                    minHeight: 'auto',
+                    minHeight: 200,
                     '& .SCEditor-placeholder': {
-                        top: 0,
-                        left: 0
-                    },
-                    '& .SCEditor-actions': {
-                        bottom: theme.spacing(4)
+                        top: theme.spacing(1),
+                        left: theme.spacing(1)
                     }
                 },
-                '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
-                    margin: theme.spacing(1, 0),
-                    padding: 0
+                '& .SCComposer-divider': {
+                    borderTop: '1px solid #D1D1D1'
                 },
                 '& .SCComposer-medias': {
-                    '& .SCComposer-mediasActions': {
-                        position: 'relative',
-                        borderTop: `1px solid ${theme.palette.grey[400]}`,
-                        backgroundColor: theme.palette.background.paper,
-                        padding: theme.spacing(1, 0),
-                        '& .SCComposer-mediasActionsTitle': {
-                            fontSize: '1.143rem'
+                    margin: '0 23px'
+                },
+                '& .SCComposer-location, & .SCComposer-audience': {
+                    padding: theme.spacing(2),
+                    paddingBottom: 0
+                },
+                '& .SCComposer-mediasActions': {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    background: mediaActionBackground,
+                    padding: theme.spacing(),
+                    zIndex: 1,
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    justifyContent: 'space-between',
+                    '& .SCComposer-mediasActionsActions': {
+                        textAlign: 'right'
+                    }
+                },
+                '& .SCComposer-sortableMedia': {
+                    position: 'relative'
+                },
+                '& .SCComposer-sortableMediaCover': {
+                    backgroundSize: 'cover !important',
+                    backgroundPosition: 'center !important',
+                    backgroundRepeat: 'no-repeat !important',
+                    border: '2px solid white',
+                    borderRadius: 6,
+                    height: 300
+                },
+                '& .SCComposer-links': {
+                    padding: theme.spacing(2)
+                },
+                '& .SCComposer-actions': {
+                    margin: 0,
+                    borderTop: '1px solid #D1D1D1',
+                    padding: theme.spacing(1),
+                    display: 'block',
+                    '& .MuiTypography-alignLeft': {
+                        float: 'left'
+                    },
+                    '& .MuiTypography-alignRight': {
+                        float: 'right'
+                    },
+                    [theme.breakpoints.up('md')]: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'nowrap',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        '& .MuiTypography-alignLeft, & .MuiTypography-alignRight': {
+                            float: 'none'
                         }
                     }
-                }
-            },
-            '& .SCComposer-mediaContent': {
-                '& .SCMediaActionImage-root': {
-                    padding: 0,
-                    '& .SCMediaActionImage-upload': {
-                        padding: theme.spacing(2),
-                        backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                        borderRadius: theme.shape.borderRadius,
-                        color: theme.palette.primary.main,
-                        '&.SCMediaActionImage-dragOver': {
-                            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-                        },
-                        '& .SCMediaActionImage-uploadBtn': {
-                            border: '0 none'
+                },
+                '& .SCComposer-actionInput': {
+                    display: 'none !important'
+                },
+                '& .SCComposer-badgeError .MuiBadge-badge': {
+                    padding: 0
+                },
+                '& .MuiDialog-paper': {
+                    padding: theme.spacing(2, 3, 3)
+                },
+                '& .SCComposer-mediaContent': {
+                    '& .SCMediaActionImage-root': {
+                        padding: 0,
+                        '& .SCMediaActionImage-upload': {
+                            padding: theme.spacing(2),
+                            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                            borderRadius: theme.shape.borderRadius,
+                            color: theme.palette.primary.main,
+                            '&.SCMediaActionImage-dragOver': {
+                                backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                            },
+                            '& .SCMediaActionImage-uploadBtn': {
+                                border: '0 none'
+                            }
+                        }
+                    },
+                    '& .SCMediaActionDocument-root': {
+                        padding: 0,
+                        '& .SCMediaActionDocument-upload': {
+                            padding: theme.spacing(2),
+                            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                            borderRadius: theme.shape.borderRadius,
+                            color: theme.palette.primary.main,
+                            '&.SCMediaActionDocument-dragOver': {
+                                backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                            },
+                            '& .SCMediaActionDocument-uploadBtn': {
+                                border: '0 none'
+                            }
                         }
                     }
                 },
-                '& .SCMediaActionDocument-root': {
-                    padding: 0,
-                    '& .SCMediaActionDocument-upload': {
-                        padding: theme.spacing(2),
-                        backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                        borderRadius: theme.shape.borderRadius,
-                        color: theme.palette.primary.main,
-                        '&.SCMediaActionDocument-dragOver': {
-                            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                '& .SCComposer-locationContent': {
+                    padding: theme.spacing(3, 0),
+                    minHeight: 300
+                },
+                '& .MuiDialog-container': {
+                    '& .MuiDialog-paper': {
+                        boxShadow: theme.shadows[12],
+                        [theme.breakpoints.up('md')]: {
+                            borderRadius: theme.shape.borderRadius
                         },
-                        '& .SCMediaActionDocument-uploadBtn': {
-                            border: '0 none'
+                        '&.MuiDialog-paperFullScreen': {
+                            height: 'auto',
+                            minHeight: '100%'
                         }
                     }
-                }
-            },
-            '& .SCComposer-locationContent': {
-                padding: theme.spacing(3, 0),
-                minHeight: 300
-            },
-            '& .SCComposer-actions': {
-                borderTop: `1px solid ${theme.palette.grey[300]}`,
-                padding: theme.spacing(3, 0, 0, 0),
-                '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
-                    marginLeft: theme.spacing(0.3),
-                    marginRight: theme.spacing(0.3),
-                    '&:first-child': {
-                        marginLeft: 0
-                    },
-                    '&:last-child': {
-                        marginRight: 0
-                    }
                 },
-                '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
-                    marginRight: theme.spacing(1.5)
+                '& .SCCategoryAutocomplete-root': {
+                    minWidth: 120,
+                    '& .MuiFormControl-root': {
+                        margin: 0
+                    }
                 },
-                '& .MuiIconButton-sizeMedium': {
-                    fontSize: '1.429rem'
-                }
-            },
-            '& .SCComposer-block': {
-                padding: theme.spacing(1)
-            },
-            '& .SCComposer-editor': {
-                '& .SCEditor-placeholder': {
-                    top: theme.spacing(1),
-                    left: theme.spacing(1)
-                }
-            },
-            '& .MuiDialog-container': {
-                '& .MuiDialog-paper': {
-                    boxShadow: theme.shadows[12],
-                    [theme.breakpoints.up('md')]: {
-                        borderRadius: theme.shape.borderRadius
+                '& .MuiDialog-paperFullScreen': {
+                    '& .SCComposer-actions > *:first-of-type': {
+                        marginBottom: theme.spacing(2)
                     }
                 }
-            }
-        })
+            };
+        }
     }
 };
 exports.default = Component;