COOLDays 2022 - Berlin

This year Collabora Productivity organized hybrid conference in Berlin. I've participated virtually by presenting video with recent improvements in JSDialogs which provides dialogs knwon from the LibreOffice for Collabora Online. Second talk was a short case study / tutorial how to add new component based on a mentioned framework.

New formulabar in Collabora Online

I still continue conversion of various UI components in Collabora Online to "native" HTML widgets. This helps us to get better user experience especially on touch / mobile devices. This time I converted formulabar which is used to edit data in cells in the spreadsheets.

Previous "tunneled" approach had some disadvantages like blurry look under some conditions and cursor position setup depending on a pixel based coordinates. Now it become edit field which is rendered by the browser - so we have always crisp text. Position of the carret is represented as a logical value and also handled by the browser - so on touch devices it is much easier to type.

Here you can see how it looks on a smartphone:

Sidebar converted to „native” HTML controls

In the past I’ve converted sidebar into contextual menus for mobile version of Collabora Online. Since that time I was waiting for a moment when it will be possible to do similar thing for the desktop version of Collabora Online, the one that you use in the browser on your laptop. It is a good step to make UI unified and more convenient for a user.

In the new approach we use HTML controls with „native” listboxes and spinfields instead of pictures generated by the server. The data transfer from the server to the browser for fields invalidation should be reduced as we don’t have to send images. Widgets can be now styled using the same CSS like other UI components what will improve look of the sidebar. Thanks to the conversion for a desktop I also improved the mobile menus and did few optimizations.

Sidebar is still under development but looks promising:

Hack Week - Browsersync integration for Online

Recently my LibreOffice work is mostly focused on the Online. It's nice to see how it is growing with new features and has better UI. But when I was working on improving toolbars (eg. folding menubar or reorganization of items) I noticed one annoying thing from the developer perspective. After every small change, I had to restart the server to provide updated content for the browser. It takes few seconds for switching windows, killing old server then running new one which requires some tests to be passed.

Last week during the Hack Week funded by Collabora Productivity I was able to work on my own projects. It was a good opportunity for me to try to improve the process mentioned above.

I've heard previously about browsersync so I decided to try it out. It is a tool which can automatically reload used .css and .js files in all browser sessions after change detection. To make it work browsersync can start proxy server watching files on the original server and sending events to the browser clients if needed.

What is the advantage? Developer tools in the browser are not good enough?

• Changes tracked by git - no need to copy changes from the browser's developer tools to the source files
• You can setup testing matrix with all apps (writer, calc, impress) and all is reloaded instantly at one time (even on other devices like tablet or smartphone)
• Fast prototyping

Disadvantages

• You have to remember to run syntax tests before commiting the changes

To integrate browsersync I needed to do some build system changes. First, all static files are served from 'loleaflet/dist' directory. These files are not the original sources but copies. I modified the Makefiles to create symlinks instead if the browsersync is activated. Thanks to that we can modify sources tracked by git and proxy can detect changes.

To try it out on your own:

1. Delete your 'loleaflet/dist' folder or
   make clean
   you might need to delete generated 'Makefile' if repository was used before
2. Install browsersync:
   npm install -g browser-sync
3. Run 'configure' script with additional --enable-browsersync argument
4. Run server with:
   LOOL_SERVE_FROM_FS=1 make run
5. In the other console run browsersync:
   make sync-[writer|calc|impress]

More information can be found in: 'loleaflet/README'

In the video below you can see how it works:

Next step will be to allow browsersync usage with cloud storage integrations like richdocuments, I noticed also some issues with access from other devices (app is still using original server for some resources).

Latest improvements in PPTX support - Tirana, LiboCon 2018

My slides, the LibreOffice conference 2018:

Highlight colors customization for Calc

In Calc it is possible to activate "Value Highlighting" mode (Ctrl + F8). When activated, Calc displays cell contents in different colors, depending on type. By default Text cells are formatted in black, formulas in green, number cells in blue, and protected cells are shown with light grey background, no matter how their display is formatted. There was no possibility to change default colors what could be a problem for a color blind person. During my work for Collabora Productivity I introduced new entries to the "Application colors" tab in Calc options to fix this issue:

Watermark for LibreOffice Writer

Recently I was working on Watermark feature for LibreOffice Writer. In case of TSCP Classification it was possible to add "Confidential" watermark in the document background. I extended that with possibility to add custom text, font family, color, transparency level and angle. Additional dialog was introduced in the menubar under "Insert" > "Watermark...".

I improved also export and import for that kind of shapes from .dotx files. Now font-family is correctly loaded:

RTF import also was improved, before Watermark was visible as a plain text: