fix backdrop filter on mac

This commit is contained in:
Bruce Liu 2020-06-21 15:25:13 +08:00
parent 06abd8bc21
commit b7e97f3db1
3 changed files with 10 additions and 4 deletions

3
dist/styles.css vendored
View File

@ -404,6 +404,9 @@ img.favicon {
body.darwin .menu-container .menu {
background: none;
}
body.darwin .menu-container .menu.item-on {
background-color: var(--neutralLight);
}
.menu-container .menu::after {
content: "";
display: block;

View File

@ -14,6 +14,7 @@ export type MenuProps = {
sources: SourceState,
groups: SourceGroup[],
searchOn: boolean,
itemOn: boolean,
toggleMenu: () => void,
allArticles: () => void,
selectSourceGroup: (group: SourceGroup, menuKey: string) => void,
@ -115,7 +116,7 @@ export class Menu extends React.Component<MenuProps> {
render() {
return this.props.status && (
<div className="menu-container" onClick={this.props.toggleMenu} style={{display: this.props.display ? "block" : "none"}}>
<div className="menu" onClick={(e) => e.stopPropagation()}>
<div className={"menu" + (this.props.itemOn ? " item-on" : "")} onClick={(e) => e.stopPropagation()}>
<div className="btn-group">
<a className="btn hide-wide" title={intl.get("menu.close")} onClick={this.props.toggleMenu}><Icon iconName="Back" /></a>
<a className="btn inline-block-wide" title={intl.get("menu.close")} onClick={this.props.toggleMenu}><Icon iconName="GlobalNavButton" /></a>

View File

@ -4,7 +4,7 @@ import { RootState } from "../scripts/reducer"
import { Menu } from "../components/menu"
import { toggleMenu, openGroupMenu } from "../scripts/models/app"
import { SourceGroup, toggleGroupExpansion } from "../scripts/models/group"
import { selectAllArticles, selectSources, toggleSearch } from "../scripts/models/page"
import { selectAllArticles, selectSources, toggleSearch, ViewType } from "../scripts/models/page"
import { initFeeds } from "../scripts/models/feed"
import { RSSSource } from "../scripts/models/source"
@ -12,16 +12,18 @@ const getApp = (state: RootState) => state.app
const getSources = (state: RootState) => state.sources
const getGroups = (state: RootState) => state.groups
const getSearchOn = (state: RootState) => state.page.searchOn
const getItemOn = (state: RootState) => state.page.itemId !== null && state.page.viewType !== ViewType.List
const mapStateToProps = createSelector(
[getApp, getSources, getGroups, getSearchOn],
(app, sources, groups, searchOn) => ({
[getApp, getSources, getGroups, getSearchOn, getItemOn],
(app, sources, groups, searchOn, itemOn) => ({
status: app.sourceInit,
display: app.menu,
selected: app.menuKey,
sources: sources,
groups: groups,
searchOn: searchOn,
itemOn: itemOn,
})
)