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

clean up dashboard Content component; heading and subheading props changed to header and description

Browse Source
pull/67/head
dperolio 3 years ago
parent 4dedf7b231
commit 6613ae4efa
No known key found for this signature in database
GPG Key ID: 3E9BBAA710D3DDCE
10 changed files with 85 additions and 134 deletions
Show Stats Download Patch File Download Diff File

14
src/core/api/settings/Settings.js
Unescape View File

@ -128,7 +128,7 @@ export default class Settings extends API {
render: props =>
<Layout>
<Content
heading='Settings'
header='Settings'
vz-plugin={Boolean(type === 'plugin') && addonId}
vz-theme={Boolean(type === 'theme') && addonId}
vz-plugin-section={Boolean(type === 'plugin') && 'settings'}
@ -213,7 +213,7 @@ export default class Settings extends API {
_registerBuiltinSection (props) {
try {
const addonId = getCaller();
const { heading, subheading, icon, render } = props;
const { header, description, icon, render } = props;
const builtin = vizality.manager.builtins.get(addonId);
builtin.sections.settings = props;
builtin.sections.settings.render = this.connectStores(addonId)(render);
@ -224,8 +224,8 @@ export default class Settings extends API {
render: props =>
<Layout>
<Content
heading={heading}
subheading={subheading}
header={header}
description={description}
icon={icon}
vz-builtin={addonId}
>
@ -257,15 +257,17 @@ export default class Settings extends API {
* )};
* ```
*/
useSetting (settingKey, defaultValue) {
useSetting (settingKey, defaultValue, addonId) {
try {
const settings = this._fluxProps();
const settings = this._fluxProps(addonId);
/**
* If it doesn't find any settings, just return.
*/
if (!settings) {
return;
}
const [ settingValue, setSettingValue ] = useState(settings.getSetting(settingKey, defaultValue));
/**
* Updates the setting value.

2
src/core/builtins/dashboard/pages/ErrorTest.jsx
Unescape View File

@ -4,7 +4,7 @@ import React, { memo } from 'react';
export default memo(() => {
return (
<Layout>
<Content heading='Error Test'>
<Content header='Error Test'>
<Section>
{new Error()}
</Section>

4
src/core/builtins/dashboard/pages/docs/components/Markdown.jsx
Unescape View File

@ -157,8 +157,8 @@ With a reference later in the document defining the URL location:
export default memo(() => {
return (
<Layout>
<Content heading='Components' subheading='I like components and stuff'>
<Section heading='Markdown' subheading='Testing markdown stuff.'>
<Content header='Components' description='I like components and stuff'>
<Section header='Markdown' description='Testing markdown stuff.'>
<Markdown source={preview} />
</Section>
</Content>

2
src/core/builtins/dashboard/pages/home/CTA.jsx
Unescape View File

@ -29,7 +29,7 @@ export default memo(() => {
/>
<div className='vz-dashboard-home-cta-content-header-wrapper'>
<h1 className='vz-dashboard-home-cta-content-header'>Welcome, {username}!</h1>
<h3 className='vz-dashboard-home-cta-content-subtext'>
<h3 className='vz-dashboard-home-cta-content-description'>
You've made the right choice. The power of customization is now at your fingertips. Check out the features below to learn how to harness your newfound power.
{!hasJoinedDiscord && ` Make sure you check out the Discord server, we'd love to have you!`}
</h3>

63
src/core/builtins/dashboard/routes/Routes.jsx
Unescape View File

@ -1,5 +1,6 @@
import { FormNotice, Anchor, Markdown as _Markdown } from '@vizality/components';
import { Content, Layout } from '@vizality/components/dashboard';
import { AddonsList } from '@vizality/components/addon';
import { Route, Switch, Redirect } from 'react-router';
import React, { memo } from 'react';
@ -13,8 +14,6 @@ import Home from '../pages/home/Home';
import Test2 from '../pages/Test2';
import Test from '../pages/Test';
import AddonList from '@vizality/builtins/addon-manager/components/addons/List';
export default memo(() => {
return (
<>
@ -33,52 +32,56 @@ export default memo(() => {
<Route path='/vizality/plugins' exact>
<Layout>
<Content
heading='Plugins'
subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
header='Plugins'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
icon='Plugin'
className='vz-addons-list-page-content'
>
<AddonList type='plugin' tab='installed' />
<AddonsList type='plugin' tab='installed' source={[ ...vizality.manager.plugins.values ]} />
</Content>
</Layout>
</Route>
<Route path='/vizality/plugins/discover' exact>
<Route path='/vizality/plugins/browse' exact>
<Layout>
<Content
heading='Plugins'
subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
header='Plugins'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
icon='Plugin'
className='vz-addons-list-page-content'
>
<AddonList type='plugin' tab='discover' />
<AddonsList type='plugin' tab='browse' source={[ ...vizality.manager.community.plugins.values() ]} />
</Content>
</Layout>
</Route>
<Route path='/vizality/themes' exact>
<Layout>
<Content
heading='Themes'
subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
header='Themes'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
icon='Theme'
className='vz-addons-list-page-content'
>
<AddonList type='theme' tab='installed' />
<AddonsList type='theme' tab='installed' source={[ ...vizality.manager.themes.values ]} />
</Content>
</Layout>
</Route>
<Route path='/vizality/themes/discover' exact>
<Route path='/vizality/themes/browse' exact>
<Layout>
<Content
heading='Themes'
subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
header='Themes'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
icon='Theme'
className='vz-addons-list-page-content'
>
<AddonList type='theme' tab='discover' />
<AddonsList type='theme' tab='browse' source={[ ...vizality.manager.community.themes.values() ]} />
</Content>
</Layout>
</Route>
<Route path='/vizality/development' exact>
<Layout>
<Content
heading='Development'
subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
header='Development'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
icon='UnknownUser'
className='vz-addon-screenshots'
>
@ -88,7 +91,7 @@ export default memo(() => {
</Route>
<Route path='/vizality/docs/components/screenshots' exact>
<Layout>
<Content heading='Screenshots' className='vz-addon-screenshots'>
<Content header='Screenshots' className='vz-addon-screenshots'>
<Screenshots />
</Content>
</Layout>
@ -107,7 +110,7 @@ export default memo(() => {
</Route>
<Route path='/vizality/docs/components/test' exact>
<Layout>
<Content heading='Table Testing'>
<Content header='Table Testing'>
<Test />
</Content>
</Layout>
@ -122,20 +125,22 @@ export default memo(() => {
<Route path='/vizality/changelog' exact>
<Layout>
<Content
heading='Changelog'
subheading={<>
header='Changelog'
description={<>
<_Markdown source={'All notable changes to this project will be documented in this file. This project attempts to loosely adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).'} />
<FormNotice
type={FormNotice.Types.PRIMARY}
body={[
<Anchor onClick={() => vizality.api.actions.invokeAction('OPEN_LATEST_CHANGELOG')}>
Click here
</Anchor>,
' to open the latest changelog.'
]}
body={
<>
<Anchor onClick={() => vizality.api.actions.invokeAction('OPEN_LATEST_CHANGELOG')}>
Click here
</Anchor>
{' to open the latest changelog.'}
</>
}
/>
</>}
icon='ClockReverse'
icon='MoreInfo'
>
<Changelog />
</Content>

72
src/core/builtins/dashboard/styles/parts/_content.scss
Unescape View File

@ -8,50 +8,8 @@
display: flex;
z-index: 1;
flex: 0 0 auto;
&-subtext {
margin-top: 15px;
font-weight: 300;
line-height: 1.4;
font-size: 18px;
}
&-background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
background: var(--background-tertiary);
// Individual Plugin/Theme page only
// background-image: url(https://ps.w.org/seo-by-rank-math/assets/banner-772x250.png?rev=2348086);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
overflow: hidden;
z-index: 0;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/osrwxIy.png);
background-repeat: repeat;
background-attachment: fixed;
opacity: .2;
}
// Individual Plugin/Theme page only
&::after {
// content: '';
position: absolute;
top: 0;
left: 0;
background: vz.color('black');
height: 100%;
width: 100%;
opacity: 0.4;
}
&-wrapper {
z-index: 1;
}
&-inner-wrapper {
display: flex;
@ -67,25 +25,11 @@
}
}
}
&.vz-hasBackground {
.vz-dashboard-content-header-inner-wrapper {
min-height: 200px;
position: relative;
padding: 40px;
box-sizing: border-box;
}
.vz-dashboard-content-header-wrapper {
margin: 0;
}
.vz-dashboard-content-header-icon-wrapper {
@include vz.size(60px);
position: relative;
}
.vz-dashboard-content-header-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&-description {
font-family: var(--font-primary);
margin-top: 15px;
font-weight: 500;
line-height: 1.4;
font-size: 18px;
}
}

4
src/core/builtins/quick-code/index.js
Unescape View File

@ -11,8 +11,8 @@ const { writeFile, readFile } = promises;
export default class QuickCode extends Builtin {
async start () {
vizality.api.settings._registerBuiltinSection({
heading: 'Quick Code',
subheading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.',
header: 'Quick Code',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.',
icon: 'Compose',
render: props => <QuickCodePage builtin={this} {...props} />
});

10
src/core/builtins/settings/index.js
Unescape View File

@ -9,17 +9,17 @@ import { Confirm } from '@vizality/components';
import { Builtin } from '@vizality/entities';
import { Messages } from '@vizality/i18n';
import _Settings from './components/Settings';
import SettingsPage from './components/Settings';
export default class Settings extends Builtin {
start () {
this.injectStyles('styles/main.scss');
vizality.api.settings._registerBuiltinSection({
heading: 'Settings',
subheading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.',
icon: 'Gear',
render: props => <_Settings {...props} />
header: 'General',
description: categories.general.description,
icon: categories.general.icon,
render: props => <SettingsPage {...props} builtin={this} />
});
vizality.api.actions.registerAction('CONFIRM_RESTART', () => this.confirmRestart());

4
src/core/builtins/updater/index.js
Unescape View File

@ -46,8 +46,8 @@ export default class Updater extends Builtin {
vizality.api.actions.registerAction('OPEN_LATEST_CHANGELOG', () => this.openLatestChangelog());
vizality.api.settings._registerBuiltinSection({
heading: 'Updater',
subheading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.',
header: 'Updater',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.',
icon: 'CloudDownload',
render: Settings
});

44
src/core/modules/components/dashboard/Content.jsx
Unescape View File

@ -1,22 +1,18 @@
/**
*
* @component
*/
import { Icon, Divider, Markdown } from '@vizality/components';
import { excludeProperties } from '@vizality/util/object';
import { Icon, Divider } from '@vizality/components';
import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import React, { memo } from 'react';
export default memo(props => {
const { icon, heading, subheading, className, children } = props;
/**
*
* @component
*/
export default memo(({ icon, header, description, separator = true, className, children, ...other }) => {
const { marginBottom20 } = getModule('marginBottom20');
const { headerSubtext } = getModule('headerSubtext');
const { content } = getModule('wrappedLayout');
const { h1 } = getModule('h1', 'h2', 'h3');
const { base } = getModule('base');
return (
<div
className={joinClassNames('vz-dashboard-content', className)}
@ -25,31 +21,35 @@ export default memo(props => {
* to send them to the content div when we use spread props below to allow for
* custom props/attributes.
*/
{...excludeProperties(props, 'children', 'icon', 'heading', 'subheading', 'className')}
{...other}
>
{heading &&
{header && (
<div className={joinClassNames('vz-dashboard-content-header-wrapper', marginBottom20)}>
<div className='vz-dashboard-content-header-inner-wrapper'>
{icon &&
{icon && (
<Icon
className='vz-dashboard-content-header-icon-wrapper'
iconClassName='vz-dashboard-content-header-icon'
name={icon}
size='100%'
/>
}
)}
<h1 className={joinClassNames('vz-dashboard-content-header', base, content)}>
{heading}
{header}
</h1>
</div>
{subheading && <>
<h4 className={joinClassNames('vz-dashboard-content-header-subtext', h1, headerSubtext)}>
{subheading}
</h4>
<Divider />
</>}
{description && (
<>
<h4 className={joinClassNames('vz-dashboard-content-description', h1, headerSubtext)}>
{description}
</h4>
{separator && (
<Divider />
)}
</>
)}
</div>
}
)}
{children}
</div>
);

Write Preview
Loading…
Cancel
Save