From 98ccb62d7280d2cc711337581464138a281453e3 Mon Sep 17 00:00:00 2001
From: Aaron Dodson <adodson@google.com>
Date: Wed, 12 Jun 2024 09:27:41 -0700
Subject: [PATCH] fix: enable and style workspace comments (#82)

* fix: show workspace comment menu items

* fix: mostly match Scratch's styling of workspace comments

* fix: register workspace comment menu items only once
---
 core/css.js                                   | 51 +++++++++++++++++++
 media/delete-icon.svg                         | 10 ++++
 ...omment-arrow-down.svg => foldout-icon.svg} |  0
 media/resize-handle.svg                       |  3 ++
 src/index.js                                  |  1 +
 5 files changed, 65 insertions(+)
 create mode 100644 media/delete-icon.svg
 rename media/{comment-arrow-down.svg => foldout-icon.svg} (100%)
 create mode 100644 media/resize-handle.svg

diff --git a/core/css.js b/core/css.js
index e6526522b1..b908ae2f4f 100644
--- a/core/css.js
+++ b/core/css.js
@@ -1287,6 +1287,57 @@ const styles = `
     width: 1.25rem;
     height: 1.25rem;
   }
+
+  .blocklyCommentTopbar {
+    height: 32px;
+    --commentBorderColour: #e2db96;
+  }
+
+  .blocklyCommentTopbarBackground {
+    height: 32px;
+  }
+
+  .blocklyFoldoutIcon {
+    width: 32px;
+    height: 32px;
+    transform-origin: 16px 16px;
+  }
+
+  .blocklyComment:not(.blocklyCollapsed) .blocklyCommentHighlight,
+  .blocklySelected .blocklyCommentHighlight,
+  .blocklyCollapsed .blocklyCommentTopbarBackground,
+  .blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
+    stroke: #bcA903;
+    stroke-width: 1px;
+  }
+
+  .blocklyCollapsed.blocklyComment .blocklyFoldoutIcon {
+    transform: rotate(-180deg);
+  }
+
+  .zelos-renderer.scratch-theme .blocklyComment .blocklyTextarea {
+    border: none;
+    --commentFillColour: #fef49c;
+    font-size: 12pt;
+    font-weight: 400;
+    padding: 12px;
+    color: #575e75;
+  }
+
+  .zelos-renderer.scratch-theme .blocklyCommentText.blocklyText {
+    font-weight: 400;
+  }
+
+  .blocklyDeleteIcon {
+    display: block;
+    width: 32px;
+    height: 32px;
+  }
+
+  .blocklyResizeHandle {
+    height: 20px;
+    width: 20px;
+  }
 `;
 
 Blockly.Css.register(styles);
diff --git a/media/delete-icon.svg b/media/delete-icon.svg
new file mode 100644
index 0000000000..ed1f71edff
--- /dev/null
+++ b/media/delete-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="-14 -10 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>delete-x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="delete-x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.8761123,10.87825 C10.2421123,11.52125 9.20511231,11.52125 8.56211231,10.87825 L5.92911231,8.24525 L3.29511231,10.87825 C2.65611231,11.51725 1.62011231,11.51725 0.981112306,10.87825 C0.662112306,10.55925 0.500112306,10.13725 0.500112306,9.72125 C0.500112306,9.30425 0.662112306,8.88325 0.981112306,8.56425 L3.61411231,5.93125 L0.977112306,3.29325 C0.657112306,2.97325 0.495112306,2.55225 0.500112306,2.13125 C0.500112306,1.71425 0.657112306,1.29825 0.977112306,0.97925 C1.61511231,0.34025 2.65111231,0.34025 3.29111231,0.97925 L5.92911231,3.61625 L8.56611231,0.97925 C9.20511231,0.34025 10.2421123,0.34025 10.8811123,0.97925 C11.5201123,1.61725 11.5201123,2.65425 10.8811123,3.29325 L8.24211231,5.93125 L10.8811123,8.56825 C11.5201123,9.20725 11.5201123,10.23425 10.8761123,10.87825" id="Fill-1" fill="#575E75"></path>
+    </g>
+</svg>
diff --git a/media/comment-arrow-down.svg b/media/foldout-icon.svg
similarity index 100%
rename from media/comment-arrow-down.svg
rename to media/foldout-icon.svg
diff --git a/media/resize-handle.svg b/media/resize-handle.svg
new file mode 100644
index 0000000000..b7002710e5
--- /dev/null
+++ b/media/resize-handle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 20 20" width="16" fill="transparent" stroke="#888">
+<line class="blocklyResizeLine" x1="5.333333333333333" y1="15" x2="15" y2="5.333333333333333"></line><line class="blocklyResizeLine" x1="10.666666666666666" y1="15" x2="15" y2="10.666666666666666"></line>
+</svg>
diff --git a/src/index.js b/src/index.js
index d00c3b2a40..1e2dc0ca8d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -83,3 +83,4 @@ Blockly.FlyoutButton.TEXT_MARGIN_X = 40;
 Blockly.FlyoutButton.TEXT_MARGIN_Y = 10;
 Blockly.ContextMenuRegistry.registry.unregister('blockDisable');
 Blockly.ContextMenuRegistry.registry.unregister('blockInline');
+Blockly.ContextMenuItems.registerCommentOptions();