native sidebar

[Andreas-Kainz]

How is it possible to bring the LibO sidebar to online. Is it possible to use the nextcloud sidebar or at least a similar layout and add there the different sidebars. I would support with the UI related stuff if there is some code available.

[pedropintosilva]

the sidebar is also present here or do you mean to have the sidebar not rendered via html canvas but instead via normal html elements?

In terms of using the NC sidebar I think that would be impossible because it is already used for many other things within NC (document info, sharing , talk etc) and also it could originate other conflicts with other file hosting services or for instance anyone using CODE with a custom/very specific storage solution or even without one.

[Andreas-Kainz]

The sidebar is very useful and I like it a lot in LibO but I'm not sure if 1. COOL need it and 2. it would be a good solution there (as long as there is no native sidebar with real html elements there).

[Ashod]

Hi @DarkknightAK,

I'm not sure I understand what the suggestion is, frankly. Apologies if I missed your point.

As you are surely aware, the Sidebar is already available in Online and fully functional for all document types.

You seem to suggest we use the NextCloud sidebar to show the LO sidebar (instead of having the sidebar inside the Online iframe), but I don't see how that is an improvement for the user. Remember, NextCloud is not the only integration for Online: there are many others out there. So we cannot support different solutions for each integration--that just doesn't scale and harms user experience.

Regarding your comment, after reading it several times, I still read it as a direct contradiction with the description of this issue. You say the sidebar is "very useful and I like it a lot" but you aren't sure if COOL need it? And you aren't sure it would be a good solution in COOL? Meaning you think we should remove it ?

Again, sorry if I missed your point, but I'm not sure if you are saying we should remove the sidebar, or merge it into the NextCloud sidebar, or something else. Happy to read a clarification.

Thanks for your suggestions.

[Andreas-Kainz]

the main topic is that the sidebar is now available as "stream" from LibO, which cause some problems:

• sidebar is slow check Font Name drop down
• sidebar didn't look good (icons are blured, ...)

=> the only usefull solution is to make the sidebar native.

[kendy]

@DarkknightAK : Do I get it right that you'd like to work on the JS implementation of the sidebar, ie. that instead of the images routed from the core, we'd use the same technique as we do on mobile phones - the content of the sidebar is streamed as JSON, and then we render it via JS, and route the actions back to the core?

If that's correct, would be awesome to have you on that! I hope @eszkadev would be able to point you what code to enable so that you get the JSON description of the content of the sidebar, so that you can create the HTML representation of that via JavaScript...

[eszkadev]

To get native sidebar we need three things: 1) enable sending the JSON with UI description in desktop case (now it is mobile only) - easy hack rework the code to use also normal notifier: https://opengrok.libreoffice.org/xref/core/sfx2/source/sidebar/SidebarDockingWindow.cxx?r=f659ec61#80 and also: https://opengrok.libreoffice.org/xref/core/sfx2/source/sidebar/SidebarController.cxx?r=69861703#1237 2) disable building the sidebar current way - easy hack remove the code to launch sidebar in LokDialog: https://opengrok.libreoffice.org/xref/online/loleaflet/src/control/Control.LokDialog.js?r=f7f4464b#320 3) create builder which will build UI from received JSON - easy hack to get something visible, harder to make it pretty :) when received JSON create builder and build UI: https://opengrok.libreoffice.org/xref/online/loleaflet/src/layer/tile/TileLayer.js?r=26fc803a&mo=32051&fi=1041#1027 for first testing I recommend to use existing NotebookbarBuilder so use existing call: this._map.fire('notebookbar', msgData.children[2]); Later it will be needed to create similar things like Control.Notebookbar.js (container) and Control.NotebookbarBuilder.js (builder) to correctly layout the stuff (rework build function)

[nikslor]

Just my two cents: having a native sidebar in the iOS app case would be a huge win.

[tml1024]

What do people mean when they say "native" here? At least, from the point of view of the iOS (and Android?) apps, something done in HTML inside the WebView is not really native. But I suspect that is what the original commenter meant, HTML controls (Edit: I mean things painted with JS and CSS, not really "HTML" controls), while Nicolas perhaps meant native iOS controls.

[mmeeks]

I expect it to mean rendered natively by the browser using JS/CSS for the widgets (wherever possible) =) and not the (far worse) and non-re-usable problem of using native iOS widgets - that's a huge task. Just getting the sidebar to not look quite so different would be good, and allow us to theme more aggressively elsewhere too =)

[nikslor]

Ah yes sure, I meant JS/CSS - sorry I was imprecise in my last comment.

If the sidebars (not only in writer, but also in calc and impress) could be implemented in JS/CSS (like the notebookbar) that would eliminate multiple (if not lots) of UX issues we currently have (at least in the iOS/iPad case). I believe, that the ChromeOS app would benefit from that as well (to a lesser degree also normal online - but there one usually uses a mouse, so it's not as big of an issue).

[tml1024]

Nicolas: OK. (But if there were resources to "waste" on it, surely real native iOS UIKit controls would be the best?)

[nikslor]

Agreed @tml1024 :)

But for now, HTML/browser widgets would already be a nice improvement. An incomplete list of things HTML/browser widgets would improve:

• writer sidebar: colors in the color picker(s) often not fully visible GH #414
• multiple lists not scrollable with a finger (e.g. the animation list in impress), see TDF #129386

[Andreas-Kainz]

Native Sidebar is already available.