dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 21:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

form buttons styling

Browse Source
This commit is contained in:
Jan Prochazka
2020-04-26 08:11:36 +02:00
parent 4e0770d1ab
commit d2887f9869
7 changed files with 96 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/modals/ConfirmSqlModal.js
View File

@@ -1,12 +1,14 @@
import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { FormRow, FormButtonRow, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import FormStyledButton from '../widgets/FormStyledButton';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
import SqlEditor from '../sqleditor/SqlEditor';
// import FormikForm from '../utility/FormikForm';
import styled from 'styled-components';
import keycodes from '../utility/keycodes';
const SqlWrapper = styled.div`
position: relative;
@@ -15,24 +17,30 @@ const SqlWrapper = styled.div`
`;
export default function ConfirmSqlModal({ modalState, sql, engine, onConfirm }) {
const handleKeyDown = (data, hash, keyString, keyCode, event) => {
if (keyCode == keycodes.enter) {
event.preventDefault();
modalState.close();
onConfirm();
}
};
return (
<ModalBase modalState={modalState}>
<h2>Save changes</h2>
<SqlWrapper>
<SqlEditor value={sql} engine={engine} readOnly />
<SqlEditor value={sql} engine={engine} focusOnCreate onKeyDown={handleKeyDown} readOnly />
</SqlWrapper>
<FormRow>
<input
type="button"
<FormButtonRow>
<FormStyledButton
value="OK"
onClick={() => {
modalState.close();
onConfirm();
}}
/>
<input type="button" value="Close" onClick={modalState.close} />
</FormRow>
<FormStyledButton type="button" value="Close" onClick={modalState.close} />
</FormButtonRow>
</ModalBase>
);
}

6
packages/web/src/modals/ConnectionModal.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
// import FormikForm from '../utility/FormikForm';
@@ -37,10 +37,10 @@ export default function ConnectionModal({ modalState, connection = undefined })
<FormTextField label="Password" name="password" />
<FormTextField label="Display name" name="displayName" />
<FormRow>
<FormButtonRow>
<FormButton text="Test" onClick={handleTest} />
<FormSubmit text="Save" />
</FormRow>
</FormButtonRow>
</Form>
</Formik>
<div>Connect result: {sqlConnectResult}</div>

1
packages/web/src/modals/ModalBase.js
View File

@@ -27,6 +27,7 @@ const StyledModal = styled(Modal)`
padding: 20px;
width: 50%;
max-width: 900px;
margin: auto;
margin-top: 15vh;
`;

6
packages/web/src/modals/SaveSqlFileModal.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
import { useSetSavedSqlFiles } from '../utility/globalState';
@@ -28,9 +28,9 @@ export default function SaveSqlFileModal({ storageKey, modalState, name, onSave
<Form>
<FormTextField label="File name" name="name" />
<FormRow>
<FormButtonRow>
<FormSubmit text="Save" />
</FormRow>
</FormButtonRow>
</Form>
</Formik>
</ModalBase>