Mirrors
/
vizality
mirror of https://github.com/vizality/vizality
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

rework settings context menu organization, and fix the plugin/theme searching on it

Browse Source
pull/95/head
dperolio 2 years ago
parent f1221e46d8
commit 437058c18c
No known key found for this signature in database
GPG Key ID: 4191689562D51409
1 changed files with 218 additions and 140 deletions
Show Stats Download Patch File Download Diff File

358
renderer/src/modules/components/vizality/SettingsContextMenu.jsx
Unescape View File

@ -1,9 +1,10 @@
/* eslint-disable no-unused-vars */
import { toTitleCase, toSingular } from '@vizality/util/string';
import { contextMenu, getModule } from '@vizality/webpack';
import React, { memo, useState, useEffect } from 'react';
import { FilterInput } from '@vizality/components';
import { FilterInput, Text } from '@vizality/components';
import { useForceUpdate } from '@vizality/hooks';
import { contextMenu } from '@vizality/webpack';
import { joinClassNames } from '@vizality/util/dom';
import { error } from '@vizality/util/logger';
import { useFilter } from '@vizality/hooks';
import { Messages } from '@vizality/i18n';
@ -33,6 +34,7 @@ const _error = (...message) => error({ labels: _labels, message });
export default memo(() => {
const [ quickToggle, setQuickToggle ] = useState(false);
const forceUpdate = useForceUpdate();
/**
* Creates a sorted array containing all installed plugins.
*/
@ -106,13 +108,15 @@ export default memo(() => {
/**
* Handles updating the current search filter.
* @param {string} query Search query
* @param {('plugins|'themes')} type Addon type
* @param {('plugins'|'themes')} type Addon type
* @returns {void}
*/
const handleQueryChange = (query, type) => {
eval(`set${toTitleCase(type)}Query`)(typeof query === 'string' ? query : '');
};
const { noResultsImage } = getModule('noResultsImage');
return (
<ContextMenu.Menu navId='vizality-dashboard' onClose={closeContextMenu}>
<ContextMenu.Item
@ -177,7 +181,7 @@ export default memo(() => {
label={toTitleCase(type)}
action={() => vizality.api.routes.navigateTo(type)}
>
{eval(`filtered${toTitleCase(type)}`).length && <ContextMenu.Group
<ContextMenu.Group
id='search'
className='vz-settings-context-menu-search'
label={
@ -189,132 +193,153 @@ export default memo(() => {
}
>
<ContextMenu.Separator />
{eval(`filtered${toTitleCase(type)}`).map(addon => {
const isEnabled = vizality.manager[type].isEnabled(addon.addonId);
const isInstalled = vizality.manager[type].isInstalled(addon.addonId);
const hasSettings = vizality.manager[type].hasSettings(addon.addonId);
const hasScreenshots = vizality.manager[type].hasScreenshots(addon.addonId);
const hasChangelog = vizality.manager[type].hasChangelog(addon.addonId);
return (
quickToggle
? (
<ContextMenu.CheckboxItem
vz-addon-icon={addon.manifest.icon}
vz-addon-type={toSingular(type)}
id={addon.addonId}
label={addon.manifest.name}
checked={vizality.manager[type].isEnabled(addon.addonId)}
action={async () => {
try {
vizality.manager[type].isEnabled(addon.addonId)
? await vizality.manager[type].disable(addon.addonId)
: await vizality.manager[type].enable(addon.addonId);
forceUpdate();
} catch (err) {
_error(err);
}
}}
>
<LazyImage src={addon.manifest.icon} />
</ContextMenu.CheckboxItem>
)
: (
<ContextMenu.Item
vz-addon-icon={addon.manifest.icon}
id={addon.addonId}
label={addon.manifest.name}
action={() => {
try {
return vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}`);
} catch (err) {
_error(err);
}
}}
>
<ContextMenu.Item
id='overview'
label='Overview'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}`)}
/>
{hasScreenshots && (
<ContextMenu.Item
id='screenshots'
label='Screenshots'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/screenshots`)}
/>
)}
{isInstalled && hasSettings && (
<ContextMenu.Item
id='settings'
label='Settings'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/settings`)}
/>
)}
<ContextMenu.Item
id='reviews'
label='Reviews'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/reviews`)}
disabled
/>
{hasChangelog && (
<ContextMenu.Item
id='changelog'
label='Changelog'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/changelog`)}
/>
)}
<ContextMenu.Separator />
{isInstalled && (
{eval(`filtered${toTitleCase(type)}`).length
? (
eval(`filtered${toTitleCase(type)}`).map(addon => {
const isEnabled = vizality.manager[type].isEnabled(addon.addonId);
const isInstalled = vizality.manager[type].isInstalled(addon.addonId);
const hasSettings = vizality.manager[type].hasSettings(addon.addonId);
const hasScreenshots = vizality.manager[type].hasScreenshots(addon.addonId);
const hasChangelog = vizality.manager[type].hasChangelog(addon.addonId);
return (
quickToggle
? (
<ContextMenu.CheckboxItem
id='enable'
label='Enable'
checked={isEnabled}
vz-addon-icon={addon.manifest.icon}
vz-addon-type={toSingular(type)}
id={addon.addonId}
label={addon.manifest.name}
checked={vizality.manager[type].isEnabled(addon.addonId)}
action={async () => {
vizality.manager[type].toggle(addon.addonId);
forceUpdate();
try {
vizality.manager[type].isEnabled(addon.addonId)
? await vizality.manager[type].disable(addon.addonId)
: await vizality.manager[type].enable(addon.addonId);
forceUpdate();
} catch (err) {
_error(err);
}
}}
>
<LazyImage src={addon.manifest.icon} />
</ContextMenu.CheckboxItem>
)
: (
<ContextMenu.Item
vz-addon-icon={addon.manifest.icon}
id={addon.addonId}
label={addon.manifest.name}
action={() => {
try {
return vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}`);
} catch (err) {
_error(err);
}
}}
/>
)}
{isInstalled
? <ContextMenu.Item
id='uninstall'
label='Uninstall'
color={ContextMenu.Item.Colors.DANGER}
action={async () => vizality.manager[type].uninstall(addon.addonId)}
/>
: <ContextMenu.Item
id='install'
label='Install'
color={ContextMenu.Item.Colors.GREEN}
action={async () => vizality.manager[type].install(addon.addonId)}
/>
}
<ContextMenu.Separator />
<ContextMenu.Item
id='copy-link'
label='Copy Link'
action={() => void 0}
/>
<ContextMenu.Item
id='copy-id'
label='Copy ID'
action={() => DiscordNative.clipboard.copy(addon.addonId)}
/>
</ContextMenu.Item>
)
);
})}
</ContextMenu.Group>}
>
<ContextMenu.Item
id='overview'
label='Overview'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}`)}
/>
{hasScreenshots && (
<ContextMenu.Item
id='screenshots'
label='Screenshots'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/screenshots`)}
/>
)}
{isInstalled && hasSettings && (
<ContextMenu.Item
id='settings'
label='Settings'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/settings`)}
/>
)}
<ContextMenu.Item
id='reviews'
label='Reviews'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/reviews`)}
disabled
/>
{hasChangelog && (
<ContextMenu.Item
id='changelog'
label='Changelog'
action={() => vizality.api.routes.navigateTo(`/vizality/${toSingular(type)}/${addon.addonId}/changelog`)}
/>
)}
<ContextMenu.Separator />
{isInstalled && (
<ContextMenu.CheckboxItem
id='enable'
label='Enable'
checked={isEnabled}
action={async () => {
vizality.manager[type].toggle(addon.addonId);
forceUpdate();
}}
/>
)}
{isInstalled
? <ContextMenu.Item
id='uninstall'
label='Uninstall'
color={ContextMenu.Item.Colors.DANGER}
action={async () => vizality.manager[type].uninstall(addon.addonId)}
/>
: <ContextMenu.Item
id='install'
label='Install'
color={ContextMenu.Item.Colors.GREEN}
action={async () => vizality.manager[type].install(addon.addonId)}
/>
}
<ContextMenu.Separator />
<ContextMenu.Item
id='copy-link'
label='Copy Link'
action={() => void 0}
/>
<ContextMenu.Item
id='copy-id'
label='Copy ID'
action={() => DiscordNative.clipboard.copy(addon.addonId)}
/>
</ContextMenu.Item>
)
);
})
)
: (
<ContextMenu.Item
id='error-image'
disabled
label={() => (
<div className='vz-settings-context-menu-no-results'>
<Text className='vz-settings-context-menu-no-results-text' style={ { textAlign: 'center' } }>No {type} found.</Text>
<div className={joinClassNames('vz-settings-context-menu-no-results-image', noResultsImage)} />
</div>
)}
/>
)
}
</ContextMenu.Group>
</ContextMenu.Item>
);
})}
<ContextMenu.Item
id='snippets'
label='Snippets'
action={() => vizality.api.routes.navigateTo('snippets')}
action={() => void 0}
disabled
>
</ContextMenu.Item>
/>
<ContextMenu.Item
id='palettes'
label='Palettes'
action={() => void 0}
disabled
/>
{vizality.manager.builtins.isEnabled('quick-code') && (
<ContextMenu.Item
id='quick-code'
@ -328,50 +353,103 @@ export default memo(() => {
label='Development'
action={() => vizality.api.routes.navigateTo('development')}
>
{/* @todo Addon Guidelines, Publish an Addon, Get Verified, Documentation, VSCode Snippets, Manifest Generator */}
<ContextMenu.Item
id='addon-guidelines'
label='Addon Guidelines'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='publishing-an-addon'
label='Publishing an Addon'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='becoming-verified'
label='Becoming Verified'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='manifest-generator'
label='Manifest Generator'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='documentation'
label='Documentation'
action={() => vizality.api.routes.navigateTo('docs')}
action={() => void 0}
>
<ContextMenu.Item
id='getting-started'
label='Getting Started'
action={() => vizality.api.routes.navigateTo('docs/getting-started')}
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='plugins'
label='Plugins'
action={() => vizality.api.routes.navigateTo('docs/plugins')}
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='themes'
label='Themes'
action={() => vizality.api.routes.navigateTo('docs/themes')}
/>
<ContextMenu.Item
id='screenshots'
label='Screenshots'
action={() => vizality.api.routes.navigateTo('docs/components/screenshots')}
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='icons'
id='components'
label='Components'
action={() => vizality.api.routes.navigateTo('docs/components/icons')}
action={() => void 0}
>
<ContextMenu.Item
id='icon'
label='Icon'
action={() => vizality.api.routes.navigateTo('docs/components/icon')}
/>
<ContextMenu.Item
id='markdown'
label='Markdown'
action={() => vizality.api.routes.navigateTo('docs/components/markdown')}
/>
<ContextMenu.Item
id='error-boundary'
label='Error Boundary'
action={() => vizality.api.routes.navigateTo('docs/components/error-boundary')}
/>
<ContextMenu.Item
id='testing'
label='Testing'
action={() => vizality.api.routes.navigateTo('docs/components/test')}
/>
</ContextMenu.Item>
<ContextMenu.Item
id='packages'
label='Packages'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='markdown'
label='Markdown'
action={() => vizality.api.routes.navigateTo('docs/components/markdown')}
id='api'
label='API'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='error-test'
label='Error Test'
action={() => vizality.api.routes.navigateTo('docs/components/error-test')}
id='advanced'
label='Advanced'
action={() => void 0}
disabled
/>
<ContextMenu.Item
id='test'
label='Test'
action={() => vizality.api.routes.navigateTo('docs/components/test')}
id='resources'
label='Resources'
action={() => void 0}
disabled
/>
</ContextMenu.Item>
</ContextMenu.Item>

Write Preview
Loading…
Cancel
Save