mirror of
https://github.com/hansjone/dsh-ops-cron.git
synced 2026-10-16 17:33:23 +08:00
Center the scheduled-tasks icon when the sidebar rail is collapsed.
The native New Session button hides its label and becomes a 36px square; the plugin entry kept the label in flow, so the clock icon sat to the left.
This commit is contained in:
parent
feed587f5e
commit
8e038700f2
2 changed files with 26 additions and 3 deletions
|
|
@ -195,7 +195,10 @@ window.__ModuleLoader__.load({
|
||||||
.dsh-ct-switch::after{content:"";display:block;width:20px;height:20px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);transition:transform .16s}
|
.dsh-ct-switch::after{content:"";display:block;width:20px;height:20px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);transition:transform .16s}
|
||||||
.dsh-ct-switch[aria-checked=true]::after{transform:translateX(16px)}
|
.dsh-ct-switch[aria-checked=true]::after{transform:translateX(16px)}
|
||||||
.dsh-ct-entry{box-sizing:border-box;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden;font-family:inherit;cursor:pointer}
|
.dsh-ct-entry{box-sizing:border-box;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden;font-family:inherit;cursor:pointer}
|
||||||
|
.dsh-ct-entry svg{flex:none;display:block;margin:0}
|
||||||
.dsh-ct-entryLabel{white-space:nowrap;overflow:hidden}
|
.dsh-ct-entryLabel{white-space:nowrap;overflow:hidden}
|
||||||
|
[class*="_collapsed"] .dsh-ct-entry{width:36px;height:36px;padding:0;gap:0;margin:0 0 12px;justify-content:center;align-items:center;align-self:flex-start}
|
||||||
|
[class*="_collapsed"] .dsh-ct-entry .dsh-ct-entryLabel{max-width:0;opacity:0;margin:0;padding:0;pointer-events:none}
|
||||||
.dsh-ct-region{display:none !important;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding-right:var(--dsh-sidebar-inline-padding,12px);box-sizing:border-box}
|
.dsh-ct-region{display:none !important;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding-right:var(--dsh-sidebar-inline-padding,12px);box-sizing:border-box}
|
||||||
[data-dsh-ct-mode=on] .dsh-ct-region{display:flex !important;animation:dsh-ct-fade-in .18s var(--ds-ease-in-out,ease)}
|
[data-dsh-ct-mode=on] .dsh-ct-region{display:flex !important;animation:dsh-ct-fade-in .18s var(--ds-ease-in-out,ease)}
|
||||||
[data-dsh-ct-mode=on] [class*="regionArea"] > :not(.dsh-ct-region){display:none !important}
|
[data-dsh-ct-mode=on] [class*="regionArea"] > :not(.dsh-ct-region){display:none !important}
|
||||||
|
|
@ -1173,6 +1176,11 @@ window.__ModuleLoader__.load({
|
||||||
window.dispatchEvent(new CustomEvent('dsh-ct-mode', { detail: on }))
|
window.dispatchEvent(new CustomEvent('dsh-ct-mode', { detail: on }))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function sidebarCollapsed(found) {
|
||||||
|
const root = findSidebarRoot(found)
|
||||||
|
return !!(root && /(?:^|\s)[\w-]*_collapsed(?:\s|$)/.test(String(root.className || '')))
|
||||||
|
}
|
||||||
|
|
||||||
function syncEntryLook(entry, found) {
|
function syncEntryLook(entry, found) {
|
||||||
if (!entry || !found) return
|
if (!entry || !found) return
|
||||||
const nativeClass = String(found.className || '').trim()
|
const nativeClass = String(found.className || '').trim()
|
||||||
|
|
@ -1181,10 +1189,16 @@ window.__ModuleLoader__.load({
|
||||||
const label = entry.querySelector('span')
|
const label = entry.querySelector('span')
|
||||||
if (nativeLabel && label) label.className = `${nativeLabel.className} dsh-ct-entryLabel`.trim()
|
if (nativeLabel && label) label.className = `${nativeLabel.className} dsh-ct-entryLabel`.trim()
|
||||||
const cs = getComputedStyle(found)
|
const cs = getComputedStyle(found)
|
||||||
|
const collapsed = sidebarCollapsed(found) || Number.parseFloat(cs.width) <= 40
|
||||||
entry.style.borderRadius = cs.borderRadius
|
entry.style.borderRadius = cs.borderRadius
|
||||||
entry.style.height = cs.height
|
entry.style.height = collapsed ? '36px' : cs.height
|
||||||
entry.style.padding = cs.padding
|
entry.style.width = collapsed ? '36px' : ''
|
||||||
entry.style.gap = cs.gap
|
entry.style.padding = collapsed ? '0' : cs.padding
|
||||||
|
entry.style.gap = collapsed ? '0' : cs.gap
|
||||||
|
entry.style.margin = collapsed ? '0 0 12px' : cs.margin
|
||||||
|
entry.style.justifyContent = 'center'
|
||||||
|
entry.style.alignItems = 'center'
|
||||||
|
entry.style.alignSelf = collapsed ? 'flex-start' : ''
|
||||||
entry.style.fontSize = cs.fontSize
|
entry.style.fontSize = cs.fontSize
|
||||||
entry.style.fontWeight = cs.fontWeight
|
entry.style.fontWeight = cs.fontWeight
|
||||||
entry.style.lineHeight = cs.lineHeight
|
entry.style.lineHeight = cs.lineHeight
|
||||||
|
|
@ -1192,6 +1206,12 @@ window.__ModuleLoader__.load({
|
||||||
entry.style.backgroundColor = cs.backgroundColor
|
entry.style.backgroundColor = cs.backgroundColor
|
||||||
entry.style.boxShadow = cs.boxShadow
|
entry.style.boxShadow = cs.boxShadow
|
||||||
entry.style.color = cs.color
|
entry.style.color = cs.color
|
||||||
|
if (label) {
|
||||||
|
label.style.maxWidth = collapsed ? '0' : ''
|
||||||
|
label.style.opacity = collapsed ? '0' : ''
|
||||||
|
label.style.margin = collapsed ? '0' : ''
|
||||||
|
label.setAttribute('aria-hidden', collapsed ? 'true' : 'false')
|
||||||
|
}
|
||||||
const nativeSvg = found.querySelector('svg')
|
const nativeSvg = found.querySelector('svg')
|
||||||
const icon = entry.querySelector('svg')
|
const icon = entry.querySelector('svg')
|
||||||
if (nativeSvg && icon) {
|
if (nativeSvg && icon) {
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,9 @@ test('installable bundle declares host apply, client half, unique id, and no @de
|
||||||
assert.match(client, /新建会话/)
|
assert.match(client, /新建会话/)
|
||||||
assert.match(client, /logoRow/)
|
assert.match(client, /logoRow/)
|
||||||
assert.match(client, /dsh-ct-entry/)
|
assert.match(client, /dsh-ct-entry/)
|
||||||
|
assert.match(client, /sidebarCollapsed/)
|
||||||
|
assert.match(client, /_collapsed/)
|
||||||
|
assert.match(client, /width:36px/)
|
||||||
assert.match(client, /返回工作区/)
|
assert.match(client, /返回工作区/)
|
||||||
assert.match(client, /runs\/\$\{run\.id\}\/open/)
|
assert.match(client, /runs\/\$\{run\.id\}\/open/)
|
||||||
assert.match(client, /regionArea/)
|
assert.match(client, /regionArea/)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue