Skip to content
This repository was archived by the owner on Mar 5, 2026. It is now read-only.

Commit 5a00cf8

Browse files
mgoldsboroughmgoldsborough
committed
Merge pull request #68 from mgoldsborough/widget-directives
Added widget js files to gulp build block. Fixes #66
2 parents c60810c + bcc3830 commit 5a00cf8

3 files changed

Lines changed: 80 additions & 84 deletions

File tree

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,20 @@ If you want to change it, simply replace the template and CSS!
106106

107107
Instead of hardcoding the widget HTML directly, AngularJS widget component functionality is ready to use:
108108

109+
```HTML
110+
<rd-widget>
111+
<rd-widget-header icon="fa-tasks" title="Awesome Widget">
112+
<a href="#" class="pull-right">Widget Link</a>
113+
</rd-widget-header>
114+
<!-- Classes are optional but allow you to style the widget-body. -->
115+
<rd-widget-body classes="medium no-padding">
116+
<p>Hello world from a widget!</p>
117+
</rd-widget-body>
118+
</rd-widget>
119+
```
120+
121+
Loading widget
122+
109123
```HTML
110124
<rd-widget>
111125
<rd-widget-header title="Hello World"><rd-widget-header>
@@ -114,6 +128,7 @@ Instead of hardcoding the widget HTML directly, AngularJS widget component funct
114128
</rd-widget>
115129
```
116130

131+
117132
### FAQ
118133

119134
#### What is the dashboard compatible with?

‎src/index.html‎

Lines changed: 62 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<script type="text/javascript" src="js/dashboard/controllers/master-ctrl.js"></script>
5050
<script type="text/javascript" src="js/dashboard/controllers/alerts-ctrl.js"></script>
5151
<script type="text/javascript" src="js/dashboard/directives/loading.js"></script>
52+
<script type="text/javascript" src="js/dashboard/directives/widget.js"></script>
53+
<script type="text/javascript" src="js/dashboard/directives/widget-body.js"></script>
54+
<script type="text/javascript" src="js/dashboard/directives/widget-header.js"></script>
5255
<!-- endbuild -->
5356
<!-- SCRIPTS -->
5457

@@ -178,71 +181,58 @@
178181

179182
<div class="row">
180183
<div class="col-lg-3 col-md-6 col-xs-12">
181-
<div class="widget">
182-
<div class="widget-body">
184+
<rd-widget>
185+
<rd-widget-body>
183186
<div class="widget-icon green pull-left">
184187
<i class="fa fa-users"></i>
185188
</div>
186-
<div class="widget-content pull-left">
187-
<div class="title">80</div>
188-
<div class="comment">Users</div>
189-
</div>
190-
<div class="clearfix"></div>
191-
</div>
192-
</div>
189+
<div class="title">80</div>
190+
<div class="comment">Users</div>
191+
</rd-widget-body>
192+
</rd-widget>
193193
</div>
194194
<div class="col-lg-3 col-md-6 col-xs-12">
195-
<div class="widget">
196-
<div class="widget-body">
195+
<rd-widget>
196+
<rd-widget-body>
197197
<div class="widget-icon red pull-left">
198198
<i class="fa fa-tasks"></i>
199199
</div>
200-
<div class="widget-content pull-left">
201-
<div class="title">16</div>
202-
<div class="comment">Servers</div>
203-
</div>
204-
<div class="clearfix"></div>
205-
</div>
206-
</div>
200+
<div class="title">16</div>
201+
<div class="comment">Servers</div>
202+
</rd-widget-body>
203+
</rd-widget>
207204
</div>
208205
<div class="col-lg-3 col-md-6 col-xs-12">
209-
<div class="widget">
210-
<div class="widget-body">
206+
<rd-widget>
207+
<rd-widget-body>
211208
<div class="widget-icon orange pull-left">
212209
<i class="fa fa-sitemap"></i>
213210
</div>
214-
<div class="widget-content pull-left">
215-
<div class="title">225</div>
216-
<div class="comment">Documents</div>
217-
</div>
218-
<div class="clearfix"></div>
219-
</div>
220-
</div>
211+
<div class="title">225</div>
212+
<div class="comment">Documents</div>
213+
</rd-widget-body>
214+
</rd-widget>
221215
</div>
222216
<div class="spacer visible-xs"></div>
223217
<div class="col-lg-3 col-md-6 col-xs-12">
224-
<div class="widget">
225-
<div class="widget-body">
218+
<rd-widget>
219+
<rd-widget-body>
226220
<div class="widget-icon blue pull-left">
227221
<i class="fa fa-support"></i>
228222
</div>
229-
<div class="widget-content pull-left">
230-
<div class="title">62</div>
231-
<div class="comment">Tickets</div>
232-
</div>
233-
<div class="clearfix"></div>
234-
</div>
235-
</div>
223+
<div class="title">62</div>
224+
<div class="comment">Tickets</div>
225+
</rd-widget-body>
226+
</rd-widget>
236227
</div>
237228
</div>
238229
<div class="row">
239230
<div class="col-lg-6">
240-
<div class="widget">
241-
<div class="widget-header">
242-
<i class="fa fa-tasks"></i> Servers
231+
<rd-widget>
232+
<rd-widget-header icon="fa-tasks" title="Servers">
243233
<a href="#" class="pull-right">Manage</a>
244-
</div>
245-
<div class="widget-body medium no-padding">
234+
</rd-widget-header>
235+
<rd-widget-body classes="medium no-padding">
246236
<div class="table-responsive">
247237
<table class="table">
248238
<tbody>
@@ -260,17 +250,15 @@
260250
</tbody>
261251
</table>
262252
</div>
263-
</div>
264-
</div>
253+
</rd-widget-body>
254+
</rd-widget>
265255
</div>
266256
<div class="col-lg-6">
267-
<div class="widget">
268-
<div class="widget-header">
269-
<i class="fa fa-users"></i> Users
257+
<rd-widget>
258+
<rd-widget-header icon="fa-users" title="Users">
270259
<input type="text" placeholder="Search" class="form-control input-sm pull-right" />
271-
<div class="clearfix"></div>
272-
</div>
273-
<div class="widget-body medium no-padding">
260+
</rd-widget-header>
261+
<rd-widget-body classes="medium no-padding">
274262
<div class="table-responsive">
275263
<table class="table">
276264
<thead>
@@ -283,19 +271,17 @@
283271
</tbody>
284272
</table>
285273
</div>
286-
</div>
287-
</div>
274+
</rd-widget-body>
275+
</rd-widget>
288276
</div>
289277
</div>
290278
<div class="row">
291279
<div class="col-lg-6">
292-
<div class="widget">
293-
<div class="widget-header">
294-
<i class="fa fa-plus"></i> Extras
280+
<rd-widget>
281+
<rd-widget-header icon="fa-plus" title="Extras">
295282
<button class="btn btn-sm btn-info pull-right">Button</button>
296-
<div class="clearfix"></div>
297-
</div>
298-
<div class="widget-body">
283+
</rd-widget-header>
284+
<rd-widget-body>
299285

