mirror of
https://github.com/flarum/framework.git
synced 2025-02-22 02:49:54 +08:00
Keep post actions visible when controls dropdown is open
Also show without hover on touch devices
This commit is contained in:
parent
8ab0686666
commit
d610ea663f
@ -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.
|
||||||
*
|
*
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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();
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user