mirror of
https://github.com/maputnik/editor.git
synced 2026-09-21 19:57:41 +00:00
Compare commits
5 Commits
main
..
b8267508c4
| Author | SHA1 | Date | |
|---|---|---|---|
 Harel M
|
b8267508c4 | ||
|
Harel M
|
3c9cf15bf0 | ||
|
HarelM
|
2b7a092ad3 | ||
|
HarelM
|
705233241f | ||
|
HarelM
|
3c1c3b6a74 |
@@ -102,7 +102,7 @@ jobs:
|
||||
- run: npm ci
|
||||
- run: npm run test-unit-ci
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1
|
||||
uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
|
||||
with:
|
||||
files: ${{ github.workspace }}/coverage/coverage-final.json
|
||||
verbose: true
|
||||
@@ -125,7 +125,7 @@ jobs:
|
||||
- name: Playwright run
|
||||
run: npm run test-e2e
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@303a32d7a59b442fa8d48b6a1cc6825c09c847a5 # v7.1.1
|
||||
uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
|
||||
with:
|
||||
files: ${{ github.workspace }}/coverage/coverage-final.json
|
||||
verbose: true
|
||||
|
||||
@@ -46,7 +46,7 @@ jobs:
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@1c5b675653bb5c22dbe9b12b556ec555138e09fd # v4.38.1
|
||||
uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
# If you wish to specify custom queries, you can do so here or in a config file.
|
||||
@@ -57,7 +57,7 @@ jobs:
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@1c5b675653bb5c22dbe9b12b556ec555138e09fd # v4.38.1
|
||||
uses: github/codeql-action/autobuild@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# 📚 https://git.io/JvXDl
|
||||
@@ -71,4 +71,4 @@ jobs:
|
||||
# make release
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@1c5b675653bb5c22dbe9b12b556ec555138e09fd # v4.38.1
|
||||
uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
|
||||
|
||||
+1
-1
@@ -5,6 +5,7 @@
|
||||
- Upgrade to MapLibre GL JS 6 and Vite 8, and update the remaining dependencies
|
||||
- Serve the RTL text plugin from `@mapbox/mapbox-gl-rtl-text` instead of a pinned CDN URL, so its version is tracked in `package.json`
|
||||
- Exported HTML now loads MapLibre GL JS as an ES module, since v6 no longer ships a UMD bundle
|
||||
- The sidebar can now be resized, both as a whole and in the split between the layer list and the layer editor
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
@@ -13,7 +14,6 @@
|
||||
- Preserve expanded layer groups when deleting layers, including the first layer of a group
|
||||
- The map's data listener now fires on tile loads again, so source and vector layer field autocompletion is populated
|
||||
- The `maputnik` desktop binary now opens the default browser automatically on startup (opt out with `--no-browser`)
|
||||
- Keyboard shortcuts now keep working while the map has focus, instead of going dead until the map is blurred
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 3.1.0
|
||||
|
||||
@@ -62,22 +62,5 @@ describe("keyboard", () => {
|
||||
await when.typeKeys("!");
|
||||
await then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
||||
});
|
||||
|
||||
describe("while the map has focus", () => {
|
||||
beforeEach(async () => {
|
||||
await when.typeKeys("m");
|
||||
await then(get.canvas()).shouldBeFocused();
|
||||
});
|
||||
|
||||
test("'!' should show debug modal", async () => {
|
||||
await when.typeKeys("!");
|
||||
await then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
||||
});
|
||||
|
||||
test("'s' should show settings modal", async () => {
|
||||
await when.typeKeys("s");
|
||||
await then(get.elementByTestId("modal:settings")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { PlaywrightHelper } from "./playwright-helper";
|
||||
import { ModalDriver } from "./modal-driver";
|
||||
import emptyStyle from "../src/config/empty-style.json" with { type: "json" };
|
||||
|
||||
const baseUrl = "http://localhost:8888/";
|
||||
const isMac = process.platform === "darwin";
|
||||
@@ -57,11 +56,6 @@ export class MaputnikDriver {
|
||||
url: "https://www.glyph-server.com/*",
|
||||
response: ["Font 1", "Font 2", "Font 3"],
|
||||
});
|
||||
await this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: /cdn\.jsdelivr\.net\/.*\/empty-style\.json$/,
|
||||
response: emptyStyle,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -122,6 +122,8 @@ export class Assertable<T> {
|
||||
// Value assertions (auto-retrying for Query targets).
|
||||
shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
|
||||
|
||||
shouldBeGreaterThan = (value: number) => this.assertValue((actual) => expect(actual).toBeGreaterThan(value));
|
||||
|
||||
shouldInclude = (value: any) =>
|
||||
this.assertValue((actual) => {
|
||||
if (typeof value === "object" && value !== null) {
|
||||
@@ -349,6 +351,15 @@ export class PlaywrightHelper {
|
||||
await this.page.mouse.up();
|
||||
},
|
||||
|
||||
/** Presses at the centre of an element and drags it by the given offset. */
|
||||
dragBy: async (testId: string, deltaX: number, deltaY = 0) => {
|
||||
const { x, y } = await centerOf(this.testId(testId));
|
||||
await this.page.mouse.move(x, y);
|
||||
await this.page.mouse.down();
|
||||
await this.page.mouse.move(x + deltaX, y + deltaY, { steps: 10 });
|
||||
await this.page.mouse.up();
|
||||
},
|
||||
|
||||
clickCenter: async (testId: string) => {
|
||||
const { x, y } = await centerOf(this.testId(testId));
|
||||
await this.page.mouse.move(x, y);
|
||||
@@ -446,6 +457,13 @@ export class PlaywrightHelper {
|
||||
|
||||
inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
|
||||
|
||||
elementWidth: (testId: string) =>
|
||||
new Query<number>(async () => {
|
||||
const box = await this.testId(testId).first().boundingBox();
|
||||
if (!box) throw new Error(`Element "${testId}" has no bounding box`);
|
||||
return box.width;
|
||||
}),
|
||||
|
||||
elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
|
||||
|
||||
locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { beforeEach, describe, test } from "./utils/fixtures";
|
||||
import { MaputnikDriver } from "./maputnik-driver";
|
||||
|
||||
describe("sidebar resize", () => {
|
||||
const { given, get, when, then } = new MaputnikDriver();
|
||||
|
||||
beforeEach(async () => {
|
||||
await given.setupMockBackedResponses();
|
||||
await when.setStyle("layer");
|
||||
});
|
||||
|
||||
test("dragging the outer handle widens the sidebar", async () => {
|
||||
const initialWidth = await get.elementWidth("sidebar-panel").get();
|
||||
|
||||
await when.dragBy("sidebar-resize-handle", 100);
|
||||
|
||||
await then(get.elementWidth("sidebar-panel")).shouldBeGreaterThan(initialWidth + 50);
|
||||
});
|
||||
|
||||
test("dragging the inner handle widens the layer list", async () => {
|
||||
const initialWidth = await get.elementWidth("layer-list-panel").get();
|
||||
|
||||
await when.dragBy("inner-resize-handle", 50);
|
||||
|
||||
await then(get.elementWidth("layer-list-panel")).shouldBeGreaterThan(initialWidth + 20);
|
||||
});
|
||||
});
|
||||
Generated
+341
-356
File diff suppressed because it is too large
Load Diff
+19
-18
@@ -29,16 +29,16 @@
|
||||
"dependencies": {
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lint": "^6.9.7",
|
||||
"@codemirror/state": "^6.7.5",
|
||||
"@codemirror/state": "^6.7.4",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.43.12",
|
||||
"@codemirror/view": "^6.43.11",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.4.0",
|
||||
"@maplibre/maplibre-gl-geocoder": "^1.9.4",
|
||||
"@maplibre/maplibre-gl-inspect": "^1.9.0",
|
||||
"@maplibre/maplibre-gl-style-spec": "^26.4.4",
|
||||
"@maplibre/maplibre-gl-style-spec": "^26.4.2",
|
||||
"array-move": "^4.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"classnames": "^2.5.1",
|
||||
@@ -60,22 +60,23 @@
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"maplibre-gl": "^6.10.0",
|
||||
"maplibre-gl": "^6.7.0",
|
||||
"maputnik-design": "github:maputnik/design#172b06c",
|
||||
"ol": "^10.10.0",
|
||||
"ol-mapbox-style": "^13.5.1",
|
||||
"ol-mapbox-style": "^13.4.3",
|
||||
"pmtiles": "^4.5.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^19.3.0",
|
||||
"react": "^19.2.8",
|
||||
"react-accessible-accordion": "^5.0.1",
|
||||
"react-aria-menubutton": "^8.0.0",
|
||||
"react-aria-modal": "^5.0.2",
|
||||
"react-collapse": "^5.1.1",
|
||||
"react-color": "^2.19.3",
|
||||
"react-dom": "^19.3.0",
|
||||
"react-i18next": "^17.0.14",
|
||||
"react-dom": "^19.2.8",
|
||||
"react-i18next": "^17.0.13",
|
||||
"react-icons": "^5.7.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^4.11.0",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"slugify": "^1.6.9",
|
||||
"string-hash": "^1.1.3",
|
||||
@@ -116,36 +117,36 @@
|
||||
"@types/lodash.isequal": "^4.5.8",
|
||||
"@types/lodash.throttle": "^4.1.9",
|
||||
"@types/randomcolor": "^0.5.9",
|
||||
"@types/react": "^19.3.0",
|
||||
"@types/react": "^19.2.18",
|
||||
"@types/react-aria-menubutton": "^6.2.14",
|
||||
"@types/react-aria-modal": "^5.0.0",
|
||||
"@types/react-collapse": "^5.0.4",
|
||||
"@types/react-color": "^3.0.13",
|
||||
"@types/react-dom": "^19.3.0",
|
||||
"@types/react-dom": "^19.2.7",
|
||||
"@types/string-hash": "^1.1.3",
|
||||
"@types/wicg-file-system-access": "^2023.10.7",
|
||||
"@vitejs/plugin-react": "^6.1.1",
|
||||
"@vitest/coverage-v8": "^5.0.1",
|
||||
"@vitest/coverage-v8": "^5.0.0",
|
||||
"cors": "^2.8.6",
|
||||
"eslint": "^10.10.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.7",
|
||||
"i18next-cli": "^1.74.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.6",
|
||||
"i18next-cli": "^1.73.1",
|
||||
"istanbul": "^0.4.5",
|
||||
"istanbul-lib-coverage": "^3.2.2",
|
||||
"nyc": "^18.0.0",
|
||||
"postcss": "^8.5.28",
|
||||
"react-hot-loader": "^4.13.1",
|
||||
"sass": "^1.104.1",
|
||||
"sass": "^1.104.0",
|
||||
"stylelint": "^17.15.0",
|
||||
"stylelint-config-recommended-scss": "^17.0.1",
|
||||
"stylelint-scss": "^7.3.0",
|
||||
"stylelint-scss": "^7.2.0",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.70.0",
|
||||
"typescript-eslint": "^8.69.0",
|
||||
"uuid": "^14.0.2",
|
||||
"vite": "^8.3.0",
|
||||
"vite": "^8.2.2",
|
||||
"vite-plugin-istanbul": "^9.0.1",
|
||||
"vitest": "^5.0.1"
|
||||
"vitest": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import { cpus } from "node:os";
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
|
||||
const isCI = !!process.env.CI;
|
||||
// Playwright defaults to CPU / 2 workers,
|
||||
// capping the number of workers to 4 to avoid overloading browsers.
|
||||
const workers = Math.min(4, Math.max(1, Math.floor(cpus().length / 2)));
|
||||
// When the app is already served elsewhere (e.g. the docker e2e job) set
|
||||
// E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
|
||||
const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
|
||||
@@ -17,7 +13,6 @@ export default defineConfig({
|
||||
globalTeardown: "./e2e/utils/e2e-teardown.ts",
|
||||
fullyParallel: true,
|
||||
forbidOnly: isCI,
|
||||
workers,
|
||||
retries: isCI ? 2 : 0,
|
||||
reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
|
||||
use: {
|
||||
|
||||
+1
-17
@@ -83,22 +83,6 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the given element consumes keystrokes as text.
|
||||
*
|
||||
* Shortcuts have to stay out of the way while the user is typing, but asking
|
||||
* whether the focus is on `document.body` answers a different question: the map
|
||||
* canvas is not a text field, yet focusing it used to disable every shortcut.
|
||||
*/
|
||||
function isTextEntryElement(element: Element | null): boolean {
|
||||
if (!element) return false;
|
||||
const node = element as HTMLElement;
|
||||
return node.isContentEditable ||
|
||||
node.tagName === "INPUT" ||
|
||||
node.tagName === "TEXTAREA" ||
|
||||
node.tagName === "SELECT";
|
||||
}
|
||||
|
||||
type AppState = {
|
||||
errors: MappedError[],
|
||||
infos: string[],
|
||||
@@ -258,7 +242,7 @@ export class App extends React.Component<any, AppState> {
|
||||
(e.target as HTMLElement).blur();
|
||||
document.body.focus();
|
||||
}
|
||||
else if(this.state.isOpen.shortcuts || !isTextEntryElement(document.activeElement)) {
|
||||
else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
|
||||
const shortcut = shortcuts.find((shortcut) => {
|
||||
return (shortcut.key === e.key);
|
||||
});
|
||||
|
||||
+112
-33
@@ -1,9 +1,23 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";
|
||||
import { ScrollContainer } from "./ScrollContainer";
|
||||
import { type WithTranslation, withTranslation } from "react-i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IconContext } from "react-icons";
|
||||
|
||||
type AppLayoutInternalProps = {
|
||||
// Keep these in sync with $layout-list-width/$layout-editor-width in _vars.scss
|
||||
const DEFAULT_LIST_WIDTH = 200;
|
||||
const DEFAULT_DRAWER_WIDTH = 370;
|
||||
const DEFAULT_SIDEBAR_WIDTH = DEFAULT_LIST_WIDTH + DEFAULT_DRAWER_WIDTH;
|
||||
const PANEL_STYLE: React.CSSProperties = { overflow: "hidden" };
|
||||
|
||||
const SIDEBAR_LAYOUT_ID = "maputnik:sidebar-layout";
|
||||
const SIDEBAR_INNER_LAYOUT_ID = "maputnik:sidebar-inner-layout";
|
||||
const SIDEBAR_PANEL_ID = "sidebar";
|
||||
const MAP_PANEL_ID = "map";
|
||||
const LIST_PANEL_ID = "list";
|
||||
const DRAWER_PANEL_ID = "drawer";
|
||||
|
||||
type AppLayoutProps = {
|
||||
toolbar: React.ReactElement
|
||||
layerList: React.ReactElement
|
||||
layerEditor?: React.ReactElement
|
||||
@@ -11,43 +25,108 @@ type AppLayoutInternalProps = {
|
||||
map: React.ReactElement
|
||||
bottom?: React.ReactElement
|
||||
modals?: React.ReactNode
|
||||
} & WithTranslation;
|
||||
};
|
||||
|
||||
class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
|
||||
export const AppLayout: React.FC<AppLayoutProps> = (props) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
render() {
|
||||
document.body.dir = this.props.i18n.dir();
|
||||
const sidebarLayout = useDefaultLayout({
|
||||
id: SIDEBAR_LAYOUT_ID,
|
||||
panelIds: [SIDEBAR_PANEL_ID, MAP_PANEL_ID],
|
||||
});
|
||||
const innerLayout = useDefaultLayout({
|
||||
id: SIDEBAR_INNER_LAYOUT_ID,
|
||||
panelIds: [LIST_PANEL_ID, DRAWER_PANEL_ID],
|
||||
});
|
||||
|
||||
// The bottom panel is position: fixed, so it can't be a flex sibling of the
|
||||
// map panel; it follows the sidebar through this custom property instead.
|
||||
const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.dir = i18n.dir();
|
||||
}, [i18n, i18n.language]);
|
||||
|
||||
return <IconContext.Provider value={{size: "14px"}}>
|
||||
<div className="maputnik-layout">
|
||||
{this.props.toolbar}
|
||||
<div
|
||||
className="maputnik-layout"
|
||||
style={{"--sidebar-width": `${sidebarWidth}px`} as React.CSSProperties}
|
||||
>
|
||||
{props.toolbar}
|
||||
<div className="maputnik-layout-main">
|
||||
{this.props.codeEditor && <div className="maputnik-layout-code-editor">
|
||||
<ScrollContainer>
|
||||
{this.props.codeEditor}
|
||||
<Group
|
||||
className="maputnik-layout-panels"
|
||||
orientation="horizontal"
|
||||
id={SIDEBAR_LAYOUT_ID}
|
||||
defaultLayout={sidebarLayout.defaultLayout}
|
||||
onLayoutChanged={sidebarLayout.onLayoutChanged}
|
||||
>
|
||||
<Panel
|
||||
id={SIDEBAR_PANEL_ID}
|
||||
data-wd-key="sidebar-panel"
|
||||
className={props.codeEditor ? "maputnik-layout-code-editor" : "maputnik-layout-sidebar"}
|
||||
style={PANEL_STYLE}
|
||||
defaultSize={`${DEFAULT_SIDEBAR_WIDTH}px`}
|
||||
minSize="280px"
|
||||
onResize={({inPixels}) => setSidebarWidth(inPixels)}
|
||||
>
|
||||
{props.codeEditor && <ScrollContainer>
|
||||
{props.codeEditor}
|
||||
</ScrollContainer>
|
||||
}
|
||||
{!props.codeEditor && <Group
|
||||
className="maputnik-layout-sidebar-panels"
|
||||
orientation="horizontal"
|
||||
id={SIDEBAR_INNER_LAYOUT_ID}
|
||||
defaultLayout={innerLayout.defaultLayout}
|
||||
onLayoutChanged={innerLayout.onLayoutChanged}
|
||||
>
|
||||
<Panel
|
||||
id={LIST_PANEL_ID}
|
||||
data-wd-key="layer-list-panel"
|
||||
className="maputnik-layout-list"
|
||||
style={PANEL_STYLE}
|
||||
defaultSize={`${DEFAULT_LIST_WIDTH}px`}
|
||||
minSize="100px"
|
||||
>
|
||||
{props.layerList}
|
||||
</Panel>
|
||||
<Separator
|
||||
className="maputnik-layout-resize-handle"
|
||||
data-wd-key="inner-resize-handle"
|
||||
title={t("Drag to resize the layer list")}
|
||||
aria-label={t("Drag to resize the layer list")}
|
||||
/>
|
||||
<Panel
|
||||
id={DRAWER_PANEL_ID}
|
||||
className="maputnik-layout-drawer"
|
||||
style={PANEL_STYLE}
|
||||
defaultSize={`${DEFAULT_DRAWER_WIDTH}px`}
|
||||
minSize="150px"
|
||||
>
|
||||
<ScrollContainer>
|
||||
{props.layerEditor}
|
||||
</ScrollContainer>
|
||||
</Panel>
|
||||
</Group>
|
||||
}
|
||||
</Panel>
|
||||
<Separator
|
||||
className="maputnik-layout-resize-handle"
|
||||
data-wd-key="sidebar-resize-handle"
|
||||
title={t("Drag to resize the sidebar")}
|
||||
aria-label={t("Drag to resize the sidebar")}
|
||||
/>
|
||||
<Panel id={MAP_PANEL_ID} className="maputnik-layout-map" style={PANEL_STYLE} minSize="200px">
|
||||
{props.map}
|
||||
</Panel>
|
||||
</Group>
|
||||
</div>
|
||||
{props.bottom && <div className="maputnik-layout-bottom">
|
||||
{props.bottom}
|
||||
</div>
|
||||
}
|
||||
{!this.props.codeEditor && <>
|
||||
<div className="maputnik-layout-list">
|
||||
{this.props.layerList}
|
||||
</div>
|
||||
<div className="maputnik-layout-drawer">
|
||||
<ScrollContainer>
|
||||
{this.props.layerEditor}
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
</>}
|
||||
{this.props.map}
|
||||
</div>
|
||||
{this.props.bottom && <div className="maputnik-layout-bottom">
|
||||
{this.props.bottom}
|
||||
</div>
|
||||
}
|
||||
{this.props.modals}
|
||||
{props.modals}
|
||||
</div>
|
||||
</IconContext.Provider>;
|
||||
}
|
||||
}
|
||||
|
||||
export const AppLayout = withTranslation()(AppLayoutInternal);
|
||||
};
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "Ausdruck löschen",
|
||||
"Delete filter block": "Filterblock löschen",
|
||||
"Deuteranopia filter": "Deuteranopie-Filter",
|
||||
"Drag to resize the layer list": "Ziehen, um die Ebenenliste zu skalieren",
|
||||
"Drag to resize the sidebar": "Ziehen, um die Seitenleiste zu skalieren",
|
||||
"Duplicate": "Duplizieren",
|
||||
"Encoding": "Kodierung",
|
||||
"Enter URL...": "URL eingeben...",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "Supprimer l'expression",
|
||||
"Delete filter block": "Supprimer le bloc de filtre",
|
||||
"Deuteranopia filter": "Filtre Deutéranopie",
|
||||
"Drag to resize the layer list": "Glisser pour redimensionner la liste des calques",
|
||||
"Drag to resize the sidebar": "Glisser pour redimensionner la barre latérale",
|
||||
"Duplicate": "Dupliquer",
|
||||
"Encoding": "Encodage",
|
||||
"Enter URL...": "Entrez l'URL...",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "מחיקת ביטוי",
|
||||
"Delete filter block": "מחיקת גוש מסנן",
|
||||
"Deuteranopia filter": "Deuteranopia filter",
|
||||
"Drag to resize the layer list": "יש לגרור כדי לשנות את גודל רשימת השכבות",
|
||||
"Drag to resize the sidebar": "יש לגרור כדי לשנות את גודל סרגל הצד",
|
||||
"Duplicate": "שכפול",
|
||||
"Encoding": "קידוד",
|
||||
"Enter URL...": "הכנסו כתובת",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "Elimina espressione",
|
||||
"Delete filter block": "Elimina blocco filtro",
|
||||
"Deuteranopia filter": "Filtro deuteranopia",
|
||||
"Drag to resize the layer list": "Trascina per ridimensionare l'elenco dei livelli",
|
||||
"Drag to resize the sidebar": "Trascina per ridimensionare la barra laterale",
|
||||
"Duplicate": "Duplica",
|
||||
"Encoding": "Codifica",
|
||||
"Enter URL...": "Inserisci URL...",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "式を削除",
|
||||
"Delete filter block": "フィルタブロックを削除",
|
||||
"Deuteranopia filter": "緑色盲フィルタ",
|
||||
"Drag to resize the layer list": "ドラッグしてレイヤーリストのサイズを変更",
|
||||
"Drag to resize the sidebar": "ドラッグしてサイドバーのサイズを変更",
|
||||
"Duplicate": "複製",
|
||||
"Encoding": "エンコーディング",
|
||||
"Enter URL...": "URLを入力",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "표현식 삭제",
|
||||
"Delete filter block": "필터 블록 삭제",
|
||||
"Deuteranopia filter": "녹색맹 필터",
|
||||
"Drag to resize the layer list": "드래그하여 레이어 목록 크기 조정",
|
||||
"Drag to resize the sidebar": "드래그하여 사이드바 크기 조정",
|
||||
"Duplicate": "복제",
|
||||
"Encoding": "인코딩",
|
||||
"Enter URL...": "URL 입력...",
|
||||
|
||||
@@ -55,6 +55,8 @@
|
||||
"Delete filter block": "Filtre bloğunu sil",
|
||||
"Deuteranopia filter": "Döteranopi filtresi",
|
||||
"Drag and drop a style JSON file here or click to browse": "Bir stil JSON dosyasını buraya sürükleyip bırakın veya göz atmak için tıklayın",
|
||||
"Drag to resize the layer list": "Katman listesini yeniden boyutlandırmak için sürükleyin",
|
||||
"Drag to resize the sidebar": "Kenar çubuğunu yeniden boyutlandırmak için sürükleyin",
|
||||
"Duplicate": "Kopyala",
|
||||
"Encoding": "Kodlama",
|
||||
"Enter URL...": "URL girin...",
|
||||
|
||||
@@ -54,6 +54,8 @@
|
||||
"Delete expression": "删除表达式",
|
||||
"Delete filter block": "删除过滤器块",
|
||||
"Deuteranopia filter": "绿色盲滤镜",
|
||||
"Drag to resize the layer list": "拖动以调整图层列表大小",
|
||||
"Drag to resize the sidebar": "拖动以调整侧边栏大小",
|
||||
"Duplicate": "复制",
|
||||
"Encoding": "编码",
|
||||
"Enter URL...": "输入URL...",
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
.maputnik-map__container {
|
||||
background: white;
|
||||
display: flex;
|
||||
width: vars.$layout-map-width;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--error {
|
||||
align-items: center;
|
||||
|
||||
+60
-12
@@ -13,6 +13,9 @@
|
||||
|
||||
//APP LAYOUT
|
||||
.maputnik-layout {
|
||||
// Kept up to date by AppLayout as the sidebar is resized.
|
||||
--sidebar-width: #{vars.$layout-list-width + vars.$layout-editor-width};
|
||||
|
||||
font-family: vars.$font-family;
|
||||
color: vars.$color-white;
|
||||
|
||||
@@ -28,31 +31,76 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-list {
|
||||
width: 200px;
|
||||
background-color: vars.$color-black;
|
||||
// The resizable panel group filling the main area.
|
||||
&-panels {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-sidebar-panels,
|
||||
&-sidebar,
|
||||
&-code-editor,
|
||||
&-list,
|
||||
&-drawer,
|
||||
&-map {
|
||||
height: 100%;
|
||||
// scroll-container is position: absolute
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-sidebar,
|
||||
&-code-editor,
|
||||
&-list,
|
||||
&-drawer {
|
||||
width: 370px;
|
||||
background-color: vars.$color-black;
|
||||
// scroll-container is position: absolute
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-code-editor {
|
||||
width: 570px;
|
||||
background-color: vars.$color-black;
|
||||
// scroll-container is position: absolute
|
||||
&-resize-handle {
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
background-color: rgba(vars.$color-lowgray, 0.5);
|
||||
}
|
||||
|
||||
// The separator is keyboard resizable, so it needs a visible focus ring.
|
||||
&:focus-visible {
|
||||
outline: #8e8e8e auto 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 3px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: vars.$color-lowgray;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
&:active::after,
|
||||
&:focus-visible::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: vars.$layout-map-width;
|
||||
inset-inline-start: var(--sidebar-width);
|
||||
inset-inline-end: 0;
|
||||
background-color: vars.$color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,6 @@ $toolbar-offset: 0;
|
||||
|
||||
$layout-list-width: 200px;
|
||||
$layout-editor-width: 370px;
|
||||
$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
|
||||
|
||||
// 'menu-down' from 'https://materialdesignicons.com/'
|
||||
// See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>
|
||||
|
||||
Reference in New Issue
Block a user