diff --git a/CHANGELOG.md b/CHANGELOG.md index aed27fc1..9eb84397 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Added global state modal to allow editing the global state - Added color highlight for problematic properties - Upgraded codemirror from version 5 to version 6 +- Add code editor to allow editing the entire style - _...Add new stuff here..._ ### 🐞 Bug fixes diff --git a/cypress/e2e/accessibility.cy.ts b/cypress/e2e/accessibility.cy.ts index d27b1939..7703169a 100644 --- a/cypress/e2e/accessibility.cy.ts +++ b/cypress/e2e/accessibility.cy.ts @@ -18,10 +18,10 @@ describe("accessibility", () => { then(get.skipTargetLayerList()).shouldBeFocused(); }); - // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not. - it.skip("skip link to layer editor", () => { + it("skip link to layer editor", () => { const selector = "root:skip:layer-editor"; then(get.elementByTestId(selector)).shouldExist(); + then(get.elementByTestId("skip-target-layer-editor")).shouldExist(); when.tab().tab(); then(get.elementByTestId(selector)).shouldBeFocused(); when.click(selector); diff --git a/cypress/e2e/code-editor.cy.ts b/cypress/e2e/code-editor.cy.ts new file mode 100644 index 00000000..e9dff130 --- /dev/null +++ b/cypress/e2e/code-editor.cy.ts @@ -0,0 +1,18 @@ +import { MaputnikDriver } from "./maputnik-driver"; + +describe("code editor", () => { + const { beforeAndAfter, when, get, then } = new MaputnikDriver(); + beforeAndAfter(); + + it("open code editor", () => { + when.click("nav:code-editor"); + then(get.element(".maputnik-code-editor")).shouldExist(); + }); + + it("closes code editor", () => { + when.click("nav:code-editor"); + then(get.element(".maputnik-code-editor")).shouldExist(); + when.click("nav:code-editor"); + then(get.element(".maputnik-code-editor")).shouldNotExist(); + }); +}); diff --git a/src/components/App.tsx b/src/components/App.tsx index ee7e044f..42601762 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -13,6 +13,7 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json"; import MapMaplibreGl from "./MapMaplibreGl"; import MapOpenLayers from "./MapOpenLayers"; +import CodeEditor from "./CodeEditor"; import LayerList from "./LayerList"; import LayerEditor from "./LayerEditor"; import AppToolbar, { type MapState } from "./AppToolbar"; @@ -116,6 +117,7 @@ type AppState = { export: boolean debug: boolean globalState: boolean + codeEditor: boolean } fileHandle: FileSystemFileHandle | null }; @@ -155,6 +157,7 @@ export default class App extends React.Component { export: false, debug: false, globalState: false, + codeEditor: false }, maplibreGlDebugOptions: { showTileBoundaries: false, @@ -856,9 +859,15 @@ export default class App extends React.Component { onStyleChanged={this.onStyleChanged} onStyleOpen={this.onStyleChanged} onSetMapState={this.setMapState} - onToggleModal={this.toggleModal.bind(this)} + onToggleModal={(modal: keyof AppState["isOpen"]) => this.toggleModal(modal)} />; + const codeEditor = this.state.isOpen.codeEditor ? this.onStyleChanged(style)} + onClose={() => this.setModal("codeEditor", false)} + /> : undefined; + const layerList = { toolbar={toolbar} layerList={layerList} layerEditor={layerEditor} + codeEditor={codeEditor} map={this.mapRenderer()} bottom={bottomPanel} modals={modals} diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 8d6590cc..5431cb7d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -7,6 +7,7 @@ type AppLayoutInternalProps = { toolbar: React.ReactElement layerList: React.ReactElement layerEditor?: React.ReactElement + codeEditor?: React.ReactElement map: React.ReactElement bottom?: React.ReactElement modals?: React.ReactNode @@ -21,14 +22,22 @@ class AppLayoutInternal extends React.Component {
{this.props.toolbar}
-
- {this.props.layerList} -
-
+ {this.props.codeEditor &&
- {this.props.layerEditor} + {this.props.codeEditor}
+ } + {!this.props.codeEditor && <> +
+ {this.props.layerList} +
+
+ + {this.props.layerEditor} + +
+ } {this.props.map}
{this.props.bottom &&
diff --git a/src/components/AppToolbar.tsx b/src/components/AppToolbar.tsx index f034cbab..9a63e1a9 100644 --- a/src/components/AppToolbar.tsx +++ b/src/components/AppToolbar.tsx @@ -10,7 +10,8 @@ import { MdFindInPage, MdLanguage, MdSave, - MdPublic + MdPublic, + MdCode } from "react-icons/md"; import pkgJson from "../../package.json"; //@ts-ignore @@ -23,6 +24,7 @@ import type { OnStyleChangedCallback } from "../libs/definitions"; const browser = detect(); const colorAccessibilityFiltersEnabled = ["chrome", "firefox"].indexOf(browser!.name) > -1; +export type ModalTypes = "settings" | "sources" | "open" | "shortcuts" | "export" | "debug" | "globalState" | "codeEditor"; type IconTextProps = { children?: React.ReactNode @@ -39,7 +41,6 @@ type ToolbarLinkProps = { className?: string children?: React.ReactNode href?: string - onToggleModal?(...args: unknown[]): unknown }; class ToolbarLink extends React.Component { @@ -101,7 +102,7 @@ type AppToolbarInternalProps = { // A dict of source id's and the available source layers sources: object children?: React.ReactNode - onToggleModal(...args: unknown[]): unknown + onToggleModal(modal: ModalTypes): void onSetMapState(mapState: MapState): unknown mapState?: MapState renderer?: string @@ -221,23 +222,27 @@ class AppToolbarInternal extends React.Component {
- + this.props.onToggleModal("open")}> {t("Open")} - + this.props.onToggleModal("export")}> {t("Save")} - + this.props.onToggleModal("codeEditor")}> + + {t("Code Editor")} + + this.props.onToggleModal("sources")}> {t("Data Sources")} - + this.props.onToggleModal("settings")}> {t("Style Settings")} - + this.props.onToggleModal("globalState")}> {t("Global State")} diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx new file mode 100644 index 00000000..7b2bd033 --- /dev/null +++ b/src/components/CodeEditor.tsx @@ -0,0 +1,28 @@ +import InputJson from "./InputJson"; +import React from "react"; +import { withTranslation, type WithTranslation } from "react-i18next"; +import { type StyleSpecification } from "maplibre-gl"; +import { type StyleSpecificationWithId } from "../libs/definitions"; + +export type CodeEditorProps = { + value: StyleSpecification; + onChange: (value: StyleSpecificationWithId) => void; + onClose: () => void; +} & WithTranslation; + +const CodeEditorInternal: React.FC = (props) => { + + return <> + + ; + ; +}; + +const CodeEditor = withTranslation()(CodeEditorInternal); + +export default CodeEditor; diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index 7c984f38..299f22d3 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "Maputnik auf GitHub", "Open": "Öffnen", "Save": "Speichern", + "Code Editor": "Code-Editor", "Data Sources": "Datenquellen", "Style Settings": "Stileinstellungen", + "Global State": "Globaler Zustand", "View": "Ansicht", "Color accessibility": "Farbzugänglichkeit", "Help": "Hilfe", + "Close": "Schließen", + "Click to close the editor": "Klicken Sie hier, um den Editor zu schließen", "Comments for the current layer. This is non-standard and not in the spec.": "Kommentare zur aktuellen Ebene. Das ist nicht standardmäßig und nicht in der Spezifikation.", "Comments": "Kommentare", "Comment...": "Dein Kommentar...", @@ -56,7 +60,6 @@ "Delete filter block": "Filterblock löschen", "Add value": "Wert hinzufügen", "Remove array item": "Element aus Array entfernen", - "Press <1>ESC to lose focus": "Drück <1>ESC, um den Fokus zu verlieren", "Must provide protocol: <1>https://": "Protokoll erforderlich: <1>https://", "Must provide protocol: <1>http:// or <3>https://": "Protokoll erforderlich: <1>http:// oder <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "Die CORS-Politik erlaubt es nicht, Ressourcen über http von https zu laden, benutze eine <1>https://-Domain", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.", "Save as": "Speichern unter", "Create HTML": "HTML erstellen", + "Key": "Schlüssel", + "Value": "Wert", + "Remove variable": "Variable entfernen", + "Global State Variables": "Globale Zustandsvariablen", + "No global state variables defined. Add variables to create reusable values in your style.": "Keine globalen Zustandsvariablen definiert. Füge Variablen hinzu, um wiederverwendbare Werte in deinem Stil zu erstellen.", + "Add Variable": "Variable hinzufügen", "Cancel": "Abbrechen", "Open Style": "Stil öffnen", "Open local Style": "Lokalen Stil öffnen", @@ -121,9 +130,10 @@ "Light intensity": "Lichtintensität", "Light position": "Lichtposition", "Terrain source": "Geländequelle", - "Terrain exaggeration": "Gelände-Übertreibung", + "Terrain exaggeration": "Geländeüberhöhung", "Transition delay": "Übergangsverzögerung", "Transition duration": "Übergangsdauer", + "Projection": "Projektion", "Open Layers (experimental)": "Ebenen öffnen (experimentell)", "Shortcuts menu": "Shortcuts-Menü", "Open modal": "Modale Fenster öffnen", @@ -201,10 +211,8 @@ "Radius": "Radius", "Color": "Farbe", "Outline color": "Umrissfarbe", - "Language": "Sprache", "Width": "Breite", "Height": "Höhe", "Field": "Feld", - "Size": "Größe", - "Press <1>ESC to lose focus of any input box": "Drück <1>ESC, um den Fokus von jedem Eingabefeld zu verlieren" + "Size": "Größe" } diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json index 303efce6..ea8d8437 100644 --- a/src/locales/fr/translation.json +++ b/src/locales/fr/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "Maputnik sur GitHub", "Open": "Ouvrir", "Save": "Enregistrer", + "Code Editor": "Éditeur de code", "Data Sources": "Sources de données", "Style Settings": "Paramètres du style", + "Global State": "État global", "View": "Vue", "Color accessibility": "Accessibilité des couleurs", "Help": "Aide", + "Close": "Fermer", + "Click to close the editor": "Cliquez pour fermer l'éditeur", "Comments for the current layer. This is non-standard and not in the spec.": "Commentaires pour le calque actuel. Ceci n'est pas standard et n'est pas dans la spécification.", "Comments": "Commentaires", "Comment...": "Votre commentaire...", @@ -56,7 +60,6 @@ "Delete filter block": "Supprimer le bloc de filtre", "Add value": "Ajouter une valeur", "Remove array item": "Supprimer l'élément de tableau", - "Press <1>ESC to lose focus": "Appuyez sur <1>Échap pour perdre le focus", "Must provide protocol: <1>https://": "Protocole requis : <1>https://", "Must provide protocol: <1>http:// or <3>https://": "Protocole requis : <1>http:// ou <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "La politique CORS ne permet pas de récupérer des ressources servies sur http depuis https, utilisez un protocole <1>https://", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.", "Save as": "Enregistrer sous", "Create HTML": "Créer le HTML", + "Key": "Clé", + "Value": "Valeur", + "Remove variable": "Supprimer la variable", + "Global State Variables": "Variables d'état global", + "No global state variables defined. Add variables to create reusable values in your style.": "Aucune variable d'état global définie. Ajoutez des variables pour créer des valeurs réutilisables dans votre style.", + "Add Variable": "Ajouter une variable", "Cancel": "Annuler", "Open Style": "Ouvrir le style", "Open local Style": "Ouvrir un style local", @@ -124,6 +133,7 @@ "Terrain exaggeration": "Exagération du terrain", "Transition delay": "Délai de transition", "Transition duration": "Durée de transition", + "Projection": "Projection", "Open Layers (experimental)": "Open Layers (expérimental)", "Shortcuts menu": "Menu des raccourcis", "Open modal": "Ouvrir (modale)", @@ -196,7 +206,5 @@ "LocationIQ Access Token": "Jeton d'accès LocationIQ", "Public access token for LocationIQ services.": "Jeton d'accès public pour les services LocationIQ.", "Style Renderer": "Moteur de rendu pour le style", - "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style.", - "Language": "Langue", - "Layer options": "Options du calque" + "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style." } diff --git a/src/locales/he/translation.json b/src/locales/he/translation.json index 191c400d..b2f08526 100644 --- a/src/locales/he/translation.json +++ b/src/locales/he/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "מפוטניק בגיטהב", "Open": "פתיחה", "Save": "שמור", + "Code Editor": "עורך קוד", "Data Sources": "מקורות מידע", "Style Settings": "הגדרות הסטייל", + "Global State": "מצב גלובלי", "View": "תצוגה", "Color accessibility": "נגישות צבעים", "Help": "עזרה", + "Close": "סגירה", + "Click to close the editor": "לחץ לסגירת העורך", "Comments for the current layer. This is non-standard and not in the spec.": "הערות על השכבה הנוכחית. זה לא חלק מהספסיפיקציות", "Comments": "הערות", "Comment...": "הערה...", @@ -56,7 +60,6 @@ "Delete filter block": "מחיקת גוש מסנן", "Add value": "הוספת ערך", "Remove array item": "הסרת איבר מערך", - "Press <1>ESC to lose focus": "לחצו על <1>ESC על מנת לאבד פוקוס", "Must provide protocol: <1>https://": "נדרש פרוטוקול: <1>https://", "Must provide protocol: <1>http:// or <3>https://": "נדרשים פרוטוקולים: <1>http:// או <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.", "Save as": "שמירה בשם", "Create HTML": "צור HTML", + "Key": "מפתח", + "Value": "ערך", + "Remove variable": "הסר משתנה", + "Global State Variables": "משתני מצב גלובלי", + "No global state variables defined. Add variables to create reusable values in your style.": "לא הוגדרו משתני מצב גלובלי. הוסף משתנים כדי ליצור ערכים שניתן לעשות בהם שימוש חוזר בסטייל שלך.", + "Add Variable": "הוסף משתנה", "Cancel": "ביטול", "Open Style": "פתיחת סטייל", "Open local Style": "פתיחת סטייל מקומי", @@ -124,6 +133,7 @@ "Terrain exaggeration": "כמה \"להגזים\"", "Transition delay": "זמן לפני מעבר", "Transition duration": "זמן מעבר", + "Projection": "הטלה", "Open Layers (experimental)": "Open Layers (experimental)", "Shortcuts menu": "תפריט קיצורי דרך", "Open modal": "פתיחת חלונית", @@ -196,6 +206,5 @@ "LocationIQ Access Token": "LocationIQ Access Token", "Public access token for LocationIQ services.": "Public access token for LocationIQ services.", "Style Renderer": "צייר הסטייל", - "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה", - "Language": "שפה" + "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה" } diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 13bb81a1..625b28fe 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "Maputnik su GitHub", "Open": "Apri", "Save": "Salva", + "Code Editor": "Editor codice", "Data Sources": "Fonti dati", "Style Settings": "Impostazioni stile", + "Global State": "Stato globale", "View": "Vista", "Color accessibility": "Accessibilità colori", "Help": "Aiuto", + "Close": "Chiudi", + "Click to close the editor": "Clicca per chiudere l'editor", "Comments for the current layer. This is non-standard and not in the spec.": "Commenti per il livello attuale. Questo non è standard e non è nella specifica.", "Comments": "Commenti", "Comment...": "Il tuo commento...", @@ -56,7 +60,6 @@ "Delete filter block": "Elimina blocco filtro", "Add value": "Aggiungi valore", "Remove array item": "Rimuovi elemento dall'array", - "Press <1>ESC to lose focus": "Premi <1>ESC per perdere il focus", "Must provide protocol: <1>https://": "Protocollo richiesto: <1>https://", "Must provide protocol: <1>http:// or <3>https://": "Protocollo richiesto: <1>http:// o <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "La politica CORS non permette di caricare risorse tramite http da https, utilizza un dominio <1>https://.", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "Salva lo style JSON nel tuo computer.", "Save as": "Salva con nome", "Create HTML": "Crea HTML", + "Key": "Chiave", + "Value": "Valore", + "Remove variable": "Rimuovi variabile", + "Global State Variables": "Variabili di stato globale", + "No global state variables defined. Add variables to create reusable values in your style.": "Nessuna variabile di stato globale definita. Aggiungi variabili per creare valori riutilizzabili nel tuo stile.", + "Add Variable": "Aggiungi variabile", "Cancel": "Annulla", "Open Style": "Apri stile", "Open local Style": "Apri stile locale", @@ -124,6 +133,7 @@ "Terrain exaggeration": "Esagerazione del terreno", "Transition delay": "Ritardo della transizione", "Transition duration": "Durate della transizione", + "Projection": "Proiezione", "Open Layers (experimental)": "Apri livelli (sperimentale)", "Shortcuts menu": "Scorciatoie del menu", "Open modal": "Apri finestra modale", @@ -196,7 +206,5 @@ "LocationIQ Access Token": "Token di accesso LocationIQ", "Public access token for LocationIQ services.": "Token di accesso pubblico per i servizi LocationIQ.", "Style Renderer": "Renderer dello stile", - "Choose the default Maputnik renderer for this style.": "Scegli il renderer predefinito di Maputnik per questo stile.", - "Language": "Lingua", - "Press <1>ESC to lose focus of any input box": "Premi <1>ESC per perdere il focus su qualsiasi campo di input." + "Choose the default Maputnik renderer for this style.": "Scegli il renderer predefinito di Maputnik per questo stile." } diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json index 598655bf..95b6a659 100644 --- a/src/locales/ja/translation.json +++ b/src/locales/ja/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "GitHubのMaputnik", "Open": "開く", "Save": "保存", + "Code Editor": "コードエディタ", "Data Sources": "データソース", "Style Settings": "スタイル設定", + "Global State": "グローバルステート", "View": "表示", "Color accessibility": "色のアクセシビリティ", "Help": "ヘルプ", + "Close": "閉じる", + "Click to close the editor": "エディタを閉じるにはクリックしてください", "Comments for the current layer. This is non-standard and not in the spec.": "現在のレイヤーのコメント。注意：この機能は標準ではないため、他のライブラリとの互換性状況はわかりません。", "Comments": "コメント", "Comment...": "コメントを書く", @@ -56,7 +60,6 @@ "Delete filter block": "フィルタブロックを削除", "Add value": "値を追加する", "Remove array item": "配列の項目を削除", - "Press <1>ESC to lose focus": "<1>ESCを押すとフォーカスが外れます", "Must provide protocol: <1>https://": "プロトコルを指定してください: <1>https://", "Must provide protocol: <1>http:// or <3>https://": "プロトコルを指定してください: <1>http:// または <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "CORS使用時は、http経由で提供されるリソースをhttpsから取得することはできません。<1>https:// ドメインを使用してください。", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。", "Save as": "名前を付けて保存", "Create HTML": "HTMLを作成", + "Key": "キー", + "Value": "値", + "Remove variable": "変数を削除", + "Global State Variables": "グローバルステート変数", + "No global state variables defined. Add variables to create reusable values in your style.": "グローバルステート変数が定義されていません。スタイルで再利用可能な値を作成するには、変数を追加してください。", + "Add Variable": "変数を追加", "Cancel": "キャンセル", "Open Style": "スタイルを開く", "Open local Style": "ローカルスタイルを開く", @@ -124,6 +133,7 @@ "Terrain exaggeration": "地形の誇張", "Transition delay": "遷移遅延", "Transition duration": "遷移期間", + "Projection": "投影", "Open Layers (experimental)": "Open Layers (実験的)", "Shortcuts menu": "ショートカットメニュー", "Open modal": "モーダルを開く", @@ -196,7 +206,5 @@ "LocationIQ Access Token": "LocationIQ アクセストークン", "Public access token for LocationIQ services.": "LocationIQ サービス用のパブリックアクセストークン。", "Style Renderer": "スタイルレンダラ", - "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください", - "Language": "言語", - "Layer options": "レイヤー設定" + "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください" } diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 8606477d..92e66d6f 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -31,11 +31,15 @@ "Maputnik on GitHub": "GitHub上的Maputnik", "Open": "打开", "Save": "保存", + "Code Editor": "代码编辑器", "Data Sources": "数据源", "Style Settings": "样式设置", + "Global State": "全局状态", "View": "视图", "Color accessibility": "颜色可访问性", "Help": "帮助", + "Close": "关闭", + "Click to close the editor": "点击关闭编辑器", "Comments for the current layer. This is non-standard and not in the spec.": "当前图层的注释。注意：这不是标准功能，可能与其他库不兼容。", "Comments": "注释", "Comment...": "写注释...", @@ -56,7 +60,6 @@ "Delete filter block": "删除过滤器块", "Add value": "添加值", "Remove array item": "移除数组项目", - "Press <1>ESC to lose focus": "按 <1>ESC 键退出焦点", "Must provide protocol: <1>https://": "必须提供协议：<1>https://", "Must provide protocol: <1>http:// or <3>https://": "必须提供协议：<1>http:// 或 <3>https://", "CORS policy won't allow fetching resources served over http from https, use a <1>https:// domain": "CORS 策略不允许从 https 访问通过 http 提供的资源，请使用 <1>https:// 域名。", @@ -96,6 +99,12 @@ "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。", "Save as": "另存为", "Create HTML": "创建HTML", + "Key": "键", + "Value": "值", + "Remove variable": "移除变量", + "Global State Variables": "全局状态变量", + "No global state variables defined. Add variables to create reusable values in your style.": "未定义全局状态变量。添加变量以在样式中创建可重用的值。", + "Add Variable": "添加变量", "Cancel": "取消", "Open Style": "打开样式", "Open local Style": "打开本地样式", @@ -124,6 +133,7 @@ "Terrain exaggeration": "地形夸张", "Transition delay": "过渡延迟", "Transition duration": "过渡持续时间", + "Projection": "投影", "Open Layers (experimental)": "开放图层（实验性）", "Shortcuts menu": "快捷方式菜单", "Open modal": "打开模态框", @@ -196,7 +206,5 @@ "LocationIQ Access Token": "LocationIQ 访问令牌", "Public access token for LocationIQ services.": "LocationIQ 服务的公共访问令牌。", "Style Renderer": "样式渲染器", - "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。", - "Language": "语言", - "Layer options": "图层选项" + "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。" } diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 5d1edd6f..cfc5109a 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -40,6 +40,13 @@ position: relative; } + &-code-editor { + width: 570px; + background-color: vars.$color-black; + // scroll-container is position: absolute + position: relative; + } + &-bottom { position: fixed; bottom: 0; diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 6978dc9c..9f87a4cf 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -43,7 +43,8 @@ .maputnik-toolbar-link { vertical-align: top; height: vars.$toolbar-height; - display: inline-block; + display: inline-flex; + align-items: center; padding: vars.$margin-3; font-size: vars.$font-size-5; cursor: pointer;