Keep post actions visible when controls dropdown is open

Also show without hover on touch devices
This commit is contained in:
Toby Zerner 2015-09-22 17:05:14 +09:30
parent 8ab0686666
commit d610ea663f
4 changed files with 31 additions and 6 deletions

View File

@ -31,7 +31,8 @@ export default class Post extends Component {
() => { () => {
const user = this.props.post.user(); const user = this.props.post.user();
return user && user.freshness; return user && user.freshness;
} },
() => this.controlsOpen
); );
} }
@ -56,7 +57,9 @@ export default class Post extends Component {
className="Post-controls" className="Post-controls"
buttonClassName="Button Button--icon Button--flat" buttonClassName="Button Button--icon Button--flat"
menuClassName="Dropdown-menu--right" menuClassName="Dropdown-menu--right"
icon="ellipsis-h"> icon="ellipsis-h"
onshow={() => this.$('.Post-actions').addClass('open')}
onhide={() => this.$('.Post-actions').removeClass('open')}>
{controls} {controls}
</Dropdown> </Dropdown>
</li> : ''} </li> : ''}
@ -70,6 +73,13 @@ export default class Post extends Component {
); );
} }
config(isInitialized, context) {
const $actions = this.$('.Post-actions');
const $controls = this.$('.Post-controls');
$actions.toggleClass('open', $controls.hasClass('open'));
}
/** /**
* Get attributes for the post element. * Get attributes for the post element.
* *

View File

@ -77,7 +77,11 @@ export default function boot(app) {
// Initialize FastClick, which makes links and buttons much more responsive on // Initialize FastClick, which makes links and buttons much more responsive on
// touch devices. // touch devices.
$(() => FastClick.attach(document.body)); $(() => {
FastClick.attach(document.body)
$('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');
});
app.booted = true; app.booted = true;
} }

View File

@ -14,6 +14,7 @@ import listItems from 'flarum/helpers/listItems';
* - `caretIcon` The name of an icon to show on the right of the button. * - `caretIcon` The name of an icon to show on the right of the button.
* - `label` The label of the dropdown toggle button. Defaults to 'Controls'. * - `label` The label of the dropdown toggle button. Defaults to 'Controls'.
* - `onhide` * - `onhide`
* - `onshow`
* *
* The children will be displayed as a list inside of the dropdown menu. * The children will be displayed as a list inside of the dropdown menu.
*/ */
@ -52,9 +53,14 @@ export default class Dropdown extends Component {
'Dropdown-menu--top', 'Dropdown-menu--top',
$menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height() $menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height()
); );
if (this.props.onshow) {
this.props.onshow();
m.redraw();
}
}); });
this.$().on('hide.bs.dropdown', () => { this.$().on('hidden.bs.dropdown', () => {
if (this.props.onhide) { if (this.props.onhide) {
this.props.onhide(); this.props.onhide();
m.redraw(); m.redraw();

View File

@ -259,7 +259,9 @@
} }
@media @tablet-up { @media @tablet-up {
opacity: 0; .no-touch & {
opacity: 0;
}
} }
> ul { > ul {
@ -270,9 +272,12 @@
vertical-align: top; vertical-align: top;
} }
} }
.Post:hover & { .Post:hover &, &.open {
opacity: 1; opacity: 1;
} }
&.open {
z-index: 2;
}
} }
.PostPreview { .PostPreview {