openstack/horizon
Code Issues Proposed changes

Merge "Minor updates to angularjs.rst"

Browse Source
This commit is contained in:
Jenkins 2016-10-13 06:11:55 +00:00 committed by Gerrit Code Review
commit 50360ce10c
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
doc/source/topics/angularjs.rst
View File

@ -103,8 +103,10 @@ Views or utilities needed by multiple dashboards are placed in
:: ::
openstack_dashboard/static/app/core/cloud-services/ openstack_dashboard/static/app/core/cloud-services/
├── cloud-services.js ├── cloud-services.module.js
└── cloud-services.spec.js ├── cloud-services.spec.js
├── hz-if-settings.directive.js
└── hz-if-settings.directive.spec.js
The ``cloud-services`` module is used by panels in multiple dashboards. It The ``cloud-services`` module is used by panels in multiple dashboards. It
cannot be placed within ``openstack_dashboard/dashboards/mydashboard`` because cannot be placed within ``openstack_dashboard/dashboards/mydashboard`` because
@ -128,8 +130,8 @@ One folder per component
Each component should have its own folder, with the code broken up into one JS Each component should have its own folder, with the code broken up into one JS
component per file. (See `Single Responsibility <https://github.com/johnpapa/angular-styleguide#single-responsibility>`_ component per file. (See `Single Responsibility <https://github.com/johnpapa/angular-styleguide#single-responsibility>`_
in the style guide). in the style guide).
Each folder may include styling (``.scss``), as well as templates(``.html``) Each folder may include styling (``*.scss``), as well as templates (``*.html``)
and tests (``.spec.js``). and tests (``*.spec.js``).
You may also include examples, by appending ``.example``. You may also include examples, by appending ``.example``.
For larger components, such as workflows with multiple steps, consider breaking For larger components, such as workflows with multiple steps, consider breaking
@ -140,27 +142,27 @@ directory per step. See
SCSS files SCSS files
---------- ----------
The top-level SCSS file in ``openstack_dashboard/static/app/app.scss``. It The top-level SCSS file in ``openstack_dashboard/static/app/_app.scss``. It
includes any styling that is part of the application ``core`` and may be includes any styling that is part of the application ``core`` and may be
reused by multiple dashboards. SCSS files that are specific to a particular reused by multiple dashboards. SCSS files that are specific to a particular
dashboard are linked to the application by adding them in that dashboard's dashboard are linked to the application by adding them in that dashboard's
enabled file. For example, `_1000_project.py` is the enabled file for the enabled file. For example, `_1920_project_containers_panel.py` is the enabled file
``Project`` dashboard and includes: for the ``Project`` dashboard's ``Container`` panel and includes:
:: ::
ADD_SCSS_FILES = [ ADD_SCSS_FILES = [
'dashboard/project/project.scss', 'dashboard/project/containers/_containers.scss',
] ]
Styling files are hierarchical, and include any direct child SCSS files. For Styling files are hierarchical, and include any direct child SCSS files. For
example, ``project.scss`` includes the ``workflow`` SCSS file, which in turn example, ``project.scss`` would includes the ``workflow`` SCSS file, which in turn
includes any launch instance styling: includes any launch instance styling:
:: ::
@import "workflow/workflow"; @import "workflow/workflow";
This allows the application to easily include all needed styling, simply by This allows the application to easily include all needed styling, simply by
including a dashboards top-level SCSS file. including a dashboard's top-level SCSS file.
Module Structure Module Structure
================ ================
@ -233,9 +235,11 @@ Creating your own panel
.. Note:: .. Note::
This section will be extended as standard practices are adopted upstream. This section will be extended as standard practices are adopted upstream.
Currently, it may be useful to use Currently, it may be useful to look at the Project Images Panel as a
`this patch <https://review.openstack.org/#/c/190852/>`_ and its dependants complete reference. Since Newton, it is Angular by default (set to True in the
as an example. ANGULAR_FEATURES dict in ``settings.py``).
You may track all the changes made to the Image Panel
`here <https://github.com/openstack/horizon/commits/master/openstack_dashboard/static/app/core/images>`__
.. Note:: .. Note::
Currently, Angular module names must still be manually declared with Currently, Angular module names must still be manually declared with
@ -283,7 +287,7 @@ To manually add files, add the following arrays and file paths to the enabled fi
ADD_ANGULAR_MODULES = [ ADD_ANGULAR_MODULES = [
... ...
'angular.module', 'my.angular.code',
... ...
] ]