treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Expand dropdown leftways on status view

lolsob-rspec
blackle 2017-01-08 06:32:37 -05:00
parent 72843ea705
commit 9d66dfecf6
5 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/components/components/dropdown_menu.jsx
View File

@ -1,13 +1,15 @@
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
const DropdownMenu = ({ icon, items, size }) => { const DropdownMenu = ({ icon, items, size, direction }) => {
const directionClass = (direction == "left") ? "dropdown__left" : "dropdown__right";
return ( return (
<Dropdown> <Dropdown>
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}> <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
<i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} /> <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
</DropdownTrigger> </DropdownTrigger>
<DropdownContent style={{ lineHeight: '18px', textAlign: 'left' }}> <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
<ul> <ul>
{items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => { {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => {
if (typeof action === 'function') { if (typeof action === 'function') {

2
app/assets/javascripts/components/components/status_action_bar.jsx
View File

@ -80,7 +80,7 @@ const StatusActionBar = React.createClass({
<div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
<div style={{ width: '18px', height: '18px', float: 'left' }}> <div style={{ width: '18px', height: '18px', float: 'left' }}>
<DropdownMenu items={menu} icon='ellipsis-h' size={18} /> <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" />
</div> </div>
</div> </div>
); );

2
app/assets/javascripts/components/features/account/components/action_bar.jsx
View File

@ -66,7 +66,7 @@ const ActionBar = React.createClass({
return ( return (
<div style={outerStyle}> <div style={outerStyle}>
<div style={outerDropdownStyle}> <div style={outerDropdownStyle}>
<DropdownMenu items={menu} icon='bars' size={24} /> <DropdownMenu items={menu} icon='bars' size={24} direction="right" />
</div> </div>
<div style={outerLinksStyle}> <div style={outerLinksStyle}>

2
app/assets/javascripts/components/features/status/components/action_bar.jsx
View File

@ -62,7 +62,7 @@ const ActionBar = React.createClass({
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReplyClick} /></div> <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReplyClick} /></div>
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton disabled={status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={status.get('visibility') === 'private' ? 'lock' : 'retweet'} onClick={this.handleReblogClick} /></div> <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton disabled={status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={status.get('visibility') === 'private' ? 'lock' : 'retweet'} onClick={this.handleReblogClick} /></div>
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} /></div> <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div>
</div> </div>
); );
} }

9
app/assets/stylesheets/components.scss
View File

@ -641,3 +641,12 @@
background: image-url('mastodon-getting-started.png') no-repeat 0 100% local; background: image-url('mastodon-getting-started.png') no-repeat 0 100% local;
height: 100%; height: 100%;
} }
.dropdown__content.dropdown__left {
transform: translateX(-108px);
&::before {
right: 8px !important;
left: initial !important;
}
}