From b43a151d174a70fc5f27a647665e29eac5541a05 Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Sat, 3 Jul 2021 01:12:54 +0200
Subject: [PATCH] Add buttons to move element order in a list

---
 src/app/schema/Octicon.ts    |  2 ++
 src/app/schema/renderHtml.ts | 16 ++++++++++++++--
 src/styles/nodes.css         | 23 ++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/app/schema/Octicon.ts b/src/app/schema/Octicon.ts
index b9b97989..5d5d08aa 100644
--- a/src/app/schema/Octicon.ts
+++ b/src/app/schema/Octicon.ts
@@ -1,4 +1,6 @@
 export const Octicon = {
+	chevron_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>',
+	chevron_up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>',
 	clippy: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>',
 	info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>',
 	issue_opened: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>',
diff --git a/src/app/schema/renderHtml.ts b/src/app/schema/renderHtml.ts
index a982e279..d0d38f42 100644
--- a/src/app/schema/renderHtml.ts
+++ b/src/app/schema/renderHtml.ts
@@ -88,7 +88,15 @@ export const renderHtml: Hook<[any, TreeProps], [string, string, string]> = {
 		let body = ''
 		if (Array.isArray(value)) {
 			body = value.map((childValue, index) => {
-				const removeId = props.mounter.onClick(() => path.model.set(path.push(index), undefined))
+				const onRemove = props.mounter.onClick(() => path.model.set(path.push(index), undefined))
+				const onMoveUp = props.mounter.onClick(() => {
+					[value[index - 1], value[index]] = [value[index], value[index - 1]]
+					path.model.set(path, value)
+				})
+				const onMoveDown = props.mounter.onClick(() => {
+					[value[index + 1], value[index]] = [value[index], value[index + 1]]
+					path.model.set(path, value)
+				})
 				const childPath = path.push(index).contextPush('entry')
 				const category = children.category(childPath)
 				const [cPrefix, cSuffix, cBody] = children.hook(this, childPath, childValue, props)
@@ -96,7 +104,11 @@ export const renderHtml: Hook<[any, TreeProps], [string, string, string]> = {
 					<div class="node-header">
 						${error(props.loc, childPath, props.mounter)}
 						${help(props.loc, childPath, props.mounter)}
-						<button class="remove" data-id="${removeId}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
+						<button class="remove" data-id="${onRemove}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
+						${value.length <= 1 ? '' : `<div class="node-move">
+							<button class="move" data-id="${onMoveUp}" ${index === 0 ? 'disabled' : ''}>${Octicon.chevron_up}</button>
+							<button class="move" data-id="${onMoveDown}" ${index === value.length - 1 ? 'disabled' : ''}>${Octicon.chevron_down}</button>
+						</div>`}
 						${cPrefix}
 						<label ${contextMenu(props.loc, childPath, props.mounter)}>
 							${htmlEncode(pathLocale(props.loc, childPath, `${index}`))}
diff --git a/src/styles/nodes.css b/src/styles/nodes.css
index 5548f196..00f74334 100644
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -118,7 +118,7 @@
   background-color: var(--node-background-input);
 }
 
-.node-header > button {
+.node-header button {
   font-size: 18px;
   padding: 0 9px;
   line-height: 1.94rem;
@@ -203,6 +203,27 @@ button.remove {
   border-bottom-right-radius: 6px;
 }
 
+.node-move {
+  display: flex;
+  flex-direction: column;
+  width: 34px;
+}
+
+button.move {
+  height: 50%;
+  border: none;
+  display: flex;
+}
+
+button.move + button.move {
+  border-top: 1px solid var(--node-border);
+}
+
+button.move:disabled {
+  cursor: unset;
+  fill: var(--node-border);
+}
+
 .node-icon {
   border: none;
   position: relative;