Design/How to Improve Dialogs

From The Document Foundation Wiki
Jump to: navigation, search

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 OS X 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.freenode.net! For building help, you can also contact ##libreoffice-dev connect via webchat.

Only the first time

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 Tools ▸ Options... ▸ LibreOffice ▸ User Data. 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
  • 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 ;-)
  • 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

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!