Merge pull request #56 from yacchin1205/fix/styles

Improvement of stylesheet and i18n support

.gitignore

@@ -71,10 +71,6 @@ coverage.xml
 .hypothesis/
 .pytest_cache/
 
-# Translations
-*.mo
-*.pot
-
 # Scrapy stuff:
 .scrapy
 

lc_multi_outputs/locale/ja_JP/LC_MESSAGES/lc_multi_outputs.json

@@ -0,0 +1,44 @@
+{
+    "": {
+        "domain": "lc_multi_outputs",
+        "language": "ja-JP",
+        "plural_forms": "nplurals=1; plural=0;",
+        "version": "2.2.0.test20"
+    },
+    "Close": [
+        "\u9589\u3058\u308b"
+    ],
+    "Pin Outputs": [
+        "\u51fa\u529b\u3092\u30d4\u30f3\u7559\u3081"
+    ],
+    "Pin Outputs In Below All": [
+        "\u4ee5\u4e0b\u306e\u3059\u3079\u3066\u306e\u51fa\u529b\u3092\u30d4\u30f3\u7559\u3081"
+    ],
+    "Pin Outputs In Below Section": [
+        "\u4ee5\u4e0b\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u51fa\u529b\u3092\u30d4\u30f3\u7559\u3081"
+    ],
+    "Pin Outputs On Selection": [
+        "\u9078\u629e\u3057\u305f\u51fa\u529b\u3092\u30d4\u30f3\u7559\u3081"
+    ],
+    "Remove Outputs In Below All": [
+        "\u4ee5\u4e0b\u306e\u3059\u3079\u3066\u306e\u51fa\u529b\u3092\u524a\u9664"
+    ],
+    "Remove Outputs In Below Section": [
+        "\u4ee5\u4e0b\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u51fa\u529b\u3092\u524a\u9664"
+    ],
+    "Remove Outputs On Selection": [
+        "\u9078\u629e\u3057\u305f\u51fa\u529b\u3092\u524a\u9664"
+    ],
+    "Remove Pinned Outputs Leaving One": [
+        "1\u3064\u3092\u6b8b\u3057\u3066\u30d4\u30f3\u7559\u3081\u3055\u308c\u305f\u51fa\u529b\u3092\u524a\u9664"
+    ],
+    "Search": [
+        "\u691c\u7d22"
+    ],
+    "Search: ": [
+        "\u691c\u7d22: "
+    ],
+    "settings\u0004Max Pinned Outputs": [
+        "\u30d4\u30f3\u7559\u3081\u3067\u304d\u308b\u6700\u5927\u51fa\u529b\u6570"
+    ]
+}

lc_multi_outputs/locale/ja_JP/LC_MESSAGES/lc_multi_outputs.po

@@ -0,0 +1,69 @@
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: lc_multi_outputs 2.2.0.test20\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2024-05-11 11:43+0900\n"
+"PO-Revision-Date: 2024-05-11 10:35+0900\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: ja_JP <LL@li.org>\n"
+"Language: ja_JP\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Generated-By: Babel 2.14.0\n"
+
+msgctxt "settings"
+msgid "Max Pinned Outputs"
+msgstr "ピン留めできる最大出力数"
+
+msgctxt "schema"
+msgid "LC Multi Outputs"
+msgstr ""
+
+#: src/commands.ts:114 src/commands.ts:115
+msgid "Remove Outputs In Below Section"
+msgstr "以下のセクションの出力を削除"
+
+#: src/commands.ts:134 src/commands.ts:135
+msgid "Pin Outputs In Below All"
+msgstr "以下のすべての出力をピン留め"
+
+#: src/commands.ts:154 src/commands.ts:155
+msgid "Remove Outputs In Below All"
+msgstr "以下のすべての出力を削除"
+
+#: src/commands.ts:54 src/commands.ts:55
+msgid "Pin Outputs On Selection"
+msgstr "選択した出力をピン留め"
+
+#: src/commands.ts:74 src/commands.ts:75
+msgid "Remove Outputs On Selection"
+msgstr "選択した出力を削除"
+
+#: src/commands.ts:94 src/commands.ts:95
+msgid "Pin Outputs In Below Section"
+msgstr "以下のセクションの出力をピン留め"
+
+#: src/components/SearchBar.tsx:20
+msgid "Search: "
+msgstr "検索: "
+
+#: src/components/SearchBar.tsx:22
+msgid "Search"
+msgstr "検索"
+
+#: src/showOutputAreaDiffDialog.ts:39
+#: ui-tests/node_modules/@jupyterlab/docmanager/src/widgetmanager.ts:397
+#: ui-tests/node_modules/@jupyterlab/filebrowser/src/listing.ts:1415
+msgid "Close"
+msgstr "閉じる"
+
+#: src/toolbar.ts:26
+msgid "Pin Outputs"
+msgstr "出力をピン留め"
+
+#: src/toolbar.ts:41
+msgid "Remove Pinned Outputs Leaving One"
+msgstr "1つを残してピン留めされた出力を削除"

