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:

Native widgets on mobile for Online - prototype

In the desktop suite we have the sidebar which is a context dependant feature improving user performance eg. in chart editing. Unfortunately it's not the perfect UI for a mobile clients, so the new concept is to tunnel the UI description to the browser and create native widgets there. I did some prototyping work in this area and I can see first results:

As we can see all basic widgets and layout are preserved. All sections are visible, it will be possible to create an UI where user will see only one section at time for better mobile experience. Complex controls like color selectors are not available yet (I'm going to use our color selector present in the toolbar). The development takes place in the feature branch.

LibOCon 2019 Almeria - How to debug the Online conveniently

Szymon Kłos showing how to debug conveniently 💪 #collaboraonline #libreoffice #libreofficeonline @LibOCon #debug pic.twitter.com/EXrqk0WvCM

— Collabora Office (@CollaboraOffice) 13 września 2019

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:

AutoText import from .dotx and .dotm files

In the LibreOffice Writer user can prepare some pieces of documents which can be reused later. That feature is called AutoText and is accessible using menubar (Tools - AutoText). In the AutoText dialog it is possible to manage existing entries and also import new ones from files.
So far only *.dot and *.doc file formats were supported for importing AutoText. Here was my first task at Collabora: to add .dotx and .dotm format support.

One template document can contain multiple AutoText entires. Each entry has own name and can consist of formatted text, text with graphics, tables or fields. To import new templates user need to open AutoText dialog (Tools - AutoText), select according category and from the "AutoText" menubutton choose "Import". File explorer will appear. In the file format listbox new entries were introduced: "Microsoft Word 2007-2013 XML" and "Microsoft Word 2007-2013 XML Template" for *.docx and *.dotx or *.dotm.

AutoText has own long name and shortcut. It is possible to insert AutoText after typing shortcut name into document and pressing F3.

Following GIF shows *.dotx import with complex content (table, shape, formatted text and fields):

LibreOffice conference 2016 - Brno

This year again I had the pleasure to attend in the annual LibreOffice conference. This time it was organized in Brno, Czech Republic on September 7-9th 2016.

The conference was very well organized. The conference venue was located in the modern campus of the Faculty of Information Technology at the Brno University of Technology. Every day we listened talks and participated in events on evenings. It was a good opportunity to meet my mentors and other GSoC students. One of the best things is that you can find out who is behind well known IRC nick :)

First day started with opening session and presentation of the state of the project. That day we also took part in HackNight - hacking together in the Red Hat office. My short talk was on the last day of the conference. There was a GSoC panel where we were able to present our projects. At the end we went sightseeing Brno.

I would like to thank sponsors, The Document Foundation and all organizers for a great event.

We also found out where will be organized next meeting.

See you next year in Rome!

GSoC 2016 - Infrastructure for defining toolbars via .ui (Glade) files - Final report

My all commits can be found here: https://cgit.freedesktop.org/libreoffice/core/log/?qt=author&q=eszkadev%40gmail.com

Tasks from my proposal

Done:

• Loading of different toolbar definitions in the Writer, Calc and Impress
• NotebookBar and Classic mode switching
• Mechanism to show/hide widgets depending on the context
• Priorities for widgets to allow dynamic hiding according to screen size
• Improved look of various widgets for their presentation in the toolbar

Not finished:

• Mechanism to add new tabs for the extensions
• Mechanism to customize the toolbar

Main changes

• Controls converted to be used outside sidebar:
  • character spacing popup [commit]
  
  • underline popup [commit]
  
  • number format popup [commit]
  
  • paragraph spacing [commit]
  
• Possibility to change icon size in the Sidebar and Notebookbar [commit] [commit]


• Sidebar panels converted to single widgets:
  • Slide transition [commit]
  
  • Animation [commit]
  
  • Table design [commit]
  
• Container with widget priorities [commit]
  • widget groups are collapsed when there is no enough space, user can access them from a dropdown menu
  
  
  
  
  
