Switch all other buttons to component
This commit is contained in:
parent
9f950c10f0
commit
0df0093e6b
|
@ -96,6 +96,9 @@
|
||||||
.bd-button .bd-button-content {
|
.bd-button .bd-button-content {
|
||||||
--button--underline-color: transparent;
|
--button--underline-color: transparent;
|
||||||
background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
|
background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-button:disabled .bd-button-content {
|
.bd-button:disabled .bd-button-content {
|
||||||
|
@ -176,7 +179,7 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
/* padding: 0; */
|
||||||
margin: 0
|
margin: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,9 +35,15 @@
|
||||||
top: 3px;
|
top: 3px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-keybind-controls .bd-keybind-record {
|
||||||
|
padding: 4px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-keybind-clear {
|
.bd-keybind-clear {
|
||||||
|
margin-left: 5px;
|
||||||
background: none!important;
|
background: none!important;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
padding-right: 4px!important;
|
padding-right: 4px!important;
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from "@modules/react";
|
||||||
import DiscordModules from "@modules/discordmodules";
|
import DiscordModules from "@modules/discordmodules";
|
||||||
import Settings from "@modules/settingsmanager";
|
import Settings from "@modules/settingsmanager";
|
||||||
|
|
||||||
|
import Button from "../base/button";
|
||||||
import Checkbox from "./checkbox";
|
import Checkbox from "./checkbox";
|
||||||
|
|
||||||
const {useState, useCallback, useEffect, forwardRef, useMemo, useImperativeHandle} = React;
|
const {useState, useCallback, useEffect, forwardRef, useMemo, useImperativeHandle} = React;
|
||||||
|
@ -13,7 +14,7 @@ const languages = ["abap", "abc", "actionscript", "ada", "apache_conf", "asciido
|
||||||
function makeButton(button, value) {
|
function makeButton(button, value) {
|
||||||
return <DiscordModules.Tooltip color="primary" position="top" text={button.tooltip}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={button.tooltip}>
|
||||||
{props => {
|
{props => {
|
||||||
return <button {...props} className="btn btn-primary" onClick={(event) => {button.onClick(event, value?.());}}>{button.label}</button>;
|
return <Button {...props} size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={(event) => {button.onClick(event, value?.());}}>{button.label}</Button>;
|
||||||
}}
|
}}
|
||||||
</DiscordModules.Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@ import ReactDOM from "@modules/reactdom";
|
||||||
import Strings from "@modules/strings";
|
import Strings from "@modules/strings";
|
||||||
import Settings from "@modules/settingsmanager";
|
import Settings from "@modules/settingsmanager";
|
||||||
import Events from "@modules/emitter";
|
import Events from "@modules/emitter";
|
||||||
import DiscordModules from "@modules/discordmodules";
|
// import DiscordModules from "@modules/discordmodules";
|
||||||
import WebpackModules from "@modules/webpackmodules";
|
import WebpackModules from "@modules/webpackmodules";
|
||||||
import DOMManager from "@modules/dommanager";
|
import DOMManager from "@modules/dommanager";
|
||||||
|
|
||||||
|
@ -16,12 +16,12 @@ import AddonErrorModal from "./modals/addonerrormodal";
|
||||||
import ErrorBoundary from "./errorboundary";
|
import ErrorBoundary from "./errorboundary";
|
||||||
import TextElement from "./base/text";
|
import TextElement from "./base/text";
|
||||||
import ModalRoot from "./modals/root";
|
import ModalRoot from "./modals/root";
|
||||||
import ModalHeader from "./modals/header";
|
// import ModalHeader from "./modals/header";
|
||||||
import ModalContent from "./modals/content";
|
// import ModalContent from "./modals/content";
|
||||||
import ModalFooter from "./modals/footer";
|
// import ModalFooter from "./modals/footer";
|
||||||
|
|
||||||
import ConfirmationModal from "./modals/confirmation";
|
import ConfirmationModal from "./modals/confirmation";
|
||||||
import Button from "./base/button";
|
// import Button from "./base/button";
|
||||||
import CustomMarkdown from "./base/markdown";
|
import CustomMarkdown from "./base/markdown";
|
||||||
import ChangelogModal from "./modals/changelog";
|
import ChangelogModal from "./modals/changelog";
|
||||||
import ModalStack, {generateKey} from "./modals/stack";
|
import ModalStack, {generateKey} from "./modals/stack";
|
||||||
|
@ -270,7 +270,7 @@ export default class Modals {
|
||||||
confirmText: Strings.Modals.done
|
confirmText: Strings.Modals.done
|
||||||
};
|
};
|
||||||
|
|
||||||
return this.ModalActions.openModal(props => {
|
return this.openModal(props => {
|
||||||
return React.createElement(ErrorBoundary, null, React.createElement(ConfirmationModal, Object.assign(options, props), child));
|
return React.createElement(ErrorBoundary, null, React.createElement(ConfirmationModal, Object.assign(options, props), child));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -285,6 +285,7 @@ export default class Modals {
|
||||||
}
|
}
|
||||||
|
|
||||||
static openModal(render, options = {}) {
|
static openModal(render, options = {}) {
|
||||||
|
if (typeof(this.ModalActions.openModal) === "function") return this.ModalActions.openModal(render);
|
||||||
if (!this.hasInitialized) this.makeStack();
|
if (!this.hasInitialized) this.makeStack();
|
||||||
options.modalKey = generateKey(options.modalKey);
|
options.modalKey = generateKey(options.modalKey);
|
||||||
Events.emit("open-modal", render, options);
|
Events.emit("open-modal", render, options);
|
||||||
|
|
|
@ -4,6 +4,7 @@ import Events from "@modules/emitter";
|
||||||
import DataStore from "@modules/datastore";
|
import DataStore from "@modules/datastore";
|
||||||
import DiscordModules from "@modules/discordmodules";
|
import DiscordModules from "@modules/discordmodules";
|
||||||
|
|
||||||
|
import Button from "../base/button";
|
||||||
import SettingsTitle from "./title";
|
import SettingsTitle from "./title";
|
||||||
import AddonCard from "./addoncard";
|
import AddonCard from "./addoncard";
|
||||||
import Dropdown from "./components/dropdown";
|
import Dropdown from "./components/dropdown";
|
||||||
|
@ -45,14 +46,14 @@ function openFolder(folder) {
|
||||||
function blankslate(type, onClick) {
|
function blankslate(type, onClick) {
|
||||||
const message = Strings.Addons.blankSlateMessage.format({link: `https://betterdiscord.app/${type}s`, type}).toString();
|
const message = Strings.Addons.blankSlateMessage.format({link: `https://betterdiscord.app/${type}s`, type}).toString();
|
||||||
return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type})} message={message}>
|
return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type})} message={message}>
|
||||||
<button className="bd-button" onClick={onClick}>{Strings.Addons.openFolder.format({type})}</button>
|
<Button size={Button.Sizes.LARGE} onClick={onClick}>{Strings.Addons.openFolder.format({type})}</Button>
|
||||||
</EmptyImage>;
|
</EmptyImage>;
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeControlButton(title, children, action, selected = false) {
|
function makeControlButton(title, children, action, selected = false) {
|
||||||
return <DiscordModules.Tooltip color="primary" position="top" text={title}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={title}>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return <button {...props} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</button>;
|
return <Button {...props} size={Button.Sizes.NONE} look={Button.Looks.BLANK} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</Button>;
|
||||||
}}
|
}}
|
||||||
</DiscordModules.Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from "@modules/react";
|
import React from "@modules/react";
|
||||||
|
|
||||||
|
import Button from "../../base/button";
|
||||||
import Keyboard from "@ui/icons/keyboard";
|
import Keyboard from "@ui/icons/keyboard";
|
||||||
import Close from "@ui/icons/close";
|
import Close from "@ui/icons/close";
|
||||||
|
|
||||||
|
@ -45,8 +46,8 @@ export default function Keybind({value: initialValue, onChange, max = 2, clearab
|
||||||
return <div className={"bd-keybind-wrap" + (state.isRecording ? " recording" : "")} onClick={onClick}>
|
return <div className={"bd-keybind-wrap" + (state.isRecording ? " recording" : "")} onClick={onClick}>
|
||||||
<input readOnly={true} type="text" className="bd-keybind-input" value={displayValue} />
|
<input readOnly={true} type="text" className="bd-keybind-input" value={displayValue} />
|
||||||
<div className="bd-keybind-controls">
|
<div className="bd-keybind-controls">
|
||||||
<button className={"bd-button bd-keybind-record" + (state.isRecording ? " bd-button-danger" : "")}><Keyboard size="24px" /></button>
|
<Button size={Button.Sizes.ICON} look={Button.Looks.FILLED} color={state.isRecording ? Button.Colors.RED : Button.Colors.BRAND} className="bd-keybind-record" onClick={onClick}><Keyboard size="24px" /></Button>
|
||||||
{clearable && <button onClick={clearKeybind} className="bd-button bd-keybind-clear"><Close size="24px" /></button>}
|
{clearable && <Button size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={clearKeybind} className="bd-keybind-clear"><Close size="24px" /></Button>}
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
|
@ -4,6 +4,7 @@ import React from "@modules/react";
|
||||||
import Strings from "@modules/strings";
|
import Strings from "@modules/strings";
|
||||||
import Events from "@modules/emitter";
|
import Events from "@modules/emitter";
|
||||||
|
|
||||||
|
import Button from "./base/button";
|
||||||
import Drawer from "./settings/drawer";
|
import Drawer from "./settings/drawer";
|
||||||
import SettingItem from "./settings/components/item";
|
import SettingItem from "./settings/components/item";
|
||||||
import SettingsTitle from "./settings/title";
|
import SettingsTitle from "./settings/title";
|
||||||
|
@ -17,7 +18,7 @@ function CoreUpdaterPanel({hasUpdate, remoteVersion, update}) {
|
||||||
return <Drawer name="BetterDiscord" collapsible={true}>
|
return <Drawer name="BetterDiscord" collapsible={true}>
|
||||||
<SettingItem name={`Core v${Config.version}`} note={hasUpdate ? Strings.Updater.versionAvailable.format({version: remoteVersion}) : Strings.Updater.noUpdatesAvailable} inline={true} id={"core-updater"}>
|
<SettingItem name={`Core v${Config.version}`} note={hasUpdate ? Strings.Updater.versionAvailable.format({version: remoteVersion}) : Strings.Updater.noUpdatesAvailable} inline={true} id={"core-updater"}>
|
||||||
{!hasUpdate && <div className="bd-filled-checkmark"><Checkmark /></div>}
|
{!hasUpdate && <div className="bd-filled-checkmark"><Checkmark /></div>}
|
||||||
{hasUpdate && <button className="bd-button" onClick={update}>{Strings.Updater.updateButton}</button>}
|
{hasUpdate && <Button size={Button.Sizes.SMALL} onClick={update}>{Strings.Updater.updateButton}</Button>}
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</Drawer>;
|
</Drawer>;
|
||||||
}
|
}
|
||||||
|
@ -37,7 +38,7 @@ function AddonUpdaterPanel({pending, type, updater, update, updateAll}) {
|
||||||
const info = updater.cache[f];
|
const info = updater.cache[f];
|
||||||
const addon = updater.manager.addonList.find(a => a.filename === f);
|
const addon = updater.manager.addonList.find(a => a.filename === f);
|
||||||
return <SettingItem name={`${addon.name} v${addon.version}`} note={Strings.Updater.versionAvailable.format({version: info.version})} inline={true} id={addon.name}>
|
return <SettingItem name={`${addon.name} v${addon.version}`} note={Strings.Updater.versionAvailable.format({version: info.version})} inline={true} id={addon.name}>
|
||||||
<button className="bd-button" onClick={() => update(type, f)}>{Strings.Updater.updateButton}</button>
|
<Button size={Button.Sizes.SMALL} onClick={() => update(type, f)}>{Strings.Updater.updateButton}</Button>
|
||||||
</SettingItem>;
|
</SettingItem>;
|
||||||
})}
|
})}
|
||||||
</Drawer>;
|
</Drawer>;
|
||||||
|
|
Loading…
Reference in New Issue