random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styled AutosuggestAccount and AutosuggestEmoji

Browse Source 
• Styled:
- AutosuggestAccount and AutosuggestEmoji
This commit is contained in:
mgabdev 2020-06-15 22:59:48 -04:00
parent 218a55c848
commit 3570ada5b7
2 changed files with 23 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/javascript/gabsocial/components/autosuggest_account.js
View File

@ -1,18 +1,18 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component'
import { makeGetAccount } from '../selectors'; import { makeGetAccount } from '../selectors'
import Avatar from './avatar'; import Avatar from './avatar'
import DisplayName from './display_name'; import DisplayName from './display_name'
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getAccount = makeGetAccount(); const getAccount = makeGetAccount()
const mapStateToProps = (state, { id }) => ({ const mapStateToProps = (state, { id }) => ({
account: getAccount(state, id), account: getAccount(state, id),
}); })
return mapStateToProps; return mapStateToProps
}; }
export default export default
@connect(makeMapStateToProps) @connect(makeMapStateToProps)
@ -23,16 +23,19 @@ class AutosuggestAccount extends ImmutablePureComponent {
} }
render () { render () {
const { account } = this.props; const { account } = this.props
return ( return (
<div className='autosuggest-account' title={account.get('acct')}> <div
<div className='autosuggest-account__icon'> className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
<Avatar account={account} size={18} /> title={account.get('acct')}
>
<Avatar account={account} size={26} />
<div className={_s.ml10}>
<DisplayName account={account} noRelationship noHover />
</div> </div>
<DisplayName account={account} noRelationship noHover />
</div> </div>
); )
} }
} }

36
app/javascript/gabsocial/components/autosuggest_emoji.js
View File

@ -1,36 +1,8 @@
import unicodeMapping from './emoji/emoji_unicode_mapping_light' import unicodeMapping from './emoji/emoji_unicode_mapping_light'
import Text from './text'
const assetHost = process.env.CDN_HOST || '' const assetHost = process.env.CDN_HOST || ''
// .autosuggest-emoji {
// display: flex;
// justify-items: center;
// align-content: flex-start;
// flex-direction: row;
// @include text-sizing(14px, 400, 18px);
// img {
// display: block;
// margin-right: 8px;
// @include size(16px);
// }
// }
// .emojione {
// font-size: inherit;
// vertical-align: middle;
// object-fit: contain;
// margin: -.2ex .15em .2ex;
// @include size(16px);
// img {
// width: auto;
// }
// }
export default class AutosuggestEmoji extends PureComponent { export default class AutosuggestEmoji extends PureComponent {
static propTypes = { static propTypes = {
@ -52,9 +24,11 @@ export default class AutosuggestEmoji extends PureComponent {
} }
return ( return (
<div className='autosuggest-emoji'> <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<img className='emojione' src={url} alt={emoji.native || emoji.colons} /> <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
{emoji.colons} <Text className={_s.ml10}>
{emoji.colons}
</Text>
</div> </div>
) )
} }