feat(console): 网格行改「网格背景」label+胶囊开关并压紧；T(网格透明度)滑杆移至H上方同格式；媒体缩略图加视频/照片角标
This commit is contained in:
Aisland
@@ -134,9 +134,7 @@ export const zh = {
|
||||
'console.bgPhotoCurrent': '当前使用',
|
||||
'console.bgPhotoNone': '还没有上传过照片',
|
||||
'console.bgPhotoDelete': '删除这条媒体',
|
||||
'console.bgGridLabel': '网格线',
|
||||
'console.bgGridToggle': '背景网格',
|
||||
'console.bgGridOpacity': '透明度',
|
||||
'console.bgGridLabel': '网格背景',
|
||||
'console.shapeSquare': '方形',
|
||||
'console.shapeCircle': '圆形',
|
||||
'console.themeDark': '深色',
|
||||
@@ -335,9 +333,7 @@ export const en = {
|
||||
'console.bgPhotoCurrent': 'In use',
|
||||
'console.bgPhotoNone': 'No photos yet',
|
||||
'console.bgPhotoDelete': 'Delete this media',
|
||||
'console.bgGridLabel': 'Grid',
|
||||
'console.bgGridToggle': 'Background grid',
|
||||
'console.bgGridOpacity': 'Opacity',
|
||||
'console.bgGridLabel': 'Background grid',
|
||||
'console.shapeSquare': 'Square',
|
||||
'console.shapeCircle': 'Circle',
|
||||
'console.themeDark': 'Dark',
|
||||
|
||||
@@ -1429,20 +1429,20 @@ function ConsolePane() {
|
||||
<button type="button" className="dsh-wt_dropItem" onClick={pickPhotoFile}><svg width="13" height="13" viewBox="0 0 16 16" aria-hidden><rect x="2.5" y="3.5" width="11" height="9" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.2" /><circle cx="5.8" cy="6.6" r="1.1" fill="currentColor" /><path d="M3.2 11.2l2.8-2.8 2.2 2.2 1.8-1.8 2.8 2.4" fill="none" stroke="currentColor" strokeWidth="1.2" /></svg>{T('console.bgPhoto')}</button>
|
||||
<div className="dsh-wt_gridHalf">
|
||||
<span className="dsh-wt_gridLabel">{T('console.bgGridLabel')}</span>
|
||||
<button type="button" className={'dsh-wt_gridToggle' + (photoGrid ? ' dsh-wt_gridToggleOn' : '')} aria-pressed={photoGrid} aria-label={T('console.bgGridLabel')} onClick={togglePhotoGrid}>{T('console.bgGridToggle')}</button>
|
||||
<button type="button" className={'dsh-wt_switch' + (photoGrid ? ' dsh-wt_switchOn' : '')} aria-pressed={photoGrid} aria-label={T('console.bgGridLabel')} onClick={togglePhotoGrid}><span className="dsh-wt_switchKnob" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dsh-wt_dropRow">
|
||||
<span className="dsh-wt_gridLabel">{T('console.bgGridOpacity')}</span>
|
||||
<input className="dsh-wt_hslSlider" type="range" min={0} max={30} step={1} value={gridOpacity} onChange={(e) => onGridOpacity(Number(e.target.value))} />
|
||||
<span className="dsh-wt_gridOpacityVal">{gridOpacity}%</span>
|
||||
</div>
|
||||
{photoList.length > 0 ? (
|
||||
photoList.slice(0, 4).map((p) => (
|
||||
<div key={p.id} className={'dsh-wt_dropRow dsh-wt_photoRow' + (photoId === p.id ? ' dsh-wt_photoRowOn' : '')} onClick={() => selectPhoto(p)}>
|
||||
{p.kind === 'video'
|
||||
? <video className="dsh-wt_photoThumb" src={p.url} muted playsInline preload="metadata" />
|
||||
: <img className="dsh-wt_photoThumb" src={p.url} alt="" />}
|
||||
<span className="dsh-wt_thumbWrap">
|
||||
{p.kind === 'video'
|
||||
? <video className="dsh-wt_photoThumb" src={p.url} muted playsInline preload="metadata" />
|
||||
: <img className="dsh-wt_photoThumb" src={p.url} alt="" />}
|
||||
<span className="dsh-wt_thumbBadge" aria-hidden>{p.kind === 'video'
|
||||
? <svg width="8" height="8" viewBox="0 0 16 16"><path d="M4.5 3.8l8 4.2-8 4.2z" fill="currentColor" /></svg>
|
||||
: <svg width="8" height="8" viewBox="0 0 16 16"><rect x="2.5" y="3.5" width="11" height="9" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" /><path d="M3.4 11l2.6-2.6 2.1 2.1 1.7-1.7 2.8 2.4" fill="none" stroke="currentColor" strokeWidth="1.5" /></svg>}</span>
|
||||
</span>
|
||||
<span className="dsh-wt_photoName">{photoId === p.id ? T('console.bgPhotoCurrent') : T('console.bgPhotoUse')}</span>
|
||||
<button type="button" className="dsh-wt_dropTrash" title={T('console.bgPhotoDelete')} aria-label={T('console.bgPhotoDelete')} onClick={(e) => { e.stopPropagation(); removePhotoById(p) }}><svg width="11" height="11" viewBox="0 0 16 16" aria-hidden><path d="M2.5 4.2h11M6.5 4.2V2.9c0-.6.4-1 .9-1h1.2c.5 0 .9.4.9 1v1.3M4.2 4.2l.5 8.1c0 .7.5 1.2 1.2 1.2h4.2c.7 0 1.2-.5 1.2-1.2l.5-8.1" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" /></svg></button>
|
||||
</div>
|
||||
@@ -1458,6 +1458,9 @@ function ConsolePane() {
|
||||
const sMax = bgEdit === 'plain' ? 100 : 200
|
||||
const lMax = bgEdit === 'plain' ? 100 : 200
|
||||
return (<>
|
||||
{bgEdit === 'photo' && (
|
||||
<div className="dsh-wt_hslRow"><span className="dsh-wt_hslLabel">T</span><input className="dsh-wt_hslSlider" type="range" min={0} max={30} step={1} value={gridOpacity} onChange={(e) => onGridOpacity(Number(e.target.value))} /><HslValInput value={gridOpacity} min={0} max={30} onCommit={onGridOpacity} /></div>
|
||||
)}
|
||||
<div className="dsh-wt_hslRow"><span className="dsh-wt_hslLabel">H</span><input className="dsh-wt_hslSlider" type="range" min={-180} max={180} step={1} value={v.h} onChange={(e) => editHsl(bgEdit, { h: Number(e.target.value) })} /><HslValInput value={v.h} min={-180} max={180} onCommit={(n) => editHsl(bgEdit, { h: n })} /></div>
|
||||
<div className="dsh-wt_hslRow"><span className="dsh-wt_hslLabel">S</span><input className="dsh-wt_hslSlider" type="range" min={0} max={sMax} step={1} value={v.s} onChange={(e) => editHsl(bgEdit, { s: Number(e.target.value) })} /><HslValInput value={v.s} max={sMax} onCommit={(n) => editHsl(bgEdit, { s: n })} /></div>
|
||||
<div className="dsh-wt_hslRow"><span className="dsh-wt_hslLabel">L</span><input className="dsh-wt_hslSlider" type="range" min={0} max={lMax} step={1} value={v.l} onChange={(e) => editHsl(bgEdit, { l: Number(e.target.value) })} /><HslValInput value={v.l} max={lMax} onCommit={(n) => editHsl(bgEdit, { l: n })} /></div>
|
||||
|
||||
@@ -435,11 +435,8 @@ export const css = xtermCss + '\n' + [
|
||||
'.dsh-wt_dropWide{width:212px}',
|
||||
'.dsh-wt_dropTrash{flex:none;width:22px;height:22px;margin-right:2px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--wt-text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}',
|
||||
'.dsh-wt_dropTrash:hover{background:rgba(244,63,94,.16);color:#f87171}',
|
||||
'.dsh-wt_gridLabel{flex:1;min-width:0;font-size:12px;line-height:17px;color:var(--wt-text2);padding:4px}',
|
||||
'.dsh-wt_gridToggle{flex:none;padding:4px 10px;border:none;border-radius:7px;background:transparent;color:var(--wt-text2);font:inherit;font-size:12px;line-height:17px;cursor:pointer;transition:background .15s ease,color .15s ease;opacity:.8}',
|
||||
'.dsh-wt_gridToggle:hover{background:var(--wt-chip);opacity:1}',
|
||||
'.dsh-wt_gridToggleOn{background:var(--wt-chip);color:var(--wt-text);font-weight:600;opacity:1}',
|
||||
'.dsh-wt_gridOpacityVal{flex:none;width:30px;font-size:10px;color:var(--wt-text2);text-align:right;font-variant-numeric:tabular-nums}',
|
||||
'.dsh-wt_gridLabel{flex:1;min-width:0;font-size:12px;line-height:17px;color:var(--wt-text2);padding:2px 4px}',
|
||||
|
||||
'.dsh-wt_switch{flex:none;position:relative;width:30px;height:17px;margin-right:4px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .15s ease}',
|
||||
'.dsh-wt_switchOn{background:#4f8ef7}',
|
||||
'.dsh-wt_switchKnob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .18s cubic-bezier(.22,.61,.36,1)}',
|
||||
@@ -467,7 +464,10 @@ export const css = xtermCss + '\n' + [
|
||||
'.dsh-wt_photoEmpty{padding:4px 4px 2px;font-size:11px;line-height:16px;color:var(--wt-text3)}',
|
||||
'.dsh-wt_hslDivider{height:1px;margin:5px 4px;background:var(--wt-border);opacity:.5}',
|
||||
'.dsh-wt_consoleVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}',
|
||||
'.dsh-wt_gridHalf{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 4px;box-sizing:border-box}',
|
||||
'.dsh-wt_gridHalf{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 2px;box-sizing:border-box}',
|
||||
'.dsh-wt_thumbWrap{position:relative;flex:none;width:30px;height:30px}',
|
||||
'.dsh-wt_thumbWrap .dsh-wt_photoThumb{position:absolute;inset:0}',
|
||||
'.dsh-wt_thumbBadge{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:rgba(10,13,19,.88);border:1px solid rgba(255,255,255,.4);color:#e6e8eb;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}',
|
||||
'.dsh-wt_photoThumb video,.dsh-wt_photoThumb{display:block}',
|
||||
'.dsh-wt_dropItemOn{background:var(--wt-chip);color:var(--wt-text);font-weight:600}',
|
||||
'.dsh-wt_hbar{position:relative;width:130px;height:26px;margin:4px auto;border-radius:999px;background:rgba(255,255,255,.08)}',
|
||||
|
||||
Reference in New Issue
Block a user