• Multiple Notebookbar implementations [commit]
  • user can switch to other view using menubar
  
  
  
• Toolbar modes - tdf#101249 [commit]
  • User can switch between different modes: default, single toolbar, sidebar and notebookbar
• Created custom widgets for better look:
  • SmallButton - button with reduced width [commit]
  • BigToolBox - container for large buttons with dropdown menu [commit]
  
  
  
  
  
  • NotebookbarToolBox - container with possibility to switch icon size to use in the Notebookbar
  
  
  
  
  
  • NotebookbarTabControl - TabControl with context dependent tabs and the file popup menu
  

LibreOffice conference – Aarhus 2015

This year I attended at my first conference - The LibreOffice Conference, which took place from the 23rd to the 25th of September in Aarhus, Denmark.

Aarhus is a beautiful city with a lot of impressive buildings. One of them is a modern building used as a public library, called Dokk1. In this place we spent most of our time.

I really enjoyed the conference. It was very good opportunity to listen interesting talks and meet other open source enthusiasts.

Whole conference was very good organized. Except presentations we could take part in a hackfest, community dinners and visit Aarhus University. Especially I liked tasty food :)

Thanks to The Document Foundation and sponsors for this conference. It was fantastic experience. See you next year in Brno!

GSoC 15 - Remote Files Dialog

The midterm passed some time ago, I'm near finishing implementation of the first part of my Google Summer of Code project. This is a good moment to present results of my work.

I'm working on improving user experience while using remote services in LibreOffice. The main part of this task is implementation of simple dialog used to exploring online document storages. I must also simplify process of creating new ones. I based my work on mockups from: https://docs.google.com/document/d/191XV116O7TQr5qzdou8JO1vNh5xXJtRujv8r07_SONE/edit

Connecting to the CMISs in LibreOffice was possible, but not visible to the average user. It was accessible only in custom LO file dialog which is turned off by default. I've created new remote file picker which can be opened from start center and toolbars.

1. Start Center with new entry, new dialog

2. Changes in Writer's toolbar: new "Open Remote" button and dropdown menu for "Save As" button

3. "Open remote file" entry below recent files

Remote Files Dialog layout

4. Remote Files Dialog

5. Split button with possible actions

6. Listbox with preconfigured services (type + name)

7. Breadcrumb with very long path, deeper folder (New Folder) was visited recently

On the top of windows we have section for manage connections. On the left side: listbox with preconfigured services. On the right side is placed split button which lets us add, edit or delete a service.
Below those controls we can see breadcrumb. The breadcumb could work in two modes: showing only current path, or second: showing also links to the deeper folders which we visited recently (for example when we went level up, this mode is set by default). When path is too long, on the beginning '…' is shown.
On the left side, dialog contains folder tree. When user opens new directory, automaticly proper node is selected. The dialog also contains standard file picker controls: file list, filter listbox and file name field.

Adding new service

The first field which user should fill is the type of service. Types are organized and sorted user-centric (apps, connections, protocols).

8. Organization of service types

Dialog’s complexity depends on the connection type:

9. Most simple: Google Drive

10. WebDAV

11. CMIS

Editing service
In the edit window user can change all data except type of service.

12. Edit window

Connecting
When user selects an entry from services dropdown, login dialog appears. User name is filled by default.
Password could be remembered for ever if user will check the checkbox. In one session it is always stored, user don't have to retype it again before closing LO. Before my changes, when user typed wrong password, it was stored too and was impossible to change. I fixed this bug.

13. Login dialog

TODO / topics for discuss

• change expanded folder icon in the folder tree
• "New folder" button in the save mode?
• change of "Open remote" icon in a toolbar ? (now is the same as regular open icon)
• "Open remote" entry below recent files and in the toolbar are both needed?
• should a delete button be in the edit window?
• In which mode should the breadcrumb work?