February 20, 2015

Style Editor Reference

The style editor allows you to customize the look and feel of the popup and the search tool. The popup and the search tool share most of the style information except for visual elements specific to the search tool and some style properties of which you can set a different value for them. The style information applied to the visual elements used to render (draw) search results can be defined per GDD (dictionary).

How to open the style editor

Open the dictionary manager and click the "Edit" button for the GDD you want to customize the per-GDD elements for. This GDD (used to open the style editor) is called "the current GDD" for the rest of this page.

How to use the style editor

Click to enlarge

The main window of the style editor is divided into four panes:

  1. The categories pane

  2. The properties pane

  3. The preview pane

  4. The buttons pane

Each label in the categories pane has a corresponding visual element on the popup. Hovering over a label highlights the corresponding element on the sample popup shown in the preview pane. If you click a label, the names of the style properties applicable to the corresponding element along with editors to change their values will be shown in the properties pane. Any changes made in the properties pane will be reflected to the sample popup. Click the "Save" ("Cancel") button in the buttons pane to save (cancel) the changes.

If the current GDD provides more than one sample results set used to populate the part of the popup allocated for search results, you can choose which one to use from the drop-down menu found on the right side of the buttons pane.

The visual elements constituting the popup can be broadly divided into two types: the common elements and the per-GDD elements. In the following sections, the style properties that are not obvious just by looking at their names will be explained element by element. To make it easier to explain the per-GDD elements, I use a fictional "French-English Dictionary" as an example. Each entry contained in this dictionary has four description items: "word", "part of speech", "pronunciation" and "definition".

Common elements

Outer frame

Background color

  1. This read-only field shows the selected color in the format "#RRGGBB" where the "RR" represents the red color value in hexadecimal notation, the "GG" represents the green and the "BB" the blue.

  2. Click this icon to open a color chooser.

  3. Specify the "opacity" for the selected element in percentage. Setting this value to 0 makes the selected element completely transparent. Setting this value to 100 makes it completely opaque. Currently, you can't make the outer frame (semi-)transparent.

Horizontal (Vertical) offset

The horizontal (vertical) offset is the distance (in pixels) between the position of the cursor and the position of the nearest corner of the popup as shown below.

"X" indicates the cursor position.

Popup alignment

This property rarely needs to be changed. If you really want to know what this section means, please come back here after reading through to the end.

This property is only used when more than one template participate in rendering the search results and there is a template whose resolved "popup alignment" value is different from the other templates. In that case, the direction used more than the other is called "strong direction".

The strong direction of R1 is "left" and that of R2 is "right".
  • If this property is set to "Auto" (default) and the strong direction is "left", the popup is displayed so that the left side of it is aligned to the cursor line (given that the horizontal offset is 0). If the strong direction is "right", the popup is displayed so that the right side of it is aligned to the cursor line.

  • If this property is set to "Left", the popup is displayed so that the left side of it is aligned to the cursor line.

  • If this property is set to "Right", the popup is displayed so that the right side of it is aligned to the cursor line.

Icon alignment

This property rarely needs to be changed. If you really want to know what this section means, please come back here after reading through to the end.

This property is only used when more than one template participate in rendering the search results and there is a template whose resolved "icon alignment" value is different from the other templates. In that case, the direction used more than the other is called "strong direction".

  • If this property is set to "Auto" (default) and the strong direction is "left", the icons are aligned to the left. If the strong direction is "right", the icons are aligned to the right.

  • If this property is set to "Left", the icons are aligned to the left.

  • If this property is set to "Right", the icons are aligned to the right.

Icons

Any changes made on this element will be applied to all the "child elements" (the "Hide" icon and the "Close" icon) unless they have their own values set.

"Close" ("Hide") icon

  1. The "black lock" icon indicates that the value of this property is "inherited" from the "parent element" mentioned above. Click this icon to disable the value inheritance and set a value specific to this element.

  2. The "white lock" icon indicates that this element has its own value set for this property. Click this icon to re-enable the value inheritance.

  3. The "unlocked" icon indicates that no value is set yet for this property although the value inheritance is already disabled.

