Fixes, styles improvements, cleanup, enforce classes order for classNames See merge request soapbox-pub/soapbox!2258environments/review-develop-3zknud/deployments/2597
marcin mikołajczak
2 years ago
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 {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: $base-shadow-color;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 44px;
|
||||
@apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
direction: ltr;
|
||||
|
||||
&.editable {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
@apply rounded-none h-full;
|
||||
}
|
||||
|
||||
.video-player__volume::before,
|
||||
.video-player__seek::before {
|
||||
background: currentcolor;
|
||||
opacity: 0.15;
|
||||
@apply bg-current opacity-[15];
|
||||
}
|
||||
|
||||
.video-player__seek__buffer {
|
||||
background: currentcolor;
|
||||
opacity: 0.2;
|
||||
@apply bg-current opacity-20;
|
||||
}
|
||||
|
||||
.video-player__buttons button {
|
||||
color: currentcolor;
|
||||
opacity: 0.75;
|
||||
@apply text-current opacity-[75];
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: currentcolor;
|
||||
opacity: 1;
|
||||
@apply text-current opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
.video-player__time-sep,
|
||||
.video-player__time-total,
|
||||
.video-player__time-current {
|
||||
color: currentcolor;
|
||||
@apply text-current;
|
||||
}
|
||||
|
||||
.video-player__seek::before,
|
||||
.video-player__seek__buffer,
|
||||
.video-player__seek__progress {
|
||||
top: 0;
|
||||
@apply top-0;
|
||||
}
|
||||
|
||||
.video-player__seek__handle {
|
||||
top: -4px;
|
||||
@apply -top-1;
|
||||
}
|
||||
|
||||
.video-player__controls {
|
||||
padding-top: 10px;
|
||||
background: transparent;
|
||||
@apply pt-2.5 bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler-audio {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
border: 0;
|
||||
display: block;
|
||||
@apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
|
||||
}
|
||||
|
||||
@ -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