8 Comments

GSOC – Template Dialog UI

Hello all, my name is Rafael, im from Venezuela, this year i got selected by the libreoffice folks to work in the redesign of the UI for the Template Picking dialog as a part of the GSOC program sponsored by google. My mentor for this project is Cédric Bosdonnat.

The task consist of implementing a new interface for managing templates in libreoffice, the design was done by libreoffice designers team, you can check it here. The scope of the project can be summarized as follow:

Simplify the dialog
Make use of the preview images within the zipped document
Easily add and remove templates
Search
Show online templates as well as local ones

So how were suppose to use the dialog??? Its very simple, just keep reading

Opening

To open a template, simply click on its thumbnail.

Selecting

To select a template using a mouse, click within the checkbox that appears on hover. Clicking the checkbox of another template causes it to be added to the selection. To unselect a template, click its checkbox again.
Alternatively, the user may push the “Selection mode” button on the right of the tab bar. Under selection mode, the user can simply click a template’s thumbnail or title to select it. To exit selection mode, the user can click the “Selection mode” button again.

Creating

To create a template, the user would push the “Create a template” button in the toolbar, which would trigger a menu with filetype options.

Importing

To import a template, the user would push the “Import a template” button in the toolbar, which would launch a file browser dialog.

Folders

Folders would appear as a floating overlay.
To move a template to a folder, either select the folder and push “Move to folder” or drag the template’s thumbnail onto the folder thumbnail or onto the “Move to folder” menu.
To remove a template from a folder, select the template and push the delete toolbar button.
To create a folder, either select a template and, under the “Move to folder” menu, choose “New folder”, or drag a template’s thumbnail onto another template’s thumbnail.
To rename a folder, simply click its name on the folder overlay.

Action Overflow

The action overflow (triggered by the icon with three squares) would house a “Sort by” menu and an “Options” button. The “Sort by” menu would allow the user to sort by name or date.

Here are some screenshots of the current progress