Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix small component menu #12435

Merged
merged 2 commits into from
Mar 7, 2025
Merged

Fix small component menu #12435

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d95db76
Eye button fixes
AdRiley Mar 6, 2025
3919665
lint
AdRiley Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions app/gui/src/project-view/components/ActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script setup lang="ts">
import SvgButton from '@/components/SvgButton.vue'
import ToggleIcon from '@/components/ToggleIcon.vue'
import { computed, toValue } from 'vue'
import { Action, ActionName, injectActions } from '../providers/action'

Expand All @@ -11,22 +10,13 @@ const action = computed(() =>
)
const descriptionWithShortcut = computed(() =>
action.value.shortcut ?
`${toValue(action.value.description)} (${toValue(action.value.shortcut)})`
`${toValue(action.value.description)} (${toValue(action.value.shortcut?.humanReadable)})`
: toValue(action.value.description),
)
</script>

<template>
<ToggleIcon
v-if="action.toggled != null"
:modelValue="toValue(action.toggled)"
:icon="toValue(action.icon)"
:disabled="toValue(action.disabled)"
:title="descriptionWithShortcut"
@click.stop="action.action"
/>
Comment on lines -20 to -27
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This effectively hides the information from toggle-able actions if they are toggled on or off.

It affects all action buttons, like color picker. Currently, it has more vivid color when toggled on:

Screencast.From.2025-03-07.12-19-25.mp4

While this one is not very important for the user, but the actions are meant to be very generic, and I guess the lack of feedback that the action is toggleable is concerning.

Also, I think the color-picker button itself does not look disabled; perhaps we could just use the same tone in visualization button?

image

Copy link
Member Author

@AdRiley AdRiley Mar 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I thought about this. The counter argument is that in both of these cases the user can see that it is toggled on as there is a new pane that is opened.

But yes the other option is to make untoggled the same color as the other buttons and then do something else for toggled on (perhaps we can go even darker)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or this for toggled on?
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we can just make ToggleButton has different behavior (like the highlight instead of icon color change).

<SvgButton
v-else
:name="toValue(action.icon)"
:disabled="toValue(action.disabled)"
:title="descriptionWithShortcut"
Expand Down
Loading