Class: themeselectorDirective directive:gmfThemeselector

Note that this directive works with the gmf.TreeManager. Setting the theme will update the "tree" object of this gmf.TreeManager.

Example:

 <a href class="btn btn-default btn-block btn-primary" data-toggle="dropdown">
     <span class="fa fa-grid"></span>
     <span ng-if="mainCtrl.gmfThemeManager.modeFlush">
       <span translate>Theme:</span>
       <b ng-if="!mainCtrl.gmfThemeManager.getThemeName()" translate>Loading...</b>
       <b ng-if="mainCtrl.gmfThemeManager.getThemeName()">{{mainCtrl.gmfThemeManager.getThemeName()|translate}}</b>
     </span>
     <span ng-if="!mainCtrl.gmfThemeManager.modeFlush">
       <b ng-if="!mainCtrl.gmfThemeManager.themeName" translate>Themes</b>
     </span>
     <span class="caret"></span>
 </a>
 <gmf-themeselector
    id="themes"
    data-header-title="Themes"
    gmf-themeselector-filter="::mainCtrl.filter">
 </gmf-themeselector>
 <script>
   (function() {
     let module = angular.module('app');
     module.value('gmfTreeManagerModeFlush', true);
   })();
 </script>

The theme selector can operate in a 'flush' (as above) or 'add' mode. For more information about these modes, refer to the documentation of gmf.TreeManager.

Example in 'add' mode:

 <a href class="btn btn-default btn-block btn-primary" data-toggle="dropdown">
     <span class="fa fa-grid"></span>
     <span translate>Themes</span>
     <span class="caret"></span>
 </a>
 <gmf-themeselector
    id="themes"
    data-header-title="Themes"
    gmf-themeselector-filter="::mainCtrl.filter">
 </gmf-themeselector>
 <script>
   (function() {
     let module = angular.module('app');
     module.value('gmfTreeManagerModeFlush', false);
   })();
 </script>