diff --git a/src/css/overlay.css b/src/css/overlay.css index 26e7db0..c81adcf 100644 --- a/src/css/overlay.css +++ b/src/css/overlay.css @@ -233,11 +233,6 @@ dialog.help .input-group { dialog.help .input-group.major { margin: 1rem 0; } -dialog.help .input-group.major.all-tools { - padding-bottom: .5rem; - border-bottom: var(--frame-line); - margin-bottom: .5rem; -} dialog.help .input-group.major:last-child { margin-bottom: 0; } @@ -271,3 +266,24 @@ dialog.help kbd { border: solid 1px var(--frame-color); box-shadow: 0 1px 1px var(--frame-color); } +dialog.help small { + opacity: .7; +} +dialog.help .input-group.major.all-tools { + padding-bottom: .5rem; + border-bottom: var(--frame-line); + margin-bottom: .5rem; +} +dialog.help .input-group.one-tool { + display: flex; + gap: 1rem; + justify-content: space-between; +} +dialog.help .input-group.one-tool > label { + white-space: nowrap; +} +dialog.help .input-group.one-tool > small { + line-height: .75; + align-self: center; + text-align: end; +} diff --git a/src/tool-panel.ts b/src/tool-panel.ts index 89ba325..9a5f169 100644 --- a/src/tool-panel.ts +++ b/src/tool-panel.ts @@ -124,25 +124,27 @@ function makeSettingsDialog(toolsWithDetails: ToolWithDetails[], storage: NoteVi )) ) for (const [tool,$tool,$info,$checkbox] of toolsWithDetailsAndCheckboxes) { - const getToolName=():HTMLElement=>{ + const getToolName=():(string|HTMLElement)[]=>{ if ($tool) { - const $name=makeElement('span')()(tool.name) - if (tool.title!=null) $name.title=tool.title - return $name + return [tool.name] } else { const $name=makeElement('s')()(tool.name) $name.title=`incompatible with current server` - return $name + return [$name] } } + const getToolDescription=():(string|HTMLElement)[]=>{ + if (tool.title==null) return [] + return [` `,makeElement('small')()(tool.title)] + } $checkbox.oninput=()=>{ toggleTool(tool,$tool,$info,$checkbox) updateAllCheckbox() } $dialog.append( - makeDiv('input-group','regular')(makeLabel()( - $checkbox,` `,getToolName() - )) + makeDiv('input-group','one-tool')(makeLabel()( + $checkbox,` `,...getToolName() + ),...getToolDescription()) ) } updateAllCheckbox()