diff --git a/.gitignore b/.gitignore index 16816dbc..09ad9899 100644 --- a/.gitignore +++ b/.gitignore @@ -56,6 +56,7 @@ !/tests/front-submit/ /tests/front-submit/* !/tests/front-submit/video-cover-contract.test.cjs +!/tests/front-submit/editor-fullscreen-contract.test.cjs !/tests/asset-ledger/ !/tests/asset-ledger/*.php !/tests/visual/docker-compose.zibll.yml diff --git a/assets/css/frontend/pages/submit.css b/assets/css/frontend/pages/submit.css index c818ab3d..260f2254 100644 --- a/assets/css/frontend/pages/submit.css +++ b/assets/css/frontend/pages/submit.css @@ -51,19 +51,18 @@ border: 0; } -.newposts-editor .mce-top-part.affix { - position: fixed; -} - -.newposts-editor .mce-top-part.affix-bottom { - position: absolute; -} - .newposts-editor .wp-editor-container { overflow: hidden; border-radius: 0; } +/* TinyMCE 全屏容器:skin 样式在编辑器初始化时注入(晚于核心 editor.css), + 其 .mce-fullscreen 的 z-index:100 压不过固定导航栏(.nav-fixed .header 为 999)。 + 用元素+类选择器提高优先级,恢复 WP 核心预期的 100010,仍低于投稿媒体弹层(100080)。 */ +div.mce-fullscreen { + z-index: 100010; +} + .newposts-editor .mce-toolbar-grp, .newposts-editor div.mce-toolbar-grp { border-bottom: 0; @@ -547,12 +546,30 @@ body.aksrt-editor-media-open { font-size: 1em; } +/* 纯图标按钮(设置视频封面/视频/清除):fa 字形行高与文字不同导致图标上偏, + 用 flex 居中修正;并去掉 legacy .but 给图标加的文字间距。btn-delete 的 + hidden 属性切换依赖默认 display,故用 :not([hidden]) 守卫。 */ +.featured-edit .btns-full .btn-video, +.featured-edit .btns-full .btn-delete:not([hidden]) { + display: inline-flex; + align-items: center; + justify-content: center; +} + .featured-edit .btns-full .btn-video-pic { display: none; } .featured-loaded.video .btns-full .btn-video-pic { display: inline-flex; + align-items: center; + justify-content: center; +} + +.featured-edit .btns-full .btn-video-pic > .fa, +.featured-edit .btns-full .btn-video > .fa, +.featured-edit .btns-full .btn-delete > .fa { + margin-right: 0; } .featured-loaded.image .btn-video, diff --git a/tests/front-submit/editor-fullscreen-contract.test.cjs b/tests/front-submit/editor-fullscreen-contract.test.cjs new file mode 100644 index 00000000..0ca833e8 --- /dev/null +++ b/tests/front-submit/editor-fullscreen-contract.test.cjs @@ -0,0 +1,35 @@ +'use strict'; + +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const path = require('node:path'); +const test = require('node:test'); + +const root = path.resolve(__dirname, '..', '..'); +const read = (file) => fs.readFileSync(path.join(root, file), 'utf8'); + +test('submit.css raises the TinyMCE fullscreen container above the fixed navbar', () => { + const css = read('assets/css/frontend/pages/submit.css'); + + // TinyMCE's skin injects .mce-fullscreen { z-index: 100 } at editor init, + // after core editor.css, so the fullscreen editor loses to the fixed navbar + // (.nav-fixed .header, z-index 999). The element+class selector outranks the + // skin regardless of injection order and restores core's intended 100010, + // which stays below the submit media dialog (100080). + assert.match(css, /div\.mce-fullscreen \{\s*\n z-index: 100010;\s*\n\}/); +}); + +test('the Zibll toolbar affix rules stay removed', () => { + const css = read('assets/css/frontend/pages/submit.css'); + const jsRoot = path.join(root, 'assets/js'); + const js = fs + .readdirSync(jsRoot, { withFileTypes: true }) + .filter((entry) => entry.isFile()) + .map((entry) => read(`assets/js/${entry.name}`)) + .join('\n'); + + // No AKSRT script adds .affix to .mce-top-part (that was Zibll's + // editextend.js), so the affix positioning rules must not come back. + assert.doesNotMatch(css, /mce-top-part\.affix/); + assert.doesNotMatch(js, /mce-top-part/); +});