Design/How to Improve Dialogs
TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate
All the dialogs in LibreOffice now use dynamic layout, and are using the .ui files from Glade - the same format (and tool) that is used in Gtk+. Glade exists for Linux and Windows; there are older binaries for macOS too.
Setup
Building LibreOffice is not necessary in order to improve dialogs, but it can help you - you can immediately play with your changes in the dialogs. Please don't be afraid of this step - the building instructions are step-by-step guides.
But in if you prefer to avoid it, just install a Daily build, the following instructions will lead you through the process.
Should you have any trouble, please ping us on the #libreoffice-design channel on irc.libera.chat! For building help, you can also contact ##libreoffice-dev IRC://.
Only the first time
- Make sure that you can use git - the version control system that manages LibreOffice sources
- On Linux, install it using your favorite package manager
- On Windows, download Cygwin's setup-x86_64.exe, run it like
setup-x86_64.exe -P git
and click through the setup process. Then double-click the Cygwin's icon, and type the various git commands (described below) into that.
- Clone the git repository, see https://www.libreoffice.org/about-us/source-code/
- Change directory to your home directory
git clone https://gerrit.libreoffice.org/core libreoffice
- Download and install a daily build
- Install Glade
- On Linux, use the package manager
- On Windows or macOS, use a binary from https://glade.gnome.org/
- Setup gerrit access so that you can directly push your changes for review
Once per session before you start editing the dialogs
- Update the sources in the directory where you cloned them
git pull -r - Find out where your daily build is installed, and type in the terminal (and hit Enter):
export GLADE_CATALOG_SEARCH_PATH=path to the installation/share/glade
Editing a dialog
Let's say that you are unhappy with the dialog ▸ ▸ ▸ . To modify it, you need to do:
- Find the .ui file that you want to edit
- First, locate a reasonably distinctive string in the dialog you want to edit
(eg. Use data for document properties - you can see that in the dialog) - Change directory to the git tree you cloned (eg. libreoffice in your home directory, see above)
git --no-pager grep 'Use data for document properties' -- '*.ui'- This will write you the location of the .ui file, in this case cui/uiconfig/ui/optuserpage.ui
- First, locate a reasonably distinctive string in the dialog you want to edit
- Now you start glade, and edit the dialog
glade cui/uiconfig/ui/optuserpage.ui- Please make sure that you don't change the id's of the widgets!
That means, when you want to move the widget somewhere, cut it from the old location, and paste to the one (don't try to copy first, and delete later). - Make sure the dialog resizes nicely - try to resize it in glade, and see that the various labels, buttons and other widgets resize or move as you wish
- Don't forget to save your work ;-)
- Please make sure that you don't change the id's of the widgets!
- When you are happy with the changes, commit the change locally, and push to gerrit:
- The following will commit your change locally. You need to provide a descriptive message, like "Improved User Data tab page to resize nicely."
git commit -a - The following will push your commit for review:
git push origin master:refs/for/master
- The following will commit your change locally. You need to provide a descriptive message, like "Improved User Data tab page to resize nicely."
You are done with your modification, congratulations!
Again - should you have any problems or questions, we are happy to see you on the IRC as described above!