vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-25 23:54:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-06 09:06:14 -08:00
parent d2a4fa0365
commit 16c2d1baaf
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from 'react-query';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, Typography } from '@material-ui/core'; import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, TextareaAutosize, Typography } from '@material-ui/core';
import Client, { ErrorInfo } from '../../../../client'; import Client, { ErrorInfo } from '../../../../client';
@ -10,6 +10,7 @@ import { activeInstance } from '../../../../redux/clientSlice';
import BaseDialog from '../base-dialog'; import BaseDialog from '../base-dialog';
import { TabContext, TabList, TabPanel } from '@material-ui/lab'; import { TabContext, TabList, TabPanel } from '@material-ui/lab';
import { fetchMapById, handleOnMutationSuccess } from '..'; import { fetchMapById, handleOnMutationSuccess } from '..';
import { useStyles } from './style';
export type PublishProps = { export type PublishProps = {
mapId: number, mapId: number,
@ -27,6 +28,7 @@ const PublishDialog = (props: PublishProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const mutation = useMutation<void, ErrorInfo, boolean>((model: boolean) => { const mutation = useMutation<void, ErrorInfo, boolean>((model: boolean) => {
return client.updateMapToPublic(mapId, model); return client.updateMapToPublic(mapId, model);
}, },
@ -93,21 +95,13 @@ const PublishDialog = (props: PublishProps) => {
<Typography variant="subtitle2"> <Typography variant="subtitle2">
<FormattedMessage id="publish.embedded-msg" defaultMessage="Copy this snippet of code to embed in your blog or page:" /> <FormattedMessage id="publish.embedded-msg" defaultMessage="Copy this snippet of code to embed in your blog or page:" />
</Typography> </Typography>
<p> <TextareaAutosize className={classes.textarea} readOnly={true} spellCheck={false} rowsMax={6} defaultValue={`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`} />
<textarea style={{ width: "100%" }}>
{`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`}
</textarea>
</p>
</TabPanel> </TabPanel>
<TabPanel value="2"> <TabPanel value="2">
<Typography variant="subtitle2"> <Typography variant="subtitle2">
<FormattedMessage id="publish.public-url-msg" defaultMessage="Copy and paste the link below to share your map with colleagues:" /> <FormattedMessage id="publish.public-url-msg" defaultMessage="Copy and paste the link below to share your map with colleagues:" />
</Typography> </Typography>
<p> <TextareaAutosize className={classes.textarea} readOnly={true} spellCheck={false} rowsMax={1} defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`} />
<textarea style={{ width: "100%" }}>
{`https://app.wisemapping.com/c/maps/${mapId}/public`}
</textarea>
</p>
</TabPanel> </TabPanel>
</TabContext> </TabContext>
</div> </div>

11
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts Normal file
View File

@ -0,0 +1,11 @@
import { createStyles, makeStyles, Theme } from "@material-ui/core";
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
textarea: {
width: '100%',
padding: '15px 15px',
marging: '0px 10px'
}
}),
);