origam · washibana · Apr 10, 2022 · Apr 7, 2022 · Apr 7, 2022 · Apr 7, 2022
@@ -0,0 +1,40 @@
+/*
+Copyright 2005 - 2021 Advantage Solutions, s. r. o.
+
+This file is part of ORIGAM (http://www.origam.org).
+
+ORIGAM is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+ORIGAM is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.root {
+  height: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.topBar {
+  max-height: 50px;
+  min-height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bottomBar {
+  max-height: 50px;
+  min-height: 50px;
+  display: flex;
+  align-items: flex-end;
+}
@@ -0,0 +1,48 @@
+/*
+Copyright 2005 - 2021 Advantage Solutions, s. r. o.
+
+This file is part of ORIGAM (http://www.origam.org).
+
+ORIGAM is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+ORIGAM is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useContext } from "react";
+import S from "./Dialog.module.scss";
+import { MobXProviderContext } from "mobx-react";
+import { MobileState } from "model/entities/MobileState/MobileState";
+import { BottomIcon } from "gui/connections/MobileComponents/BottomToolBar/BottomIcon";
+
+export const Dialog: React.FC<{
+  heading: string
+}> = (props) => {
+
+  const mobileState = useContext(MobXProviderContext).application.mobileState as MobileState;
+
+  return (
+    <div className={S.root}>
+      <div className={S.topBar}>
+        {props.heading}
+      </div>
+      {/*{mobileState.dialogComponent}*/}
+      {props.children}
+      <div className={S.bottomBar}>
+        <BottomIcon
+          key={"close"}
+          iconPath={"./icons/noun-close-25798.svg"}
+          onClick={() => mobileState.dialogComponent = null}
+        />
+      </div>
+    </div>
+  );
+}
@@ -22,8 +22,6 @@ import S from "gui/connections/MobileComponents/Form/ComboBox/ComboBox.module.sc
 import cx from "classnames";
 import CS from "@origam/components/src/components/Dropdown/Dropdown.module.scss";
 import { MobXProviderContext, observer } from "mobx-react";
-import { MobileState } from "model/entities/MobileState/MobileState";
-import { EditLayoutState, ScreenLayoutState } from "model/entities/MobileState/MobileLayoutState";
 import { ComboFullScreenEditor } from "gui/connections/MobileComponents/Form/ComboBox/ComboFullScreenEditor";
 import { IDataView } from "model/entities/types/IDataView";
 import { IProperty } from "model/entities/types/IProperty";
@@ -32,10 +30,12 @@ import { MobileDropdownBehavior } from "gui/connections/MobileComponents/Form/Co
 import { DropdownEditorApi } from "modules/Editors/DropdownEditor/DropdownEditorApi";
 import { DropdownEditorData, IDropdownEditorData } from "modules/Editors/DropdownEditor/DropdownEditorData";
 import { TagInputEditorData } from "modules/Editors/DropdownEditor/TagInputEditorData";
-import {  DropdownDataTable } from "modules/Editors/DropdownEditor/DropdownTableModel";
+import { DropdownDataTable } from "modules/Editors/DropdownEditor/DropdownTableModel";
 import { DropdownEditorLookupListCache } from "modules/Editors/DropdownEditor/DropdownEditorLookupListCache";
 import { DropdownEditorSetup, DropdownEditorSetupFromXml } from "modules/Editors/DropdownEditor/DropdownEditorSetup";
 import { onMobileLinkClick } from "model/actions/DropdownEditor/onMobileLinkClick";
