show tool descriptions in toolbar settings

AntonKhorev · Sep 28, 2023 · 6a54bd0 · 6a54bd0
1 parent 547eed2
commit 6a54bd0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git 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
@@ -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()