Skip to content

Commit

Permalink
Merge pull request #1346 from hajkmap/feature/1316-PermanentDrawerOption
Browse files Browse the repository at this point in the history 
Feature/1316 permanent drawer option
  • Loading branch information
@jesade-vbg
jesade-vbg authored Jun 22, 2023
2 parents dbbc37e + fe9c8fe commit 38564d6
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 62 deletions.
2 changes: 2 additions & 0 deletions backend/mapservice/Models/MapSetting.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ public class MapSetting
public bool drawerVisibleMobile { get; set; }

public bool drawerPermanent { get; set; }

public bool drawerStatic { get; set; }

public string activeDrawerOnStart { get; set; }

Expand Down
37 changes: 36 additions & 1 deletion new-admin/src/views/mapoptions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ class MapOptions extends Component {
drawerVisible: config.drawerVisible,
drawerVisibleMobile: config.drawerVisibleMobile,
drawerPermanent: config.drawerPermanent,
drawerStatic: config.drawerStatic,
zoomDelta: config.zoomDelta || "",
zoomDuration: config.zoomDuration || "",
title: config.title ? config.title : "",
Expand Down Expand Up @@ -177,6 +178,7 @@ class MapOptions extends Component {
drawerVisible: mapConfig.drawerVisible,
drawerVisibleMobile: mapConfig.drawerVisibleMobile,
drawerPermanent: mapConfig.drawerPermanent,
drawerStatic: mapConfig.drawerStatic,
activeDrawerOnStart: mapConfig.activeDrawerOnStart
? mapConfig.activeDrawerOnStart
: "plugins",
Expand Down Expand Up @@ -367,6 +369,7 @@ class MapOptions extends Component {
case "showRecentlyUsedPlugins":
case "introductionEnabled":
case "introductionShowControlButton":
case "drawerStatic":
case "drawerVisible":
case "drawVisibleMobile":
case "drawerPermanent":
Expand Down Expand Up @@ -445,6 +448,7 @@ class MapOptions extends Component {
config.drawerVisible = this.getValue("drawerVisible");
config.drawerVisibleMobile = this.getValue("drawerVisibleMobile");
config.drawerPermanent = this.getValue("drawerPermanent");
config.drawerStatic = this.getValue("drawerStatic");
config.activeDrawerOnStart = this.getValue("activeDrawerOnStart");
config.geoserverLegendOptions = this.getValue("geoserverLegendOptions");
config.defaultCookieNoticeMessage = this.getValue(
Expand Down Expand Up @@ -1414,6 +1418,32 @@ class MapOptions extends Component {
/>
</div>
<div className="separator">Inställningar för sidopanel</div>
<div>
<input
id="input_drawerStatic"
type="checkbox"
ref="input_drawerStatic"
onChange={(e) => {
this.setState({ drawerStatic: e.target.checked });
if (e.target.checked === true) {
this.setState({
drawerPermanent: false,
drawerVisible: false,
});
}
}}
checked={this.state.drawerStatic}
/>
&nbsp;
<label className="long-label" htmlFor="input_drawerStatic">
Låt sidopanelen vara permanent synlig{" "}
<i
className="fa fa-question-circle"
data-toggle="tooltip"
title="Om aktiv kommer sidopanelen vara permanent synlig och låst"
/>
</label>
</div>
<div>
<input
id="input_drawerVisible"
Expand All @@ -1429,6 +1459,7 @@ class MapOptions extends Component {
}
}}
checked={this.state.drawerVisible}
disabled={this.state.drawerStatic === true}
/>
&nbsp;
<label className="long-label" htmlFor="input_drawerVisible">
Expand All @@ -1449,6 +1480,7 @@ class MapOptions extends Component {
this.setState({ drawerVisibleMobile: e.target.checked });
}}
checked={this.state.drawerVisibleMobile}
disabled={this.state.drawerStatic === true}
/>
&nbsp;
<label className="long-label" htmlFor="input_drawerVisibleMobile">
Expand All @@ -1469,7 +1501,10 @@ class MapOptions extends Component {
this.setState({ drawerPermanent: e.target.checked });
}}
checked={this.state.drawerPermanent}
disabled={this.state.drawerVisible !== true}
disabled={
this.state.drawerVisible !== true ||
this.state.drawerStatic === true
}
/>
&nbsp;
<label className="long-label" htmlFor="input_drawerPermanent">
Expand Down
179 changes: 118 additions & 61 deletions new-client/src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,13 +252,77 @@ class App extends React.PureComponent {
: null;
};

isDrawerPermanent = (drawerProps) => {
const { props, activeDrawerContentState, drawerPermanentFromLocalStorage } =
drawerProps;
const { map } = props.config.mapConfig;
// First check if we have anything to render at all and in case we haven't -> do not show drawer
// If on a mobile device, the drawer should never be permanent.
if (activeDrawerContentState === null || isMobile) {
return false;
}
// If drawer is set to static we want the the drawer to be set to permanent
if (map.drawerStatic) {
return true;
}
// If not on mobile, if cookie is not null, use it to show/hide Drawer.
// If cookie is not null, use it to show/hide Drawer.
// If cookie however is null, fall back to the values from config.
if (drawerPermanentFromLocalStorage !== null) {
return drawerPermanentFromLocalStorage;
}
// Finally, check if drawerVisible and drawerPermanent are both true, and return true if they are.
return map.drawerVisible && map.drawerPermanent;
};

isDrawerVisible = (drawerProps) => {
const { props, activeDrawerContentState, drawerPermanentFromLocalStorage } =
drawerProps;
const { map } = props.config.mapConfig;
// First check if we have anything to render at all and in case we haven't -> do not show drawer
if (activeDrawerContentState === null) {
return false;
}
// If on a mobile device, the drawer should never be visible.
if (isMobile && map.drawerVisibleMobile !== undefined) {
return map.drawerVisibleMobile;
}
// If drawer is set to static we want the the drawer to be set to visible
if (map.drawerStatic) {
return true;
}
// If not on mobile, if cookie is not null, use it to show/hide Drawer.
// If cookie is not null, use it to show/hide Drawer.
// If cookie however is null, fall back to the values from config.
if (drawerPermanentFromLocalStorage !== null) {
return drawerPermanentFromLocalStorage;
}
// Finally, we return true if drawerVisible is set, otherwise false
return map.drawerVisible || false;
};

isDrawerStatic = (drawerProps) => {
const { drawerStatic } = drawerProps.props.config.mapConfig.map;
// We check if we have something to render or if user is on mobile.
if (drawerProps.activeDrawerContentState === null || isMobile) {
return false;
}
// And if the drawerStatic is being used at all.
if (drawerStatic !== undefined) {
return drawerStatic;
}
return drawerStatic || false;
};

constructor(props) {
super(props);

const drawerPermanentFromLocalStorage =
this.getDrawerPermanentFromLocalStorage();

const activeDrawerContentFromLocalStorage =
this.getActiveDrawerContentFromLocalStorage();

const canRenderDefaultDrawer = this.hasAnyToolbarTools();

const canRenderCustomDrawer = this.canRenderCustomDrawer(
Expand All @@ -271,7 +335,6 @@ class App extends React.PureComponent {
//if we cant render customContent fall back to mapconfig
//Finally, fall back to 'plugins', the standard tools panel.
//This fall back avoids rendering an empty drawer in the case that draw is set to visible but there is no drawer content in local storage.

const activeDrawerContentState = canRenderCustomDrawer
? activeDrawerContentFromLocalStorage !== null &&
activeDrawerContentFromLocalStorage !== "plugins"
Expand All @@ -281,37 +344,24 @@ class App extends React.PureComponent {
? "plugins"
: null;

// First check if we have anything to render at all and in case we haven't -> do not show drawer
// If on a mobile device, the drawer should never be permanent.
// If not on mobile, if cookie is not null, use it to show/hide Drawer.
// If cookie is not null, use it to show/hide Drawer.
// If cookie however is null, fall back to the values from config.
// Finally, fall back to "false" if no cookie or config is found.
const drawerPermanent =
activeDrawerContentState === null
? false
: isMobile
? false
: drawerPermanentFromLocalStorage !== null
? drawerPermanentFromLocalStorage
: (props.config.mapConfig.map.drawerVisible &&
props.config.mapConfig.map.drawerPermanent) ||
false;
const drawerProps = {
props,
activeDrawerContentState,
drawerPermanentFromLocalStorage,
};

// First check if we have anything to render at all and in case we haven't -> do not show drawer
// If on a mobile device, and a config property for if the drawer should initially be open is set, base the drawer state on this.
// Otherwise if cookie for "drawerPermanent" is not null, use it to control Drawer visibility,
// If there a no cookie settings, use the config drawVisible setting.
// Finally, don't show the drawer.
const drawerVisible =
activeDrawerContentState === null
? false
: isMobile &&
props.config.mapConfig.map.drawerVisibleMobile !== undefined
? props.config.mapConfig.map.drawerVisibleMobile
: drawerPermanentFromLocalStorage !== null
? drawerPermanentFromLocalStorage
: props.config.mapConfig.map.drawerVisible || false;
// We check if drawer is set to static
const drawerStatic = this.isDrawerStatic(drawerProps);
// We check if drawer is set to permanent
// If drawerStatic is true, we do not need to check drawerPermanent
const drawerPermanent = drawerStatic
? true
: this.isDrawerPermanent(drawerProps);
// We check if drawer is set to visible
// If drawerStatic is true, we do not need to check drawerVisible
const drawerVisible = drawerStatic
? true
: this.isDrawerVisible(drawerProps);

this.state = {
alert: false,
Expand All @@ -320,6 +370,7 @@ class App extends React.PureComponent {
mapClickDataResult: {},
drawerVisible: drawerVisible,
drawerPermanent: drawerPermanent,
drawerStatic: drawerStatic,
activeDrawerContent: activeDrawerContentState,
drawerMouseOverLock: false,
};
Expand Down Expand Up @@ -893,37 +944,40 @@ class App extends React.PureComponent {
<DrawerTitle variant="button">{drawerTitle}</DrawerTitle>
</Grid>
{/** Hide Lock button in mobile mode - there's not screen estate to permanently lock Drawer on mobile viewports*/}
<Grid item>
<Hidden mdDown>
<Tooltip
disableInteractive
title={
(this.state.drawerPermanent ? "Lås upp" : "Lås fast") +
" verktygspanelen"
}
>
<IconButton
sx={{ margin: "-12px" }} // Ugh... However, it tightens everything up
onClick={this.togglePermanent}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
size="large"
{/** Hide Lock button if user has chosen static drawer*/}
{!this.state.drawerStatic && (
<Grid item>
<Hidden mdDown>
<Tooltip
disableInteractive
title={
(this.state.drawerPermanent ? "Lås upp" : "Lås fast") +
" verktygspanelen"
}
>
{this.state.drawerPermanent ? (
this.state.drawerMouseOverLock ? (
<LockOpenIcon />
) : (
<IconButton
sx={{ margin: "-12px" }} // Ugh... However, it tightens everything up
onClick={this.togglePermanent}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
size="large"
>
{this.state.drawerPermanent ? (
this.state.drawerMouseOverLock ? (
<LockOpenIcon />
) : (
<LockIcon />
)
) : this.state.drawerMouseOverLock ? (
<LockIcon />
)
) : this.state.drawerMouseOverLock ? (
<LockIcon />
) : (
<LockOpenIcon />
)}
</IconButton>
</Tooltip>
</Hidden>
</Grid>
) : (
<LockOpenIcon />
)}
</IconButton>
</Tooltip>
</Hidden>
</Grid>
)}
</DrawerHeaderGrid>
</>
);
Expand Down Expand Up @@ -1021,12 +1075,15 @@ class App extends React.PureComponent {
<StyledHeader
id="header"
sx={{
justifyContent: this.state.drawerStatic
? "end"
: "space-between",
"& > *": {
pointerEvents: "auto",
},
}}
>
{clean === false && (
{clean === false && !this.state.drawerStatic && (
<DrawerToggleButtons
drawerButtons={this.state.drawerButtons}
globalObserver={this.globalObserver}
Expand Down

0 comments on commit 38564d6

Please sign in to comment.