luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show sort direction in sort menu

Browse source
This commit is contained in:
Chen-I Lim 2020-10-12 09:29:49 -07:00
parent c6a0f7f3e9
commit 187df20be7
4 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/components/boardComponent.tsx
View file

@ -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) => {

2
src/client/components/tableComponent.tsx
View file

@ -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) => {

6
src/client/menu.ts
View file

@ -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) {

16
src/static/images.css
View file

@ -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;
}