hugo/bDS2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: quickaction in media with icon on button

Browse Source
This commit is contained in:
Chili Palmer
2026-04-26 22:25:33 +02:00
parent 4e991247e1
commit 004c359e84
3 changed files with 107 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
View File

@@ -25,7 +25,8 @@
phx-click="toggle_media_editor_quick_actions"
phx-value-id={@media_editor.id}
>
<%= translated("Quick Actions") %>
<span class="quick-actions-btn-icon">⚡</span>
<span class="quick-actions-btn-label"><%= translated("Quick Actions") %></span>
</button>
<%= if @media_editor.quick_actions_open? do %>
@@ -38,11 +39,11 @@
phx-click="open_overlay"
phx-value-kind="ai_suggestions"
>
<span class="quick-action-icon">🤖</span>
<span class="quick-action-text">
<strong><%= translated("AI Suggestions") %></strong>
<small><%= translated("Review title, alt text, and caption suggestions") %></small>
</span>
<span class="quick-action-icon">🤖</span>
</button>
<div class="quick-actions-divider"></div>
@@ -55,11 +56,11 @@
phx-value-id={@media_editor.id}
disabled={not @media_editor.can_detect_language?}
>
<span class="quick-action-icon">🔍</span>
<span class="quick-action-text">
<strong><%= translated("Detect Language") %></strong>
<small><%= translated("Persist the detected language for this media item") %></small>
</span>
<span class="quick-action-icon">🔍</span>
</button>
<div class="quick-actions-divider"></div>
@@ -72,11 +73,11 @@
phx-value-kind="language_picker"
disabled={not @media_editor.can_translate?}
>
<span class="quick-action-icon">🌍</span>
<span class="quick-action-text">
<strong><%= translated("Translate") %></strong>
<small><%= translated("Select a target language for this media item") %></small>
</span>
<span class="quick-action-icon">🌍</span>
</button>
</div>
<% end %>

93
priv/ui/app.css
View File

@@ -2674,6 +2674,87 @@ button svg * {
font-style: italic;
}
[data-testid="media-editor"] .quick-actions-wrapper {
position: relative;
}
[data-testid="media-editor"] .quick-actions-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-testid="media-editor"] .quick-actions-btn-icon {
font-size: 12px;
line-height: 1;
}
[data-testid="media-editor"] .quick-actions-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
width: 280px;
background: var(--vscode-dropdown-background, #252526);
border: 1px solid var(--vscode-dropdown-border, #454545);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
z-index: 30;
}
[data-testid="media-editor"] .quick-actions-divider {
height: 1px;
background: var(--vscode-dropdown-border, #454545);
}
[data-testid="media-editor"] .quick-action-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
color: var(--vscode-dropdown-foreground, #ccc);
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
background: var(--vscode-list-hoverBackground, #2a2d2e);
}
[data-testid="media-editor"] .quick-action-item:disabled {
opacity: 0.5;
cursor: not-allowed;
}
[data-testid="media-editor"] .quick-action-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 2px;
}
[data-testid="media-editor"] .quick-action-text {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
[data-testid="media-editor"] .quick-action-text strong {
font-size: 13px;
font-weight: 500;
}
[data-testid="media-editor"] .quick-action-text small {
font-size: 11px;
opacity: 0.7;
}
[data-testid="media-editor"] .editor-content {
flex: 1;
display: flex;
@@ -2742,6 +2823,7 @@ button svg * {
background-color: var(--vscode-input-background);
border-radius: 8px;
min-height: 300px;
overflow: hidden;
}
[data-testid="media-editor"] .media-preview-placeholder {
@@ -2753,17 +2835,20 @@ button svg * {
}
[data-testid="media-editor"] .media-preview-image {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 100%;
height: 100%;
min-height: 0;
padding: 16px;
box-sizing: border-box;
}
[data-testid="media-editor"] .media-preview-image img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
}

13
test/bds/ui/shell_test.exs
View File

@@ -220,9 +220,16 @@ defmodule BDS.UI.ShellTest do
test "desktop shell css keeps the old media editor layout contract" do
css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex")
assert css =~ ".media-preview {"
assert css =~ "min-height: 300px;"
assert css =~ ".media-preview-image {"
assert css =~ "width: 100%;"
assert css =~ "height: 100%;"
assert css =~ "box-sizing: border-box;"
assert css =~ ".media-preview-image img {"
assert css =~ "object-fit: contain;"
assert css =~ ".media-details {"
assert css =~ "width: 320px;"
assert css =~ ".media-details textarea {"
@@ -237,6 +244,12 @@ defmodule BDS.UI.ShellTest do
assert css =~ "padding: 6px 10px;"
assert css =~ ".linked-post-item:hover .unlink-btn {"
assert css =~ "opacity: 1;"
assert Regex.match?(~r/class="secondary quick-actions-btn".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= translated\("Quick Actions"\) %><\/span>/s, template)
assert template =~ ~s(class="quick-action-text")
assert template =~ ~s(class="quick-action-icon">🤖</span>)
assert Regex.match?(~r/class="quick-action-text">\s*<strong><%= translated\("AI Suggestions"\) %><\/strong>.*?<\/span>\s*<span class="quick-action-icon">🤖<\/span>/s, template)
refute template =~ ~s|<span class="quick-action-icon">🤖</span>
<span class="quick-action-text">|
end
test "desktop shell status task area keeps the compact running-task markup" do