The lightweight version of Sencha Themer

This is a simplified version of Themer that is intended for use as a plugin for other Sencha applications such as Architect. The current version of Themer allows users to create a workspace and build a theme from scratch. However, this version of Themer will be geared towards users who already have a pre-existing application.

Initial Horizontal Layout

This is our first iteration. A horizontal layout with three menu options: Settings, SASS, and Inspect. We ended up scrapping this design and instead went with a vertical layout like the one shown below. The vertical layout is much more compact and would take up less space than the previous version.

Vertical Interface

The vertical design easily displays next to a browser window, or as a plugin with other Sencha tools such as Architect. A slim layout like this one will give the user more surface area to work on their application. We also added a “Default” menu option and moved the component tree and inspect feature window to the bottom. We want the inspect feature and component tree to be easily accessible at all times.

Features

Theme Defaults: The first menu option is “Defaults”. This option will allow the user to easily make changes to any of the global theme variables.

Theme Settings: The second menu option is “Theme Settings”. Here, the user will be able to search the components that are in their application. If they choose to inspect a feature in their application, then that component will be automatically filtered. Once the user has selected a component, they will be able to easily make adjustments to the component’s attributes using the theme settings panel.

SASS: The third menu option is “SASS”. All of the Sass variables are listed here. The user will also be able to manually alter any of the values for each variable.

UI: The fourth menu option is “UI”. The user will be able to add a new UI or edit a pre-existing UI. If there is a UI attached to a component, a little blue indicator appears next to that component in the component tree. When the user hovers over this label, a pop-up will appear that will ask if they want to edit the UI. If so, the UI list will automatically be filtered to that particular component.

Theming an application

This is an example of what the workspace looks like while theming a pre-existing application