mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Improve UI
This commit is contained in:
parent
d2a4fa0365
commit
16c2d1baaf
@ -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>
|
||||||
|
@ -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'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
@ -311,7 +311,7 @@ export const MapsList = (props: MapsListProps) => {
|
|||||||
}
|
}
|
||||||
setActiveRowAction(undefined);
|
setActiveRowAction(undefined);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleOnSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setSearchCondition(e.target.value);
|
setSearchCondition(e.target.value);
|
||||||
}
|
}
|
||||||
@ -319,7 +319,7 @@ export const MapsList = (props: MapsListProps) => {
|
|||||||
const isSelected = (id: number) => selected.indexOf(id) !== -1;
|
const isSelected = (id: number) => selected.indexOf(id) !== -1;
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
<ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
|
<ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
|
||||||
|
|
||||||
<Paper className={classes.paper} elevation={0}>
|
<Paper className={classes.paper} elevation={0}>
|
||||||
<Toolbar className={classes.toolbar} variant="dense">
|
<Toolbar className={classes.toolbar} variant="dense">
|
||||||
|
Loading…
Reference in New Issue
Block a user