RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

format & display alpha

Browse Source
This commit is contained in:
SrGooglo 2025-02-05 02:44:37 +00:00
parent cbbd822729
commit d23907d9a0
1 changed files with 157 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
packages/app/src/layouts/components/sidebar/index.jsx
View File

@ -21,53 +21,53 @@ import "./index.less"
const ActionMenuItems = [ const ActionMenuItems = [
{ {
key: "profile", key: "profile",
label: <> label: (
<Icons.FiUser /> <>
<Translation> <Icons.FiUser />
{t => t("Profile")} <Translation>{(t) => t("Profile")}</Translation>
</Translation> </>
</>, ),
}, },
{ {
key: "studio", key: "studio",
label: <> label: (
<Icons.MdHardware /> <>
<Translation> <Icons.MdHardware />
{t => t("Studio")} <Translation>{(t) => t("Studio")}</Translation>
</Translation> </>
</>, ),
}, },
{ {
key: "addons", key: "addons",
label: <> label: (
<Icons.FiBox /> <>
<Translation> <Icons.FiBox />
{t => t("Addons")} <Translation>{(t) => t("Addons")}</Translation>
</Translation> </>
</>, ),
}, },
{ {
type: "divider" type: "divider",
}, },
{ {
key: "switch_account", key: "switch_account",
label: <> label: (
<Icons.MdSwitchAccount /> <>
<Translation> <Icons.MdSwitchAccount />
{t => t("Switch account")} <Translation>{(t) => t("Switch account")}</Translation>
</Translation> </>
</>, ),
}, },
{ {
key: "logout", key: "logout",
label: <> label: (
<Icons.FiLogOut /> <>
<Translation> <Icons.FiLogOut />
{t => t("Logout")} <Translation>{(t) => t("Logout")}</Translation>
</Translation> </>
</>, ),
danger: true danger: true,
} },
] ]
export default class Sidebar extends React.Component { export default class Sidebar extends React.Component {
@ -86,7 +86,7 @@ export default class Sidebar extends React.Component {
collapseDebounce = null collapseDebounce = null
interface = window.app.layout.sidebar = { interface = (window.app.layout.sidebar = {
toggleVisibility: (to) => { toggleVisibility: (to) => {
if (to === false) { if (to === false) {
this.interface.toggleExpanded(false, { this.interface.toggleExpanded(false, {
@ -96,7 +96,10 @@ export default class Sidebar extends React.Component {
this.setState({ visible: to ?? !this.state.visible }) this.setState({ visible: to ?? !this.state.visible })
}, },
toggleExpanded: async (to, { instant = false, isDropdown = false } = {}) => { toggleExpanded: async (
to,
{ instant = false, isDropdown = false } = {},
) => {
to = to ?? !this.state.expanded to = to ?? !this.state.expanded
if (this.collapseDebounce) { if (this.collapseDebounce) {
@ -104,7 +107,10 @@ export default class Sidebar extends React.Component {
this.collapseDebounce = null this.collapseDebounce = null
} }
if (to === false & this.state.dropdownOpen === true && isDropdown === true) { if (
(to === false) & (this.state.dropdownOpen === true) &&
isDropdown === true
) {
// FIXME: This is a walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired // FIXME: This is a walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired
// The desing defines when sidebar should be collapsed, dropdown should be closed, but in this case, gonna to keep it open untils dropdown is closed // The desing defines when sidebar should be collapsed, dropdown should be closed, but in this case, gonna to keep it open untils dropdown is closed
//this.setState({ dropdownOpen: false }) //this.setState({ dropdownOpen: false })
@ -114,7 +120,14 @@ export default class Sidebar extends React.Component {
if (to === false) { if (to === false) {
if (instant === false) { if (instant === false) {
await new Promise((resolve) => setTimeout(resolve, window.app.cores.settings.get("sidebar.collapse_delay_time") ?? 500)) await new Promise((resolve) =>
setTimeout(
resolve,
window.app.cores.settings.get(
"sidebar.collapse_delay_time",
) ?? 500,
),
)
} }
} }
@ -129,13 +142,13 @@ export default class Sidebar extends React.Component {
navigationRender: { navigationRender: {
component, component,
options, options,
} },
}) })
}, },
updateMenuItemProps: this.updateBottomItemProps, updateMenuItemProps: this.updateBottomItemProps,
addMenuItem: this.addMenuItem, addMenuItem: this.addMenuItem,
removeMenuItem: this.removeMenuItem, removeMenuItem: this.removeMenuItem,
} })
events = { events = {
"router.navigate": (path) => { "router.navigate": (path) => {
@ -167,7 +180,9 @@ export default class Sidebar extends React.Component {
const items = [...this.state.topItems, ...this.state.bottomItems] const items = [...this.state.topItems, ...this.state.bottomItems]
this.setState({ this.setState({
selectedMenuItem: items.find((item) => String(item.path).includes(path)), selectedMenuItem: items.find((item) =>
String(item.path).includes(path),
),
}) })
} }
@ -181,7 +196,7 @@ export default class Sidebar extends React.Component {
const newItems = [...this.state[group], item] const newItems = [...this.state[group], item]
this.setState({ this.setState({
[group]: newItems [group]: newItems,
}) })
return newItems return newItems
@ -197,7 +212,7 @@ export default class Sidebar extends React.Component {
const newItems = this.state[group].filter((item) => item.id !== id) const newItems = this.state[group].filter((item) => item.id !== id)
this.setState({ this.setState({
[group]: newItems [group]: newItems,
}) })
return newItems return newItems
@ -222,7 +237,7 @@ export default class Sidebar extends React.Component {
}) })
this.setState({ this.setState({
[group]: updatedValue [group]: updatedValue,
}) })
return updatedValue return updatedValue
@ -248,25 +263,24 @@ export default class Sidebar extends React.Component {
key: "account", key: "account",
ignore_click: "true", ignore_click: "true",
className: "user_avatar", className: "user_avatar",
label: <Dropdown label: (
menu={{ <Dropdown
items: ActionMenuItems, menu={{
onClick: this.onClickDropdownItem items: ActionMenuItems,
}} onClick: this.onClickDropdownItem,
autoFocus }}
placement="top" autoFocus
trigger={["click"]} placement="top"
> trigger={["click"]}
<Avatar shape="square" src={app.userData?.avatar} /> >
</Dropdown>, <Avatar shape="square" src={app.userData?.avatar} />
</Dropdown>
),
}) })
} else { } else {
items.push({ items.push({
key: "login", key: "login",
label: <Translation> label: <Translation>{(t) => t("Login")}</Translation>,
{t => t("Login")}
</Translation>,
icon: <Icons.FiLogIn />, icon: <Icons.FiLogIn />,
}) })
} }
@ -280,7 +294,10 @@ export default class Sidebar extends React.Component {
} }
if (e.item.props.override_event) { if (e.item.props.override_event) {
return app.eventBus.emit(e.item.props.override_event, e.item.props.override_event_props) return app.eventBus.emit(
e.item.props.override_event,
e.item.props.override_event_props,
)
} }
if (typeof e.key === "undefined") { if (typeof e.key === "undefined") {
@ -294,7 +311,9 @@ export default class Sidebar extends React.Component {
app.cores.sfx.play("sidebar.switch_tab") app.cores.sfx.play("sidebar.switch_tab")
let item = [...this.state.topItems, ...this.state.bottomItems].find((item) => item.id === e.key) let item = [...this.state.topItems, ...this.state.bottomItems].find(
(item) => item.id === e.key,
)
return app.location.push(`/${item.path ?? e.key}`, 150) return app.location.push(`/${item.path ?? e.key}`, 150)
} }
@ -335,89 +354,86 @@ export default class Sidebar extends React.Component {
render() { render() {
const selectedKeyId = this.state.selectedMenuItem?.id const selectedKeyId = this.state.selectedMenuItem?.id
return <div return (
className={classnames( <div
"app_sidebar_wrapper", className={classnames("app_sidebar_wrapper", {
{ ["hidden"]: !this.state.visible,
["hidden"]: !this.state.visible })}
} onMouseEnter={this.onMouseEnter}
)} onMouseLeave={this.handleMouseLeave}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
{
window.__TAURI__ && navigator.platform.includes("Mac") && <div
className="app_sidebar_tauri"
data-tauri-drag-region
/>
}
<AnimatePresence
mode="popLayout"
> >
{ {window.__TAURI__ && navigator.platform.includes("Mac") && (
this.state.visible && <motion.div <div className="app_sidebar_tauri" data-tauri-drag-region />
className={classnames( )}
"app_sidebar",
{ <AnimatePresence mode="popLayout">
{this.state.visible && (
<motion.div
className={classnames("app_sidebar", {
["expanded"]: this.state.expanded, ["expanded"]: this.state.expanded,
} })}
)} ref={this.sidebarRef}
ref={this.sidebarRef} initial={{
initial={{ x: -500,
x: -500 }}
}} animate={{
animate={{ x: 0,
x: 0, }}
}} exit={{
exit={{ x: -500,
x: -500 }}
}} transition={{
transition={{ type: "spring",
type: "spring", stiffness: 100,
stiffness: 100, damping: 20,
damping: 20 }}
}}
>
<div className="app_sidebar_header">
<div className="app_sidebar_header_logo">
<img
src={config.logo?.alt}
onClick={() => app.navigation.goMain()}
/>
<Tag>Beta</Tag>
</div>
</div>
<div key="menu" className="app_sidebar_menu_wrapper">
<Menu
mode="inline"
onClick={this.handleClick}
selectedKeys={[selectedKeyId]}
items={this.state.topItems}
/>
</div>
<div
key="bottom"
className={classnames(
"app_sidebar_menu_wrapper",
"bottom"
)}
> >
<Menu <div className="app_sidebar_header">
mode="inline" <div className="app_sidebar_header_logo">
onClick={this.handleClick} <img
items={[...this.state.bottomItems, ...this.injectUserItems()]} src={config.logo?.alt}
selectedKeys={[selectedKeyId]} onClick={() => app.navigation.goMain()}
/> />
</div>
</motion.div>
}
</AnimatePresence>
<Drawer /> <Tag>αlpha</Tag>
</div> </div>
</div>
<div
key="menu"
className="app_sidebar_menu_wrapper"
>
<Menu
mode="inline"
onClick={this.handleClick}
selectedKeys={[selectedKeyId]}
items={this.state.topItems}
/>
</div>
<div
key="bottom"
className={classnames(
"app_sidebar_menu_wrapper",
"bottom",
)}
>
<Menu
mode="inline"
onClick={this.handleClick}
items={[
...this.state.bottomItems,
...this.injectUserItems(),
]}
selectedKeys={[selectedKeyId]}
/>
</div>
</motion.div>
)}
</AnimatePresence>
<Drawer />
</div>
)
} }
} }