[Indicators] Support template override

Allow indicators to include their own custom templates.
WTD-608.
This commit is contained in:
Victor Woeltjen
2014-12-16 13:23:20 -08:00
parent c1ea620341
commit 1a50f50310
4 changed files with 34 additions and 23 deletions

View File

@@ -11,6 +11,10 @@
{ {
"key": "action-button", "key": "action-button",
"templateUrl": "templates/controls/action-button.html" "templateUrl": "templates/controls/action-button.html"
},
{
"key": "indicator",
"templateUrl": "templates/indicator.html"
} }
], ],
"controllers": [ "controllers": [

View File

@@ -1,23 +1,9 @@
<div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar"> <div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
<div id='status' class='status-holder abs'> <div id='status' class='status-holder abs'>
<div ng-repeat="indicator in bar.getIndicators()" <mct-include ng-repeat="indicator in bar.getIndicators()"
class='status block' ng-model="indicator.ngModel"
ng-class='indicator.getClass()'> key="indicator.template">
<span class="ui-symbol status-indicator" </mct-include>
ng-class='indicator.getGlyphClass()'>
{{indicator.getGlyph()}}
</span>
<span class="label"
ng-class='indicator.getTextClass()'>
{{indicator.getText()}}
</span>
<a href=''
class="ui-symbol"
ng-if="indicator.configure"
ng-click="indicator.configure()">
G
</a>
</div>
</div> </div>
<!--mct-include key="'app-logo'"></mct-include--> <!--mct-include key="'app-logo'"></mct-include-->
</div> </div>

View File

@@ -0,0 +1,17 @@
<div class='status block'
ng-click='ngModel.configure()'
ng-class='ngModel.getClass()'>
<span class="ui-symbol status-indicator"
ng-class='ngModel.getGlyphClass()'>
{{ngModel.getGlyph()}}
</span>
<span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</span>
<a href=''
class="ui-symbol"
ng-if="ngModel.configure">
G
</a>
</div>

View File

@@ -11,13 +11,17 @@ define(
* @constructor * @constructor
*/ */
function BottomBarController(indicators) { function BottomBarController(indicators) {
// Utility function used to instantiate indicators // Utility function used to make indicators presentable
// from their injected constructors. // for display.
function instantiate(Indicator) { function present(Indicator) {
return new Indicator(); return {
template: Indicator.template || "indicator",
ngModel: typeof Indicator === 'function' ?
new Indicator() : Indicator
};
} }
indicators = indicators.map(instantiate); indicators = indicators.map(present);
return { return {
/** /**