Squeak Browser in Material Design - hpi-swa-teaching/MaterialDesignWidgets GitHub Wiki

Layout

The Material Browser for Squeak consists of four major sections:

  • Window Section:
    • Status Bar/System Bar: includes icons for "collapse", "maximize", "close". The "MDWindow" class should be responsible for delivering this design. Note that "MDWindow" should use material icons for those actions as specified by the design example above. The status bar should use a darker variation of the primary color. See Color Themes for more information
    • App Bar/Toolbar: The App Bar (also called "Toolbar") includes the menu interaction as a sandwich menu.
  • Browser section: Note that the gaps between the lists should be visually subtle
    • Package List
    • Class List: the class list should be decorated by a bottom tab bar to switch between instance and class information
    • Category List
    • Method List
  • Code Pane: the code pane should use the colors of the current material color theme. For instance, a custom material code styler could use the primary color for literals (e.g.: numeric/alphanumeric literals, string literals) and the secondary color to highlight the usage of keywords and methods. Additionally, the Roboto bold typeface may be used to highlight method arguments and pseudo-variables like "self"
  • Button Bar: In contrast to the standard Squeak Browser layout, the Material Browser should position the button section below the code pane to clarify the context. (the buttons refer to the content of the code pane, therefore they should be placed below it). Buttons should use the surface color, except for the "major interaction" (this could be "Browse"-button in the Squeak Browser. Note that not all buttons are present in the design example. Proper implementation of the Material Browser should use all relevant buttons present in the Squeak Browser. The right-most button is changed to a dropdown menu to better visualize its use.

Behavior Changes

Compared to the Squeak Browser, the Material Browser Design is missing the "?" button usually found to the right of the "instance/class" switcher. This change was made on purpose and should be implemented according to the design example. The functionality of this "?" is used to the dropdown menu which switches between source, documentation, etc. for methods. The "?"-Button in Squeak cycles between the following:

  • definition: this is similar to the source code of a method. Since the dropdown menu does not do anything while viewing a classes information, the definition can be shown if "source" is selected in the dropdown menu
  • comment: this is similar to the documentation of a method. This should be shown if "documentation" is selected in the dropdown menu.
  • hierarchy view: this matches none of the options in the dropdown menu. An additional option should be added to the dropdown menu (as shown in the design example above). This option could be greyed out when a method is selected.