Added support for custom widget template

[chaaya]

You can now use your own wrapper template instead of the default bootstrap panel layout. Override the default template by specifying your custom template path via the dashboardProvider in the config phase.

angular
    .module('adfWidgetSample', ['adf', 'LocalStorageModule'])
    .config(function(dashboardProvider, localStorageServiceProvider){
       localStorageServiceProvider.setPrefix('adf.my-custom-chart');
       dashboardProvider.customWidgetTemplate = 'src/custom-tmpl/view.html'
    }

The requirement for this to work is that your custom template is using the ng-click/ng-if attributes as in the default template. This gives users a way to design their unique look of angular-dashboard-framework.

An working example in production code.

...and is using the following template:

<div adf-id="{{definition.wid}}" adf-widget-type="{{definition.type}}" ng-class="widgetClasses(widget, definition)" class="porlet block-flat">
    <div class="header">
        <div class="actions">
            <a class="minimize" href="#" title="collapse widget" ng-show="options.collapsible && !widgetState.isCollapsed" ng-click="widgetState.isCollapsed = !widgetState.isCollapsed">
                <i class="fa fa-chevron-up"></i>
            </a>
            <a class="maximize" href="#" title="collapse widget" ng-show="options.collapsible && widgetState.isCollapsed" ng-click="widgetState.isCollapsed = !widgetState.isCollapsed">
                <i class="fa fa-chevron-down"></i>
            </a>
            <a class="refresh" href="#" title="ladda om widget" ng-if="widget.reload" ng-click="reload()">
                <i class="fa fa-repeat"></i>
            </a>
            <a href="#" title="byt plats p� widget" class="adf-move" ng-if="editMode">
              <i class="fa fa-arrows" aria-hidden="true"></i>
            </a>
            <a href="#" title="edit widget configuration" ng-click="edit()" ng-if="editMode">
              <i class="fa fa-cog" aria-hidden="true"></i>
            </a>

            <a class="toggle-fullscreen" href="#" ng-click="openFullScreen()" ng-show="options.maximizable">
                <i class="fa fa-arrows-alt"></i>
            </a>

            <a class="close-down" href="#" title="ta bort widget" ng-click="remove()" ng-if="editMode"><i class="fa fa-times"></i></a>
         </div>
        <h3>{{definition.title}}</h3>
    </div>
    <div class="content" uib-collapse="widgetState.isCollapsed">
        <adf-widget-content model="definition" content="widget" />
    </div>
</div>

Good idea? Comments?

Thx for a good framework!!

[coveralls]

Coverage increased (+0.09%) to 92.607% when pulling cd8a6f4 on momentumsoftwareab:feature/custom-widget-template into 3b910f9 on angular-dashboard-framework:master.

[sdorra]

name does not match the property name

[sdorra]

I'm not sure that the readme is the right place for the example. There are many other custom template options which are not described in the readme. Perhaps we should create a wiki page for customising the templates and reference it from the readme. What do you think?

[chaaya]

Yes, sound like I good idea.

Since I didnt had access to the wiki I just wrote the info in the readme
file, makes it easier for you just to copy it and add some more info if you
like too :)

2016-05-26 19:18 GMT+02:00 Sebastian Sdorra notifications@github.com:

I'm not sure that the readme is the right place for the example. There are
many other custom template options which are not described in the readme.
Perhaps we should create a wiki page for customising the templates and
reference it from the readme. What do you think?

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#247 (comment)

[sdorra]

@chaaya you should be able to create wiki pages. Every user with a github account can add wiki pages.

[coveralls]

Coverage increased (+0.06%) to 92.578% when pulling 97c2089 on momentumsoftwareab:feature/custom-widget-template into 3b910f9 on angular-dashboard-framework:master.

[coveralls]

Coverage increased (+0.06%) to 92.578% when pulling 48c2925 on momentumsoftwareab:feature/custom-widget-template into 3b910f9 on angular-dashboard-framework:master.

[sdorra]

Thanks again.