+import { showDialog } from "model/selectors/getDialogStack";
+import { Dialog } from "gui/connections/MobileComponents/Dialog";
 
 
 export interface IComboBoxProps {
@@ -55,27 +55,28 @@ export interface IComboBoxProps {
 
 export const ComboBox: React.FC<IComboBoxProps> = observer((props) => {
 
-  const mobileState = useContext(MobXProviderContext).application.mobileState as MobileState;
+  const application = useContext(MobXProviderContext).application;
   const row = getSelectedRow(props.property);
   const currentValue = row && props.dataView.dataTable.getCellText(row, props.property);
 
-  function onTextClick(){
-    if(props.isLink){
+  function onTextClick() {
+    if (props.isLink) {
       onMobileLinkClick(props.property, row)
     }
   }
 
-  function onButtonClick(){
-    if(props.isReadOnly){
+  function onButtonClick() {
+    if (props.isReadOnly) {
       return;
     }
-    mobileState.layoutState = new EditLayoutState(
-      <XmlBuildDropdownEditor
-        {...props}
-        onValueSelected={() => mobileState.layoutState = new ScreenLayoutState()}
-      />,
-      props.property.name
-    )
+    let closeDialog = showDialog(application, "editor",
+      <Dialog heading={props.property.name}>
+        <XmlBuildDropdownEditor
+          {...props}
+          onValueSelected={() => closeDialog()}
+        />
+      </Dialog>
+    );
   }
 
   return (
@@ -110,7 +111,7 @@ export function XmlBuildDropdownEditor(props: {
   isLink?: boolean;
   autoSort?: boolean;
   onTextOverflowChanged?: (toolTip: string | null | undefined) => void;
-  onValueSelected: ()=> void;
+  onValueSelected: () => void;
   onKeyDown?(event: any): void;
   dataView: IDataView,
   property: IProperty;
@@ -164,13 +165,13 @@ export function XmlBuildDropdownEditor(props: {
   });
 
   return (
-      <ComboFullScreenEditor
-        {...props}
-        behavior={dropdownEditorInfrastructure.behavior}
-        dataTable={dropdownEditorInfrastructure.editorDataTable}
-        columnDrivers={dropdownEditorInfrastructure.setup.columnDrivers}
-        editorData={dropdownEditorInfrastructure.editorData}
-      />
+    <ComboFullScreenEditor
+      {...props}
+      behavior={dropdownEditorInfrastructure.behavior}
+      dataTable={dropdownEditorInfrastructure.editorDataTable}
+      columnDrivers={dropdownEditorInfrastructure.setup.columnDrivers}
+      editorData={dropdownEditorInfrastructure.editorData}
+    />
   );
 }
 

@@ -24,7 +24,13 @@ div.root{
 }
 
 div.root input:global(.input) {
-  max-height: 25px
+  max-height: 25px;
+  border-right: 1px solid var(--background5);
+  border-radius: 2px;
+
+  &:focus{
+    margin-right: 0;
+  }
 }
 
 div.root div:global(.cell) {

@@ -30,7 +30,7 @@ import { FormViewEditor } from "gui/Workbench/ScreenArea/FormView/FormViewEditor
 import { MobileTagInputEditor } from "gui/connections/MobileComponents/Form/ComboBox/MobileTagInputEditor";
 import { MobXProviderContext } from "mobx-react";
 import { MobileState } from "model/entities/MobileState/MobileState";
-import { EditLayoutState, ScreenLayoutState } from "model/entities/MobileState/MobileLayoutState";
+import { EditLayoutState } from "model/entities/MobileState/MobileLayoutState";
 import { onFieldChange } from "model/actions-ui/DataView/TableView/onFieldChange";
 import { MobileDateTimeEditor } from "gui/connections/MobileComponents/Form/MobileDateTimeEditor";
 import { onFieldBlur } from "model/actions-ui/DataView/TableView/onFieldBlur";
@@ -96,14 +96,15 @@ export const MobileFormViewEditor: React.FC<{
         property={props.property}
         onChange={onChange}
         onPlusButtonClick={() => {
+          const previousState = mobileState.layoutState;
           mobileState.layoutState = new EditLayoutState(
             <XmlBuildDropdownEditor
               {...props}
               isReadOnly={readOnly}
               dataView={getDataView(props.property)}
               property={props.property}
               editingTags={true}
-              onValueSelected={() => mobileState.layoutState = new ScreenLayoutState()}
+              onValueSelected={() => mobileState.layoutState = previousState}
             />,
             props.property.name
           )

@@ -24,7 +24,21 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   flex-direction: column;
 }
 
-.root :global(.sidebar){
+.root :global(.sidebar) {
   height: 50%;
   flex-grow: 1;
+}
+
+.dialog {
+  top: 0;
+  left: 0;
+  z-index: 100;
+  position: absolute;
+  height: 100%;
+  background: var(--background1);
+  overflow: hidden;
+}
+
+.hidden{
+  display: none;
 }
@@ -35,15 +35,13 @@ import { CScreenContent } from "gui/connections/CScreenContent";
 import { ScreenHeader } from "gui/connections/MobileComponents/ScreenHeader";
 import {
   AboutLayoutState,
-  DialogLayoutState,
   EditLayoutState,
   MenuLayoutState,
   ScreenLayoutState,
   SearchLayoutState
 } from "model/entities/MobileState/MobileLayoutState";
 import { getActiveScreen } from "model/selectors/getActiveScreen";
 
-
 @observer
 export class MobileMain extends React.Component<{}> {
 
@@ -62,13 +60,24 @@ export class MobileMain extends React.Component<{}> {
   }
 
   componentDidMount() {
-    if(!getActiveScreen(this.workbench)){
+    if (!getActiveScreen(this.workbench)) {
       this.mobileState.layoutState = new MenuLayoutState();
     }
     this.about.update();
   }
 
   renderMainPageContents() {
+    return (
+      <>
+        {this.renderStateComponent()}
+        <div className={S.dialog + " " + (this.mobileState.dialogComponent === null ? S.hidden : "")}>
+          {this.mobileState.dialogComponent}
+        </div>
+      </>
+    );
+  }
+
+  private renderStateComponent() {
     if (this.mobileState.layoutState instanceof MenuLayoutState) {
       return <CSidebar/>;
     }
@@ -87,9 +96,6 @@ export class MobileMain extends React.Component<{}> {
     if (this.mobileState.layoutState instanceof EditLayoutState) {
       return (this.mobileState.layoutState as EditLayoutState).component
     }
-    if(this.mobileState.layoutState instanceof DialogLayoutState){
-      return (this.mobileState.layoutState as DialogLayoutState).component
-    }
     if (this.mobileState.layoutState instanceof AboutLayoutState) {
       return <MobileAboutView
         aboutInfo={this.about.info}

@@ -64,7 +64,10 @@ export class StandaloneDetailNavigator extends React.Component<{
   }
 
   render(){
-    return <DetailNavigator node={this.navigatorState.currentNode} onNodeClick={node => this.navigatorState.onLinkClick(node)}/>
+    return <DetailNavigator
+      node={this.navigatorState.currentNode}
+      onNodeClick={node => this.navigatorState.onLinkClick(node)}
+    />
   }
 }
 

@@ -26,7 +26,6 @@ export function getNotificationBoxContent(ctx: any) {
       yield*getNotifications(ctx).getNotificationBoxContent();
     } catch (e) {
       yield*handleError(ctx)(e);
-      // console.log("Error during getNotificationBoxContent call ignored.");
       throw e;
     }
   };

@@ -121,35 +121,6 @@ export class EditLayoutState implements IMobileLayoutState {
   }
 }
 
-export class DialogLayoutState implements IMobileLayoutState {
-  actionDropUpHidden = true;
-  refreshButtonHidden = true;
-  saveButtonHidden = true;
-  showOpenTabCombo = false;
-  showSearchButton = false;
-  showHamburgerMenuButton = false;
-  showOkButton = false;
-  heading = "";
-
-  constructor(
-    public component: React.ReactElement,
-    public layoutAfterClose?: IMobileLayoutState,)
-  {
-  }
-
-  showCloseButton(someScreensAreOpen: boolean) {
-    return false;
-  }
-
-  async close(ctx: any): Promise<IMobileLayoutState> {
-    return this.layoutAfterClose ?? new ScreenLayoutState();
-  }
-
-  hamburgerClick(): IMobileLayoutState {
-    return new MenuLayoutState();
-  }
-}
-
 export class ScreenLayoutState implements IMobileLayoutState {
   actionDropUpHidden = false;
   refreshButtonHidden = false;

@@ -5,6 +5,7 @@ import { IFormScreen } from "model/entities/types/IFormScreen";
 import { BreadCrumbsState } from "model/entities/MobileState/BreadCrumbsState";
 import { IMobileLayoutState, MenuLayoutState, ScreenLayoutState } from "model/entities/MobileState/MobileLayoutState";
 import { getActiveScreen } from "model/selectors/getActiveScreen";
+import React from "react";
 
 export class MobileState {
   _workbench: IWorkbench | undefined;
@@ -17,6 +18,9 @@ export class MobileState {
 
   breadCrumbsState = new BreadCrumbsState()
 
+  @observable.ref
+  dialogComponent: React.ReactElement | null = null;
+
   initialize(workbench: IWorkbench) {
     let workbenchLifecycle = getWorkbenchLifecycle(workbench);
     workbenchLifecycle.mainMenuItemClickHandler.add(