docs: revised the represented file feature page (#26018)

* docs: revised the represented file feature page

* docs: fixed mentions, updated screenshot to be more consistent
This commit is contained in:
Antonio 2020-10-26 09:45:45 +02:00 committed by GitHub
parent d4191c4a26
commit ecb758dae5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 12 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -1,28 +1,45 @@
# Represented File for macOS BrowserWindows # Represented File for macOS BrowserWindows
On macOS a window can set its represented file, so the file's icon can show in ## Overview
the title bar and when users Command-Click or Control-Click on the title a path
popup will show.
You can also set the edited state of a window so that the file icon can indicate On macOS, you can set a represented file for any window in your application.
whether the document in this window has been modified. The represented file's icon will be shown in the title bar, and when users
`Command-Click` or `Control-Click`, a popup with a path to the file will be
__Represented file popup menu:__ shown.
![Represented File][represented-image] ![Represented File][represented-image]
> NOTE: The screenshot above is an example where this feature is used to indicate the currently opened file in the Atom text editor.
You can also set the edited state for a window so that the file icon can
indicate whether the document in this window has been modified.
To set the represented file of window, you can use the To set the represented file of window, you can use the
[BrowserWindow.setRepresentedFilename][setrepresentedfilename] and [BrowserWindow.setRepresentedFilename][setrepresentedfilename] and
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs: [BrowserWindow.setDocumentEdited][setdocumentedited] APIs.
## Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file:
```javascript ```javascript
const { BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow() const win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd') win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true) win.setDocumentEdited(true)
})
``` ```
After launching the Electron application, click on the title with `Command` or
`Control` key pressed. You should see a popup with the file you just defined:
![Represented file](../images/represented-file.png)
[represented-image]: https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png [represented-image]: https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png
[setrepresentedfilename]: ../api/browser-window.md#winsetrepresentedfilenamefilename-macos [setrepresentedfilename]: ../api/browser-window.md#winsetrepresentedfilenamefilename-macos
[setdocumentedited]: ../api/browser-window.md#winsetdocumenteditededited-macos [setdocumentedited]: ../api/browser-window.md#winsetdocumenteditededited-macos