Update various pieces of UI
- fix minimal mode - revamp addon error modal - restyle some aspects of toasts (includes light mode support) - overhaul addon error modal (thanks to @Strencher for some react help) - update switches to match discord's latest design
This commit is contained in:
Tropical
GitHub
parent
01941c1178
commit
2779d9bc4f
|
|
@ -1,8 +1,7 @@
|
|||
{
|
||||
"name": "betterdiscord-renderer",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": {
|
||||
"version": "7.10.4",
|
||||
|
|
@ -8812,7 +8811,8 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "3.4.0",
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@
|
|||
/* Messages */
|
||||
|
||||
.bd-minimal .cozy-3raOZG.wrapper-2a6GCs .avatar-1BDn8e {
|
||||
transform: scale(0.75);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
|
@ -169,6 +170,11 @@
|
|||
padding-left: 64px;
|
||||
}
|
||||
|
||||
.bd-minimal .buttons-cl5qTG {
|
||||
transform: scale(0.75);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
/* Chat input */
|
||||
|
||||
.bd-minimal .form-2fGMdU {
|
||||
|
|
@ -178,53 +184,42 @@
|
|||
|
||||
/* Guilds */
|
||||
|
||||
.bd-minimal .base-3dtUhz {
|
||||
left: 55px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z {
|
||||
.bd-minimal .guilds-1SWlCJ {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-sa6paO {
|
||||
.bd-minimal .guilds-1SWlCJ .wrapper-sa6paO {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .item-2hkk8m {
|
||||
.bd-minimal .guilds-1SWlCJ .wrapper-sa6paO span {
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z div[style*="height: 56px"],
|
||||
.bd-minimal .wrapper-1Rf91z [role=group] {
|
||||
.bd-minimal .guilds-1SWlCJ div[style*="height: 56px"],
|
||||
.bd-minimal .guilds-1SWlCJ [role=group] {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .listItem-2P_4kh,
|
||||
.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorBottom-BXS58x,
|
||||
.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorTop-gA6RCh,
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc {
|
||||
.bd-minimal .guilds-1SWlCJ .listItem-GuPuDH,
|
||||
.bd-minimal .guilds-1SWlCJ [class*="unreadMentionsIndicator"],
|
||||
.bd-minimal .guilds-1SWlCJ .wrapper-3Njo_c {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .guildsError-b7zR5H,
|
||||
.bd-minimal .wrapper-1Rf91z .svg-1X37T1,
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-25eVIn,
|
||||
.bd-minimal .wrapper-1Rf91z .placeholderMask-3K9THS {
|
||||
.bd-minimal .guilds-1SWlCJ .wrapper-25eVIn,
|
||||
.bd-minimal .guilds-1SWlCJ [class*="guildsError-"],
|
||||
.bd-minimal .guilds-1SWlCJ svg[width="48"] {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folder-21wGz3,
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folderIconWrapper-226oVY {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .expandedFolderBackground-2sPsd- {
|
||||
.bd-minimal .guilds-1SWlCJ .wrapper-3Njo_c > span {
|
||||
left: 10px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.bd-minimal .wrapper-1Rf91z #bd-pub-button {
|
||||
.bd-minimal .guilds-1SWlCJ #bd-pub-button {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
|
@ -259,4 +254,4 @@
|
|||
|
||||
.bd-minimal .layout-2DM8Md {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.be-modal .tab-bar.TOP .tab-bar-item:nth-child(1) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.bd-addon-error {
|
||||
margin: 10px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-addon-error-header {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-addon-error-message {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bd-addon-error-body {
|
||||
padding: 10px;
|
||||
background: var(--background-mobile-secondary);
|
||||
}
|
||||
|
||||
.bd-addon-error-header svg {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.bd-addon-error-stack-header svg {
|
||||
float: right;
|
||||
transform: rotate(90deg);
|
||||
transition: 0.4s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-addon-error-stack.opened svg {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.bd-addon-error-stack-header {
|
||||
color: #b9bbbe;
|
||||
}
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
|
||||
.bd-controls > .bd-addon-button {
|
||||
border-radius: 0;
|
||||
padding: 3px 6px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.bd-links .bd-addon-button + .bd-addon-button {
|
||||
|
|
@ -215,10 +215,6 @@
|
|||
|
||||
.bd-addon-modal-footer .bd-button {
|
||||
background-color: #3e82e5;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 3px 6px;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
.bd-addon-modal-footer .bd-button:hover {
|
||||
|
|
|
|||
|
|
@ -18,73 +18,6 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bd-switch {
|
||||
background-color: #72767d;
|
||||
border-radius: 14px;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out;
|
||||
margin-left: 10px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.bd-switch::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.bd-switch::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
width: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.bd-switch .bd-checkbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-switch-checked {
|
||||
background-color: #3e82e5;
|
||||
}
|
||||
|
||||
.bd-switch-checked::after {
|
||||
transform: translate3d(18px, 0, 0);
|
||||
}
|
||||
|
||||
.bd-switch-disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bd-select-wrapper {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
.bd-addon-errors {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.bd-addon-error {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
background: var(--deprecated-card-editable-bg);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.theme-dark .bd-addon-error {
|
||||
border-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.theme-light .bd-addon-error {
|
||||
border-color: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.bd-addon-error-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-addon-error-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-start;
|
||||
background-color: var(--background-floating);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.bd-addon-error-icon svg {
|
||||
fill: var(--interactive-normal);
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.bd-addon-error-expander {
|
||||
color: var(--interactive-normal);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.bd-addon-error-expander,
|
||||
.bd-addon-error-icon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.bd-addon-error.collapsed .bd-addon-error-expander {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.bd-addon-error-header-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-addon-error-body {
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
|
||||
.bd-addon-error-stack code {
|
||||
user-select: text;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
text-indent: 0;
|
||||
white-space: pre-wrap;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--background-tertiary) var(--background-secondary);
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-tertiary);
|
||||
}
|
||||
|
|
@ -1,250 +0,0 @@
|
|||
@keyframes bd-backdrop {
|
||||
to {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-modal-wrapper {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-backdrop-closing {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-modal-wrapper-closing {
|
||||
to {
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-backdrop {
|
||||
animation: bd-backdrop 250ms ease;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
background-color: rgb(0, 0, 0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.bd-modal {
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper.closing .bd-backdrop {
|
||||
animation: bd-backdrop-closing 200ms linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 50ms;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .bd-modal {
|
||||
animation: bd-modal-wrapper 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
animation-fill-mode: forwards;
|
||||
transform: scale(0.7);
|
||||
transform-origin: 50% 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
contain: content;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper.closing .bd-modal {
|
||||
animation: bd-modal-wrapper-closing 250ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* .bd-modal .bd-modal-inner {
|
||||
display: flex;
|
||||
contain: layout;
|
||||
flex-direction: column;
|
||||
pointer-events: auto;
|
||||
border: 1px solid rgba(28, 36, 43, 0.6);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
max-height: 660px;
|
||||
min-height: 200px;
|
||||
width: 440px;
|
||||
user-select: text;
|
||||
} */
|
||||
|
||||
.bd-modal .bd-modal-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
max-height: 660px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .bd-content-modal .bd-modal-inner {
|
||||
height: 500px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.bd-modal .header {
|
||||
background-color: #35393e;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 12px 20px;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.bd-modal .bd-modal-body {
|
||||
background-color: #36393f;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
contain: layout;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-modal .scroller {
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bd-modal .bd-content-modal .bd-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bd-modal .footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.bd-modal .footer button {
|
||||
min-height: 32px;
|
||||
min-width: 60px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
line-height: 16px;
|
||||
padding: 2px 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar-container {
|
||||
align-items: center;
|
||||
border-bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar.TOP {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar-container .tab-bar-item {
|
||||
margin: 10px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 5px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar-item:not(.selected):hover {
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar.TOP .tab-bar-item:nth-child(1) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.bd-modal .tab-bar-container .tab-bar-item.selected {
|
||||
opacity: 1;
|
||||
background: #36393f;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bd-modal .table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-bottom: 10px;
|
||||
margin: 3px 15px 0 15px;
|
||||
border-bottom: 1px solid #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bd-modal .table-column {
|
||||
width: 25%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bd-modal .table-column.column-error {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.bd-modal .errors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.bd-modal .error {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
padding: 15px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-modal .error-link {
|
||||
color: #3e82e5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bd-modal .bd-content-modal .scroller {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bd-modal-close {
|
||||
padding: 0;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.bd-modal-close svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
/* Switches */
|
||||
|
||||
.bd-switch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-switch-body {
|
||||
--switch-color: rgb(114, 118, 125);
|
||||
--symbol1path: path('M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z');
|
||||
--symbol2path: path('M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z');
|
||||
border-radius: 14px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background-color: var(--switch-color);
|
||||
transition: 250ms cubic-bezier(0, .3, .7, 1) background-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-switch input:active + .bd-switch-body {
|
||||
--switch-color: rgba(100, 137, 126);
|
||||
}
|
||||
|
||||
.full-motion .bd-switch input:active + .bd-switch-body {
|
||||
--symbol1path: path('M6.56666 11.0013L6.56666 8.96683L13.5667 8.96683L13.5667 11.0013L6.56666 11.0013Z');
|
||||
--symbol2path: path('M13.5582 8.96683L13.5582 11.0013L6.56192 11.0013L6.56192 8.96683L13.5582 8.96683Z');
|
||||
}
|
||||
|
||||
.bd-switch input:checked + .bd-switch-body {
|
||||
--switch-color: rgb(67, 181, 129);
|
||||
--symbol1path: path('M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z');
|
||||
--symbol2path: path('M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z');
|
||||
}
|
||||
|
||||
.bd-switch input:checked:active + .bd-switch-body {
|
||||
--switch-color: rgba(81, 162, 128);
|
||||
}
|
||||
|
||||
.full-motion .bd-switch input:checked:active + .bd-switch-body {
|
||||
--symbol1path: path('M6.56666 11.0013L6.56666 8.96683L13.5667 8.96683L13.5667 11.0013L6.56666 11.0013Z');
|
||||
--symbol2path: path('M13.5582 8.96683L13.5582 11.0013L6.56192 11.0013L6.56192 8.96683L13.5582 8.96683Z');
|
||||
}
|
||||
|
||||
.bd-switch .bd-switch-symbol path {
|
||||
fill: var(--switch-color);
|
||||
transition: 250ms cubic-bezier(0, .3, .7, 1);
|
||||
}
|
||||
|
||||
.bd-switch .bd-switch-symbol path:first-child {
|
||||
d: var(--symbol1path);
|
||||
}
|
||||
|
||||
.bd-switch .bd-switch-symbol path:last-child {
|
||||
d: var(--symbol2path);
|
||||
}
|
||||
|
||||
.bd-switch input {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-switch-body .bd-switch-slider {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
width: 28px;
|
||||
height: 18px;
|
||||
margin: 3px;
|
||||
transition: 250ms cubic-bezier(0, .3, .7, 1);
|
||||
}
|
||||
|
||||
.bd-switch input:active + .bd-switch-body .bd-switch-slider {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.bd-switch input:checked + .bd-switch-body .bd-switch-slider {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.bd-switch input:active:checked + .bd-switch-body .bd-switch-slider {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.bd-switch-body .bd-switch-slider .bd-switch-handle {
|
||||
transition: 250ms cubic-bezier(0, .3, .7, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-switch input:active + .bd-switch-body .bd-switch-handle {
|
||||
width: 28px;
|
||||
height: 18px;
|
||||
y: 1;
|
||||
x: 0;
|
||||
}
|
||||
|
||||
.bd-switch input:checked:active + .bd-switch-body .bd-switch-handle {
|
||||
x: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.bd-tab-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bd-tab-item {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-width: 40px;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
padding: 2px 8px;
|
||||
-webkit-app-region: no-drag;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: var(--interactive-normal);
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.bd-tab-item:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bd-tab-item:hover,
|
||||
.bd-tab-item.selected {
|
||||
color: var(--interactive-active);
|
||||
}
|
||||
|
||||
.bd-tab-item.selected {
|
||||
cursor: default;
|
||||
background-color: var(--background-modifier-selected);
|
||||
}
|
||||
|
||||
.bd-tab-item:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.bd-tab-item:active {
|
||||
background-color: var(--background-modifier-active);
|
||||
}
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
.bd-toast {
|
||||
animation: bd-toast-up 300ms ease;
|
||||
transform: translateY(-10px);
|
||||
background: #36393f;
|
||||
background-color: var(--background-primary);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--elevation-medium), var(--elevation-stroke);
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
color: var(--header-primary);
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
margin-top: 10px;
|
||||
|
|
@ -39,6 +39,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-toast.toast-info,
|
||||
.bd-toast.toast-success,
|
||||
.bd-toast.toast-danger,
|
||||
.bd-toast.toast-error,
|
||||
.bd-toast.toast-warning,
|
||||
.bd-toast.toast-warn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-toast.closing {
|
||||
animation: bd-toast-down 200ms ease;
|
||||
animation-fill-mode: forwards;
|
||||
|
|
@ -82,7 +91,6 @@
|
|||
.bd-toast.toast-warning,
|
||||
.bd-toast.toast-warn {
|
||||
background-color: #ffa600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-toast.toast-warning.icon,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {React, Strings, WebpackModules} from "modules";
|
||||
import DownArrow from "./icons/downarrow";
|
||||
import Extension from "./icons/extension";
|
||||
import ThemeIcon from "./icons/theme";
|
||||
|
||||
|
|
@ -7,43 +6,59 @@ const Parser = Object(WebpackModules.getByProps("defaultRules", "parse")).defaul
|
|||
|
||||
const joinClassNames = (...classNames) => classNames.filter(e => e).join(" ");
|
||||
|
||||
class Collapse extends React.Component {
|
||||
class AddonError extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {opened: false};
|
||||
}
|
||||
|
||||
this.state = {
|
||||
expanded: false
|
||||
};
|
||||
}
|
||||
toggle() {
|
||||
if (!this.props.error.stack) return;
|
||||
this.setState({opened: !this.state.opened});
|
||||
this.setState({expanded: !this.state.expanded});
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = this.props.error.error ? this.props.error.message : this.props.error.message;
|
||||
const stack = this.props.error.error && this.props.error.error.stack;
|
||||
|
||||
return <div className={joinClassNames("bd-addon-error-stack", this.state.opened && "opened")}>
|
||||
<div onClick={() => {this.toggle();}} className="bd-addon-error-stack-header">
|
||||
{!this.state.opened && title}
|
||||
{stack
|
||||
? <>
|
||||
<DownArrow />
|
||||
{this.state.opened && <div className="bd-addon-error-stack-shown">{Parser ? Parser.codeBlock.react({content: stack, lang: "js"}, null, {}) : stack}</div>}
|
||||
</>
|
||||
: null}
|
||||
renderErrorBody(err) {
|
||||
const stack = err.error && err.stack;
|
||||
if (!this.state.expanded || !stack) return null;
|
||||
return <div className="bd-addon-error-body">
|
||||
<div className="divider-3573oO topDivider-3G26Ct"></div>
|
||||
<div className="bd-addon-error-stack">
|
||||
{Parser ? Parser.codeBlock.react({content: stack, lang: "js"}, null, {}) : stack}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
render() {
|
||||
const err = this.props.err;
|
||||
return <div key={`${err.type}-${this.props.index}`} className={joinClassNames("bd-addon-error", (this.state.expanded) ? "expanded" : "collapsed")}>
|
||||
<div className="bd-addon-error-header" onClick={() => {this.toggle();}} >
|
||||
<div className="bd-addon-error-icon">
|
||||
{err.type == "plugin" ? <Extension /> : <ThemeIcon />}
|
||||
</div>
|
||||
<div className="bd-addon-error-header-inner">
|
||||
<h3 className="bd-addon-error-file secondaryHeader-2oeRPO base-1x0h_U size16-1P40sf">{err.name}</h3>
|
||||
<div className="bd-addon-error-details detailsWrapper-3XSaoN">
|
||||
<svg className="detailsIcon-2LZ7Bq" aria-hidden="false" width="16" height="16" viewBox="0 0 12 12">
|
||||
<path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z"></path>
|
||||
</svg>
|
||||
<div className="colorHeaderSecondary-3Sp3Ft size12-3cLvbJ">{err.message}</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="bd-addon-error-expander" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{this.renderErrorBody(err)}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default class AddonErrorModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const tabs = this.getTabs();
|
||||
|
||||
this.state = {
|
||||
selectedTab: tabs[0].id
|
||||
selectedTab: tabs[0].id,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -79,18 +94,6 @@ export default class AddonErrorModal extends React.Component {
|
|||
].filter(e => e));
|
||||
}
|
||||
|
||||
renderError(err) {
|
||||
return <div className="bd-addon-error">
|
||||
<div className="bd-addon-error-header">
|
||||
{err.type == "plugin" ? <Extension /> : <ThemeIcon />}
|
||||
<div className="bd-addon-error-message">{err.name} - {err.message}</div>
|
||||
</div>
|
||||
<div className="bd-addon-error-body">
|
||||
<Collapse error={err} message={err.message} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
switchToTab(id) {
|
||||
this.setState({selectedTab: id});
|
||||
}
|
||||
|
|
@ -98,25 +101,18 @@ export default class AddonErrorModal extends React.Component {
|
|||
render() {
|
||||
const selectedTab = this.getTabs().find(e => this.state.selectedTab === e.id);
|
||||
const tabs = this.getTabs();
|
||||
return <div className="bd-modal bd-content-modal modal-1UGdnR">
|
||||
<div className="bd-modal-inner inner-1JeGVc">
|
||||
<div className="header header-1R_AjF"><div className="title">{Strings.Modals.addonErrors}</div></div>
|
||||
<div className="bd-modal-body">
|
||||
<div className="tab-bar-container">
|
||||
<div className="tab-bar TOP">
|
||||
{tabs.map(tab => <div onClick={() => {this.switchToTab(tab.id);}} className={joinClassNames("tab-bar-item", tab.id === selectedTab.id && "selected")}>{tab.name}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="scroller-wrap fade">
|
||||
<div className="scroller">
|
||||
{selectedTab.errors.map(error => this.renderError(error))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer footer-2yfCgX footer-3rDWdC footer-2gL1pp">
|
||||
<button type="button" onClick={() => {this.props.onClose();}} className="bd-button">{Strings.Modals.okay}</button>
|
||||
return <>
|
||||
<div className="bd-error-modal-header header-1TKi98 separator-2-RRj_">
|
||||
<h4 className="colorStandard-2KCXvj size14-e6ZScH h4-AQvcAz title-3sZWYQ defaultColor-1_ajX0 marginBottom8-AtZOdT">{Strings.Modals.addonErrors}</h4>
|
||||
<div className="bd-tab-bar">
|
||||
{tabs.map(tab => <div onClick={() => {this.switchToTab(tab.id);}} className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}>{tab.name}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
<div className="bd-error-modal-content content-1LAB8Z thin-1ybCId scrollerBase-289Jih">
|
||||
<div className="bd-addon-errors">
|
||||
{selectedTab.errors.map((error, index) => <AddonError index={index} err={error} />)}
|
||||
</div>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,12 +106,21 @@ export default class Modals {
|
|||
this.addonErrorsRef = React.createRef();
|
||||
this.ModalActions.openModal(props => React.createElement(this.ModalComponents.ModalRoot, Object.assign(props, {
|
||||
size: "medium",
|
||||
children: React.createElement(AddonErrorModal, {
|
||||
ref: this.addonErrorsRef,
|
||||
pluginErrors: Array.isArray(pluginErrors) ? pluginErrors : [],
|
||||
themeErrors: Array.isArray(themeErrors) ? themeErrors : [],
|
||||
onClose: props.onClose
|
||||
})
|
||||
className: "bd-error-modal",
|
||||
children: [
|
||||
React.createElement(AddonErrorModal, {
|
||||
ref: this.addonErrorsRef,
|
||||
pluginErrors: Array.isArray(pluginErrors) ? pluginErrors : [],
|
||||
themeErrors: Array.isArray(themeErrors) ? themeErrors : [],
|
||||
onClose: props.onClose
|
||||
}),
|
||||
React.createElement(this.ModalComponents.ModalFooter, {
|
||||
className: "bd-error-modal-footer",
|
||||
}, React.createElement(this.Buttons.default, {
|
||||
onClick: props.onClose,
|
||||
className: "bd-button"
|
||||
}, Strings.Modals.okay))
|
||||
]
|
||||
})));
|
||||
}
|
||||
|
||||
|
|
@ -213,10 +222,7 @@ export default class Modals {
|
|||
const modal = props => {
|
||||
return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.MEDIUM, className: "bd-addon-modal"}, props),
|
||||
React.createElement(mc.ModalHeader, {separator: false, className: "bd-addon-modal-header"},
|
||||
React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`),
|
||||
React.createElement(this.FlexElements.Child, {grow: 0},
|
||||
React.createElement(mc.ModalCloseButton, {className: "bd-modal-close", onClick: props.onClose})
|
||||
)
|
||||
React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`)
|
||||
),
|
||||
React.createElement(mc.ModalContent, {className: "bd-addon-modal-settings"},
|
||||
React.createElement(ErrorBoundary, {}, child)
|
||||
|
|
|
|||
|
|
@ -16,8 +16,17 @@ export default class Switch extends React.Component {
|
|||
render() {
|
||||
const enabledClass = this.props.disabled ? " bd-switch-disabled" : "";
|
||||
const checkedClass = this.state.checked ? " bd-switch-checked" : "";
|
||||
return <div className={`bd-switch` + enabledClass + checkedClass}>
|
||||
<input type="checkbox" id={this.props.id} className={`bd-checkbox`} disabled={this.props.disabled} checked={this.state.checked} onChange={this.onChange} />
|
||||
</div>;
|
||||
return <div className={`bd-switch` + enabledClass + checkedClass} disabled={this.props.disabled} checked={this.state.checked} onChange={this.onChange}>
|
||||
<input id={this.props.id} type="checkbox" />
|
||||
<div className="bd-switch-body">
|
||||
<svg className="bd-switch-slider" viewBox="0 0 28 20" preserveAspectRatio="xMinYMid meet">
|
||||
<rect className="bd-switch-handle" fill="white" x="4" y="0" height="20" width="20" rx="10"></rect>
|
||||
<svg className="bd-switch-symbol" viewBox="0 0 20 20" fill="none">
|
||||
<path></path>
|
||||
<path></path>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue