optimize the style and interaction of MainView/MultiSelectionsPickerV…#2
optimize the style and interaction of MainView/MultiSelectionsPickerV…#2thomfang wants to merge 1 commit intoschl3ck:mainfrom
Conversation
| }, [content]) | ||
|
|
||
| return ( | ||
| <NavigationStack> |
There was a problem hiding this comment.
I thought that I have to include a NavigationStack at the root of a component when the component is used in Navigation.present or as target of a NavigationLink. Is this not the case?
There was a problem hiding this comment.
Navigation.present needs it but NavigationLink doesn’t need it anymore
|
I have to test the changes when I have access to a computer and then I'll report back. |
| setContent([folder, ...content]) | ||
| } | ||
| action={() => { | ||
| dismiss() |
There was a problem hiding this comment.
When selecting a file more than one folder deep it also dismisses the main view. Although this might never be needed, it would be nice to fix it now. You never know.
Selecting a file just one folder deep works.
| <NavigationLink | ||
| destination={ | ||
| <Folder | ||
| key={"libDestination"} | ||
| path={Script.directory} | ||
| select="file" | ||
| onSelection={(p) => { | ||
| setFrom(p) | ||
| }} | ||
| tip={"Select a file to link"} | ||
| /> | ||
| } | ||
| > | ||
| <Text>Lib</Text> | ||
| <Spacer /> | ||
| <Text>{from.replace(Script.directory + "/", "")}</Text> | ||
| <Image | ||
| systemName="chevron.right" | ||
| foregroundStyle="tertiaryLabel" | ||
| /> | ||
| </HStack> | ||
| <HStack | ||
| contentShape={"rect"} | ||
| onTapGesture={async () => { | ||
| Navigation.present( | ||
| <Folder | ||
| path={parentFolder} | ||
| select="folder" | ||
| onSelection={(p, dismiss) => { | ||
| setTo(p) | ||
| dismiss() | ||
| }} | ||
| cancel={dismiss} | ||
| />, | ||
| ) | ||
| }} | ||
| <HStack> | ||
| <Text>Select a Lib File</Text> | ||
| <Spacer /> | ||
| <Text | ||
| foregroundStyle={"secondaryLabel"} | ||
| font={"callout"} | ||
| >{from.replace(Script.directory + "/", "")}</Text> | ||
| </HStack> | ||
| </NavigationLink> | ||
| <NavigationLink | ||
| destination={ | ||
| <Folder | ||
| key={"targetDestination"} | ||
| path={parentFolder} | ||
| select="folder" | ||
| topLevel | ||
| onSelection={(p) => { | ||
| setTo(p) | ||
| }} | ||
| /> | ||
| } | ||
| > | ||
| <Text>Target</Text> | ||
| <Spacer /> | ||
| <Text>{to.replace(parentFolder + "/", "")}</Text> | ||
| <Image | ||
| systemName="chevron.right" | ||
| foregroundStyle="tertiaryLabel" | ||
| /> | ||
| </HStack> | ||
| <HStack> | ||
| <Text>Select a Target Folder</Text> | ||
| <Spacer /> | ||
| <Text | ||
| foregroundStyle={"secondaryLabel"} | ||
| font={"callout"} | ||
| >{to.replace(parentFolder + "/", "")}</Text> | ||
| </HStack> | ||
| </NavigationLink> |
There was a problem hiding this comment.
Why a NavigationLink? Because the way I styled it? If yes, then what would be an appropriate style for a separate sheet?
There was a problem hiding this comment.
Create/edit something should use a sheet/fullScreenCover page, and the details/subcategory page should use NavigationLink.
There was a problem hiding this comment.
I assume this is an Apple style guideline, but when selecting a file or folder in some third-party apps via the iOS built-in selection dialog it is also a sheet.
Also when selecting a file or folder and then to return to the main view we need to dismiss each folder. With a sheet we only need to dismiss the sheet which is a much smoother animation in my opinion.
Because of these arguments I think a sheet is better.
There was a problem hiding this comment.
Yes, it is an Apple style guideline. You can implement it depending the ideal UX.
According to the usage scenario you mentioned, you can separate the selection file and the selection directory into two pages, which will be clearer, and you don't need to make too many conditional judgments on the interaction.
My code is just a reference, maybe I don't have a good understanding of your functional intent, you can take a look at the reference meaningful code.
Cherry pick UI improvements from #2 without using `<NavigationStack>`
|
I've cherry picked your improvements without using |
2 participants
I optimized the style of the
MainViewpage and fixed a bug where the entire page would close when selecting either the Lib file or Target folder.Additionally, I made some style adjustments to the
MultiSelectionsPickerView.