mirrors
/
glitch-social
mirror of https://github.com/glitch-soc/mastodon
1
0
Fork 0
Code Releases Activity

Styling and autosuggest fixes for #293

This commit is contained in:
kibigo! 2018-01-05 20:04:13 -08:00
parent 8bf9d9362a
commit ad10a80a99
10 changed files with 128 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/flavours/glitch/components/account.js
View File

@ -105,10 +105,22 @@ export default class Account extends ImmutablePureComponent {
}
return small ? (
<div className='account small'>
<div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div>
<DisplayName account={account} />
<Permalink
className='account small'
href={account.get('url')}
to={`/accounts/${account.get('id')}`}
>
<div className='account__avatar-wrapper'>
<Avatar
account={account}
size={24}
/>
</div>
<DisplayName
account={account}
inline
/>
</Permalink>
) : (
<div className='account'>
<div className='account__wrapper'>

34
app/javascript/flavours/glitch/components/display_name.js
View File

@ -1,28 +1,30 @@
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
export default class DisplayName extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
className: PropTypes.string,
};
render () {
const {
// The component.
export default function DisplayName ({
account,
className,
} = this.props;
const computedClass = classNames('display-name', className);
const displayNameHtml = { __html: account.get('display_name_html') };
inline,
}) {
const computedClass = classNames('display-name', { inline }, className);
return (
// The result.
return account ? (
<span className={computedClass}>
<strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
<strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
{inline ? ' ' : null}
<span className='display-name__account'>@{account.get('acct')}</span>
</span>
);
) : null;
}
}
// Props.
DisplayName.propTypes = {
account: ImmutablePropTypes.map,
className: PropTypes.string,
inline: PropTypes.bool,
};

8
app/javascript/flavours/glitch/components/permalink.js
View File

