mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-27 11:53:41 +01:00
WIP <Compose> Refactor; <ActionsModal>; dropdowns
This commit is contained in:
kibigo!
parent
083170bec7
commit
b4a3792201
7 changed files with 534 additions and 479 deletions
|
|
@ -133,8 +133,12 @@ export default class Dropdown extends React.PureComponent {
|
||||||
|
|
||||||
this.props.onModalOpen({
|
this.props.onModalOpen({
|
||||||
status,
|
status,
|
||||||
actions: items,
|
actions: items.map(
|
||||||
onClick: this.handleItemClick,
|
(item, i) => ({
|
||||||
|
...item,
|
||||||
|
name: `${item.text}-${i}`,
|
||||||
|
onClick: this.handleItemClick.bind(i),
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
@ -162,8 +166,7 @@ export default class Dropdown extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleItemClick = e => {
|
handleItemClick = (i, e) => {
|
||||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
|
||||||
const { action, to } = this.props.items[i];
|
const { action, to } = this.props.items[i];
|
||||||
|
|
||||||
this.handleClose();
|
this.handleClose();
|
||||||
|
|
|
||||||
97
app/javascript/flavours/glitch/components/link.js
Normal file
97
app/javascript/flavours/glitch/components/link.js
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
// Inspired by <CommonLink> from Mastodon GO!
|
||||||
|
// ~ 😘 kibi!
|
||||||
|
|
||||||
|
// Package imports.
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
// Utils.
|
||||||
|
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
||||||
|
|
||||||
|
// Handlers.
|
||||||
|
const handlers = {
|
||||||
|
|
||||||
|
// We don't handle clicks that are made with modifiers, since these
|
||||||
|
// often have special browser meanings (eg, "open in new tab").
|
||||||
|
click (e) {
|
||||||
|
const { onClick } = this.props;
|
||||||
|
if (!onClick || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onClick(e);
|
||||||
|
e.preventDefault(); // Prevents following of the link
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// The component.
|
||||||
|
export default class Link extends React.PureComponent {
|
||||||
|
|
||||||
|
// Constructor.
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
assignHandlers(this, handlers);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rendering.
|
||||||
|
render () {
|
||||||
|
const { click } = this.handlers;
|
||||||
|
const {
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
href,
|
||||||
|
onClick,
|
||||||
|
role,
|
||||||
|
title,
|
||||||
|
...rest
|
||||||
|
} = this.props;
|
||||||
|
const computedClass = classNames('link', className, role);
|
||||||
|
|
||||||
|
// We assume that our `onClick` is a routing function and give it
|
||||||
|
// the qualities of a link even if no `href` is provided. However,
|
||||||
|
// if we have neither an `onClick` or an `href`, our link is
|
||||||
|
// purely presentational.
|
||||||
|
const conditionalProps = {};
|
||||||
|
if (href) {
|
||||||
|
conditionalProps.href = href;
|
||||||
|
conditionalProps.onClick = click;
|
||||||
|
} else if (onClick) {
|
||||||
|
conditionalProps.onClick = click;
|
||||||
|
conditionalProps.role = 'link';
|
||||||
|
conditionalProps.tabIndex = 0;
|
||||||
|
} else {
|
||||||
|
conditionalProps.role = 'presentation';
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we were provided a `role` it overwrites any that we may have
|
||||||
|
// set above. This can be used for "links" which are actually
|
||||||
|
// buttons.
|
||||||
|
if (role) {
|
||||||
|
conditionalProps.role = role;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rendering. We set `rel='noopener'` for user privacy, and our
|
||||||
|
// `target` as `'_blank'`.
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className={computedClass}
|
||||||
|
{...conditionalProps}
|
||||||
|
rel='noopener'
|
||||||
|
target='_blank'
|
||||||
|
title={title}
|
||||||
|
{...rest}
|
||||||
|
>{children}</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Props.
|
||||||
|
Link.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
className: PropTypes.string,
|
||||||
|
href: PropTypes.string, // The link destination
|
||||||
|
onClick: PropTypes.func, // A function to call instead of opening the link
|
||||||
|
role: PropTypes.string, // An ARIA role for the link
|
||||||
|
title: PropTypes.string, // A title for the link
|
||||||
|
};
|
||||||
|
|
@ -80,11 +80,16 @@ const handlers = {
|
||||||
}) => ({
|
}) => ({
|
||||||
...rest,
|
...rest,
|
||||||
active: value && name === value,
|
active: value && name === value,
|
||||||
|
name,
|
||||||
onClick (e) {
|
onClick (e) {
|
||||||
e.preventDefault(); // Prevents focus from changing
|
e.preventDefault(); // Prevents focus from changing
|
||||||
onModalClose();
|
onModalClose();
|
||||||
onChange(name);
|
onChange(name);
|
||||||
},
|
},
|
||||||
|
onPassiveClick (e) {
|
||||||
|
e.preventDefault(); // Prevents focus from changing
|
||||||
|
onChange(name);
|
||||||
|
},
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
@ -191,7 +196,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
|
||||||
>
|
>
|
||||||
{({ opacity, scaleX, scaleY }) => (
|
{({ opacity, scaleX, scaleY }) => (
|
||||||
<div
|
<div
|
||||||
className='dropdown'
|
className='composer--options--dropdown__dropdown'
|
||||||
ref={this.setRef}
|
ref={this.setRef}
|
||||||
style={{
|
style={{
|
||||||
opacity: opacity,
|
opacity: opacity,
|
||||||
|
|
|
||||||
|
|
@ -91,6 +91,7 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||||
case !!icon:
|
case !!icon:
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
|
className='icon'
|
||||||
fullwidth
|
fullwidth
|
||||||
icon={icon}
|
icon={icon}
|
||||||
/>
|
/>
|
||||||
|
|
@ -100,11 +101,11 @@ export default class ComposerOptionsDropdownItem extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}()}
|
}()}
|
||||||
{meta ? (
|
{meta ? (
|
||||||
<div>
|
<div className='content'>
|
||||||
<strong>{text}</strong>
|
<strong>{text}</strong>
|
||||||
{meta}
|
{meta}
|
||||||
</div>
|
</div>
|
||||||
) : <div>{text}</div>}
|
) : <div className='content'>{text}</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,26 @@ import StatusContent from 'flavours/glitch/components/status_content';
|
||||||
import Avatar from 'flavours/glitch/components/avatar';
|
import Avatar from 'flavours/glitch/components/avatar';
|
||||||
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
|
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
|
||||||
import DisplayName from 'flavours/glitch/components/display_name';
|
import DisplayName from 'flavours/glitch/components/display_name';
|
||||||
import IconButton from 'flavours/glitch/components/icon_button';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
import Link from 'flavours/glitch/components/link';
|
||||||
|
import Toggle from 'react-toggle';
|
||||||
|
|
||||||
export default class ActionsModal extends ImmutablePureComponent {
|
export default class ActionsModal extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
status: ImmutablePropTypes.map,
|
status: ImmutablePropTypes.map,
|
||||||
actions: PropTypes.array,
|
actions: PropTypes.arrayOf(PropTypes.shape({
|
||||||
onClick: PropTypes.func,
|
active: PropTypes.bool,
|
||||||
|
href: PropTypes.string,
|
||||||
|
icon: PropTypes.string,
|
||||||
|
meta: PropTypes.node,
|
||||||
|
name: PropTypes.string,
|
||||||
|
on: PropTypes.bool,
|
||||||
|
onClick: PropTypes.func,
|
||||||
|
onPassiveClick: PropTypes.func,
|
||||||
|
text: PropTypes.node,
|
||||||
|
})),
|
||||||
};
|
};
|
||||||
|
|
||||||
renderAction = (action, i) => {
|
renderAction = (action, i) => {
|
||||||
|
|
@ -22,17 +33,57 @@ export default class ActionsModal extends ImmutablePureComponent {
|
||||||
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
|
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { icon = null, text, meta = null, active = false, href = '#' } = action;
|
const {
|
||||||
|
active,
|
||||||
|
href,
|
||||||
|
icon,
|
||||||
|
meta,
|
||||||
|
name,
|
||||||
|
on,
|
||||||
|
onClick,
|
||||||
|
onPassiveClick,
|
||||||
|
text,
|
||||||
|
} = action;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li key={`${text}-${i}`}>
|
<li key={name || i}>
|
||||||
<a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
|
<Link
|
||||||
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' />}
|
className={classNames('link', { active })}
|
||||||
<div>
|
href={href}
|
||||||
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
|
onClick={onClick}
|
||||||
<div>{meta}</div>
|
role={onClick ? 'button' : null}
|
||||||
</div>
|
>
|
||||||
</a>
|
{function () {
|
||||||
|
|
||||||
|
// We render a `<Toggle>` if we were provided an `on`
|
||||||
|
// property, and otherwise show an `<Icon>` if available.
|
||||||
|
switch (true) {
|
||||||
|
case on !== null && typeof on !== 'undefined':
|
||||||
|
return (
|
||||||
|
<Toggle
|
||||||
|
checked={on}
|
||||||
|
onChange={onPassiveClick || onClick}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case !!icon:
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
className='icon'
|
||||||
|
fullwidth
|
||||||
|
icon={icon}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}()}
|
||||||
|
{meta ? (
|
||||||
|
<div>
|
||||||
|
<strong>{text}</strong>
|
||||||
|
{meta}
|
||||||
|
</div>
|
||||||
|
) : <div>{text}</div>}
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,315 +1,370 @@
|
||||||
.composer {
|
.composer { padding: 10px }
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
.composer--spoiler {
|
.composer--spoiler {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
outline: 0;
|
||||||
|
color: $ui-base-color;
|
||||||
|
background: $simple-background-color;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
resize: vertical;
|
||||||
|
|
||||||
|
&:focus { outline: 0 }
|
||||||
|
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--warning {
|
||||||
|
color: darken($ui-secondary-color, 65%);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background: $ui-primary-color;
|
||||||
|
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: darken($ui-primary-color, 33%);
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover { text-decoration: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--reply {
|
||||||
|
margin: 0 0 -2px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 10px;
|
||||||
|
background: $ui-primary-color;
|
||||||
|
|
||||||
|
& > header {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& > .account {
|
||||||
|
& > .avatar {
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .display_name {
|
||||||
|
color: $ui-base-color;
|
||||||
|
display: block;
|
||||||
|
padding-right: 25px;
|
||||||
|
max-width: 100%;
|
||||||
|
line-height: 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .cancel {
|
||||||
|
float: right;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .content {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: $ui-base-color;
|
||||||
|
word-wrap: break-word;
|
||||||
|
font-weight: 400;
|
||||||
|
overflow: visible;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emojione {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: -5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
&:last-child { margin-bottom: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: lighten($ui-base-color, 20%);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover { text-decoration: underline }
|
||||||
|
|
||||||
|
&.mention {
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
span { text-decoration: underline }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--textarea {
|
||||||
|
background: $simple-background-color;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:disabled { background: $ui-secondary-color }
|
||||||
|
|
||||||
|
& > .textarea {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px 4px 0 0;
|
||||||
padding: 10px;
|
padding: 10px 32px 0 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: $ui-base-color;
|
color: $ui-base-color;
|
||||||
background: $simple-background-color;
|
background: $simple-background-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: none;
|
||||||
|
|
||||||
&:focus { outline: 0 }
|
&:focus { outline: 0 }
|
||||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
||||||
}
|
|
||||||
|
|
||||||
.composer--warning {
|
@include limited-single-column('screen and (max-width: 600px)') {
|
||||||
color: darken($ui-secondary-color, 65%);
|
height: 100px !important; // prevent auto-resize textarea
|
||||||
margin-bottom: 15px;
|
resize: vertical;
|
||||||
background: $ui-primary-color;
|
|
||||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: darken($ui-primary-color, 33%);
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover { text-decoration: none }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--reply {
|
|
||||||
margin: 0 0 -2px;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
padding: 10px;
|
|
||||||
background: $ui-primary-color;
|
|
||||||
|
|
||||||
& > header {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
& > .account {
|
|
||||||
& > .avatar {
|
|
||||||
float: left;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .display_name {
|
|
||||||
color: $ui-base-color;
|
|
||||||
display: block;
|
|
||||||
padding-right: 25px;
|
|
||||||
max-width: 100%;
|
|
||||||
line-height: 24px;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .cancel {
|
|
||||||
float: right;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .content {
|
|
||||||
position: relative;
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 0 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: $ui-base-color;
|
|
||||||
word-wrap: break-word;
|
|
||||||
font-weight: 400;
|
|
||||||
overflow: visible;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emojione {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin: -5px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
&:last-child { margin-bottom: 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: lighten($ui-base-color, 20%);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover { text-decoration: underline }
|
|
||||||
|
|
||||||
&.mention {
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
span { text-decoration: underline }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--textarea {
|
|
||||||
background: $simple-background-color;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:disabled { background: $ui-secondary-color }
|
|
||||||
|
|
||||||
& > .textarea {
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
padding: 10px 32px 0 10px;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100px;
|
|
||||||
outline: 0;
|
|
||||||
color: $ui-base-color;
|
|
||||||
background: $simple-background-color;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
resize: none;
|
|
||||||
|
|
||||||
&:focus { outline: 0 }
|
|
||||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
|
|
||||||
|
|
||||||
@include limited-single-column('screen and (max-width: 600px)') {
|
|
||||||
height: 100px !important; // prevent auto-resize textarea
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--textarea--suggestions {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
top: 100%;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
padding: 6px;
|
|
||||||
width: 100%;
|
|
||||||
color: $ui-base-color;
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 99;
|
|
||||||
|
|
||||||
&[hidden] { display: none }
|
|
||||||
|
|
||||||
.composer--textarea--suggestions--item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active { background: darken($ui-secondary-color, 10%) }
|
|
||||||
|
|
||||||
& > .emoji {
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin-right: 8px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--upload_form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 5px;
|
|
||||||
color: $ui-base-color;
|
|
||||||
background: $simple-background-color;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.composer--upload_form--item {
|
|
||||||
flex: 1 1 0;
|
|
||||||
margin: 5px;
|
|
||||||
min-width: 40%;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 100px;
|
|
||||||
width: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 2;
|
|
||||||
transition: opacity .1s ease;
|
|
||||||
|
|
||||||
&:focus { color: $white }
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
opacity: 0.54;
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .close { mix-blend-mode: difference }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
& > div {
|
|
||||||
input { opacity: 1 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--options {
|
|
||||||
padding: 10px;
|
|
||||||
background: darken($simple-background-color, 8%);
|
|
||||||
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: content-box;
|
|
||||||
padding: 0 3px;
|
|
||||||
line-height: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > hr {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 3px;
|
|
||||||
border-width: 0 0 0 1px;
|
|
||||||
border-style: none none none solid;
|
|
||||||
border-color: transparent transparent transparent darken($simple-background-color, 24%);
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer--publisher {
|
|
||||||
padding-top: 10px;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
& > .count {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 16px 0 8px;
|
|
||||||
padding-top: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .primary {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .side_arm {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 2px 0 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 36px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.over {
|
|
||||||
& > .count { color: $warning-red }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.composer--textarea--suggestions {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 100%;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
padding: 6px;
|
||||||
|
width: 100%;
|
||||||
|
color: $ui-base-color;
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
&[hidden] { display: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--textarea--suggestions--item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active { background: darken($ui-secondary-color, 10%) }
|
||||||
|
|
||||||
|
& > .emoji {
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--upload_form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 5px;
|
||||||
|
color: $ui-base-color;
|
||||||
|
background: $simple-background-color;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--upload_form--item {
|
||||||
|
flex: 1 1 0;
|
||||||
|
margin: 5px;
|
||||||
|
min-width: 40%;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transition: opacity .1s ease;
|
||||||
|
|
||||||
|
&:focus { color: $white }
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
opacity: 0.54;
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .close { mix-blend-mode: difference }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
& > div {
|
||||||
|
input { opacity: 1 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--options {
|
||||||
|
padding: 10px;
|
||||||
|
background: darken($simple-background-color, 8%);
|
||||||
|
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding: 0 3px;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > hr {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 3px;
|
||||||
|
border-width: 0 0 0 1px;
|
||||||
|
border-style: none none none solid;
|
||||||
|
border-color: transparent transparent transparent darken($simple-background-color, 24%);
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--options--dropdown {
|
||||||
|
& > .value { transition: none }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
& > .value {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--options--dropdown__dropdown {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||||
|
background: $simple-background-color;
|
||||||
|
overflow: hidden;
|
||||||
|
transform-origin: 50% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--options--dropdown--item {
|
||||||
|
color: $ui-base-color;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& > .content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
color: darken($ui-primary-color, 24%);
|
||||||
|
|
||||||
|
&:not(:first-child) { margin-left: 10px }
|
||||||
|
|
||||||
|
strong {
|
||||||
|
display: block;
|
||||||
|
color: $ui-base-color;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
background: $ui-highlight-color;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
& > .content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active:hover { background: lighten($ui-highlight-color, 4%) }
|
||||||
|
}
|
||||||
|
|
||||||
|
.composer--publisher {
|
||||||
|
padding-top: 10px;
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& > .count {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 16px 0 8px;
|
||||||
|
padding-top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .primary {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .side_arm {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 2px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 36px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.over {
|
||||||
|
& > .count { color: $warning-red }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2784,156 +2784,6 @@
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-dropdown__dropdown {
|
|
||||||
position: absolute;
|
|
||||||
background: $simple-background-color;
|
|
||||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-left: 40px;
|
|
||||||
overflow: hidden;
|
|
||||||
transform-origin: 50% 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__option {
|
|
||||||
color: $ui-base-color;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active:hover {
|
|
||||||
background: lighten($ui-highlight-color, 4%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__option__icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: darken($ui-primary-color, 24%);
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 500;
|
|
||||||
display: block;
|
|
||||||
color: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown.active {
|
|
||||||
.privacy-dropdown__value {
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__dropdown {
|
|
||||||
display: block;
|
|
||||||
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown__dropdown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 27px;
|
|
||||||
width: 210px;
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 0 4px 4px;
|
|
||||||
z-index: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown__option {
|
|
||||||
color: $ui-base-color;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
.advanced-options-dropdown__option__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active:hover {
|
|
||||||
background: lighten($ui-highlight-color, 4%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown__option__toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown__option__content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: darken($ui-primary-color, 24%);
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 500;
|
|
||||||
display: block;
|
|
||||||
color: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown.open {
|
|
||||||
.advanced-options-dropdown__value {
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.advanced-options-dropdown__dropdown {
|
|
||||||
display: block;
|
|
||||||
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-root {
|
.modal-root {
|
||||||
transition: opacity 0.3s linear;
|
transition: opacity 0.3s linear;
|
||||||
will-change: opacity;
|
will-change: opacity;
|
||||||
|
|
@ -3488,7 +3338,7 @@
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
|
|
||||||
.actions-modal__item-label {
|
strong {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3501,31 +3351,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
li:not(:empty) {
|
li:not(:empty) {
|
||||||
a {
|
& > .link {
|
||||||
color: $ui-base-color;
|
color: $ui-base-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: none;
|
||||||
&,
|
|
||||||
button {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
&,
|
background: $ui-highlight-color;
|
||||||
button {
|
color: $primary-text-color;
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:first-child {
|
& > .icon {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue