Simplify export of Codecard

[meisenzahl]

Closes #8

[meisenzahl]

@danrabbit is there somewhere more detailed info how to use the portal?

I tried to use the GitHub search results as a guide. Unfortunately without success.

elementary/screenshot unfortunately also still uses the D-Bus interface.

[danirabbit]

I would recommend using LibPortal instead of implementing the interface yourself. LibPortal contains a demo app with a C implementation here: https://github.com/flatpak/libportal/blob/master/portal-test/gtk3/portal-test-win.c#L550

[danirabbit]

Just updating that we now have LibPortal docs on Valadoc https://valadoc.org/libportal/Xdp.Portal.take_screenshot.html

[meisenzahl]

It works now. But unfortunately, the experience for a user is not as pleasant now as it was before.

I like the fact that you have to share the screenshot with the app first. But unfortunately the user must now know how to configure the portal, because unfortunately neither via Xdp.ScreenshotFlags.NONE nor Xdp.ScreenshotFlags.INTERACTIVE can be controlled that only a screenshot of the app should be taken.

The screenshot taken with the portal also lacks the shadow of the window and thus unfortunately does not look as nice as the native variant.

D-Bus

Peek.2022-01-06.20-31.mp4

Portal (Xdp.ScreenshotFlags.NONE)

Peek.2022-01-06.20-32.mp4

Portal (Xdp.ScreenshotFlags.INTERACTIVE)

Peek.2022-01-06.20-33.mp4

[meisenzahl]

@danrabbit my favorite thing would be if the user experience was as intuitive as possible except for actively sharing the screenshot for the app.

Can we expand the portal to make it more enjoyable to use?

[danirabbit]

I think we're currently using the upstream XDG desktop portal for screenshot at the moment. There's an issue report here to have our screenshot app provide the portal: elementary/screenshot#140

I don't think the API provides a way to have an app automatically request a screenshot a specific window since sandboxed apps aren't really aware of other windows. My guess would be that since you're only rendering your own windows contents that probably a screenshot isn't the best way to do this. There's probably a better way to render the image that you want so that it doesn't include your app UI etc

[cassidyjames]

@meisenzahl I echo @danrabbit here; I don't think you actually need a screenshot of your app. Even though the trend of code screenshotting apps is to include the macOS-style window UI around the code, you could either fake something similar/simpler, or just exclude that and only compose an image of the code itself. Though of course writing the code to do so is more work than just taking a screenshot of your window for a similar outcome. 😅

Actually thinking about this, can't your app access its own contents and somehow capture that as an image? I don't think a portal should be necessary since it's your app screenshotting itself. 🤔

[meisenzahl]

Thank you very much for your advice! I now use Cairo to export the codecard.

@danrabbit @cassidyjames If you have some time, I would appreciate UX feedback on the screenshots below on margins and border radius 🙏

margin: 16
border radius: 8

light

dark

[cassidyjames]

@meisenzahl it's really up to you, but I might halve both? 8px margin and 4px border radius? I don't know if you're also able to add a subtle shadow or not, but I think generally the .card.rounded styles from the stylesheet are what I'd try to echo here.

[danirabbit]

In the stylesheet we usually use 6px border radius and 12px margin, but yeah I echo cassidy here that if you can use the styles from .card.rounded you'd get what's in the stylesheet automatically

[meisenzahl]

I was not aware of Granite.Drawing.BufferSurface, but refactored the code to use it. This also simplifies the addition of blur 😎

light

dark

Thank you very much for your feedback!

[danirabbit]

You might actually be able to simplify things even further using Gtk.StyleContext.render_background