Skip to content

Commit

Permalink
Filter allowed menu/toolbar items in TopBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@manisandro
manisandro committed Oct 28, 2024
1 parent d9951de commit 94f5741
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 58 deletions.
28 changes: 2 additions & 26 deletions components/AppMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ import PropTypes from 'prop-types';
import {setCurrentTask} from '../actions/task';
import {setMenuMargin} from '../actions/windows';
import InputContainer from '../components/InputContainer';
import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';
import MiscUtils from '../utils/MiscUtils';
import ThemeUtils from '../utils/ThemeUtils';
import Icon from './Icon';

import './style/AppMenu.css';
Expand All @@ -34,7 +32,6 @@ class AppMenu extends React.Component {
appMenuShortcut: PropTypes.string,
buttonContents: PropTypes.object,
currentTaskBlocked: PropTypes.bool,
currentTheme: PropTypes.object,
keepMenuOpen: PropTypes.bool,
menuCompact: PropTypes.bool,
menuItems: PropTypes.array,
Expand Down Expand Up @@ -93,9 +90,7 @@ class AppMenu extends React.Component {
this.addKeyBindings(item.subitems);
} else if (item.shortcut) {
mousetrap.bind(item.shortcut, () => {
if (this.itemAllowed(item)) {
this.onMenuitemClicked(item);
}
this.onMenuitemClicked(item);
return false;
});
this.boundShortcuts.push(item.shortcut);
Expand Down Expand Up @@ -218,9 +213,6 @@ class AppMenu extends React.Component {
renderMenuItems = (items, level, filter, path) => {
if (items) {
return items.map((item, idx) => {
if (!this.itemAllowed(item)) {
return null;
}
const active = isEqual(this.state.curEntry, [...path, idx]);
if (item.subitems) {
const subitems = this.renderMenuItems(item.subitems, level + 1, filter, [...path, idx]);
Expand Down Expand Up @@ -318,26 +310,10 @@ class AppMenu extends React.Component {
mousetrap(el).bind(this.props.appMenuShortcut, this.toggleMenu);
}
};
itemAllowed = (item) => {
if (!ThemeUtils.themFlagsAllowed(this.props.currentTheme, item.themeFlagWhitelist, item. themeFlagBlacklist)) {
return false;
}
if (item.themeBlacklist && (item.themeBlacklist.includes(this.props.currentTheme.title) || item.themeBlacklist.includes(this.props.currentTheme.name))) {
return false;
}
if (item.themeWhitelist && !(item.themeWhitelist.includes(this.props.currentTheme.title) || item.themeWhitelist.includes(this.props.currentTheme.name))) {
return false;
}
if (item.requireAuth && !ConfigUtils.getConfigProp("username")) {
return false;
}
return true;
};
}

export default connect((state) => ({
currentTaskBlocked: state.task.blocked,
currentTheme: state.theme.current || {}
currentTaskBlocked: state.task.blocked
}), {
setCurrentTask: setCurrentTask,
setMenuMargin: setMenuMargin
Expand Down
40 changes: 10 additions & 30 deletions components/Toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import Mousetrap from 'mousetrap';
import PropTypes from 'prop-types';

import {setCurrentTask} from '../actions/task';
import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';
import Icon from './Icon';

Expand All @@ -23,7 +22,6 @@ class Toolbar extends React.Component {
static propTypes = {
currentTask: PropTypes.string,
currentTaskMode: PropTypes.string,
currentTheme: PropTypes.object,
openExternalUrl: PropTypes.func,
setCurrentTask: PropTypes.func,
toolbarItems: PropTypes.array,
Expand All @@ -34,30 +32,25 @@ class Toolbar extends React.Component {
this.boundShortcuts = [];
}
componentDidUpdate(prevProps) {
if (this.props.currentTheme !== prevProps.currentTheme) {
if (this.props.toolbarItems !== prevProps.toolbarItems) {
this.boundShortcuts.forEach(shortcut => Mousetrap.unbind(shortcut));
this.boundShortcuts = [];
if (this.props.toolbarItemsShortcutPrefix) {
let index = 1;
this.props.toolbarItems.forEach(item => {
if (this.itemAllowed(item)) {
const shortcut = this.props.toolbarItemsShortcutPrefix + '+' + index;
Mousetrap.bind(shortcut, () => {
const active = this.props.currentTask === (item.task || item.key) && this.props.currentTaskMode === (item.mode || null);
this.itemClicked(item, active);
return false;
});
this.boundShortcuts.push(shortcut);
index += 1;
}
const shortcut = this.props.toolbarItemsShortcutPrefix + '+' + index;
Mousetrap.bind(shortcut, () => {
const active = this.props.currentTask === (item.task || item.key) && this.props.currentTaskMode === (item.mode || null);
this.itemClicked(item, active);
return false;
});
this.boundShortcuts.push(shortcut);
index += 1;
});
}
}
}
renderToolbarItem = (item) => {
if (!this.itemAllowed(item)) {
return null;
}
const active = this.props.currentTask === (item.task || item.key) && this.props.currentTaskMode === (item.mode || null);
const title = LocaleUtils.tr("appmenu.items." + item.key + (item.mode || ""));
return (
Expand All @@ -71,18 +64,6 @@ class Toolbar extends React.Component {
/>
);
};
itemAllowed = (item) => {
if (item.themeBlacklist && (item.themeBlacklist.includes(this.props.currentTheme.title) || item.themeBlacklist.includes(this.props.currentTheme.name))) {
return false;
}
if (item.themeWhitelist && !(item.themeWhitelist.includes(this.props.currentTheme.title) || item.themeWhitelist.includes(this.props.currentTheme.name))) {
return false;
}
if (item.requireAuth && !ConfigUtils.getConfigProp("username")) {
return false;
}
return true;
};
itemClicked = (item, active) => {
if (item.url) {
this.props.openExternalUrl(item.url, item.target, LocaleUtils.tr("appmenu.items." + item.key), item.icon);
Expand All @@ -103,8 +84,7 @@ class Toolbar extends React.Component {

export default connect((state) => ({
currentTask: state.task.id,
currentTaskMode: state.task.mode,
currentTheme: state.theme.current || {}
currentTaskMode: state.task.mode
}), {
setCurrentTask: setCurrentTask
})(Toolbar);
46 changes: 44 additions & 2 deletions plugins/TopBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React from 'react';
import {connect} from 'react-redux';

import classnames from 'classnames';
import isEmpty from 'lodash.isempty';
import PropTypes from 'prop-types';

import {toggleFullscreen} from '../actions/display';
Expand All @@ -20,6 +21,7 @@ import Icon from '../components/Icon';
import {Swipeable} from '../components/Swipeable';
import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';
import ThemeUtils from '../utils/ThemeUtils';

import './style/TopBar.css';

Expand All @@ -42,6 +44,7 @@ class TopBar extends React.Component {
/** Whether to open the app menu on application startup. */
appMenuVisibleOnStartup: PropTypes.bool,
components: PropTypes.object,
currentTheme: PropTypes.object,
fullscreen: PropTypes.bool,
/** The logo file format. */
logoFormat: PropTypes.string,
Expand Down Expand Up @@ -108,6 +111,18 @@ class TopBar extends React.Component {
toolbarItems: [],
logoFormat: "svg"
};
state = {
allowedMenuItems: [],
allowedToolbarItems: []
};
componentDidUpdate(prevProps) {
if (this.props.currentTheme !== prevProps.currentTheme) {
this.setState({
allowedToolbarItems: this.allowedItems(this.props.toolbarItems),
allowedMenuItems: this.allowedItems(this.props.menuItems)
});
}
}
render() {
let buttonContents;
let logo;
Expand Down Expand Up @@ -165,7 +180,7 @@ class TopBar extends React.Component {
{this.props.components.Toolbar ? (
<this.props.components.Toolbar
openExternalUrl={this.openUrl}
toolbarItems={this.props.toolbarItems}
toolbarItems={this.state.allowedToolbarItems}
toolbarItemsShortcutPrefix={this.props.toolbarItemsShortcutPrefix} />
) : null}
</div>
Expand All @@ -176,7 +191,7 @@ class TopBar extends React.Component {
buttonContents={buttonContents}
keepMenuOpen={keepMenuOpen}
menuCompact={menuCompact}
menuItems={this.props.menuItems}
menuItems={this.state.allowedMenuItems}
openExternalUrl={this.openUrl}
showFilterField={this.props.appMenuFilterField}
showOnStartup={showOnStartup} />
Expand All @@ -199,13 +214,40 @@ class TopBar extends React.Component {
this.props.setTopbarHeight(el.clientHeight);
}
};
allowedItems = (items) => {
return items.map(item => {
if (item.subitems) {
const subitems = this.allowedItems(item.subitems);
if (!isEmpty(subitems)) {
return {...item, subitems};
} else {
return null;
}
} else {
if (!ThemeUtils.themFlagsAllowed(this.props.currentTheme, item.themeFlagWhitelist, item. themeFlagBlacklist)) {
return null;
}
if (item.themeBlacklist && (item.themeBlacklist.includes(this.props.currentTheme.title) || item.themeBlacklist.includes(this.props.currentTheme.name))) {
return null;
}
if (item.themeWhitelist && !(item.themeWhitelist.includes(this.props.currentTheme.title) || item.themeWhitelist.includes(this.props.currentTheme.name))) {
return null;
}
if (item.requireAuth && !ConfigUtils.getConfigProp("username")) {
return null;
}
return item;
}
}).filter(Boolean);
};
}

export default (components) => {
return connect((state) => ({
mobile: state.browser.mobile,
fullscreen: state.display.fullscreen,
components: components,
currentTheme: state.theme.current,
mapMargins: state.windows.mapMargins
}), {
toggleFullscreen: toggleFullscreen,
Expand Down

0 comments on commit 94f5741

Please sign in to comment.