The “add/edit vocabulary” window is shown to the user when he right-clicks inside a shared space and selects the option “add vocabulary”.
This tool is opened as a popup window inside the shared space. In order to implement the above design, we will need buttons, check-boxes, list-boxes, datagrids and scrollbars. However all these, are taken care of by the the shared space's css and core programming (from a design aspect of course). So in this case, we don't need any specific graphical assets at all. Just follow the above design, regarding the spaces and margins between the items.
The “Edit Vocabulary” window seems very complex at first, but in reality it needs only a few graphical assets for its implementation. Many of the items that are shown such as window, title, help button, close button, scrollbars etc. are taken care of the shared space's css. One can find more information and guidelines of how to create such windows in the “Generic Tool Graphical Guidelines”.
The graphical assets that we need are shown at the following table.
|Vocabulary up state|
|Vocabulary roll/over state|
|Vocabulary selected state|
|Add vocabulary term|
|Delete vocabulary term|
|Add child vocabulary to parent (indicator)|
The fla file where you can find the graphical assets of this tool is located on plone, at http://www.kp-lab.org/intranet/work-packages/wp6/gui-guidelines/tag-vocabulary/TagVocabularyEditor-assets.zip