Skip to content

Commit

Permalink
add isMobile prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmhauck
jmhauck committed Jan 17, 2024
1 parent 9e805dc commit d3e874d
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 65 deletions.
8 changes: 8 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,10 @@ export namespace Components {
* boolean: when true the zoom widget will be available
*/
"enableZoom": boolean;
/**
* boolean: When true the application will be in mobile mode, controls the mobile or desktop view
*/
"isMobile": boolean;
/**
* string[]: list of layer ids
*/
Expand Down Expand Up @@ -2210,6 +2214,10 @@ declare namespace LocalJSX {
* boolean: when true the zoom widget will be available
*/
"enableZoom"?: boolean;
/**
* boolean: When true the application will be in mobile mode, controls the mobile or desktop view
*/
"isMobile"?: boolean;
/**
* string[]: list of layer ids
*/
Expand Down
27 changes: 0 additions & 27 deletions src/components/crowdsource-reporter/crowdsource-reporter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,30 +63,3 @@
.error-msg{
padding: 10px;
}

@media screen and (max-width: 600px) {
.map-container {
left: 0;
height: 50%;
width: 100%;
}

.map-container-mobile {
height: calc(100% - 100px);
}

.side-panel {
padding: 2px;
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0;
z-index: 60;
}

.collapsed-side-panel {
top: calc(100% - 100px);
height: 100px;
}
}
68 changes: 30 additions & 38 deletions src/components/crowdsource-reporter/crowdsource-reporter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ export class CrowdsourceReporter {
*/
@Prop() description: string;

/**
* boolean: When true the application will be in mobile mode, controls the mobile or desktop view
*/
@Prop() isMobile: boolean;

/**
* boolean: When true the anonymous users will be allowed to submit reports and comments
*/
Expand Down Expand Up @@ -150,11 +155,6 @@ export class CrowdsourceReporter {
*/
@State() _mapInfo: IMapInfo;

/**
* boolean: When true the application will be in mobile mode, controls the mobile or desktop view
*/
@State() _isMobile = false;

/**
* string[]: Reporter flow items list
*/
Expand Down Expand Up @@ -217,6 +217,16 @@ export class CrowdsourceReporter {
//
//--------------------------------------------------------------------------

/**
* Called each time the mapView prop is changed.
*/
@Watch("isMobile")
async isMobileWatchHandler(): Promise<void> {
if (this.isMobile) {
this._sidePanelCollapsed = false;
}
}

/**
* Called each time the mapView prop is changed.
*/
Expand Down Expand Up @@ -252,36 +262,18 @@ export class CrowdsourceReporter {
*/
async componentWillLoad(): Promise<void> {
await this._getTranslations();
const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
this._isMobile = mediaQueryList.matches;
//on change update the state for is mobile and the sidePanelCollapsed
mediaQueryList.onchange = (e) => {
this._isMobile = e.matches;
this._sidePanelCollapsed = false;
}
}

/**
* Renders the component.
*/
render() {
// const validConfiguration = true;
//Check if webMap id is configured
// if(!this.mapInfos || this.mapInfos.length<=0 || (this.mapInfos?.length>0 && !this.mapInfos[0]?.id)){
// validConfiguration = false
// }
return (
<Host>
<div>
<calcite-shell content-behind >
{this._getReporter()}
</calcite-shell>
{/* {!validConfiguration &&
<calcite-notice class="error-msg" icon="configure" kind="danger" open>
<div slot="title">{this._translations.error}</div>
<div slot="message">{ this._translations.invalidConfigurationErrorMsg}</div>
</calcite-notice>
} */}
</div>
</Host>
);
Expand Down Expand Up @@ -315,7 +307,7 @@ export class CrowdsourceReporter {
});
let sidePanelClass = "side-panel";
//in case of mobile handle for collapsed styles of the panel
if (this._isMobile && this._sidePanelCollapsed) {
if (this.isMobile && this._sidePanelCollapsed) {
sidePanelClass += " collapsed-side-panel";
}
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
Expand All @@ -337,12 +329,12 @@ export class CrowdsourceReporter {
*/
protected getLayerListFlowItem(): Node {
return (
<calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={this.reportsHeader}>
{this._hasValidLayers && <calcite-action icon="sort-ascending-arrow" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this._isMobile} />}
{this._hasValidLayers && <calcite-action icon="filter" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this._isMobile} />}
{this._isMobile && this.getActionToExpandCollapsePanel()}
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this.reportsHeader}>
{this._hasValidLayers && <calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this.isMobile} />}
{this._hasValidLayers && <calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this.isMobile} />}
{this.isMobile && this.getActionToExpandCollapsePanel()}
{this._hasValidLayers && this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
{this.reportButtonText}
</calcite-button>}
Expand Down Expand Up @@ -412,12 +404,12 @@ export class CrowdsourceReporter {
*/
protected getFeatureListFlowItem(layerId: string, layerName: string): Node {
return (
<calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={layerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
<calcite-action icon="sort-ascending-arrow" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this._isMobile} />
<calcite-action icon="filter" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this._isMobile} />
{this._isMobile && this.getActionToExpandCollapsePanel()}
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={layerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
<calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this.isMobile} />
<calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this.isMobile} />
{this.isMobile && this.getActionToExpandCollapsePanel()}
{this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
{this.reportButtonText}
</calcite-button>}
Expand All @@ -440,8 +432,8 @@ export class CrowdsourceReporter {
*/
protected getFeatureDetailsFlowItem(): Node {
return (
<calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={this._selectedLayerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
{this._isMobile && this.getActionToExpandCollapsePanel()}
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this._selectedLayerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
{this.isMobile && this.getActionToExpandCollapsePanel()}
<calcite-action icon="share" slot={"header-actions-end"} text={this._translations.share} />
<calcite-panel full-height>
<info-card
Expand Down
1 change: 1 addition & 0 deletions src/components/crowdsource-reporter/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
| `enableNewReports` | `enable-new-reports` | boolean: When true the user will be allowed to submit new reports | `boolean` | `undefined` |
| `enableSearch` | `enable-search` | boolean: when true the search widget will be available | `boolean` | `true` |
| `enableZoom` | `enable-zoom` | boolean: when true the zoom widget will be available | `boolean` | `true` |
| `isMobile` | `is-mobile` | boolean: When true the application will be in mobile mode, controls the mobile or desktop view | `boolean` | `undefined` |
| `layers` | -- | string[]: list of layer ids | `string[]` | `undefined` |
| `loginTitle` | `login-title` | string: The text that will display at the top of the landing page | `string` | `undefined` |
| `mapInfos` | -- | IMapInfo[]: array of map infos (name and id) | `IMapInfo[]` | `[]` |
Expand Down

0 comments on commit d3e874d

Please sign in to comment.