feat: tool drawer for edit and live-reload buttons #1164
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dairiki
force-pushed
the
feat.tool-drawer
branch
11 times, most recently
from
f2d265a
to
3449b07
Compare
dairiki
force-pushed
the
feat.tool-drawer
branch
from
be9edb4
to
cf73006
Compare
dairiki
force-pushed
the
feat.tool-drawer
branch
2 times, most recently
from
e25d101
to
e7dd561
Compare
dairiki
force-pushed
the
feat.tool-drawer
branch
from
8174297
to
de29832
Compare
dairiki
added a commit
to dairiki/lektor-website
that referenced
this pull request
Nov 6, 2023
This replaces the *edit pencil* on HTML artifacts served by the admin server with "tool drawer". The tool drawer contains an edit button (which takes the place of the edit pencil), as well as a toggle button that can be used to disable live-reload (see lektor#1027) for the window. If the tool drawer is obscuring part of the HTML page that one would like to look at or click on, the drawer may be dragged vertically to reposition it. It may also be (mostly) hidden off screen to minimize its visual impact.
Using a real link (`<a href="...">`) instead of a button with onclick handler allows the user to, e.g., open a new window with a live-preview by middle or right clicking on the button. Anyway, since the "button" leads to a new URL outside of the admin app, it's the right thing to do. E.g. see https://css-tricks.com/buttons-vs-links/.
Strict mode causes everything to be rendered twice. (I noticed this because GlobalActions was firing off two request for /previewinfo for every page change.) This is not particularly efficient, and is probably not appropriate for the production build.
The `--no-reload` option was add in PR lektor#1027 (c38596a). It disables the live-reload feature globally. Since this PR adds the ability to disable live-reload on a per-window basis, the global option no longer seems necessary.
dairiki
force-pushed
the
feat.tool-drawer
branch
from
9680d22
to
8589078
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This replaces the edit pencil on HTML artifacts served by the admin server with "tool drawer".
The tool drawer contains an edit button (which takes the place of the edit pencil), as well as a toggle button that can be used to disable live-reload (see #1027) for the window.
If the tool drawer is obscuring part of the HTML page that one would like to look at or click on, the drawer may be dragged vertically to reposition it. It may also be (mostly) hidden off screen to minimize its visual impact.
Issue(s) Resolved
The "edit pencil" can obscure part of the web page
Sometimes, e.g. when working on a site that has a hamburger "site menu" button in the upper right corner of the page, Lektor's "edit pencil" button (also located in the upper right corner of the page) will obscure part of the page that one might like to see (and be able to click).
This solves that problem, since the tool drawer may be dragged to a different position.
There's no per-window control to disable live-reload
When editing a page, in order to be able to easily compare "before" and "after" views of the page, one might want to have two preview windows open: one with live-reload enabled and one with live-reload disabled. The live-reload toggle button added in this PR allows for that.
Related Issues / Links
Doc PR: lektor/lektor-website#380
Description of Changes