mirror of
https://github.com/glitch-soc/mastodon.git
synced 2024-11-27 10:30:15 -05:00
Redesign CWs
This commit is contained in:
ariasuni
parent
6ac6d86525
commit
d8040c026e
@ -1,27 +1,49 @@
|
||||
/* Significantly rewritten from upstream to keep the old design for now */
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
|
||||
import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
|
||||
|
||||
|
||||
import { Icon } from './icon';
|
||||
|
||||
// TODO: maybe use something better, to distinguish between CW and long post buttons?
|
||||
const messages = defineMessages({
|
||||
show_less: { id: 'status.show_less', defaultMessage: 'Show less' },
|
||||
show_more: { id: 'status.show_more', defaultMessage: 'Show more' },
|
||||
});
|
||||
|
||||
export const ContentWarning: React.FC<{
|
||||
text: string;
|
||||
expanded?: boolean;
|
||||
onClick?: () => void;
|
||||
icons?: React.ReactNode[];
|
||||
}> = ({ text, expanded, onClick, icons }) => (
|
||||
<p>
|
||||
<span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
|
||||
}> = ({ text, expanded, onClick, icons }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
className='status__content__spoiler-link'
|
||||
className='status__content__spoiler-link dropdown-button'
|
||||
onClick={onClick}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
{expanded ? (
|
||||
<FormattedMessage id='status.show_less' defaultMessage='Show less' />
|
||||
) : (
|
||||
<FormattedMessage id='status.show_more' defaultMessage='Show more' />
|
||||
)}
|
||||
{icons}
|
||||
<Icon
|
||||
id='content-spoiler-icon'
|
||||
className='status__content__spoiler-icon'
|
||||
title={
|
||||
expanded
|
||||
? intl.formatMessage(messages.show_less)
|
||||
: intl.formatMessage(messages.show_more)
|
||||
}
|
||||
icon={expanded ? ExpandLessIcon : ExpandMoreIcon}
|
||||
/>
|
||||
{icons && false}
|
||||
<span
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
className='translate'
|
||||
/>{' '}
|
||||
</button>
|
||||
</p>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
@ -403,7 +403,7 @@ class StatusContent extends PureComponent {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<div className={classNames} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<ContentWarning text={spoilerHtml} expanded={!hidden} onClick={this.handleSpoilerClick} icons={spoilerIcons} />
|
||||
|
||||
{mentionsPlaceholder}
|
||||
|
||||
@ -263,7 +263,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
|
||||
{this.props.spoiler && (
|
||||
<div className='spoiler-input'>
|
||||
<div className='spoiler-input__border' />
|
||||
{/* <div className='spoiler-input__border' /> */}
|
||||
|
||||
<AutosuggestInput
|
||||
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
|
||||
@ -283,7 +283,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
spellCheck
|
||||
/>
|
||||
|
||||
<div className='spoiler-input__border' />
|
||||
{/* <div className='spoiler-input__border' /> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -1085,22 +1085,31 @@ body > [data-popper-placement] {
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
background: $action-button-color;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
align-items: center; // glitch: content indicator
|
||||
color: lighten($highlight-text-color, 8%);
|
||||
border-radius: 6px;
|
||||
border: 1px solid lighten($highlight-text-color, 8%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($action-button-color, 7%);
|
||||
text-decoration: none;
|
||||
.status__content__spoiler-icon {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
&.icon-content-spoiler-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
& > span {
|
||||
border-inline-start: 1px solid currentColor;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1108,6 +1117,7 @@ body > [data-popper-placement] {
|
||||
display: none;
|
||||
|
||||
&.status__content__spoiler--visible {
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1362,38 +1372,6 @@ body > [data-popper-placement] {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
display: inline-flex; // glitch: media icon in spoiler button
|
||||
border-radius: 2px;
|
||||
background: $action-button-color; // glitch: design used in more places
|
||||
border: 0;
|
||||
color: $inverted-text-color;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
align-items: center; // glitch: content indicator
|
||||
|
||||
&:hover {
|
||||
// glitch: design used in more places
|
||||
background: lighten($action-button-color, 7%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.status__content__spoiler-icon {
|
||||
display: inline-block;
|
||||
margin-inline-start: 5px;
|
||||
border-inline-start: 1px solid currentColor;
|
||||
padding: 0;
|
||||
padding-inline-start: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper--filtered {
|
||||
color: $dark-text-color;
|
||||
border: 0;
|
||||
@ -1488,15 +1466,15 @@ body > [data-popper-placement] {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
// &__spoiler-link {
|
||||
// color: $primary-text-color;
|
||||
// background: $ui-primary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: lighten($ui-primary-color, 8%);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1875,11 +1853,6 @@ body > [data-popper-placement] {
|
||||
height: 24px;
|
||||
margin: -1px 0 0;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
line-height: 24px;
|
||||
margin: -1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
@ -2417,16 +2390,17 @@ a.account__display-name {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-base-lighter-color;
|
||||
color: $inverted-text-color;
|
||||
// TODO: make CW grey when muted?
|
||||
// a.status__content__spoiler-link {
|
||||
// background: $ui-base-lighter-color;
|
||||
// color: $inverted-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-lighter-color, 7%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: lighten($ui-base-lighter-color, 7%);
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.notification__report {
|
||||
@ -6952,15 +6926,6 @@ a.status-card {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-option {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
@ -108,17 +108,6 @@
|
||||
background: lighten($white, 4%);
|
||||
}
|
||||
|
||||
// Change the background colors of status__content__spoiler-link
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content .status__content__spoiler-link {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.account-gallery__item a {
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user