Code editor open-close improvements #9365

vitvakatu · 2024-03-11T14:18:00Z

Pull Request Description

Closes #9209

code-editor-open-close.mp4

Added new menu item Code editor which toggles visibility of, well, code editor
Changed the menu implementation:
- Fixed platform-dependent “More” icon. It was displayed awfully on Mac.
- Added simple opacity animation.
- Reduced width slightly.
- Refactored the layout, removed unused classes and CSS…
- Added animated background when hovering “Show all” icon
Added close button to the upper left corner of the code editor (upper right is occupied by resize controls)

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

The documentation has been updated, if necessary.
Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
All code follows the
Scala,
Java,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
All code has been tested:
- Unit tests have been written where possible.
- If GUI codebase was changed, the GUI was tested when built using ./run ide build.

vitvakatu · 2024-03-11T14:19:39Z

app/gui2/src/components/ExtendedMenu.vue

 </script>

 <template>
  <div class="ExtendedMenu">
-    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen"></div>
+    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen">…</div>


We would need an icon for that, but for now rotated ellipsis looks good IMO.

Again I think this should already be using an svg icon.

Replaced with SVG

vitvakatu · 2024-03-11T14:20:52Z

app/gui2/src/components/CodeEditor.vue

@@ -347,6 +349,7 @@ const editorStyle = computed(() => {
        <circle cx="14" cy="14" r="1.5" />
      </svg>
    </div>
+    <div class="closeButton button" @click="emit('close')">+</div>


I really like drawing things with strings, lol. But we would also need an icon here in the future.

I'd rather see an actual placeholder svg icon already being used here (either reuse one of the existing ones, or make a placeholder one), so no styling will need to be adjusted later once an actual icon is prepared.

Replaced with SVG

kazcw · 2024-03-12T14:35:45Z

app/gui2/src/components/ExtendedMenu.vue

 </script>

 <template>
  <div class="ExtendedMenu">
-    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen"></div>
+    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen">…</div>


Since it is not displayed as an ellipsis but rotated by CSS into the intended shape, I think it would be clearer to use CSS to inject the ellipsis character with :before.

Replaced with SVg

kazcw · 2024-03-12T14:38:19Z

app/gui2/src/components/ExtendedMenu.vue

-            @pointerdown="emit('fitToAllClicked')"
-          />
+        </div>
+        <div class="row clickableRow" @pointerdown.stop="emit('toggleCodeEditor')">


It seems like we should .stop the pointerdown/pointerup/click events at the root element of the dropdown, and I think attaching these handlers to click would be more consistent with the way we're handling buttons now.

Yeah those should be clicks. We should only use pointerdown in situations where we are dealing with drag interactions, so we need more control than what click provides.

Replaced with click handlers

Frizi · 2024-03-12T17:12:14Z

app/gui2/src/components/CodeEditor.vue

@@ -347,6 +349,7 @@ const editorStyle = computed(() => {
        <circle cx="14" cy="14" r="1.5" />
      </svg>
    </div>
+    <div class="closeButton button" @click="emit('close')">+</div>


I'd rather see an actual placeholder svg icon already being used here (either reuse one of the existing ones, or make a placeholder one), so no styling will need to be adjusted later once an actual icon is prepared.

Frizi · 2024-03-12T17:14:44Z

app/gui2/src/components/ExtendedMenu.vue

-            @pointerdown="emit('fitToAllClicked')"
-          />
+        </div>
+        <div class="row clickableRow" @pointerdown.stop="emit('toggleCodeEditor')">


Yeah those should be clicks. We should only use pointerdown in situations where we are dealing with drag interactions, so we need more control than what click provides.

Frizi · 2024-03-12T17:20:52Z

app/gui2/src/components/ExtendedMenu.vue

-const emit = defineEmits<{ zoomIn: []; zoomOut: []; fitToAllClicked: [] }>()
+const emit = defineEmits<{ zoomIn: []; zoomOut: []; fitToAllClicked: []; toggleCodeEditor: [] }>()
+
+const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'


Instead of hardcoding this shortcut string, let's add a new method to the object returned from defineKeybinds, so that we can read the shortcuts by action name. Then this could be something like codeEditorBindings.displayBinding('toggle').

AFAIK, it's not so easy to add the function, as it parses the string and changes the representation.

@vitvakatu If refactoring defineKeybinds would take more than a day, let's make a follow-up issue and add TODO with link here.

When implemented, the function returning keybinds should be also used in area selection unit tests.

I added the API itself, but I want it to use type information (knowing the list of shortcuts which are actually set). Added a TODO for now, to not block this PR.

Frizi · 2024-03-12T17:21:54Z

app/gui2/src/components/ExtendedMenu.vue

 </script>

 <template>
  <div class="ExtendedMenu">
-    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen"></div>
+    <div class="moreIcon" @pointerdown="isDropdownOpen = !isDropdownOpen">…</div>


Again I think this should already be using an svg icon.

Closes #9411 Based on #9365 <img width="261" alt="image" src="https://github.com/enso-org/enso/assets/6566674/2b419fde-9f66-455e-804b-1690edfb2883">

vitvakatu added 5 commits March 8, 2024 18:40

Fix icon

6517086

Add animation for menu

5fa6216

Add close button

fd1b37c

Refactor layout and add another row to menu

1edbbc6

Merge branch 'develop' into wip/vitvakatu/code-editor-close

1e362f3

vitvakatu added CI: No changelog needed Do not require a changelog entry for this PR. x-new-feature Type: new feature request -gui labels Mar 11, 2024

vitvakatu self-assigned this Mar 11, 2024

vitvakatu requested review from Frizi, farmaazon, MichaelMauderer and kazcw as code owners March 11, 2024 14:18

Self-review

650662c

vitvakatu commented Mar 11, 2024

View reviewed changes

farmaazon removed the request for review from MichaelMauderer March 12, 2024 08:07

kazcw approved these changes Mar 12, 2024

View reviewed changes

Frizi requested changes Mar 12, 2024

View reviewed changes

vitvakatu added 2 commits March 14, 2024 02:03

Address review comments

342455c

Add TODO

bce546f

vitvakatu requested a review from Frizi March 14, 2024 08:31

Frizi approved these changes Mar 14, 2024

View reviewed changes

vitvakatu mentioned this pull request Mar 14, 2024

Store additional metainformation for defineKeybinds #9427

Merged

5 tasks

apply formatting

a80e20c

vitvakatu added the CI: Ready to merge This PR is eligible for automatic merge label Mar 14, 2024

mergify bot merged commit b33079e into develop Mar 14, 2024
39 of 41 checks passed

mergify bot deleted the wip/vitvakatu/code-editor-close branch March 14, 2024 17:05

mwu-tow pushed a commit that referenced this pull request Mar 15, 2024

Store additional metainformation for defineKeybinds (#9427)

c4cb7b9

Closes #9411 Based on #9365 <img width="261" alt="image" src="https://github.com/enso-org/enso/assets/6566674/2b419fde-9f66-455e-804b-1690edfb2883">

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code editor open-close improvements #9365

Code editor open-close improvements #9365

vitvakatu commented Mar 11, 2024

vitvakatu Mar 11, 2024

Frizi Mar 12, 2024

vitvakatu Mar 14, 2024

vitvakatu Mar 11, 2024

Frizi Mar 12, 2024

vitvakatu Mar 14, 2024

kazcw Mar 12, 2024

vitvakatu Mar 14, 2024

kazcw Mar 12, 2024

Frizi Mar 12, 2024

vitvakatu Mar 14, 2024

Frizi Mar 12, 2024

Frizi Mar 12, 2024

Frizi Mar 12, 2024

farmaazon Mar 13, 2024

vitvakatu Mar 14, 2024

Frizi Mar 12, 2024

Code editor open-close improvements #9365

Code editor open-close improvements #9365

Conversation

vitvakatu commented Mar 11, 2024

Pull Request Description

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment