Skip to content

🎨 Palette: Improve UI discoverability with disabled button states #3

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

Closed
devdudumuniz wants to merge 1 commit into from
+19 −5
Closed

🎨 Palette: Improve UI discoverability with disabled button states #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-03-01 - Disabled states instead of conditional rendering
**Learning:** In Streamlit apps, hiding action buttons (like "Add to Queue", "Clear", "Download", "Remove") when there's no data or selection causes layout shifts and hurts discoverability.
**Action:** Always render the buttons but use `disabled=True` based on the data/selection state so users can see the available actions even if they can't perform them yet.
21 changes: 16 additions & 5 deletions pysus/web/pages/1_client.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -812,8 +812,10 @@ def _show_results(pysus: PySUS, client: str) -> None:

col1, col2 = st.columns([3, 1])
with col2:
if selected_indices and st.button(
t("add_to_queue", _lang()), width="stretch"
if st.button(
t("add_to_queue", _lang()),
width="stretch",
disabled=not selected_indices,
):
new_indices = [
i for i in selected_indices if i not in queued_indices
Expand Down Expand Up @@ -888,18 +890,27 @@ def _show_results(pysus: PySUS, client: str) -> None:
st.rerun()
col1, col2, col3 = st.columns(3)
with col1:
if remove_indices and st.button(t("remove", _lang()), width="stretch"):
if st.button(
t("remove", _lang()), width="stretch", disabled=not remove_indices
):
remove_targets = {queued_indices[i] for i in remove_indices}
st.session_state[queue_key] = [
i for i in queued_indices if i not in remove_targets
]
st.rerun()
with col2:
if st.button(t("clear", _lang()), width="stretch"):
if st.button(
t("clear", _lang()), width="stretch", disabled=not download_queue
):
st.session_state[queue_key] = []
st.rerun()
with col3:
if st.button(t("download", _lang()), width="stretch", type="primary"):
if st.button(
t("download", _lang()),
width="stretch",
type="primary",
disabled=not download_queue,
):
_download_selected(
pysus, client, download_queue, st.session_state[dir_key]
)
Expand Down