@ -22,7 +22,13 @@ export default class Permalink extends React.PureComponent {
}
render () {
const { href, children, className, ...other } = this.props;
const {
children,
className,
href,
to,
...other
} = this.props;
return (
<a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>

11
app/javascript/flavours/glitch/features/composer/index.js
View File

@ -59,7 +59,7 @@ function mapStateToProps (state) {
preselectDate: state.getIn(['compose', 'preselectDate']),
privacy: state.getIn(['compose', 'privacy']),
progress: state.getIn(['compose', 'progress']),
replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null,
replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
sideArm: state.getIn(['local_settings', 'side_arm']),
@ -265,7 +265,6 @@ class Composer extends React.Component {
handleSubmit,
handleRefTextarea,
} = this.handlers;
const { history } = this.context;
const {
acceptContentTypes,
amUnlocked,
@ -317,7 +316,6 @@ class Composer extends React.Component {
<ComposerReply
account={replyAccount}
content={replyContent}
history={history}
intl={intl}
onCancel={onCancelReply}
/>
@ -384,11 +382,6 @@ class Composer extends React.Component {
}
// Context
Composer.contextTypes = {
history: PropTypes.object,
};
// Props.
Composer.propTypes = {
intl: PropTypes.object.isRequired,
@ -405,7 +398,7 @@ Composer.propTypes = {
preselectDate: PropTypes.instanceOf(Date),
privacy: PropTypes.string,
progress: PropTypes.number,
replyAccount: ImmutablePropTypes.map,
replyAccount: PropTypes.string,
replyContent: PropTypes.string,
resetFileKey: PropTypes.number,
sideArm: PropTypes.string,

40
app/javascript/flavours/glitch/features/composer/reply/index.js
View File

@ -1,12 +1,10 @@
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages } from 'react-intl';
// Components.
import Avatar from 'flavours/glitch/components/avatar';
import DisplayName from 'flavours/glitch/components/display_name';
import AccountContainer from 'flavours/glitch/containers/account_container';
import IconButton from 'flavours/glitch/components/icon_button';
// Utils.
@ -31,17 +29,6 @@ const handlers = {
onCancel();
}
},
// Handles a click on the status's account.
handleClickAccount () {
const {
account,
history,
} = this.props;
if (history) {
history.push(`/accounts/${account.get('id')}`);
}
},
};
// The component.
@ -55,10 +42,7 @@ export default class ComposerReply extends React.PureComponent {
// Rendering.
render () {
const {
handleClick,
handleClickAccount,
} = this.handlers;
const { handleClick } = this.handlers;
const {
account,
content,
@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent {
title={intl.formatMessage(messages.cancel)}
/>
{account ? (
<a
className='account'
href={account.get('url')}
onClick={handleClickAccount}
>
<Avatar
account={account}
className='avatar'
size={24}
<AccountContainer
id={account}
small
/>
<DisplayName
account={account}
className='display_name'
/>
</a>
) : null}
</header>
<div
@ -105,9 +78,8 @@ export default class ComposerReply extends React.PureComponent {
}
ComposerReply.propTypes = {
account: ImmutablePropTypes.map,
account: PropTypes.string,
content: PropTypes.string,
history: PropTypes.object,
intl: PropTypes.object.isRequired,
onCancel: PropTypes.func,
};

4
app/javascript/flavours/glitch/features/composer/textarea/index.js
View File

@ -32,7 +32,7 @@ const handlers = {
// When blurring the textarea, suggestions are hidden.
handleBlur () {
//this.setState({ suggestionsHidden: true });
this.setState({ suggestionsHidden: true });
},
// When the contents of the textarea change, we have to pull up new
@ -57,7 +57,7 @@ const handlers = {
const right = value.slice(selectionStart).search(/[\s\u200B]/);
const token = function () {
switch (true) {
case left < 0 || /[@:]/.test(!value[left]):
case left < 0 || !/[@:]/.test(value[left]):
return null;
case right < 0:
return value.slice(left);

15
app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
View File

@ -24,9 +24,16 @@ const handlers = {
} = this.props;
if (onClick) {
e.preventDefault();
e.stopPropagation(); // Prevents following account links
onClick(index);
}
},
// This prevents the focus from changing, which would mess with
// our suggestion code.
handleMouseDown (e) {
e.preventDefault();
},
};
// The component.
@ -40,7 +47,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
// Rendering.
render () {
const { handleClick } = this.handlers;
const {
handleMouseDown,
handleClick,
} = this.handlers;
const {
selected,
suggestion,
@ -51,7 +61,8 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
return (
<div
className={computedClass}
onMouseDown={handleClick}
onMouseDown={handleMouseDown}
onClickCapture={handleClick} // Jumps in front of contents
role='button'
tabIndex='0'
>

38
app/javascript/flavours/glitch/styles/components/composer.scss
View File

@ -52,22 +52,7 @@
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;
}
}
& > .account.small { color: $ui-base-color }
& > .cancel {
float: right;
@ -87,13 +72,6 @@
overflow: visible;
white-space: pre-wrap;
padding-top: 5px;
}
.emojione {
width: 20px;
height: 20px;
margin: -5px 0 0;
}
p {
margin-bottom: 20px;
@ -117,6 +95,13 @@
}
}
.emojione {
width: 20px;
height: 20px;
margin: -5px 0 0;
}
}
.composer--textarea {
position: relative;
@ -175,6 +160,7 @@
padding: 10px;
font-size: 14px;
line-height: 18px;
overflow: hidden;
cursor: pointer;
&:hover,
@ -191,6 +177,12 @@
height: 18px;
}
}
& > .account.small {
.display-name {
& > span { color: lighten($ui-base-color, 36%) }
}
}
}
.composer--upload_form {

49
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -745,6 +745,8 @@
.account {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
color: inherit;
text-decoration: none;
.account__display-name {
flex: 1 1 auto;
@ -762,27 +764,8 @@
& > .account__avatar-wrapper { margin: 0 8px 0 0 }
& > .display-name {
display: block;
padding: 0;
height: auto;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
& > strong {
display: inline;
font-size: inherit;
line-height: inherit;
}
& > span {
display: inline;
color: lighten($ui-base-color, 36%);
font-size: inherit;
line-height: inherit;
&::before { content: " " }
}
height: 24px;
line-height: 24px;
}
}
}
@ -1243,6 +1226,30 @@
text-decoration: underline;
}
}
&.inline {
padding: 0;
height: 18px;
font-size: 15px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
strong {
display: inline;
height: auto;
font-size: inherit;
line-height: inherit;
}
span {
display: inline;
height: auto;
font-size: inherit;
line-height: inherit;
}
}
}
.status__relative-time,