lc_multi_outputs/locale/lc_multi_outputs.pot

@@ -0,0 +1,61 @@
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: lc_multi_outputs 2.2.0.test20\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: /schema/plugin.json:/properties/maxPinnedOutputs/title
+msgctxt "settings"
+msgid "Max Pinned Outputs"
+msgstr ""
+
+#: /schema/plugin.json:/title
+msgctxt "schema"
+msgid "LC Multi Outputs"
+msgstr ""
+
+#: src/commands.ts:114 src/commands.ts:115
+msgid "Remove Outputs In Below Section"
+msgstr ""
+
+#: src/commands.ts:134 src/commands.ts:135
+msgid "Pin Outputs In Below All"
+msgstr ""
+
+#: src/commands.ts:154 src/commands.ts:155
+msgid "Remove Outputs In Below All"
+msgstr ""
+
+#: src/commands.ts:54 src/commands.ts:55
+msgid "Pin Outputs On Selection"
+msgstr ""
+
+#: src/commands.ts:74 src/commands.ts:75
+msgid "Remove Outputs On Selection"
+msgstr ""
+
+#: src/commands.ts:94 src/commands.ts:95
+msgid "Pin Outputs In Below Section"
+msgstr ""
+
+#: src/components/SearchBar.tsx:20
+msgid "Search: "
+msgstr ""
+
+#: src/components/SearchBar.tsx:22
+msgid "Search"
+msgstr ""
+
+#: src/showOutputAreaDiffDialog.ts:39 ui-tests/node_modules/@jupyterlab/docmanager/src/widgetmanager.ts:397 ui-tests/node_modules/@jupyterlab/filebrowser/src/listing.ts:1415
+msgid "Close"
+msgstr ""
+
+#: src/toolbar.ts:26
+msgid "Pin Outputs"
+msgstr ""
+
+#: src/toolbar.ts:41
+msgid "Remove Pinned Outputs Leaving One"
+msgstr ""

package.json

@@ -56,7 +56,11 @@
     "stylelint:check": "stylelint --cache \"style/**/*.css\"",
     "watch": "run-p watch:src watch:labextension",
     "watch:labextension": "jupyter labextension watch .",
-    "watch:src": "tsc -w"
+    "watch:src": "tsc -w",
+    "prepare:translations": "pip install jupyterlab-translate && jlpm extract:translations && jlpm update:translations && jlpm compile:translations",
+    "extract:translations": "jupyterlab-translate extract . lc_multi_outputs",
+    "update:translations": "jupyterlab-translate update . lc_multi_outputs -l ja_JP",
+    "compile:translations": "jupyterlab-translate compile . lc_multi_outputs -l ja_JP"
   },
   "dependencies": {
     "@jupyterlab/application": "^4.0.3",
@@ -69,6 +73,7 @@
     "@jupyterlab/outputarea": "^4.0.3",
     "@jupyterlab/rendermime": "^4.0.3",
     "@jupyterlab/settingregistry": "^4.0.3",
+    "@jupyterlab/translation": "^4.0.3",
     "@jupyterlab/ui-components": "^4.0.3",
     "@lumino/algorithm": "^2.0.0",
     "@lumino/commands": "^2.0.1",

pyproject.toml

@@ -25,6 +25,9 @@ dependencies = [
 ]
 dynamic = ["version", "description", "authors", "urls", "keywords"]
 
+[project.entry-points."jupyterlab.locale"]
+lc_multi_outputs = "lc_multi_outputs"
+
 [tool.hatch.version]
 source = "nodejs"
 

src/MergeWidget.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { TranslationBundle } from '@jupyterlab/translation';
 
 import { Editor, MergeView } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
@@ -12,29 +13,30 @@ import { SearchBar } from './components/SearchBar';
 
 export class MergeWidget extends ReactWidget {
   constructor(
+    private trans: TranslationBundle,
     private value: string,
     private orig: string
   ) {
     super();
   }
 
   render(): JSX.Element {
-    return <MergePage value={this.value} orig={this.orig} />;
+    return <MergePage trans={this.trans} value={this.value} orig={this.orig} />;
   }
 }
 
-export function MergePage({
-  value,
-  orig
-}: {
+export type MergePageProps = {
+  trans: TranslationBundle;
   value: string;
   orig: string;
-}): JSX.Element {
+};
+
+export function MergePage({ trans, value, orig }: MergePageProps): JSX.Element {
   const [search, setSearch] = React.useState('');
   return (
     <div>
       <Merge value={value} orig={orig} search={search} />
-      <SearchBar onSubmit={data => setSearch(data.keyword)} />
+      <SearchBar trans={trans} onSubmit={data => setSearch(data.keyword)} />
     </div>
   );
 }

src/OutputTabExtension.ts

@@ -3,6 +3,7 @@ import { INotebookModel, Notebook, NotebookPanel } from '@jupyterlab/notebook';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IDisposable, DisposableDelegate } from '@lumino/disposable';
 import { CodeCell, isCodeCellModel } from '@jupyterlab/cells';
+import { TranslationBundle } from '@jupyterlab/translation';
 
 import { outputAreaWithPinButton, OutputTabsWidget } from './OutputTabsWidget';
 import { pinOutput } from './pinOutput';
@@ -11,6 +12,8 @@ import { registerToolbarButtons } from './toolbar';
 export class OutputTabExtension
   implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
 {
+  constructor(private trans: TranslationBundle) {}
+
   createNew(
     panel: NotebookPanel,
     context: DocumentRegistry.IContext<INotebookModel>
@@ -22,24 +25,24 @@ export class OutputTabExtension
           if (cell && isCodeCellModel(cellModel)) {
             cell.inViewportChanged.connect((_, isAttached) => {
               if (isAttached) {
-                initCell(cell as CodeCell);
+                initCell(this.trans, cell as CodeCell);
               }
             });
           }
         });
       }
     });
 
