Custom Service Icons

[codyfish]

Hi It would be nice if one could use custom items for (custom webapps) I really like your app

[sonnyp]

It would be nice if one could use custom items for (custom webapps)

It's already possible, there's a "custom" icon with a yellow star.

I really like your app

Thank you

[sonnyp]

Ah, you were talking about icon, sorry I misunderstood.

[codyfish]

No problem. I could probably hardcode the svg into src/re.sonny.gigagram.services.gresource.xml.

[sonnyp]

Sure, I would like to have custom support though. If you'd like to have a try at it I'm happy to help.

The code to fetch/display icon is here https://github.com/sonnyp/gigagram/blob/master/src/tab.js#L46

You could start with editing by hand the settings of the app to add an icon path to the instances and use it if it is defined instead of the service icon.

[codyfish]

I'll try to look into it as soon as I have time

[sonnyp]

Might want to wait a bit, I'd like to rework how adding a tab works.

The plan is

• Get rid of builtin services/icons
• When adding a tab, the user will be presented with a simple browser and url bar to enter any URL after what he can login/navigate the app and press "Done" for the tab to be added with the current URL.
• Use the icon from the website if available
• Allow user to set a custom icon via url/file

[codyfish]

I just wanted to let you know that I managed to make it display custom icons. It still lacks a file selector and updating when editing the tab.

Your plan sees very good,especially for custom services, however I would probably keep some built-in services that can be quickly attached. A URL bar would also simplify testing a page, and pulling the icon from website would definitely simplify things.

Anyway, it was very educating as I have never written any desktop app in js before.

[sonnyp]

, however I would probably keep some built-in services that can be quickly attached

Yeah... I feel a bit uncomfortable with promoting specific services and having copyrighted material in the source code. However I agree that it would be a shame to remove quick access, an idea would be to re-introduce quick services via an optional remote web page.

Anyway, it was very educating as I have never written any desktop app in js before.

No worries it's not lost, we can already merge because I'm currently working on https://github.com/sonnyp/gigagram/pull/19 anyway so it'll take a while before the new plan. And even after the plan is completed we'll need custom icons, the code would also come handy for https://github.com/sonnyp/gigagram/pull/19 (to pick a icon for the deskop file) but let's focus on services for now.

Let me know if you're interested and I'm happy to help.

[codyfish]

Okay I get that issue, and the quickstart webpage is a great idea.

I am actually interested in contributing, even though I fear that my code might still be a little messy :D So far I have only written stuff like calculators and for my (now ex) schools website. The ulauncher plugin on my profile is the only real thing so far.

[sonnyp]

@codyfish no worries, we all start somewhere . Please open a pull request and I'll happily comment/review. Even if unfinished/messy/...

[sonnyp]

FYI I added a rudimentary/temporary icon choose for custom applications which you can use as inspiration https://github.com/sonnyp/gigagram/commit/e0b497f36b8901886369e2e257ebf5bf557ba85e for service custom icon.

It is temporary because I want to replace it with a custom widget that allow selecting a GTK theme icon name.

[codyfish]

Okay I'll open a pull request and try to work my changes into the new version. I managed to add a dialog, however the icon does still not update without a restart.

[sonnyp]

If you have any question you can ask them as comments on the PR. For "reactivity" you can use gsetting and bind. See how it is done for the tab name on https://github.com/sonnyp/gigagram/blob/master/src/tab.js#L45

instanceSettings.bind("name", label, "label", SettingsBindFlags.GET);

What it does is that everytime the name setting changes, it set the label property on label

[codyfish]

I've seen this, but I think that I would need to call a function on change in order to load and scale the icon correctly. I'll take another look at the documentation.

Edit: I found the "changed" (http://webreflection.github.io/gjs-documentation/Gio-2.0/Gio.Settings-changed.html) event, this should work!

[sonnyp]

https://github.com/sonnyp/gigagram/pull/29 - will probably make a bit more changes later

@codyfish thanks!

[sonnyp]

@codyfish I added you to the list of contributors, hope it's ok, tell me otherwise:

If you're interested, I think it would be great if the icon picker was an image button set with the current selection/value instead of a text field.

Like GNOME Settings > Details > user avatar but opens a FileChoserDialog with image preview if possible.

[codyfish]

Yeah for sure, thank you! I'll look into it.

[sonnyp]

@codyfish if you start working on it please let me know here or via a work-in-progress merge request. For "adding tab" (serviceDialog.js), the initial value of that "IconPicker" could be set with the favicon quite easily using https://gjs-docs.gnome.org/webkit240~4.0_api/webkit2.webview#method-get_favicon

[codyfish]

Thanks. As I do not use gnome, do you mean something like this: https://www.youtube.com/watch?v=COzYz3fyJZs, only less advanced?

[sonnyp]

@codyfish exactly!

Let's start small though, I think it should only open the dialog when clicking on it for now. Also I think the image should have a "button" style so it's clear it can be changed. Can easily be done with https://gjs-docs.gnome.org/gtk30~3.24.8/gtk.button#property-image

[codyfish]

Okay thanks, I'll see what I can do

[codyfish]

Sadly, Gtk.FileChooserButton does not seem to implement Button, therefore set_image() is not available. https://gjs-docs.gnome.org/gtk30~3.24.8/gtk.filechooserbutton I could either reinvent this button with an image or place the image next to the button somewhere. Do you have any other suggestions?

[sonnyp]

@codyfish that's what I meant in my previous message. Sorry I wasn't clear.

[sonnyp]

The way I saw this was to create a new widget with Gtk.Button + set_image as you suggest and use https://gjs-docs.gnome.org/gtk30~3.24.8/gtk.filechooserdialog on click.

[codyfish]

Okay I'll try that

[sonnyp]

I added support for fetching icon (and title) from web in https://github.com/sonnyp/gigagram/pull/34 .

There are 3 different possible choices now:

1. service "builtin" icon
2. web app icon
3. custom icon

It works like this: If 2, default to 2 otherwise default to 1. When clicking on the icon chooser allow 3.

ToDo:

• Icon chooser does not show 1
• The icon (and title) fetching from the web app should start after the dialog has open and we should show a animated spinner in the icon chooser (like Epiphany)
• The button that triggers the dialog "Done" should be disabled when the page is loading
• The button "Done" in the dialog should be disabled until fetching icon/title is done

[codyfish]

Seriously, great job! Icon fetching works perfectly and is really convenient!

[sonnyp]

Thanks!

"Icon chooser does not show 1" is fixed (for both services and applications) in https://github.com/sonnyp/Tangram/pull/35

The rest of ToDo is considered minor issues at the moment and I'll do them later