From 187df20be719c1c89cd86778e20e64f7b3c740a5 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 09:29:49 -0700
Subject: [PATCH] Show sort direction in sort menu

---
 src/client/components/boardComponent.tsx |  2 +-
 src/client/components/tableComponent.tsx |  2 +-
 src/client/menu.ts                       |  6 ++++--
 src/static/images.css                    | 16 ++++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 647090ee3..6456d8497 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -286,7 +286,7 @@ class BoardComponent extends React.Component<Props, State> {
 			return {
 				id: o.id,
 				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
 			}
 		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 3627bfddc..042f1319e 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -259,7 +259,7 @@ class TableComponent extends React.Component<Props, State> {
 			return {
 				id: o.id,
 				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
 			}
 		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
diff --git a/src/client/menu.ts b/src/client/menu.ts
index a79445fed..35f86763b 100644
--- a/src/client/menu.ts
+++ b/src/client/menu.ts
@@ -4,7 +4,7 @@ type MenuOption = {
 	id: string,
 	name: string,
 	isOn?: boolean,
-	icon?: "checked" | undefined,
+	icon?: "checked" | "sortUp" | "sortDown" | undefined,
 	type?: "separator" | "color" | "submenu" | "switch" | undefined
 }
 
@@ -59,7 +59,9 @@ class Menu {
 					if (option.icon) {
 						let iconName: string
 						switch (option.icon) {
-							case "checked": { iconName = "imageMenuCheck" }
+							case "checked": { iconName = "imageMenuCheck"; break }
+							case "sortUp": { iconName = "imageMenuSortUp"; break }
+							case "sortDown": { iconName = "imageMenuSortDown"; break }
 							default: { Utils.assertFailure(`Unsupported menu icon: ${option.icon}`) }
 						}
 						if (iconName) {
diff --git a/src/static/images.css b/src/static/images.css
index b2c1b2e84..4640988b5 100644
--- a/src/static/images.css
+++ b/src/static/images.css
@@ -19,6 +19,8 @@
 	min-height: 24px;
 }
 
+/*-- Menu images --*/
+
 .imageSubmenuTriangle {
 	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,35 75,50 50,65" style="fill:black;stroke:none;" fill-opacity="70%" /></svg>');
 	background-size: 100% 100%;
@@ -32,3 +34,17 @@
 	min-width: 24px;
 	min-height: 24px;
 }
+
+.imageMenuSortUp {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:8;" fill="none" stroke-opacity="50%"><polyline points="50,20 50,80" /><polyline points="30,40 50,20 70,40" /></svg>');
+	background-size: 100% 100%;
+	min-width: 24px;
+	min-height: 24px;
+}
+
+.imageMenuSortDown {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:8;" fill="none" stroke-opacity="50%"><polyline points="50,20 50,80" /><polyline points="30,60 50,80 70,60" /></svg>');
+	background-size: 100% 100%;
+	min-width: 24px;
+	min-height: 24px;
+}