left align toasts by default
This commit is contained in:
parent
b4cafe1e0a
commit
abdad8f491
2 changed files with 48 additions and 38 deletions
|
@ -6,68 +6,55 @@
|
|||
|
||||
@include font-body-2;
|
||||
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
align-items: stretch;
|
||||
border-radius: $border-radius-px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include position-absolute-center-x;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
z-index: $z-index-toast;
|
||||
bottom: 62px;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-80;
|
||||
color: $color-white;
|
||||
}
|
||||
@include dark-theme {
|
||||
max-width: 280px;
|
||||
background-color: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
outline: none;
|
||||
|
||||
&:focus:focus-visible {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
|
||||
&--align-center {
|
||||
@include position-absolute-center-x;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--align-left {
|
||||
inset-inline-start: 20px;
|
||||
bottom: 18px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-block: 8px;
|
||||
padding-inline: 12px;
|
||||
padding-block: 13px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include font-body-2-bold;
|
||||
cursor: pointer;
|
||||
padding-block: 8px;
|
||||
padding-inline: 12px;
|
||||
padding-block: 13px;
|
||||
padding-inline: 16px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include light-theme {
|
||||
border-inline-start: 1px solid $color-gray-65;
|
||||
}
|
||||
@include dark-theme {
|
||||
border-inline-start: 1px solid $color-gray-60;
|
||||
}
|
||||
|
||||
color: $color-ultramarine-light;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
@include light-theme {
|
||||
background-color: $color-gray-65;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
@include keyboard-mode {
|
||||
background-color: $color-gray-65;
|
||||
}
|
||||
@include dark-keyboard-mode {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
&:focus:focus-visible {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,6 @@ import { clearTimeoutIfNecessary } from '../util/clearTimeoutIfNecessary';
|
|||
export type PropsType = {
|
||||
autoDismissDisabled?: boolean;
|
||||
children: ReactNode;
|
||||
align?: 'left' | 'center';
|
||||
className?: string;
|
||||
disableCloseOnClick?: boolean;
|
||||
onClose: () => unknown;
|
||||
|
@ -26,7 +25,6 @@ export type PropsType = {
|
|||
export const Toast = memo(function ToastInner({
|
||||
autoDismissDisabled = false,
|
||||
children,
|
||||
align = 'center',
|
||||
className,
|
||||
disableCloseOnClick = false,
|
||||
onClose,
|
||||
|
@ -36,6 +34,31 @@ export const Toast = memo(function ToastInner({
|
|||
}: PropsType): JSX.Element | null {
|
||||
const [root, setRoot] = React.useState<HTMLElement | null>(null);
|
||||
const [focusRef] = useRestoreFocus();
|
||||
const [align, setAlign] = React.useState<'left' | 'center'>('left');
|
||||
|
||||
useEffect(() => {
|
||||
function updateAlign() {
|
||||
const leftPane = document.querySelector('.module-left-pane');
|
||||
const composer = document.querySelector(
|
||||
'.ConversationView__composition-area'
|
||||
);
|
||||
|
||||
if (
|
||||
leftPane != null &&
|
||||
composer != null &&
|
||||
leftPane.classList.contains('module-left-pane--width-narrow')
|
||||
) {
|
||||
setAlign('center');
|
||||
return;
|
||||
}
|
||||
|
||||
setAlign('left');
|
||||
}
|
||||
|
||||
updateAlign();
|
||||
|
||||
return window.reduxStore.subscribe(updateAlign);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const div = document.createElement('div');
|
||||
|
|
Loading…
Reference in a new issue