-    const toolbarButtons = registerToolbarButtons(panel);
+    const toolbarButtons = registerToolbarButtons(this.trans, panel);
 
     return new DisposableDelegate(() => {
       toolbarButtons.forEach(b => b.dispose());
     });
   }
 }
 
-function initCell(cell: CodeCell) {
-  initOutputTabs(cell);
+function initCell(trans: TranslationBundle, cell: CodeCell) {
+  initOutputTabs(trans, cell);
   // アウトプットの初期化
   outputAreaWithPinButton(cell.outputArea, () => {
     pinOutput(cell);
@@ -54,8 +57,8 @@ function initCell(cell: CodeCell) {
   });
 }
 
-function initOutputTabs(cell: CodeCell) {
-  Widget.attach(new OutputTabsWidget(cell), cell.node);
+function initOutputTabs(trans: TranslationBundle, cell: CodeCell) {
+  Widget.attach(new OutputTabsWidget(trans, cell), cell.node);
 }
 
 function getCellByModelId(notebook: Notebook, cellModelId: string) {

src/OutputTabsWidget.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
 import { OutputTabs } from './components/OutputTabs';
 import { CodeCell } from '@jupyterlab/cells';
+import { TranslationBundle } from '@jupyterlab/translation';
 import {
   getOutputTabIndex,
   selectCurrentOutputTab,
@@ -15,15 +16,19 @@ import { showOutputAreaDiffDialog } from './showOutputAreaDiffDialog';
 import $ from 'jquery';
 
 export class OutputTabsWidget extends ReactWidget {
-  constructor(private cell: CodeCell) {
+  constructor(
+    private trans: TranslationBundle,
+    private cell: CodeCell
+  ) {
     super();
+    this.addClass('multi-output-widget');
   }
 
   render(): JSX.Element {
     return (
       <UseSignal signal={this.cell.model.metadataChanged}>
         {(_, args) => {
-          const tabs = createTabs(this.cell);
+          const tabs = createTabs(this.trans, this.cell);
           if (args && args.key === 'scrolled') {
             // スクロールの変更の場合は最初のタブを選択状態にする
             selectCurrentOutputTab(this.cell.model);
@@ -132,7 +137,7 @@ function outputAreaWithMergeButton(
   return outputArea;
 }
 
-function createTabs(cell: CodeCell) {
+function createTabs(trans: TranslationBundle, cell: CodeCell) {
   return [
     {
       name: 'output-current',
@@ -152,7 +157,12 @@ function createTabs(cell: CodeCell) {
           name: `output-${output.execution_count}`,
           label: `Out [${output.execution_count}]`,
           outputNode: outputAreaWithMergeButton(outputArea, () => {
-            showOutputAreaDiffDialog(cell, output.execution_count, outputArea);
+            showOutputAreaDiffDialog(
+              trans,
+              cell,
+              output.execution_count,
+              outputArea
+            );
           }).node,
           onClose: () => {
             removePinnedOutput(cell, output.execution_count);