moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sensitive content bugs

This commit is contained in:
Justin 2022-04-04 16:51:29 -04:00
parent bacc34f872
commit 6e62f894e3
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/soapbox/components/media_gallery.js
View File

@ -16,7 +16,6 @@ import { truncateFilename } from 'soapbox/utils/media';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio'; import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
import IconButton from './icon_button';
import { Button, Text } from './ui'; import { Button, Text } from './ui';
const ATTACHMENT_LIMIT = 4; const ATTACHMENT_LIMIT = 4;
@ -594,11 +593,12 @@ class MediaGallery extends React.PureComponent {
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible || compact })}> <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible || compact })}>
{sensitive && ( {sensitive && (
(visible || compact) ? ( (visible || compact) ? (
<IconButton <Button
title={intl.formatMessage(messages.toggle_visible)} text={intl.formatMessage(messages.toggle_visible)}
src={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')} icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
overlay
onClick={this.handleOpen} onClick={this.handleOpen}
theme='transparent'
size='sm'
/> />
) : ( ) : (
<button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'> <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>

3
app/soapbox/components/ui/button/useButtonStyles.ts
View File

@ -1,6 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'transparent'
type ButtonSizes = 'sm' | 'md' | 'lg' type ButtonSizes = 'sm' | 'md' | 'lg'
type IButtonStyles = { type IButtonStyles = {
@ -24,6 +24,7 @@ const useButtonStyles = ({
ghost: 'shadow-none border-gray-200 text-gray-700 bg-white focus:ring-primary-500 focus:ring-2 focus:ring-offset-2', ghost: 'shadow-none border-gray-200 text-gray-700 bg-white focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2', accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2', danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
}; };
const sizes = { const sizes = {

2
app/styles/components/spoiler-button.scss
View File

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 100; z-index: 40;
&--minified { &--minified {
display: block; display: block;