misc style updates, code cleanup, fixes, etc.

pull/67/head
dperolio 3 years ago
parent 5975cf7a85
commit 9380fc3f5e
No known key found for this signature in database
GPG Key ID: 3E9BBAA710D3DDCE

@ -1,9 +1,3 @@
/**
* Applies attributes to channel header buttons.
* @module HeaderButton
* @memberof Builtin.Attributes.Chat
*/
import { forceUpdateElement, getOwnerInstance } from '@vizality/util/react';
import { waitForElement } from '@vizality/util/dom';
import { toKebabCase } from '@vizality/util/string';
@ -13,6 +7,12 @@ import { Messages } from '@vizality/i18n';
export const labels = [ 'Chat', 'HeaderButton' ];
/**
* Applies attributes to channel header buttons.
* @module HeaderButton
* @memberof Builtin.Attributes.Chat
* @param {Addon} builtin The builtin's main class
*/
export default async builtin => {
const { iconWrapper, clickable, iconBadge } = getModule('iconWrapper', 'toolbar');
const instance = getOwnerInstance(await waitForElement(`.${iconWrapper}`));
@ -21,7 +21,6 @@ export default async builtin => {
if (!res.props?.children?.props?.className.includes(iconWrapper, clickable)) {
return res;
}
/**
* We're using the aria-label prop to identify the button, because there's nothing
* else we can use. The aria-label value changes based on the user's locale, so
@ -31,13 +30,11 @@ export default async builtin => {
if (!ariaLabel) {
return;
}
/**
* Try to match the aria-label to an i18n message string in order to get
* a value that works for all locales.
*/
let key = Object.keys(Messages).find(key => ariaLabel === Messages[key]);
let unread;
/**
* Check if it's the pinned messages button so we can add a [vz-unread] attribute
@ -64,27 +61,25 @@ export default async builtin => {
}
}
}
/**
* If there's still no key, just return.
*/
if (!key) {
return;
}
/**
* Manually set the attribute(s) to the ref.
*/
res.props.children.ref = e => {
res.props.children.ref = evt => {
try {
if (!e) {
if (!evt) {
return;
}
e.setAttribute('vz-button', toKebabCase(key));
evt.setAttribute('vz-button', toKebabCase(key));
if (unread === true) {
e.setAttribute('vz-unread', '');
evt.setAttribute('vz-unread', '');
} else {
e.removeAttribute('vz-unread');
evt.removeAttribute('vz-unread');
}
} catch (err) {
return builtin.error(builtin._labels.concat(labels), err);

@ -4,11 +4,12 @@
* @memberof Builtin.Enhancements.Components
*/
import { getModule, FluxDispatcher } from '@vizality/webpack';
import { findInReactTree } from '@vizality/util/react';
import { patch, unpatch } from '@vizality/patcher';
import { getModule } from '@vizality/webpack';
import { Regexes } from '@vizality/constants';
import { fetchUser } from '@discord/user';
import { Constants } from '@discord/util';
export const labels = [ 'Components', 'Anchor' ];
@ -23,49 +24,72 @@ export default builtin => {
patch('vz-attributes-anchors', Anchor, 'default', (_, res) => {
try {
const props = findInReactTree(res, r => r.className?.includes(anchor) && r.href);
if (!props) return;
if (!props) {
return;
}
/**
* Force Vizality route links open within the app.
*/
if (vizalityRegex.test(props.href)) {
const route = props.href?.replace(discordRegex, '');
props.onClick = e => {
e.preventDefault();
vizality.api.routes.navigateTo(route);
props.onClick = evt => {
try {
evt.preventDefault();
vizality.api.routes.navigateTo(route);
} catch (err) {
return builtin.error(builtin._labels.concat(labels), err);
}
};
}
/**
* Force Vizality protocol links open within the app.
*/
if (vizalityProtocolRegex.test(props.href)) {
const route = props.href?.replace(vizalityProtocolRegex, '');
props.onClick = e => {
e.preventDefault();
vizality.api.routes.navigateTo(`/vizality/${route}`);
props.onClick = evt => {
try {
evt.preventDefault();
vizality.api.routes.navigateTo(`/vizality/${route}`);
} catch (err) {
return builtin.error(builtin._labels.concat(labels), err);
}
};
}
/*
* Force user links open in user profile modals within the app.
*/
if (userRegex.test(props.href)) {
const userId = props.href?.replace(userRegex, '');
props.onClick = e => {
e.preventDefault();
if (!userId) return;
fetchUser(userId)
.then(() => getModule('open', 'fetchProfile')?.open(userId))
.catch(() => vizality.api.notifications.sendToast({
id: 'VIZALITY_USER_NOT_FOUND',
header: 'User Not Found',
type: 'User Not Found',
content: 'That user was unable to be located.',
icon: 'PersonRemove'
}));
props.onClick = async evt => {
try {
evt.preventDefault();
if (!userId) {
return;
}
const user = await fetchUser(userId);
if (!user) {
return vizality.api.notifications.sendToast({
id: 'VIZALITY_USER_NOT_FOUND',
header: 'User Not Found',
content: 'That user was unable to be located.',
icon: 'PersonRemove'
});
}
return FluxDispatcher.dirtyDispatch({
type: Constants.ActionTypes.USER_PROFILE_MODAL_OPEN,
userId
});
} catch (err) {
return builtin.error(builtin._labels.concat(labels), err);
}
};
}
} catch (err) {
return builtin.error(builtin._labels.concat(labels), err);
}
});
return () => unpatch('vz-attributes-anchors');
};

@ -1,9 +1,8 @@
// const { Table } = require('@vizality/components');
import React, { memo, useState, useEffect } from 'react';
import { UserProfile, UserPopout, Icon, KeyboardShortcut, KeybindRecorder, Avatar, Text, HeaderBarContainer, CarouselWithPreview, ApplicationCommandDiscoverySectionList, ApplicationStoreListingCarousel, FormNotice, Notice } from '@vizality/components';
import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Avatar, Text, HeaderBarContainer, CarouselWithPreview, ApplicationCommandDiscoverySectionList, ApplicationStoreListingCarousel, FormNotice, Notice, NumberBadge, TextBadge, IconBadge, AsyncComponent } from '@vizality/components';
import { getModuleByDisplayName, getModule } from '@vizality/webpack';
import { warn } from '../../../modules/util/Logger';
const TransitionGroup = getModuleByDisplayName('TransitionGroup');
const SlideIn = getModuleByDisplayName('SlideIn');
@ -20,8 +19,8 @@ const KeybindEntry = (() => {
if (!keybind) throw 'Failed to render fake Keybind!';
keybindentry = keybind.props?.children?.type;
if (!keybindentry) throw 'Failed to get KeybindEntry component!';
} catch (error) {
warn({ labels: [ 'Test' ], message: error });
} catch (err) {
console.err(err);
keybindentry = () => null;
}
@ -31,6 +30,15 @@ const KeybindEntry = (() => {
export default memo(() => {
return (
<>
<SearchBar query='bob' size={SearchBar.Sizes.SMALL} />
<SearchBar query='bob' size={SearchBar.Sizes.MEDIUM} />
<SearchBar query='bob' size={SearchBar.Sizes.LARGE} />
<SearchBar query='bob' disabled />
<SearchBar query='bob' isLoading />
{/* "icon", "color", "shape", "disableColor", "className" */}
<NumberBadge count='40' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<IconBadge icon={() => <Icon name='Activity' />} color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<TextBadge text='Coolio' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
<Notice color={Notice.Colors.DANGER} />
<UserPopout user={getCurrentUser()} />
<UserProfile user={getCurrentUser()} />

@ -41,14 +41,14 @@ export default memo(() => {
header='Discover Plugins'
description='Explore our vast collection of official plugins. Plugins can add just about any new feature you can imagine to Discord.'
buttonText='Browse Plugins'
path='/vizality/plugins/discover'
path='/vizality/plugins/browse'
/>
<Card
icon='Theme'
header='Discover Themes'
description='Explore our vast collection of official themes. Themes can change just small portions of the app or they can be full-blown redesigns.'
buttonText='Browse Themes'
path='/vizality/themes/discover'
path='/vizality/themes/browse'
/>
<Card
icon='UnknownUser'

@ -15,7 +15,7 @@
display: flex;
box-sizing: border-box;
padding: 20px 40px;
height: 100%;
min-height: 100%;
> div {
display: flex;
flex-flow: column;

@ -59,7 +59,7 @@
display: flex;
align-items: center;
justify-content: center;
animation: fadeShortSlideInFromTop .3s forwards;
animation: fadeShortSlideInFromTop .15s forwards;
&-icon-wrapper {
&.vz-icon-wrapper {
width: 200px;
@ -91,13 +91,13 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
stroke-width: 5px;
// stroke-width: 5px;
color: vz.color('white');
stroke: vz.color('white');
// stroke: vz.color('white');
path {
stroke-dasharray: 150;
animation: strokeSVG 0.75s ease-in forwards, fillSVG 0.25s 0.5s ease-in forwards;
stroke-width: 5;
// stroke-dasharray: 150;
// animation: strokeSVG 0.3s ease-in forwards, fillSVG 0.1s 0.2s ease-in forwards;
// stroke-width: 5;
}
}
&-header {
@ -105,7 +105,7 @@
font-weight: 700;
color: vz.color('white');
}
&-subtext {
&-description {
font-size: 20px;
line-height: 1.2;
margin-top: 10px;

@ -5,6 +5,7 @@
}
.vz-dashboard-sidebar {
$base: &;
width: var(--vz-dashboard-sidebar-width);
.vz-error-boundary {
height: 100%;
@ -13,49 +14,38 @@
background: var(--background-secondary-alt);
}
}
.vz-dashboard-sidebar-item-icon-wrapper {
@include vz.size(32px);
}
.vz-dashboard-sidebar-item {
&-item {
&-icon-wrapper {
@include vz.size(32px);
}
&.disabled {
.vz-dashboard-sidebar-item-icon-wrapper,
.vz-dashboard-sidebar-item-icon-wrapper + div {
#{$base}-item-icon-wrapper,
#{$base}-item-icon-wrapper + div {
opacity: .5!important;
cursor: not-allowed;
}
.vz-dashboard-sidebar-item-inner {
#{$base}-item-inner {
cursor: not-allowed;
}
&:hover {
color: var(--header-secondary);
.vz-dashboard-sidebar-item-inner {
#{$base}-item-inner {
background: none;
}
}
}
}
.vz-dashboard-sidebar-separator {
&-separator {
@include vz.size(100%, 1px);
margin: 10px 0 10px 10px;
background: var(--background-modifier-accent);
}
.vz-dashboard-sidebar-auxillary-icon-wrapper {
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: var(--background-modifier-hover);
}
}
.vz-dashboard-sidebar-header {
&-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.vz-dashboard-sidebar-collapser {
&-collapser {
padding: 10px;
display: flex;
align-items: center;
@ -67,9 +57,9 @@
color: var(--header-primary);
}
}
&[vz-collapsed] {
&.poop {
--vz-dashboard-sidebar-width: 60px;
.vz-dashboard-sidebar-collapser {
#{$base}-collapser {
transform: rotate3d(0, 0, 1, 270deg);
}
.discoverHeader-Ijkm_M {
@ -122,4 +112,7 @@
}
}
}
.panels-j1Uci_ {
width: var(--vz-dashboard-sidebar-width);
}
}

@ -1,7 +1,3 @@
/**
*
*/
import { Button, Icon, Flex, LazyImage, ContextMenu, Markdown } from '@vizality/components';
import { getModule, contextMenu } from '@vizality/webpack';
import { joinClassNames } from '@vizality/util/dom';
@ -150,10 +146,12 @@ export default memo(({ toast }) => {
look: 'link',
onClick: evt => evt.shiftKey ? vizality.api.notifications.closeAllActiveToasts() : vizality.api.notifications.closeToast(toast.id)
};
/**
* If there are button(s) already, insert a close button into the beginning
* of the array.
*/
if (toast.buttons?.length) {
/**
* Let's give the close button the same size as the last button specified.

@ -1,8 +1,4 @@
/**
*
*/
import { getOwnerInstance, forceUpdateElement } from '@vizality/util/react';
import { getOwnerInstance, forceUpdateElement, findInReactTree } from '@vizality/util/react';
import { getModuleByDisplayName, getModule } from '@vizality/webpack';
import { waitForElement } from '@vizality/util/dom';
import { patch, unpatch } from '@vizality/patcher';
@ -19,15 +15,13 @@ import ToastContainer from './components/ToastContainer';
export default class Notifications extends Builtin {
async start () {
document.querySelector('.Toastify')?.remove();
this.injectStyles('styles/main.scss');
const injectedFile = join(Directories.SRC, '__injected.txt');
await this._patchNotices();
await this._patchToasts();
if (existsSync(injectedFile)) {
this._welcomeNewUser();
if (window.GLOBAL_ENV?.RELEASE_CHANNEL !== 'stable') {
this._unsupportedBuild();
}
unlink(injectedFile);
}
}
@ -47,9 +41,8 @@ export default class Notifications extends Builtin {
const instance = getOwnerInstance(await waitForElement(`.${base.split(' ')[0]}`));
patch('vz-notices-notices', instance?.props?.children, 'type', (_, res) => {
try {
res.props?.children[1]?.props?.children?.unshift(
<NoticeContainer />
);
const { children } = findInReactTree(res, ({ className }) => className === base);
children.unshift(<NoticeContainer />);
} catch (err) {
return this.error(this._labels.concat('_patchNotices'), err);
}
@ -86,18 +79,4 @@ export default class Notifications extends Builtin {
return this.error(this._labels.concat('_welcomeNewUser'), err);
}
}
/**
*
*/
_unsupportedBuild () {
try {
return vizality.api.notifications.sendNotice({
color: 'orange',
message: `Vizality does not support the ${window.GLOBAL_ENV?.RELEASE_CHANNEL} release of Discord. Please use Stable for best results.`
});
} catch (err) {
return this.error(this._labels.concat('_unsupportedBuild'), err);
}
}
}

@ -11,7 +11,7 @@ export default memo(props => {
handleStickyChange(state, element);
};
const observe = () => {
useEffect(() => {
const observer = new IntersectionObserver(([ entry ]) => {
if (entry.intersectionRatio < 1) {
entry.target.setAttribute('vz-stuck', '');
@ -23,12 +23,7 @@ export default memo(props => {
}, { threshold: [ 1 ] });
observer.observe(sticky.current);
return () => observer.unobserve(sticky.current);
};
useEffect(() => {
observe();
}, []);
return (

@ -6,7 +6,7 @@ import { contextMenu } from '@vizality/webpack';
import { error } from '@vizality/util/logger';
import { Messages } from '@vizality/i18n';
import { ContextMenu, LazyImage, Button, Tooltip } from '..';
import { ContextMenu, LazyImage, Button, Tooltip, TextBadge } from '..';
import { AddonContextMenu } from '../addon';
const { closeContextMenu } = contextMenu;
@ -205,7 +205,7 @@ export default memo(() => {
/>
<ContextMenu.Item
id='appearance'
label='Appearance'
label={() => <>Appearance<TextBadge text='SOON™' /></>}
action={() => vizality.api.routes.navigateTo('settings/appearance')}
disabled
/>

@ -2,6 +2,7 @@
.vz-component-preview {
$base: &;
@include vz.size(100%);
// To counteract the tabs padding below
margin-top: -40px;
&-tabs {
@ -81,7 +82,6 @@
flex: 1;
display: flex;
justify-content: space-around;
animation: fadeShortSlideInFromBottom 0.15s forwards;
&-loading {
@include vz.size(100%);
display: flex;

@ -1,3 +1,5 @@
@use '@vizality' as vz;
.vz-markdown {
$base: &;
&-header {
@ -159,4 +161,10 @@
margin-top: 0;
margin-bottom: 16px;
}
&-content-loading {
@include vz.size(100%);
display: flex;
justify-content: center;
align-items: center;
}
}

Loading…
Cancel
Save