Skip to content

Commit 4c4968d

Browse files
committed
feat(Story 4.5): Implement alt-text auto-generation via AJAX
- Add AltTextController with API endpoints for generating alt-text - Add alt-text-generator.js to handle file uploads and API calls - Add form alters for media image add/edit forms - Add Generate with AI button on media edit forms - Attach library to media library upload forms - This fixes the timing issue where form validation prevented presave
1 parent 844fa20 commit 4c4968d

6 files changed

Lines changed: 834 additions & 0 deletions

File tree

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* @file
3+
* Styles for alt-text auto-generation.
4+
*
5+
* Story 4.5: Auto Alt-Text on Media Upload
6+
*/
7+
8+
/* Loading state */
9+
.alt-text-generating {
10+
position: relative;
11+
}
12+
13+
.alt-text-loading {
14+
opacity: 0.6;
15+
pointer-events: none;
16+
}
17+
18+
/* Spinner */
19+
.alt-text-spinner {
20+
display: inline-block;
21+
width: 20px;
22+
height: 20px;
23+
margin-left: 10px;
24+
vertical-align: middle;
25+
border: 2px solid #e0e0e0;
26+
border-top-color: #0074bd;
27+
border-radius: 50%;
28+
animation: alt-text-spin 0.8s linear infinite;
29+
}
30+
31+
@keyframes alt-text-spin {
32+
to {
33+
transform: rotate(360deg);
34+
}
35+
}
36+
37+
/* Messages */
38+
.alt-text-message {
39+
margin-top: 0.5em;
40+
padding: 0.5em 0.75em;
41+
font-size: 0.875em;
42+
border-radius: 4px;
43+
}
44+
45+
.alt-text-message--status {
46+
color: #2e7d32;
47+
background-color: #e8f5e9;
48+
border: 1px solid #c8e6c9;
49+
}
50+
51+
.alt-text-message--error {
52+
color: #c62828;
53+
background-color: #ffebee;
54+
border: 1px solid #ffcdd2;
55+
}
56+
57+
/* AI indicator badge */
58+
.ai-indicator {
59+
display: inline-flex;
60+
align-items: center;
61+
padding: 0.25em 0.5em;
62+
margin-left: 0.5em;
63+
font-size: 0.75em;
64+
font-weight: 500;
65+
color: #1976d2;
66+
background-color: #e3f2fd;
67+
border-radius: 4px;
68+
cursor: help;
69+
}
70+
71+
.ai-indicator::before {
72+
content: "✨";
73+
margin-right: 0.25em;
74+
}
75+
76+
/* Generate button styling */
77+
.alt-text-generate-btn {
78+
margin-top: 0.5em;
79+
padding: 0.375em 0.75em;
80+
font-size: 0.875em;
81+
color: #fff;
82+
background-color: #0074bd;
83+
border: none;
84+
border-radius: 4px;
85+
cursor: pointer;
86+
transition: background-color 0.2s;
87+
}
88+
89+
.alt-text-generate-btn:hover {
90+
background-color: #005a94;
91+
}
92+
93+
.alt-text-generate-btn:disabled {
94+
opacity: 0.6;
95+
cursor: not-allowed;
96+
}
97+
98+
/* Alt text field container enhancements */
99+
.alt-text-ai-controls {
100+
display: flex;
101+
flex-wrap: wrap;
102+
gap: 0.5em;
103+
align-items: center;
104+
margin-top: 0.5em;
105+
}

0 commit comments

Comments
 (0)