feat(submit): make video cover row icon-only with hover titles
Replace the video-pic/video/clear button labels with icon-only buttons carrying title + aria-label (设置视频封面/视频/清除), center the glyphs via flex to fix the upward icon shift, rename the media picker title to 为视频设置封面, and drop the unused setVideoCover i18n key. Contract test updated to pin the new markup and string set.
This commit is contained in:
@@ -17,7 +17,12 @@ test('featured box renders a playable video preview and a video-cover button', (
|
||||
assert.match(featured, /fa fas fa-play-circle/);
|
||||
|
||||
// The video-cover button is capability-gated like the video button.
|
||||
assert.match(featured, /if \(\$can_video\) : \?>\s*\n\s*<button type="button" class="but btn-video-pic" data-featured-action="video_pic">/);
|
||||
assert.match(featured, /if \(\$can_video\) : \?>\s*\n\s*<button type="button" class="but btn-video-pic" data-featured-action="video_pic"\s*\n\s*title="<\?php esc_attr_e\('设置视频封面', 'aksrt'\); \?>"/);
|
||||
|
||||
// The video row (video cover / video / clear) is icon-only with hover titles.
|
||||
assert.match(featured, /btn-video" data-featured-action="video"\s*\n\s*title="<\?php esc_attr_e\('视频', 'aksrt'\); \?>"\s*\n\s*aria-label="<\?php esc_attr_e\('视频', 'aksrt'\); \?>">\s*\n\s*<i class="fa fas fa-video"><\/i>\s*\n\s*<\/button>/);
|
||||
assert.match(featured, /btn-delete" data-featured-action="close"[\s\S]*?title="<\?php esc_attr_e\('清除', 'aksrt'\); \?>"/);
|
||||
assert.doesNotMatch(featured, /首图|>视频<|>清除</);
|
||||
|
||||
// Dead capability attributes are gone.
|
||||
assert.doesNotMatch(featured, /data-can-(image|slide|video)=/);
|
||||
@@ -46,7 +51,9 @@ test('submit.css toggles the video-cover button like the reference theme', () =>
|
||||
const css = read('assets/css/frontend/pages/submit.css');
|
||||
|
||||
assert.match(css, /\.featured-edit \.btns-full \.btn-video-pic \{\s*\n display: none;\s*\n\}/);
|
||||
assert.match(css, /\.featured-loaded\.video \.btns-full \.btn-video-pic \{\s*\n display: inline-flex;\s*\n\}/);
|
||||
assert.match(css, /\.featured-loaded\.video \.btns-full \.btn-video-pic \{\s*\n display: inline-flex;\s*\n align-items: center;\s*\n justify-content: center;\s*\n\}/);
|
||||
assert.match(css, /\.featured-edit \.btns-full \.btn-video,\s*\n\.featured-edit \.btns-full \.btn-delete:not\(\[hidden\]\) \{\s*\n display: inline-flex;\s*\n align-items: center;\s*\n justify-content: center;\s*\n\}/);
|
||||
assert.match(css, /\.featured-edit \.btns-full \.btn-video-pic > \.fa,[\s\S]*?\.featured-edit \.btns-full \.btn-delete > \.fa \{\s*\n margin-right: 0;\s*\n\}/);
|
||||
assert.doesNotMatch(css, /featured-video-placeholder/);
|
||||
});
|
||||
|
||||
@@ -71,8 +78,11 @@ test('i18n exposes the video-cover strings and dead keys are removed', () => {
|
||||
const editorJs = read('assets/js/front-submit-editor.js');
|
||||
const submitJs = read('assets/js/front-submit.js');
|
||||
|
||||
assert.match(page, /'setVideoCover' => __\('设置视频首图封面', 'aksrt'\)/);
|
||||
assert.match(page, /'setVideoCoverTitle' => __\('为视频设置首图封面', 'aksrt'\)/);
|
||||
assert.match(page, /'setVideoCoverTitle' => __\('为视频设置封面', 'aksrt'\)/);
|
||||
// The unused setVideoCover key died with the visible button label it served.
|
||||
assert.doesNotMatch(page, /'setVideoCover' =>/);
|
||||
assert.doesNotMatch(page, /首图/);
|
||||
assert.doesNotMatch(submitJs, /首图/);
|
||||
assert.doesNotMatch(page, /'(pickImage|pickVideo|pickVideoCover|pickVideoResource|videoUrl)'/);
|
||||
|
||||
// data-video-name / mediaUrl stay: pinned by tinymce.css and the
|
||||
|
||||
Reference in New Issue
Block a user