Skip to content

Commit

Permalink
* (bluefox) allowed changing color of the menu item
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanBluefox
GermanBluefox committed Dec 6, 2023
1 parent c7cee7f commit c45a800
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 80 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,14 @@ The icons may not be reused in other projects without the proper flaticon licens

## Todo
- Add to wizard (very first page): how your statistics will be processed.

- Add colors to menu item with the possibility to change turn it off or only icon
<!--
### **WORK IN PROGRESS**
-->
## Changelog
### **WORK IN PROGRESS**
* (bluefox) corrected ACL for files
* (bluefox) allowed changing color of the menu item
* (bluefox) corrected the user/group icon selector

### 6.12.7 (2023-12-03)
Expand Down
2 changes: 1 addition & 1 deletion src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@fnando/sparkline": "^0.3.10",
"@honkhonk/vite-plugin-svgr": "^1.1.0",
"@iobroker/adapter-react-v5": "^4.7.9",
"@iobroker/adapter-react-v5": "^4.7.11",
"@iobroker/admin-component-easy-access": "^0.3.2",
"@iobroker/socket-client": "^2.3.12",
"@mui/icons-material": "^5.14.19",
Expand Down
44 changes: 31 additions & 13 deletions src/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,12 @@ import {
import Utils from './components/Utils'; // adapter-react-v5/Components/Utils';

import CommandDialog from './dialogs/CommandDialog';
import Drawer, { STATES as DrawerStates, DRAWER_FULL_WIDTH, DRAWER_COMPACT_WIDTH } from './components/Drawer';
import Drawer, {
STATES as DrawerStates,
DRAWER_FULL_WIDTH,
DRAWER_COMPACT_WIDTH,
DRAWER_EDIT_WIDTH,
} from './components/Drawer';

import Connecting from './components/Connecting';

Expand Down Expand Up @@ -128,6 +133,14 @@ const styles = theme => ({
duration: theme.transitions.duration.enteringScreen,
}),
},
appBarShiftEdit: {
width: `calc(100% - ${DRAWER_EDIT_WIDTH}px)`,
marginLeft: DRAWER_EDIT_WIDTH,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
appBarShiftCompact: {
width: `calc(100% - ${DRAWER_COMPACT_WIDTH}px)`,
marginLeft: DRAWER_COMPACT_WIDTH,
Expand Down Expand Up @@ -161,6 +174,9 @@ const styles = theme => ({
contentMargin: {
marginLeft: -DRAWER_FULL_WIDTH,
},
contentMarginEdit: {
marginLeft: -DRAWER_EDIT_WIDTH,
},
contentMarginCompact: {
marginLeft: -DRAWER_COMPACT_WIDTH,
},
Expand Down Expand Up @@ -439,6 +455,7 @@ class App extends Router {
alertType: 'info',
alertMessage: '',
drawerState,
editMenuList: false,

tab: null,
allStored: true,
Expand Down Expand Up @@ -1576,7 +1593,7 @@ class App extends Router {
this.state.drawerState === DrawerStates.closed
? 0
: this.state.drawerState === DrawerStates.opened
? DRAWER_FULL_WIDTH
? (this.state.editMenuList ? DRAWER_EDIT_WIDTH : DRAWER_FULL_WIDTH)
: DRAWER_COMPACT_WIDTH
}
socket={this.socket}
Expand Down Expand Up @@ -2296,11 +2313,9 @@ class App extends Router {
position="fixed"
className={Utils.clsx(
classes.appBar,
{ [classes.appBarShift]: !small && this.state.drawerState === DrawerStates.opened },
{
[classes.appBarShiftCompact]:
!small && this.state.drawerState === DrawerStates.compact,
},
!small && this.state.drawerState === DrawerStates.opened && !this.state.editMenuList && classes.appBarShift,
!small && this.state.drawerState === DrawerStates.opened && this.state.editMenuList && classes.appBarShiftEdit,
!small && this.state.drawerState === DrawerStates.compact && classes.appBarShiftCompact,
)}
>
<Toolbar>
Expand Down Expand Up @@ -2563,6 +2578,8 @@ class App extends Router {
<Drawer
adminGuiConfig={this.adminGuiConfig}
state={this.state.drawerState}
editMenuList={this.state.editMenuList}
setEditMenuList={editMenuList => this.setState({ editMenuList })}
systemConfig={this.state.systemConfig}
handleNavigation={name => this.handleNavigation(name)}
onStateChange={state => this.handleDrawerState(state)}
Expand Down Expand Up @@ -2593,12 +2610,13 @@ class App extends Router {
<Paper
elevation={0}
square
className={Utils.clsx(classes.content, {
[classes.contentMargin]: !small && this.state.drawerState !== DrawerStates.compact,
[classes.contentMarginCompact]:
!small && this.state.drawerState !== DrawerStates.opened,
[classes.contentShift]: !small && this.state.drawerState !== DrawerStates.closed,
})}
className={Utils.clsx(
classes.content,
!small && this.state.drawerState !== DrawerStates.compact && !this.state.editMenuList && classes.contentMargin,
!small && this.state.drawerState !== DrawerStates.compact && this.state.editMenuList && classes.contentMarginEdit,
!small && this.state.drawerState !== DrawerStates.opened && classes.contentMarginCompact,
!small && this.state.drawerState !== DrawerStates.closed && classes.contentShift,
)}
>
{this.getCurrentTab()}
</Paper>
Expand Down
6 changes: 3 additions & 3 deletions src/src/components/CustomPopper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({

let timer;

const CustomPopper = ({ editList, onClick }) => {
const CustomPopper = ({ editMenuList, onClick }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const [open, setOpen] = React.useState(false);
const [placement, setPlacement] = React.useState();
Expand All @@ -30,10 +30,10 @@ const CustomPopper = ({ editList, onClick }) => {
return <>
<IconButton
size="large"
style={editList ? { color: 'red' } : null}
style={editMenuList ? { color: 'red' } : null}
onClick={el => {
onClick();
if (!editList) {
if (!editMenuList) {
handleClick('right')(el);
timer = setTimeout(() => setOpen(false), 3000);
} else {
Expand Down
112 changes: 64 additions & 48 deletions src/src/components/Drawer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,34 @@ import React, { Component } from 'react';
import { withStyles } from '@mui/styles';
import PropTypes from 'prop-types';

import { Avatar, Drawer as MaterialDrawer } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';

import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import AppsIcon from '@mui/icons-material/Apps';
import InfoIcon from '@mui/icons-material/Info';
import StoreIcon from '@mui/icons-material/Store';
import SubtitlesIcon from '@mui/icons-material/Subtitles';
import ViewListIcon from '@mui/icons-material/ViewList';
import ArtTrackIcon from '@mui/icons-material/ArtTrack';
import DvrIcon from '@mui/icons-material/Dvr';
import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import FlashOnIcon from '@mui/icons-material/FlashOn';
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
import StorageIcon from '@mui/icons-material/Storage';
import FilesIcon from '@mui/icons-material/FileCopy';

import LogoutIcon from '@iobroker/adapter-react-v5/icons/IconLogout';
import {
Avatar,
Drawer as MaterialDrawer,
IconButton,
List,
Typography,
SwipeableDrawer,
} from '@mui/material';

import {
ChevronLeft as ChevronLeftIcon,
Apps as AppsIcon,
Info as InfoIcon,
Store as StoreIcon,
Subtitles as SubtitlesIcon,
ViewList as ViewListIcon,
ArtTrack as ArtTrackIcon,
Dvr as DvrIcon,
ViewHeadline as ViewHeadlineIcon,
Subscriptions as SubscriptionsIcon,
FlashOn as FlashOnIcon,
PersonOutline as PersonOutlineIcon,
Storage as StorageIcon,
FileCopy as FilesIcon,
} from '@mui/icons-material';

import {
Utils, I18n, Icon, withWidth,
Utils, I18n, Icon, withWidth, IconLogout as LogoutIcon,
} from '@iobroker/adapter-react-v5';

import DragWrapper from './DragWrapper';
Expand All @@ -39,6 +42,7 @@ import Adapters from '../tabs/Adapters';

export const DRAWER_FULL_WIDTH = 180;
export const DRAWER_COMPACT_WIDTH = 50;
export const DRAWER_EDIT_WIDTH = 250;

function ucFirst(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
Expand All @@ -57,6 +61,9 @@ const styles = theme => ({
rootFullWidth: {
width: DRAWER_FULL_WIDTH,
},
rootEditWidth: {
width: DRAWER_EDIT_WIDTH,
},
rootCompactWidth: {
width: DRAWER_COMPACT_WIDTH,
},
Expand Down Expand Up @@ -177,7 +184,6 @@ class Drawer extends Component {

this.state = {
tabs: [],
editList: false,
logErrors: 0,
logWarnings: 0,
hostError: 0,
Expand Down Expand Up @@ -304,8 +310,8 @@ class Drawer extends Component {
}

componentDidUpdate() {
if (!this.isSwipeable() && this.props.state !== STATES.opened && this.state.editList) {
this.setState({ editList: false });
if (!this.isSwipeable() && this.props.state !== STATES.opened && this.props.editMenuList) {
setTimeout(() => this.props.setEditMenuList(false));
}
}

Expand Down Expand Up @@ -499,17 +505,24 @@ v
return this.props.width === 'xs' || this.props.width === 'sm';
}

tabsEditSystemConfig = async idx => {
tabsEditSystemConfig = async (idx, isVisibility, color) => {
const { tabs } = this.state;
const { socket } = this.props;
const newTabs = JSON.parse(JSON.stringify(tabs));
if (idx !== undefined) {
if (isVisibility) {
newTabs[idx].visible = !newTabs[idx].visible;
}
if (color !== undefined) {
if (color === null) {
delete newTabs[idx].color;
} else {
newTabs[idx].color = color;
}
}
const newObjCopy = await this.props.socket.getSystemConfig(true);
newObjCopy.common.tabsVisible = newTabs.map(({ name, visible }) => ({ name, visible }));

if (idx !== undefined) {
if (isVisibility || color !== undefined) {
this.setState({ tabs: newTabs }, () =>
socket.setSystemConfig(newObjCopy)
.catch(e => window.alert(`Cannot set system config: ${e}`)));
Expand All @@ -524,7 +537,7 @@ v

getNavigationItems() {
const {
tabs, editList, logErrors, logWarnings,
tabs, logErrors, logWarnings,
} = this.state;
const {
systemConfig, currentTab, state, classes, handleNavigation,
Expand All @@ -534,7 +547,7 @@ v
return null;
}
return tabs.map((tab, idx) => {
if (!editList && !tab.visible) {
if (!this.props.editMenuList && !tab.visible) {
return null;
}

Expand All @@ -544,7 +557,7 @@ v

return <DragWrapper
key={tab.name}
canDrag={editList}
canDrag={this.props.editMenuList}
name={tab.name}
iconJSX={tabsInfo[tab.name]?.icon ? tabsInfo[tab.name].icon : <Icon className={classes.icon} src={tab.icon} />}
_id={tab.name}
Expand All @@ -560,9 +573,10 @@ v
<DrawerItem
themeType={this.props.themeType}
key={tab.name}
editList={editList}
editMenuList={this.props.editMenuList}
visible={tab.visible}
editListFunc={() => this.tabsEditSystemConfig(idx)}
color={tab.color}
editListFunc={(isVisibility, color) => this.tabsEditSystemConfig(idx, isVisibility, color)}
compact={!this.isSwipeable() && state !== STATES.opened}
onClick={e => {
if (e.ctrlKey || e.shiftKey) {
Expand Down Expand Up @@ -643,14 +657,15 @@ v
/>}
{this.props.adminGuiConfig.admin.menu.editable !== false && this.props.state === STATES.opened && <div className={this.props.classes.editButton}>
<CustomPopper
editList={this.state.editList}
onClick={() => this.setState({ editList: !this.state.editList })}
editMenuList={this.props.editMenuList}
onClick={() => this.props.setEditMenuList(!this.props.editMenuList)}
/>
</div>}
</SwipeableDrawer>;
}

return <MaterialDrawer
className={Utils.clsx(classes.root, this.props.state !== STATES.opened ? classes.rootCompactWidth : classes.rootFullWidth)}
className={Utils.clsx(classes.root, this.props.state !== STATES.opened ? classes.rootCompactWidth : (this.props.editMenuList ? classes.rootEditWidth : classes.rootFullWidth))}
variant="persistent"
anchor="left"
open={this.props.state !== STATES.closed}
Expand All @@ -659,28 +674,27 @@ v
onMouseLeave={() => this.refEditButton.current && (this.refEditButton.current.style.opacity = 0)}
>
<CustomDragLayer />

{this.getHeader()}
<List className={classes.list}>
{this.getNavigationItems()}
</List>
{this.props.isSecure &&
<DrawerItem
themeType={this.props.themeType}
style={{ flexShrink: 0 }}
compact={!this.isSwipeable() && this.props.state !== STATES.opened}
onClick={this.props.onLogout}
text={this.props.t('Logout')}
icon={<LogoutIcon />}
/>}
<DrawerItem
themeType={this.props.themeType}
style={{ flexShrink: 0 }}
compact={!this.isSwipeable() && this.props.state !== STATES.opened}
onClick={this.props.onLogout}
text={this.props.t('Logout')}
icon={<LogoutIcon />}
/>}
{this.props.adminGuiConfig.admin.menu.editable !== false && this.props.state === STATES.opened && <div
className={this.props.classes.editButton}
style={{ opacity: 0 }}
ref={this.refEditButton}
>
<CustomPopper
editList={this.state.editList}
onClick={() => this.setState({ editList: !this.state.editList })}
editMenuList={this.props.editMenuList}
onClick={() => this.props.setEditMenuList(!this.props.editMenuList)}
/>
</div>}
</MaterialDrawer>;
Expand All @@ -701,6 +715,8 @@ Drawer.propTypes = {
socket: PropTypes.object,
versionAdmin: PropTypes.string,
handleNavigation: PropTypes.func,
editMenuList: PropTypes.bool,
setEditMenuList: PropTypes.func,

instancesWorker: PropTypes.object,
hostsWorker: PropTypes.object,
Expand Down
Loading

0 comments on commit c45a800

Please sign in to comment.