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

Commit bcc3830

Browse files
author
Mathew Goldsborough
committed
Added widget directives to index.html.
1 parent adde73a commit bcc3830

3 files changed

Lines changed: 78 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: 60 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
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>
5253
<script type="text/javascript" src="js/dashboard/directives/widget-body.js"></script>
5354
<script type="text/javascript" src="js/dashboard/directives/widget-header.js"></script>
5455
<!-- endbuild -->
@@ -180,71 +181,58 @@
180181

181182
<div class="row">
182183
<div class="col-lg-3 col-md-6 col-xs-12">
183-
<div class="widget">
184-
<div class="widget-body">
184+
<rd-widget>
185+
<rd-widget-body>
185186
<div class="widget-icon green pull-left">
186187
<i class="fa fa-users"></i>
187188
</div>
188-
<div class="widget-content pull-left">
189-
<div class="title">80</div>
190-
<div class="comment">Users</div>
191-
</div>
192-
<div class="clearfix"></div>
193-
</div>
194-
</div>
189+
<div class="title">80</div>
190+
<div class="comment">Users</div>
191+
</rd-widget-body>
192+
</rd-widget>
195193
</div>
196194
<div class="col-lg-3 col-md-6 col-xs-12">
197-
<div class="widget">
198-
<div class="widget-body">
195+
<rd-widget>
196+
<rd-widget-body>
199197
<div class="widget-icon red pull-left">
200198
<i class="fa fa-tasks"></i>
201199
</div>
202-
<div class="widget-content pull-left">
203-
<div class="title">16</div>
204-
<div class="comment">Servers</div>
205-
</div>
206-
<div class="clearfix"></div>
207-
</div>
208-
</div>
200+
<div class="title">16</div>
201+
<div class="comment">Servers</div>
202+
</rd-widget-body>
203+
</rd-widget>
209204
</div>
210205
<div class="col-lg-3 col-md-6 col-xs-12">
211-
<div class="widget">
212-
<div class="widget-body">
206+
<rd-widget>
207+
<rd-widget-body>
213208
<div class="widget-icon orange pull-left">
214209
<i class="fa fa-sitemap"></i>
215210
</div>
216-
<div class="widget-content pull-left">
217-
<div class="title">225</div>
218-
<div class="comment">Documents</div>
219-
</div>
220-
<div class="clearfix"></div>
221-
</div>
222-
</div>
211+
<div class="title">225</div>
212+
<div class="comment">Documents</div>
213+
</rd-widget-body>
214+
</rd-widget>
223215
</div>
224216
<div class="spacer visible-xs"></div>
225217
<div class="col-lg-3 col-md-6 col-xs-12">
226-
<div class="widget">
227-
<div class="widget-body">
218+
<rd-widget>
219+
<rd-widget-body>
228220
<div class="widget-icon blue pull-left">
229221
<i class="fa fa-support"></i>
230222
</div>
231-
<div class="widget-content pull-left">
232-
<div class="title">62</div>
233-
<div class="comment">Tickets</div>
234-
</div>
235-
<div class="clearfix"></div>
236-
</div>
237-
</div>
223+
<div class="title">62</div>
224+
<div class="comment">Tickets</div>
225+
</rd-widget-body>
226+
</rd-widget>
238227
</div>
239228
</div>
240229
<div class="row">
241230
<div class="col-lg-6">
242-
<div class="widget">
243-
<div class="widget-header">
244-
<i class="fa fa-tasks"></i> Servers
231+
<rd-widget>
232+
<rd-widget-header icon="fa-tasks" title="Servers">
245233
<a href="#" class="pull-right">Manage</a>
246-
</div>
247-
<div class="widget-body medium no-padding">
234+
</rd-widget-header>
235+
<rd-widget-body classes="medium no-padding">
248236
<div class="table-responsive">
249237
<table class="table">
250238
<tbody>
@@ -262,17 +250,15 @@
262250
</tbody>
263251
</table>
264252
</div>
265-
</div>
266-
</div>
253+
</rd-widget-body>
254+
</rd-widget>
267255
</div>
268256
<div class="col-lg-6">
269-
<div class="widget">
270-
<div class="widget-header">
271-
<i class="fa fa-users"></i> Users
257+
<rd-widget>
258+
<rd-widget-header icon="fa-users" title="Users">
272259
<input type="text" placeholder="Search" class="form-control input-sm pull-right" />
273-
<div class="clearfix"></div>
274-
</div>
275-
<div class="widget-body medium no-padding">
260+
</rd-widget-header>
261+
<rd-widget-body classes="medium no-padding">
276262
<div class="table-responsive">
277263
<table class="table">
278264
<thead>
@@ -285,19 +271,17 @@
285271
</tbody>
286272
</table>
287273
</div>
288-
</div>
289-
</div>
274+
</rd-widget-body>
275+
</rd-widget>
290276
</div>
291277
</div>
292278
<div class="row">
293279
<div class="col-lg-6">
294-
<div class="widget">
295-
<div class="widget-header">
296-
<i class="fa fa-plus"></i> Extras
280+
<rd-widget>
281+
<rd-widget-header icon="fa-plus" title="Extras">
297282
<button class="btn btn-sm btn-info pull-right">Button</button>
298-
<div class="clearfix"></div>
299-
</div>
300-
<div class="widget-body">
283+
</rd-widget-header>
284+
<rd-widget-body>
301285

