Fixes minor UI issues (#496)
* Minimal mode fixes/improvements, fix addon list names wrapping, improvements to secondary card text. * bd-addon-card minimal mode fix * fix a blankstate typo * move noresults to it's own file, add notes for utilclasses, * css cleanup, remove pointless feature, changelog stuff * typo in changelog * editor autoresize with css * forgot to scale that properly * linter issues * add support for inline codeblocks in changelog and card desc * forgot something in the editor * this looks better as tertiary * make bd-button-success consistent, add more button states * change coloring on bd-meta * fix icon in light mode * linter
This commit is contained in:
Tropical
GitHub
parent
91c765b853
commit
db84e73f50
|
|
@ -44,10 +44,6 @@
|
|||
"name": "Minimaler Modus",
|
||||
"note": "Verbirgt Elemente und reduziert die Größe von elementen."
|
||||
},
|
||||
"hideChannels": {
|
||||
"name": "Kanäle verbergen",
|
||||
"note": "Verbirgt Kanäle, wenn \"Minimaler Modus\" aktiviert ist."
|
||||
},
|
||||
"darkMode": {
|
||||
"name": "Dunkelmodus",
|
||||
"note": "Aktivert einen noch dunkleren Modus in Discord."
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
"name": "24-Hour Timestamps",
|
||||
"note": "Converts 12-hour timestamps to 24-hour format"
|
||||
},
|
||||
"hideChannels": {
|
||||
"name": "Hide Channels",
|
||||
"note": "Hides channels when in minimal mode"
|
||||
},
|
||||
"darkMode": {
|
||||
"name": "Dark Mode",
|
||||
"note": "Make certain elements dark by default"
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
"name": "コンパクトモード",
|
||||
"note": "表示をコンパクトにします。"
|
||||
},
|
||||
"hideChannels": {
|
||||
"name": "チャンネルリストを非表示",
|
||||
"note": "コンパクトモードのときは、チャンネルリストを表示しません"
|
||||
},
|
||||
"darkMode": {
|
||||
"name": "ダークモード",
|
||||
"note": "ダークモードを有効にします"
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
"name": "Minimalt Läge",
|
||||
"note": "Gömmer och förminskar komponenter"
|
||||
},
|
||||
"hideChannels": {
|
||||
"name": "Göm Kanaler",
|
||||
"note": "Gömmer kanaler när minimalt läge är aktiverat"
|
||||
},
|
||||
"darkMode": {
|
||||
"name": "Mörkt Läge",
|
||||
"note": "Gör vissa komponenter mörka"
|
||||
|
|
|
|||
|
|
@ -4,32 +4,12 @@ export default new class MinimalMode extends Builtin {
|
|||
get name() {return "MinimalMode";}
|
||||
get category() {return "appearance";}
|
||||
get id() {return "minimalMode";}
|
||||
get hideChannelsID() {return "hideChannels";}
|
||||
get hideChannels() {return this.get(this.hideChannelsID);}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.enableHideChannels = this.enableHideChannels.bind(this);
|
||||
this.disableHideChannels = this.disableHideChannels.bind(this);
|
||||
}
|
||||
|
||||
enabled() {
|
||||
document.body.classList.add("bd-minimal");
|
||||
if (this.hideChannels) this.enableHideChannels();
|
||||
this.hideChannelCancel = this.registerSetting(this.hideChannelsID, this.enableHideChannels, this.disableHideChannels);
|
||||
}
|
||||
|
||||
disabled() {
|
||||
document.body.classList.remove("bd-minimal");
|
||||
if (this.hideChannels) this.disableHideChannels();
|
||||
if (this.hideChannelCancel) this.hideChannelCancel();
|
||||
}
|
||||
|
||||
enableHideChannels() {
|
||||
document.body.classList.add("bd-minimal-chan");
|
||||
}
|
||||
|
||||
disableHideChannels() {
|
||||
document.body.classList.remove("bd-minimal-chan");
|
||||
}
|
||||
};
|
||||
|
|
@ -1,20 +1,19 @@
|
|||
export default {
|
||||
video: "https://i.zackrauen.com/EEM6Nor0XW.mp4",
|
||||
poster: "https://i.imgur.com/tNGALts.jpeg",
|
||||
video: "https://cdn.discordapp.com/attachments/769669826120777739/777059779368976394/b0cs2x.mp4",
|
||||
poster: "https://i.imgur.com/P50xFON.png",
|
||||
description: "The rewrite you didn't even know about is finally here.",
|
||||
changes: [
|
||||
{
|
||||
title: "What's New?",
|
||||
items: [
|
||||
"**Everything** is entirely rewritten, for better or worse.",
|
||||
"**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
|
||||
"**Floating editors** for both custom css and plugins/themes are now available. (See video above)",
|
||||
"**Ace**, the editor from the previous version, has been replaced with **Monaco** which is the editor used in VSCode.",
|
||||
"**Emotes and Custom CSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
|
||||
"**Floating editors** for both custom css and plugins/themes are now available.",
|
||||
"**Monaco** is now used as the main CSS editor, in place of Ace.",
|
||||
"**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
|
||||
"**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
|
||||
"**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)",
|
||||
"**Public servers** got a new makeover thanks to some design help from Tropical and Gibbu!",
|
||||
"We added a setting to **hide the Gif Picker and the Nitro Gift Picker** in the textarea."
|
||||
"We added settings to hide the **Gif Picker** and the **Nitro Gift** buttons in the textarea."
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -26,16 +25,17 @@ export default {
|
|||
"**General performance** improvements throughout the app, from startup to emotes to addons.",
|
||||
"**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.",
|
||||
"**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!",
|
||||
"**Blankslates** have been added all over for that added UX."
|
||||
"**Blankslates** have been added all over for that added UX.",
|
||||
"**Several unused UI features** have been removed for a more performant and usable experience.",
|
||||
"**Debugger Hotkey** is now a built-in feature!"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Fixes",
|
||||
type: "fixed",
|
||||
items: [
|
||||
"There are a lot of little issues that this rewrite fixes.",
|
||||
"I forgot to write them down",
|
||||
"But I'm sure many more will be found soon"
|
||||
"**Minimal mode** has been redesigned from the ground up and now works as intended.",
|
||||
"**Emote menus** are fixed and now use React Patching to properly integrate into the new Emoji Picker. (Thanks Strencher#1044!)"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ export default [
|
|||
{type: "switch", id: "hideGIFButton", value: false},
|
||||
{type: "switch", id: "voiceMode", value: false},
|
||||
{type: "switch", id: "minimalMode", value: false},
|
||||
{type: "switch", id: "hideChannels", value: false, enableWith: "minimalMode"},
|
||||
{type: "switch", id: "darkMode", value: false},
|
||||
{type: "switch", id: "coloredText", value: false}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@ export default {
|
|||
name: "24-Hour Timestamps",
|
||||
note: "Converts 12-hour timestamps to 24-hour format"
|
||||
},
|
||||
hideChannels: {
|
||||
name: "Hide Channels",
|
||||
note: "Hides channels when in minimal mode"
|
||||
},
|
||||
darkMode: {
|
||||
name: "Dark Mode",
|
||||
note: "Make certain elements dark by default"
|
||||
|
|
@ -231,7 +227,7 @@ export default {
|
|||
metaNotFound: "META was not found.",
|
||||
compileError: "Could not be compiled.",
|
||||
wasUnloaded: "{{name}} was unloaded.",
|
||||
blankSlateHeader: "You don't have any {{type}}!",
|
||||
blankSlateHeader: "You don't have any {{type}}s!",
|
||||
blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder."
|
||||
},
|
||||
CustomCSS: {
|
||||
|
|
|
|||
|
|
@ -151,4 +151,23 @@ export default new class ComponentPatcher {
|
|||
|
||||
};
|
||||
|
||||
// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
|
||||
// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
|
||||
|
||||
// Tropical's notes
|
||||
|
||||
/*
|
||||
html [maximized | bd]
|
||||
.iconWrapper-2OrFZ1 [type]
|
||||
.sidebar-2K8pFh [guild-id]
|
||||
.wrapper-2jXpOf [voice | text | announcement | store | private | nsfw]
|
||||
.chat-3bRxxu [channnel | guild-id]
|
||||
.listItem-2P_4kh [type | state]
|
||||
.privateChannels-1nO12o [library-hidden]
|
||||
.member-3-YXUe [user-id]
|
||||
.message-2qnXI6 [type | author-id | group-end]
|
||||
.wrapper-3t9DeA [user-id | status]
|
||||
.userPopout-3XzG_A [state | user-id]
|
||||
.root-SR8cQa [state | user-id]
|
||||
.contentRegion-3nDuYy [settings-page]
|
||||
.item-PXvHYJ [settings-page]
|
||||
*/
|
||||
|
|
@ -59,7 +59,7 @@ export default new class DataStore {
|
|||
const oldSettings = channelData.settings;
|
||||
const newSettings = {
|
||||
general: {publicServers: oldSettings["bda-gs-1"], voiceDisconnect: oldSettings["bda-dc-0"], classNormalizer: oldSettings["fork-ps-4"], showToasts: oldSettings["fork-ps-2"]},
|
||||
appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], hideChannels: oldSettings["bda-gs-3"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
|
||||
appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
|
||||
addons: {addonErrors: oldSettings["fork-ps-1"], autoReload: oldSettings["fork-ps-5"]},
|
||||
developer: {debuggerHotkey: oldSettings["bda-gs-8"], copySelector: oldSettings["fork-dm-1"], reactDevTools: oldSettings.reactDevTools}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
.bd-empty-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--text-normal);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.bd-empty-results-text {
|
||||
width: 280px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -43,45 +43,13 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.editor,
|
||||
.ace_editor {
|
||||
.editor {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 250px);
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bd-monokai .editor .ace_gutter {
|
||||
background: var(--background-secondary-alt);
|
||||
color: var(--header-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bd-monokai .ace_editor {
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.bd-monokai .ace_line {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.editor-wrapper .bd-monokai .ace_cursor {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.editor-wrapper .bd-monokai .ace_gutter-active-line {
|
||||
background: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.editor-wrapper .bd-monokai .ace_marker-layer .ace_active-line {
|
||||
background: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.editor-wrapper .bd-monokai .ace_marker-layer .ace_selection {
|
||||
background: #3e82e5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -102,45 +70,31 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Ace Editor Settings */
|
||||
#ace_settingsmenu_container {
|
||||
background: rgba(0, 0, 0, 0.7) !important; /* stylelint-disable-line important */
|
||||
.monaco-editor:not(.rename-box),
|
||||
.monaco-editor .overflow-guard,
|
||||
.monaco-editor .editor-scrollable,
|
||||
.monaco-editor .minimap-shadow-visible,
|
||||
.monaco-editor .decorationsOverviewRuler {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
body #ace_settingsmenu {
|
||||
padding-top: 35px;
|
||||
.monaco-editor:not(.rename-box),
|
||||
.monaco-editor .overflow-guard,
|
||||
.monaco-editor .overlayWidgets,
|
||||
#bd-customcss-editor > div > .overflow-guard > div:nth-child(3) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body .ace_closeButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
z-index: 10000;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
.monaco-editor .minimap {
|
||||
right: 14px;
|
||||
left: unset !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
body .ace_closeButton::before {
|
||||
content: "✖";
|
||||
color: #36393f;
|
||||
.monaco-editor .editor-scrollable {
|
||||
width: calc(100% - 64px) !important;
|
||||
}
|
||||
|
||||
body .ace_closeButton:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
/* editor help text */
|
||||
#bd-editor-controls .help-text {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#bd-editor-controls .help-text .inline {
|
||||
background: #2f3129;
|
||||
padding: 0.2em;
|
||||
margin: -0.2em 0;
|
||||
border-radius: 3px;
|
||||
.monaco-editor .view-overlays .current-line {
|
||||
width: 1e+06px !important;
|
||||
}
|
||||
|
|
@ -126,22 +126,4 @@
|
|||
.bd-dark .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 {
|
||||
background: #2f3136;
|
||||
border: 2px solid #484b52;
|
||||
}
|
||||
|
||||
/* Ace Editor Settings */
|
||||
.bd-dark ~ div #ace_settingsmenu {
|
||||
color: #f6f6f7;
|
||||
background: #36393f;
|
||||
box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bd-dark ~ div #ace_settingsmenu select,
|
||||
.bd-dark ~ div #ace_settingsmenu input[type="text"] {
|
||||
color: #f6f6f7;
|
||||
background: #2f3136;
|
||||
border: 1px solid #484b52;
|
||||
}
|
||||
|
||||
.bd-dark ~ div .ace_closeButton::before {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
.bd-minimal .members-1998pB,
|
||||
.bd-minimal .membersWrap-2h-GB4,
|
||||
.bd-minimal .nowPlayingColumn-2sl4cE,
|
||||
.bd-minimal .bannerImage-1jOskm {
|
||||
.bd-minimal .bannerImage-3KhIJ6 {
|
||||
width: 200px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
/* Header container heights */
|
||||
|
||||
.bd-minimal .container-1r6BKw,
|
||||
.bd-minimal .header-2o-2hj,
|
||||
.bd-minimal .header-2V-4Sw,
|
||||
.bd-minimal .searchBar-6Kv8R2 {
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -57,7 +57,6 @@
|
|||
}
|
||||
|
||||
.bd-minimal .bd-addon-list .bd-addon-card {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -159,6 +158,17 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
|
||||
.bd-minimal .cozy-3raOZG.wrapper-2a6GCs .avatar-1BDn8e {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.bd-minimal .cozy-3raOZG.wrapper-2a6GCs {
|
||||
padding-left: 64px;
|
||||
}
|
||||
|
||||
/* Chat input */
|
||||
|
||||
.bd-minimal .form-2fGMdU {
|
||||
|
|
@ -249,4 +259,4 @@
|
|||
|
||||
.bd-minimal .layout-2DM8Md {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,18 +48,6 @@
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bd-empty-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--text-normal);
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.bd-empty-results svg {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bd-card-list {
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
|
|
|
|||
|
|
@ -18,15 +18,27 @@
|
|||
}
|
||||
|
||||
.bd-button.bd-button-success {
|
||||
background-color: #3ac15c;
|
||||
background-color: #43b581;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-success:hover {
|
||||
background-color: rgb(52, 174, 83);
|
||||
background-color: #3ca374;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-success:active {
|
||||
background-color: rgb(46, 154, 74);
|
||||
background-color: #369167;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-warning {
|
||||
background-color: #faa61a;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-warning:hover {
|
||||
background-color: #e19517;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-warning:active {
|
||||
background-color: #c88515;
|
||||
}
|
||||
|
||||
.bd-button.bd-button-danger {
|
||||
|
|
|
|||
|
|
@ -19,12 +19,23 @@
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.bd-changelog-modal video {
|
||||
.bd-changelog-modal video,
|
||||
.bd-changelog-modal img {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bd-changelog-modal code.inline {
|
||||
padding: 0.2em;
|
||||
margin: -0.2em 0;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
line-height: 1.125rem;
|
||||
white-space: pre-wrap;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.bd-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,20 +60,30 @@
|
|||
|
||||
.bd-addon-header .bd-icon {
|
||||
margin-right: 8px;
|
||||
fill: var(--header-primary);
|
||||
}
|
||||
|
||||
.bd-title,
|
||||
.bd-name,
|
||||
.bd-meta {
|
||||
display: inline;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bd-meta {
|
||||
color: var(--text-muted);
|
||||
color: var(--channels-default);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bd-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.bd-name::after,
|
||||
|
|
@ -112,6 +122,16 @@
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
.bd-description code {
|
||||
padding: 0.2em;
|
||||
margin: -0.2em 0;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
line-height: 1.125rem;
|
||||
white-space: pre-wrap;
|
||||
background: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.bd-addon-list .scroller::-webkit-scrollbar-track-piece,
|
||||
.bd-addon-list .scroller::-webkit-scrollbar-thumb {
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@ export default class NoResults extends React.Component {
|
|||
render() {
|
||||
return <div className={"bd-empty-results" + (this.props.className ? ` ${this.props.className}` : "")}>
|
||||
<MagnifyingGlass />
|
||||
{DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
|
||||
<div className="bd-empty-results-text">
|
||||
{DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@ export default class Modals {
|
|||
const MarkdownParser = WebpackModules.getByProps("defaultRules", "parse");
|
||||
if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return Logger.warn("Modals", "showChangelogModal missing modules");
|
||||
|
||||
const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
|
||||
const {image = "https://i.imgur.com/8sctUVV.png", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
|
||||
const ce = React.createElement;
|
||||
const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: ChangelogClasses.video}) : ce("img", {src: image})];
|
||||
if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
|
||||
|
|
|
|||
Loading…
Reference in New Issue