Fixes, styles improvements, cleanup, enforce classes order for classNames See merge request soapbox-pub/soapbox!2258environments/review-develop-3zknud/deployments/2597
commit
35bf20507d
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
|
|
||||||
import Icon from 'soapbox/components/icon';
|
|
||||||
|
|
||||||
interface IClearColumnButton {
|
|
||||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ClearColumnButton: React.FC<IClearColumnButton> = ({ onClick }) => (
|
|
||||||
<button className='text-btn column-header__setting-btn' tabIndex={0} onClick={onClick}>
|
|
||||||
<Icon src={require('@tabler/icons/eraser.svg')} />
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default ClearColumnButton;
|
|
@ -1,58 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
import { getSettings, changeSettingImmediate } from 'soapbox/actions/settings';
|
|
||||||
import List, { ListItem } from 'soapbox/components/list';
|
|
||||||
import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui';
|
|
||||||
import { SimpleForm, SelectDropdown } from 'soapbox/features/forms';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
mediaDisplay: { id: 'preferences.fields.media_display_label', defaultMessage: 'Media display' },
|
|
||||||
display_media_default: { id: 'preferences.fields.display_media.default', defaultMessage: 'Hide media marked as sensitive' },
|
|
||||||
display_media_hide_all: { id: 'preferences.fields.display_media.hide_all', defaultMessage: 'Always hide media' },
|
|
||||||
display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const MediaDisplay = () => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const intl = useIntl();
|
|
||||||
|
|
||||||
const settings = useAppSelector((state) => getSettings(state));
|
|
||||||
|
|
||||||
const displayMediaOptions = {
|
|
||||||
default: intl.formatMessage(messages.display_media_default),
|
|
||||||
hide_all: intl.formatMessage(messages.display_media_hide_all),
|
|
||||||
show_all: intl.formatMessage(messages.display_media_show_all),
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSelectChange: (path: string[]) => React.ChangeEventHandler<HTMLSelectElement> = path => {
|
|
||||||
return e => {
|
|
||||||
dispatch(changeSettingImmediate(path, e.target.value));
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card variant='rounded'>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle title={intl.formatMessage(messages.mediaDisplay)} />
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardBody>
|
|
||||||
<SimpleForm className='space-y-3 p-0'>
|
|
||||||
<List>
|
|
||||||
<ListItem label={intl.formatMessage(messages.mediaDisplay)}>
|
|
||||||
<SelectDropdown
|
|
||||||
items={displayMediaOptions}
|
|
||||||
defaultValue={settings.get('displayMedia') as string}
|
|
||||||
onChange={onSelectChange(['displayMedia'])}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
</SimpleForm>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MediaDisplay;
|
|
@ -1,34 +0,0 @@
|
|||||||
// THEME MIXINS
|
|
||||||
|
|
||||||
// standard container drop shadow
|
|
||||||
@mixin standard-panel-shadow {
|
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// common properties for all standard containers
|
|
||||||
@mixin standard-panel {
|
|
||||||
@include standard-panel-shadow;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
// SHORTCUTS
|
|
||||||
@mixin input-placeholder($color) {
|
|
||||||
&::-webkit-input-placeholder { color: $color; }
|
|
||||||
&::-moz-placeholder { color: $color; }
|
|
||||||
&:-ms-input-placeholder { color: $color; }
|
|
||||||
&:-moz-placeholder { color: $color; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin avatar-radius {
|
|
||||||
border-radius: 50%;
|
|
||||||
background: transparent no-repeat;
|
|
||||||
background-position: 50%;
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin avatar-size($size: 48px) {
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
background-size: $size $size;
|
|
||||||
}
|
|
@ -1,69 +1,51 @@
|
|||||||
.audio-player {
|
.audio-player {
|
||||||
overflow: hidden;
|
@apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
background: $base-shadow-color;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-bottom: 44px;
|
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
||||||
&.editable {
|
&.editable {
|
||||||
border-radius: 0;
|
@apply rounded-none h-full;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__volume::before,
|
.video-player__volume::before,
|
||||||
.video-player__seek::before {
|
.video-player__seek::before {
|
||||||
background: currentcolor;
|
@apply bg-current opacity-[15];
|
||||||
opacity: 0.15;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__seek__buffer {
|
.video-player__seek__buffer {
|
||||||
background: currentcolor;
|
@apply bg-current opacity-20;
|
||||||
opacity: 0.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__buttons button {
|
.video-player__buttons button {
|
||||||
color: currentcolor;
|
@apply text-current opacity-[75];
|
||||||
opacity: 0.75;
|
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: currentcolor;
|
@apply text-current opacity-100;
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__time-sep,
|
.video-player__time-sep,
|
||||||
.video-player__time-total,
|
.video-player__time-total,
|
||||||
.video-player__time-current {
|
.video-player__time-current {
|
||||||
color: currentcolor;
|
@apply text-current;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__seek::before,
|
.video-player__seek::before,
|
||||||
.video-player__seek__buffer,
|
.video-player__seek__buffer,
|
||||||
.video-player__seek__progress {
|
.video-player__seek__progress {
|
||||||
top: 0;
|
@apply top-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__seek__handle {
|
.video-player__seek__handle {
|
||||||
top: -4px;
|
@apply -top-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player__controls {
|
.video-player__controls {
|
||||||
padding-top: 10px;
|
@apply pt-2.5 bg-transparent;
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-spoiler-audio {
|
.media-spoiler-audio {
|
||||||
background-size: cover;
|
@apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 8px;
|
|
||||||
position: relative;
|
|
||||||
border: 0;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
@ -1,98 +0,0 @@
|
|||||||
.emoji-react {
|
|
||||||
@apply inline-block text-gray-900 dark:text-gray-300 no-underline;
|
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
&__emoji {
|
|
||||||
img {
|
|
||||||
@apply w-5 h-5;
|
|
||||||
filter: drop-shadow(2px 0 0 var(--foreground-color));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .emoji-react {
|
|
||||||
@apply -mr-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[type='button'] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-reacts {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-reacts-container {
|
|
||||||
display: inline-flex;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.emoji-react {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-reacts__count {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-react-selector {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
background-color: var(--foreground-color);
|
|
||||||
padding: 5px 8px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: 0.1s;
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
&--visible,
|
|
||||||
&--focused {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__emoji {
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 3px;
|
|
||||||
transition: 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
img {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status .emoji-react-selector {
|
|
||||||
bottom: 100%;
|
|
||||||
left: -20px;
|
|
||||||
|
|
||||||
@media (max-width: 455px) {
|
|
||||||
bottom: 31px;
|
|
||||||
right: 10px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,40 +0,0 @@
|
|||||||
.media-gallery--placeholder {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
hsla(var(--foreground-color_hsl), 0) 0%,
|
|
||||||
hsla(var(--foreground-color_hsl), 0) 25%,
|
|
||||||
var(--foreground-color) 50%,
|
|
||||||
hsla(var(--foreground-color_hsl), 0) 70%,
|
|
||||||
hsla(var(--foreground-color_hsl), 0) 100%
|
|
||||||
);
|
|
||||||
background-size: 200%;
|
|
||||||
animation: placeholder-pulse 2s infinite;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes placeholder-pulse {
|
|
||||||
0% { background-position-x: 200%; }
|
|
||||||
100% { background-position-x: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery.media-gallery--placeholder {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
.media-gallery__item {
|
|
||||||
background-color: var(--brand-color--faint);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,77 +0,0 @@
|
|||||||
/*
|
|
||||||
# CSS VARIABLE NAMING CONVENTIONS
|
|
||||||
|
|
||||||
Primary variables are fully-formed CSS properties.
|
|
||||||
Form: --{primary-name}
|
|
||||||
Examples:
|
|
||||||
--brand-color
|
|
||||||
--accent-color
|
|
||||||
--primary-text-color
|
|
||||||
|
|
||||||
Meta-variables are combined to make primary variables.
|
|
||||||
Form: --{primary-name}_{property}
|
|
||||||
Examples:
|
|
||||||
--brand-color_h (int, hue)
|
|
||||||
--brand-color_s (percent, saturation)
|
|
||||||
--brand-color_l (percent, lightness)
|
|
||||||
--brand-color_hsl (csv of the 3 variables above)
|
|
||||||
|
|
||||||
Modifiers are variations of primary variables made by modifying their meta-values.
|
|
||||||
Form: --{primary-name}--{modifier}
|
|
||||||
Examples:
|
|
||||||
--brand-color--faint
|
|
||||||
--brand-color--hicontrast
|
|
||||||
--primary-text-color--faint
|
|
||||||
*/
|
|
||||||
|
|
||||||
body,
|
|
||||||
.site-preview {
|
|
||||||
// Primary variables
|
|
||||||
--brand-color: hsl(var(--brand-color_hsl));
|
|
||||||
--accent-color: hsl(var(--accent-color_hsl));
|
|
||||||
--background-color: hsl(var(--background-color_hsl));
|
|
||||||
--foreground-color: hsl(var(--foreground-color_hsl));
|
|
||||||
|
|
||||||
// Meta-variables
|
|
||||||
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
|
|
||||||
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
|
|
||||||
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
|
|
||||||
--foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
|
|
||||||
--accent-color_h: calc(var(--brand-color_h) - 15);
|
|
||||||
--accent-color_s: 86%;
|
|
||||||
--accent-color_l: 44%;
|
|
||||||
|
|
||||||
// Modifiers
|
|
||||||
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
|
|
||||||
--brand-color--med: hsla(var(--brand-color_hsl), 0.2);
|
|
||||||
--accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
|
|
||||||
--accent-color--bright: hsl(
|
|
||||||
var(--accent-color_h),
|
|
||||||
var(--accent-color_s),
|
|
||||||
calc(var(--accent-color_l) + 3%)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-mode-light {
|
|
||||||
// Primary variables
|
|
||||||
--highlight-text-color: hsl(
|
|
||||||
var(--brand-color_h),
|
|
||||||
var(--brand-color_s),
|
|
||||||
calc(var(--brand-color_l) - 8%)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Meta-variables
|
|
||||||
--background-color_h: 0;
|
|
||||||
--background-color_s: 0%;
|
|
||||||
--background-color_l: 94.9%;
|
|
||||||
--foreground-color_h: 0;
|
|
||||||
--foreground-color_s: 0%;
|
|
||||||
--foreground-color_l: 100%;
|
|
||||||
|
|
||||||
// Modifiers
|
|
||||||
--brand-color--hicontrast: hsl(
|
|
||||||
var(--brand-color_h),
|
|
||||||
var(--brand-color_s),
|
|
||||||
calc(var(--brand-color_l) - 5%)
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in new issue