Search tool

Text (Bg) color

  1. Click this button to open (close) the menu.

  2. Badge text (bg) color

  3. Badge text (bg) color (disabled)

  4. Hover color

Inner frame

The inner frame element is a container for search results.

Entry

The entry element is a container for a single search result.

Per-GDD elements

  1. Items

  2. Inline items

  3. Click the arrow buttons to reorder items.

Templates and items

Each GDD (dictionary) defines at least one "template". Templates are used to render search results returned from GDDs, which have no style information attached to them, as visual elements on the popup. Each template defines one or more "items" representing a set of information contained in a single search result (e.g. our sample French dictionary defines one template containing four items: "word", "part of speech", "pronunciation" and "definition"). You can define different style information such as font, text color, text size, etc. for each item.

Inline items

Each item can define "inline items" as its child elements representing a subset/part of information contained in it (e.g. the "feminine/masculine noun" inline items in the "word" item, the "embedded pronunciation" inline item in the "definition" item, etc.). You can define different style information for each inline item. The value inheritance mechanism as described in the "Icons" section above is applied to inline items as well.

Font names

Fonts used to render the text contents of items are defined as a list of font names. This list is called a "priority list" because the first item in the list has priority over the second item and the second item has priority over the third item and so forth. When rendering text, each character is tested whether there is a font supporting it in the list. The last item of the list must be one of the following keywords.

  • serif (e.g. ABCDE)
  • sans-serif (ABCDE)
  • monospace (ABCDE)
  • cursive (ABCDE)
  • fantasy (ABCDE)

These are called "generic fonts". The generic fonts are abstract names for actual fonts having the characteristics expressed by these names. Actual fonts mapped to the generic fonts are different from machine to machine. What's important is that the generic fonts are always available.

You can directly type a comma-separated list of font names into the text field but using a font selector is highly recommended. To enable the font selector feature, open the options page of GDC for Chrome and click the "Send font list" button.

Font selector
  1. Click the text field to open (close) a font selector.

  2. A list of the selected fonts.

  3. Click the arrow buttons to reorder the selected fonts. Click the "x" button to remove fonts from the list.

  4. The generic font is always the last item of the list.

  5. A list of the fonts available on your system. Use checkboxs to (de)select fonts.

  6. A list of the generic fonts.

Template-specific entry styles

This category is used to define style information only applied to "entry" elements containing search results rendered with the selected template. The value inheritance mechanism as described in the "Icons" section above is applied to this category as well (the parent element is the "global" entry element).

Other template-specific styles

Each template has an internal "item direction" property ("left-to-right" or "right-to-left"). If this property is set to "left-to-right", for example, items defined for that template are rendered from left to right. In general, the "item direction" matches the text direction ("left-to-right" for English, Japanese, etc., "right-to-left" for Arabic, Hebrew, etc.) of the longest item (like "definition") so that multiline text can be displayed correctly.

Popup alignment

The popup alignment property determines how to place the popup relative to the cursor line.

"X" indicates the cursor position.
  • If this property is set to "Auto" (default) and the start side of the item direction ("left" if "left-to-right") is "left", the popup is displayed so that the left side of it is aligned to the cursor line (given that the horizontal offset is 0). If the start side of the item direction is "right", the popup is displayed so that the right side of it is aligned to the cursor line.

  • If this property is set to "Left", the popup is displayed so that the left side of it is aligned to the cursor line.

  • If this property is set to "Right", the popup is displayed so that the right side of it is aligned to the cursor line.

Icon alignment

  • If this property is set to "Auto" (default) and the start side of the item direction ("left" if "left-to-right") is "left", the icons (the "Hide" icon and the "Close" icon) are aligned to the left. If the start side of the item direction is "right", the icons are aligned to the right.

  • If this property is set to "Left", the icons are aligned to the left.

  • If this property is set to "Right", the icons are aligned to the right.

Next: Copyrights and Licenses

No comments:

Post a Comment