sheetjs/docs.sheetjs.com
1
Fork 5
Code Issues 1 Pull Requests 2 Projects Releases Wiki Activity

WIP: [Electron Demo] - Updating UX | Visual Design of the Demo. #38

Draft
syntaxbullet wants to merge 14 commits from syntaxbullet/docs.sheetjs.com:master into master
pull from: syntaxbullet/docs.sheetjs.com:master
merge into: sheetjs:master
Conversation 0 Commits 14 Files Changed 8 +923 -190
syntaxbullet commented 2025-04-28 19:39:54 +00:00
First-time contributor
Copy Link

The following is a pull request aiming to significantly improve the design and user-experience of the Electron demo.

This pull request builds on top of the existing functionality while enhancing the user experience in some key areas that substantially improve the usability and approach-ability of the demo.

  • A touch of color and higher contrast makes interact-able elements on the page easier to spot.
  • A loading state ensures that processing larger files doesn't make the user worry about the application potentially being frozen.
  • The application is now accessible, and screen-reader friendly, interaction states such as focus or dragover have clear visual indicators.
  • A collapsible allows for easier visual inspection of files with multiple worksheets.
  • File contents are rendered in a more visually appealing fully-responsive HTML table with headers matching the input file.
  • The application now features a small footer that includes links to relevant documentation, making it easier for users to gain deeper understanding of the inner workings.

Summary of Changes:

  • Add a stylesheet containing modern CSS for a clean and minimal look.
  • Implement a spinner (loader) for better UX when loading larger files.
  • Display loaded worksheets in a responsive HTML table.
  • Update the documentation to include instructions for the additional download of the stylesheet.

What still needs to be done

  • Ensure that the Documentation links in the footer open outside of the Electron WebView.
  • Update the documentation to include instructions on how to register the application as a valid "Open with" target for supported MIME types.
  • Update screenshots used in the documentation to match the final design.
### The following is a pull request aiming to significantly improve the design and user-experience of the Electron demo. This pull request builds on top of the existing functionality while enhancing the user experience in some key areas that substantially improve the usability and approach-ability of the demo. - A touch of color and higher contrast makes interact-able elements on the page easier to spot. - A loading state ensures that processing larger files doesn't make the user worry about the application potentially being frozen. - The application is now accessible, and screen-reader friendly, interaction states such as `focus` or `dragover` have clear visual indicators. - A collapsible allows for easier visual inspection of files with multiple worksheets. - File contents are rendered in a more visually appealing fully-responsive HTML table with headers matching the input file. - The application now features a small footer that includes links to relevant documentation, making it easier for users to gain deeper understanding of the inner workings. **Summary of Changes**: - [x] Add a [stylesheet](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/compare/master...syntaxbullet/docs.sheetjs.com:master#diff-ec331e9564094ffb483f7fae6b53c781b6c9bc1b) containing modern CSS for a clean and minimal look. - [x] Implement a spinner (loader) for better UX when loading larger files. - [x] Display loaded worksheets in a responsive HTML table. - [x] Update the documentation to include instructions for the additional download of the stylesheet. **What still needs to be done** - [x] Ensure that the Documentation links in the footer open outside of the Electron WebView. - [x] Update the documentation to include instructions on how to register the application as a valid "Open with" target for supported MIME types. - [ ] Update screenshots used in the documentation to match the final design.
syntaxbullet added 1 commit 2025-04-28 19:39:55 +00:00
syntaxbullet added 1 commit 2025-04-30 11:54:14 +00:00 
refactor: replace tabs with `details` element, hide dropzone on file-uploads.
syntaxbullet added 2 commits 2025-04-30 16:13:46 +00:00
syntaxbullet added 1 commit 2025-04-30 18:16:06 +00:00
syntaxbullet added 1 commit 2025-04-30 18:55:46 +00:00
syntaxbullet added 1 commit 2025-05-01 10:15:18 +00:00
syntaxbullet added 1 commit 2025-05-01 10:38:50 +00:00
syntaxbullet added 1 commit 2025-05-01 10:51:46 +00:00
syntaxbullet added 3 commits 2025-05-02 16:35:28 +00:00
syntaxbullet added 1 commit 2025-05-03 13:53:20 +00:00
sheetjs reviewed 2025-05-03 20:07:08 +00:00
docz/docs/03-demos/19-desktop/01-electron.md Outdated
@ -196,3 +205,3 @@
```
This method was renamed to `showSaveDialogSync` in Electron 6.
### Working with OS level file open events.
sheetjs commented 2025-05-03 20:07:08 +00:00
Owner
Copy Link

rework the flow so that you start with "the app can respond to open-with events" and then discuss how installers can register for the file extensions

rework the flow so that you start with "the app can respond to open-with events" and then discuss how installers can register for the file extensions
sheetjs reviewed 2025-05-03 20:07:46 +00:00
docz/docs/03-demos/19-desktop/01-electron.md Outdated
@ -139,3 +164,4 @@
return XLSX.readFile(result.filePaths[0]);
}
```
The xslx package here is being proxied from the main process via the bridge API.
sheetjs commented 2025-05-03 20:07:46 +00:00
Owner
Copy Link

it's XLSX. Move this sentence so that it flows with the previous codeblock (since the openFile comment references the next one)

it's `XLSX`. Move this sentence so that it flows with the previous codeblock (since the `openFile` comment references the next one)
sheetjs reviewed 2025-05-03 20:10:56 +00:00
docz/docs/03-demos/19-desktop/01-electron.md
@ -42,3 +42,2 @@
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
imported from the main or the renderer thread.
Electron uses a multi-process architecture, with the main process handling system level operations and I/O, and the renderer process handling UI and web content.
sheetjs commented 2025-05-03 20:10:56 +00:00
Owner
Copy Link

The original sentence linking to the installation guide must be retained in some form. Maybe add a sentence that says Even if you can technically import from the renderer thread, it is discouraged.

The original sentence linking to the installation guide must be retained in some form. Maybe add a sentence that says Even if you can technically import from the renderer thread, it is discouraged.
sheetjs reviewed 2025-05-03 20:17:57 +00:00
docz/static/electron/package.json
@ -24,1 +23,4 @@
"electron": "36.1.0",
"electron-builder": "^26.0.12"
},
sheetjs commented 2025-05-03 20:17:57 +00:00
Owner
Copy Link

no blank lines

no blank lines
syntaxbullet added 1 commit 2025-05-08 18:04:50 +00:00
This pull request is marked as a work in progress.
This branch is out-of-date with the base branch
View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u master:syntaxbullet-master
git checkout syntaxbullet-master

Merge

Merge the changes and update on Gitea.
git checkout master
git merge --no-ff syntaxbullet-master
git checkout master
git merge --ff-only syntaxbullet-master
git checkout syntaxbullet-master
git rebase master
git checkout master
git merge --no-ff syntaxbullet-master
git checkout master
git merge --squash syntaxbullet-master
git checkout master
git merge --ff-only syntaxbullet-master
git checkout master
git merge syntaxbullet-master
git push origin master
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
bug

Something isn't working

  
documentation

Improvements or additions to documentation

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
question

Further information is requested

  
wontfix

This will not be worked on

No Label
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: sheetjs/docs.sheetjs.com#38
No description provided.
Delete Branch "syntaxbullet/docs.sheetjs.com:master"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?