fix(comments): render image upload progress like the reference
While uploading, the confirm button turned into a thin 3px bar below the label instead of the reference's striped overlay that fills the button. Two causes: - the markup used <span class="progress">; Bootstrap sizes the bar with a block-level .progress, so the swap produced a flattened line - shell.css carried a bespoke override pinning .progress to `position: static; height: 3px`, discarding the absolute full-size overlay that main.css already provides Changes: - emit the reference skeleton: <div class="progress progress-striped active"> > <div class="progress-bar progress-bar-success">, so the striped bar spans the button and the gradient shows through the translucent layer - give the upload button `position: relative` so the overlay is contained by the button rather than the dropdown panel; delete the static-line override - restore the reference's "正在处理请稍等..." toast and switch the label to "处理中 ..." at 100%, both keyed to the shared `miniupload_ajax` toast id so the completion message replaces the loading one - notify() now forwards the toast id instead of dropping it Tests: comment-image-upload contract gains two cases pinning the div-based striped overlay and the deletion of the 3px override; suite 835/836 with the pre-existing frontend-lifecycle failure. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
f6fde18857
commit
0007e78bfe
5 files changed
+66
-44
No files matched your search
@@ -39,25 +39,13 @@
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
#comments .comment-image-upload .progress {
|
||||
position: static;
|
||||
inset: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin-top: 4px;
|
||||
/* 上传中:按钮内容换成「加载点 + 文案 + 铺满按钮的条纹进度层」。
|
||||
按钮作为定位祖先,.progress 沿用 main.css 的绝对铺满(inset:0 / 100%)
|
||||
与负 z-index,progress-bar 走 Bootstrap 的 progress-bar-success 条纹;
|
||||
负层绘制在按钮背景之上、正文之下,因此文案与进度条同时可见。 */
|
||||
#comments .comment-image-upload .input-expand-upload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
#comments .comment-image-upload .progress-bar {
|
||||
position: static;
|
||||
inset: auto;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
#comments .comment-header .jio-identity-chip {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in new issue
Block a user