diff options
Diffstat (limited to 'app')
5 files changed, 16 insertions, 5 deletions
diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/app/assets/javascripts/components/components/dropdown_menu.jsx index 450550d55..ffef29c00 100644 --- a/app/assets/javascripts/components/components/dropdown_menu.jsx +++ b/app/assets/javascripts/components/components/dropdown_menu.jsx @@ -1,13 +1,15 @@ 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 ( <Dropdown> <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}> <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} /> </DropdownTrigger> - <DropdownContent style={{ lineHeight: '18px', textAlign: 'left' }}> + <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}> <ul> {items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => { if (typeof action === 'function') { diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx index afaf82561..26f9d3c27 100644 --- a/app/assets/javascripts/components/components/status_action_bar.jsx +++ b/app/assets/javascripts/components/components/status_action_bar.jsx @@ -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={{ 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> ); diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx index 45de75d97..ab7b08dc7 100644 --- a/app/assets/javascripts/components/features/account/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx @@ -66,7 +66,7 @@ const ActionBar = React.createClass({ return ( <div style={outerStyle}> <div style={outerDropdownStyle}> - <DropdownMenu items={menu} icon='bars' size={24} /> + <DropdownMenu items={menu} icon='bars' size={24} direction="right" /> </div> <div style={outerLinksStyle}> diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index 030428440..d989a1693 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -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 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' }}><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> ); } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 69595995c..0abe8c808 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -641,3 +641,12 @@ background: image-url('mastodon-getting-started.png') no-repeat 0 100% local; height: 100%; } + +.dropdown__content.dropdown__left { + transform: translateX(-108px); + + &::before { + right: 8px !important; + left: initial !important; + } +} \ No newline at end of file |