Icon picker at the bottom
@ -3,7 +3,7 @@ services:
|
|||||||
e2e:
|
e2e:
|
||||||
image: cypress/included:11.2.0
|
image: cypress/included:11.2.0
|
||||||
container_name: wisemapping-integration-tests
|
container_name: wisemapping-integration-tests
|
||||||
entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"'
|
entrypoint: '/bin/sh -c "yarn install && yarn build && yarn test:integration"'
|
||||||
working_dir: /e2e
|
working_dir: /e2e
|
||||||
environment:
|
environment:
|
||||||
- CYPRESS_imageSnaphots=true
|
- CYPRESS_imageSnaphots=true
|
||||||
|
@ -3,7 +3,7 @@ services:
|
|||||||
e2e:
|
e2e:
|
||||||
image: cypress/included:11.2.0
|
image: cypress/included:11.2.0
|
||||||
container_name: wisemapping-integration-tests
|
container_name: wisemapping-integration-tests
|
||||||
entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
|
entrypoint: '/bin/sh -c "yarn build && yarn test:integration"'
|
||||||
working_dir: /e2e
|
working_dir: /e2e
|
||||||
environment:
|
environment:
|
||||||
- CYPRESS_imageSnaphots=true
|
- CYPRESS_imageSnaphots=true
|
||||||
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 101 KiB |
@ -54,13 +54,6 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box style={{ padding: '5px' }}>
|
<Box style={{ padding: '5px' }}>
|
||||||
<FormGroup sx={{ align: 'center' }}>
|
|
||||||
<FormControlLabel
|
|
||||||
label={<FormattedMessage id="icon-picker.show-images" defaultMessage="Show images" />}
|
|
||||||
control={<Switch onChange={handleCheck} />}
|
|
||||||
/>
|
|
||||||
</FormGroup>
|
|
||||||
|
|
||||||
{checked && (
|
{checked && (
|
||||||
<EmojiPicker
|
<EmojiPicker
|
||||||
onEmojiClick={handleEmojiSelect}
|
onEmojiClick={handleEmojiSelect}
|
||||||
@ -69,8 +62,13 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
|
|||||||
previewConfig={{ showPreview: false }}
|
previewConfig={{ showPreview: false }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
|
{!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
|
||||||
|
<FormGroup sx={{ float: 'right' }}>
|
||||||
|
<FormControlLabel
|
||||||
|
label={<FormattedMessage id="icon-picker.show-images" defaultMessage="Show images" />}
|
||||||
|
control={<Switch onChange={handleCheck} />}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -22,11 +22,13 @@ class MapInfoImpl implements MapInfo {
|
|||||||
private title: string;
|
private title: string;
|
||||||
private locked: boolean;
|
private locked: boolean;
|
||||||
private starred: boolean;
|
private starred: boolean;
|
||||||
|
private lockedMsg: string | undefined;
|
||||||
|
|
||||||
constructor(id: string, title: string, locked: boolean) {
|
constructor(id: string, title: string, locked: boolean, lockedMsg?: string) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.title = title;
|
this.title = title;
|
||||||
this.locked = locked;
|
this.locked = locked;
|
||||||
|
this.lockedMsg = lockedMsg;
|
||||||
this.starred = true;
|
this.starred = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,7 +46,7 @@ class MapInfoImpl implements MapInfo {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setTitle(value: string): void {
|
setTitle(value: string): void {
|
||||||
throw this.title;
|
throw (this.title = value);
|
||||||
}
|
}
|
||||||
|
|
||||||
isLocked(): boolean {
|
isLocked(): boolean {
|
||||||
|
@ -37,15 +37,16 @@ const options: EditorOptions = {
|
|||||||
enableKeyboardEvents: true,
|
enableKeyboardEvents: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapInfo = new MapInfoImpl('welcome', 'Develop WiseMapping', true);
|
const mapInfo = new MapInfoImpl('welcome', 'Develop WiseMapping', true, "It's locked !");
|
||||||
|
|
||||||
const container = document.getElementById('root');
|
const container = document.getElementById('root');
|
||||||
const root = createRoot(container!);
|
const root = createRoot(container!);
|
||||||
root.render(<Editor
|
root.render(
|
||||||
|
<Editor
|
||||||
mapInfo={mapInfo}
|
mapInfo={mapInfo}
|
||||||
options={options}
|
options={options}
|
||||||
persistenceManager={persistence}
|
persistenceManager={persistence}
|
||||||
onAction={(action) => console.log('action called:', action)}
|
onAction={(action) => console.log('action called:', action)}
|
||||||
onLoad={initialization}
|
onLoad={initialization}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
@ -31,7 +31,6 @@ const initialization = (designer: Designer) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
|
const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
|
||||||
const mapId = 'welcome';
|
|
||||||
const options: EditorOptions = {
|
const options: EditorOptions = {
|
||||||
mode: 'showcase',
|
mode: 'showcase',
|
||||||
locale: 'en',
|
locale: 'en',
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
context('Maps Page', () => {
|
context('Maps Page', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.visit('/c/maps');
|
cy.visit('/c/maps');
|
||||||
|
cy.get('.MuiCard-root').should('have.length', 3);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should match the snapshot', () => {
|
it('should match the snapshot', () => {
|
||||||
@ -11,11 +12,8 @@ context('Maps Page', () => {
|
|||||||
context('iphone-5 resolution', () => {
|
context('iphone-5 resolution', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.viewport('iphone-5');
|
cy.viewport('iphone-5');
|
||||||
cy.visit('/c/maps', {
|
cy.visit('/c/maps');
|
||||||
onLoad: (win) => {
|
cy.get('.MuiCard-root').should('have.length', 3);
|
||||||
win.onerror = null;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Displays mobile menu button', () => {
|
it('Displays mobile menu button', () => {
|
||||||
@ -41,6 +39,7 @@ context('720p resolution', () => {
|
|||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.viewport(1280, 720);
|
cy.viewport(1280, 720);
|
||||||
cy.visit('/c/maps');
|
cy.visit('/c/maps');
|
||||||
|
cy.get('.MuiCard-root').should('have.length', 3);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Displays mobile menu button', () => {
|
it('Displays mobile menu button', () => {
|
||||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 40 KiB |
@ -24,14 +24,14 @@ class MapInfoImpl implements MapInfo {
|
|||||||
private title: string;
|
private title: string;
|
||||||
private zoom: number;
|
private zoom: number;
|
||||||
private locked: boolean;
|
private locked: boolean;
|
||||||
private lockedMsg: string;
|
private lockedMsg: string | undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
id: number,
|
id: number,
|
||||||
client: Client,
|
client: Client,
|
||||||
title: string,
|
title: string,
|
||||||
locked: boolean,
|
locked: boolean,
|
||||||
lockedMsg: string,
|
lockedMsg: string | undefined,
|
||||||
zoom: number,
|
zoom: number,
|
||||||
) {
|
) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
@ -62,7 +62,7 @@ class MapInfoImpl implements MapInfo {
|
|||||||
return this.locked;
|
return this.locked;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLockedMessage(): string {
|
getLockedMessage(): string | undefined {
|
||||||
return this.lockedMsg;
|
return this.lockedMsg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Editor from '@wisemapping/editor';
|
import Editor, { EditorOptions } from '@wisemapping/editor';
|
||||||
import {
|
import {
|
||||||
EditorRenderMode,
|
EditorRenderMode,
|
||||||
PersistenceManager,
|
PersistenceManager,
|
||||||
@ -136,7 +136,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
|
|||||||
const isAccountLoaded = mode === 'showcase' || useFetchAccount;
|
const isAccountLoaded = mode === 'showcase' || useFetchAccount;
|
||||||
const loadCompleted = mode && isAccountLoaded;
|
const loadCompleted = mode && isAccountLoaded;
|
||||||
|
|
||||||
let options, persistence: PersistenceManager;
|
let options: EditorOptions, persistence: PersistenceManager;
|
||||||
let mapInfo: MapInfo;
|
let mapInfo: MapInfo;
|
||||||
if (loadCompleted) {
|
if (loadCompleted) {
|
||||||
options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
|
options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
|
||||||
@ -145,7 +145,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
|
|||||||
mapId,
|
mapId,
|
||||||
client,
|
client,
|
||||||
options.mapTitle,
|
options.mapTitle,
|
||||||
options.isLocked,
|
options.locked,
|
||||||
options.lockedMsg,
|
options.lockedMsg,
|
||||||
options.zoom,
|
options.zoom,
|
||||||
);
|
);
|
||||||
|