302286
<div class="message">
303287
This is a standard message which will also work the ".no-padding" class, I can also <span class="error">be an error message!</span>
@@ -324,20 +308,16 @@
324308
</div>
325309
</form>
326310

327-
</div>
328-
</div>
311+
</rd-widget-body>
312+
</rd-widget>
329313
</div>
330314
<div class="col-lg-6">
331-
<div class="widget">
332-
<div class="widget-header">
333-
<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">
334317
<a href="http://tobiasahlin.com/spinkit/" target="_blank" class="pull-right">SpinKit</a>
335-
</div>
336-
<div class="widget-body">
337-
<!-- Check out the Angular Directive inside bootstrap.js! -->
338-
<rd-loading></rd-loading>
339-
</div>
340-
</div>
318+
</rd-widget-header>
319+
<rd-widget-body loading="true"></rd-widget-body>
320+
</rd-widget>
341321
</div>
342322
</div>
343323
<!-- End Main Content -->
@@ -346,12 +326,11 @@
346326
<script type="text/ng-template" id="tables.html">
347327
<div class="row">
348328
<div class="col-lg-6">
349-
<div class="widget">
350-
<div class="widget-header">
351-
<i class="fa fa-tasks"></i> Servers
329+
<rd-widget>
330+
<rd-widget-header icon="fa-tasks" title="Servers">
352331
<a href="#" class="pull-right">Manage</a>
353-
</div>
354-
<div class="widget-body medium no-padding">
332+
</rd-widget-header>
333+
<rd-widget-body classes="medium no-padding">
355334
<div class="table-responsive">
356335
<table class="table">
357336
<tbody>
@@ -369,16 +348,15 @@
369348
</tbody>
370349
</table>
371350
</div>
372-
</div>
373-
</div>
351+
</rd-widget-body>
352+
</rd-widget>
374353
</div>
375354
<div class="col-lg-6">
376-
<div class="widget">
377-
<div class="widget-header">
378-
<i class="fa fa-tasks"></i> Striped Servers
355+
<rd-widget>
356+
<rd-widget-header icon="fa-tasks" title="Striped Servers">
379357
<a href="#" class="pull-right">Manage</a>
380-
</div>
381-
<div class="widget-body medium no-padding">
358+
</rd-widget-header>
359+
<rd-widget-body classes="medium no-padding">
382360
<div class="table-responsive table-striped">
383361
<table class="table">
384362
<tbody>
@@ -396,8 +374,8 @@
396374
</tbody>
397375
</table>
398376
</div>
399-
</div>
400-
</div>
377+
</rd-widget-body>
378+
</rd-widget>
401379
</div>
402380
</div>
403381
</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)