300286
<div class="message">
301287
This is a standard message which will also work the ".no-padding" class, I can also <span class="error">be an error message!</span>
@@ -322,20 +308,16 @@
322308
</div>
323309
</form>
324310

325-
</div>
326-
</div>
311+
</rd-widget-body>
312+
</rd-widget>
327313
</div>
328314
<div class="col-lg-6">
329-
<div class="widget">
330-
<div class="widget-header">
331-
<i class="fa fa-cog fa-spin"></i> Loading Directive
315+
<rd-widget>
316+
<rd-widget-header icon="fa-cog fa-spin" title="Loading Directive">
332317
<a href="http://tobiasahlin.com/spinkit/" target="_blank" class="pull-right">SpinKit</a>
333-
</div>
334-
<div class="widget-body">
335-
<!-- Check out the Angular Directive inside bootstrap.js! -->
336-
<rd-loading></rd-loading>
337-
</div>
338-
</div>
318+
</rd-widget-header>
319+
<rd-widget-body loading="true"></rd-widget-body>
320+
</rd-widget>
339321
</div>
340322
</div>
341323
<!-- End Main Content -->
@@ -344,12 +326,11 @@
344326
<script type="text/ng-template" id="tables.html">
345327
<div class="row">
346328
<div class="col-lg-6">
347-
<div class="widget">
348-
<div class="widget-header">
349-
<i class="fa fa-tasks"></i> Servers
329+
<rd-widget>
330+
<rd-widget-header icon="fa-tasks" title="Servers">
350331
<a href="#" class="pull-right">Manage</a>
351-
</div>
352-
<div class="widget-body medium no-padding">
332+
</rd-widget-header>
333+
<rd-widget-body classes="medium no-padding">
353334
<div class="table-responsive">
354335
<table class="table">
355336
<tbody>
@@ -367,16 +348,15 @@
367348
</tbody>
368349
</table>
369350
</div>
370-
</div>
371-
</div>
351+
</rd-widget-body>
352+
</rd-widget>
372353
</div>
373354
<div class="col-lg-6">
374-
<div class="widget">
375-
<div class="widget-header">
376-
<i class="fa fa-tasks"></i> Striped Servers
355+
<rd-widget>
356+
<rd-widget-header icon="fa-tasks" title="Striped Servers">
377357
<a href="#" class="pull-right">Manage</a>
378-
</div>
379-
<div class="widget-body medium no-padding">
358+
</rd-widget-header>
359+
<rd-widget-body classes="medium no-padding">
380360
<div class="table-responsive table-striped">
381361
<table class="table">
382362
<tbody>
@@ -394,8 +374,8 @@
394374
</tbody>
395375
</table>
396376
</div>
397-
</div>
398-
</div>
377+
</rd-widget-body>
378+
</rd-widget>
399379
</div>
400380
</div>
401381
</script>

‎src/js/dashboard/directives/widget-body.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ function rdWidgetBody () {
66
var directive = {
77
requires: '^rdWidget',
88
scope: {
9-
loading: '@?'
9+
loading: '@?',
10+
classes: '@?'
1011
},
1112
transclude: true,
12-
template: '<div class="widget-body"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
13+
template: '<div class="widget-body" ng-class="classes"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
1314
restrict: 'E'
1415
};
1516
return directive;

0 commit comments

Comments
 (0)