Skip to content

Commit a2da268

Browse files
silverbuxsilverbux
authored
Added simple tables component (silverbux#45)
1 parent c0fabc3 commit a2da268

File tree

7 files changed

+368
-1
lines changed

7 files changed

+368
-1
lines changed

‎angular/app/components/nav-sidebar/nav-sidebar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<i class="fa fa-angle-left pull-right"></i>
107107
</a>
108108
<ul class="treeview-menu">
109-
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Simple tables</a></li>
109+
<li><a ui-sref="app.tablessimple"><i class="fa fa-circle-o"></i> Simple tables</a></li>
110110
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Data tables</a></li>
111111
</ul>
112112
</li>

‎angular/app/components/tables-simple/tables-simple.component.html

+328
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
<section class="content-header">
2+
<h1>Simple Tables <small>preview of simple tables</small></h1>
3+
<ol class="breadcrumb">
4+
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
5+
<li><a href="#">Tables</a></li>
6+
<li class="active">Simple</li>
7+
</ol>
8+
</section>
9+
<section class="content">
10+
<div class="row">
11+
<div class="col-md-6">
12+
<div class="box">
13+
<div class="box-header with-border">
14+
<h3 class="box-title">Bordered Table</h3>
15+
</div>
16+
<!-- /.box-header -->
17+
<div class="box-body">
18+
<table class="table table-bordered">
19+
<tr>
20+
<th style="width: 10px">#</th>
21+
<th>Task</th>
22+
<th>Progress</th>
23+
<th style="width: 40px">Label</th>
24+
</tr>
25+
<tr>
26+
<td>1.</td>
27+
<td>Update software</td>
28+
<td>
29+
<div class="progress progress-xs">
30+
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
31+
</div>
32+
</td>
33+
<td><span class="badge bg-red">55%</span></td>
34+
</tr>
35+
<tr>
36+
<td>2.</td>
37+
<td>Clean database</td>
38+
<td>
39+
<div class="progress progress-xs">
40+
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
41+
</div>
42+
</td>
43+
<td><span class="badge bg-yellow">70%</span></td>
44+
</tr>
45+
<tr>
46+
<td>3.</td>
47+
<td>Cron job running</td>
48+
<td>
49+
<div class="progress progress-xs progress-striped active">
50+
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
51+
</div>
52+
</td>
53+
<td><span class="badge bg-light-blue">30%</span></td>
54+
</tr>
55+
<tr>
56+
<td>4.</td>
57+
<td>Fix and squish bugs</td>
58+
<td>
59+
<div class="progress progress-xs progress-striped active">
60+
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
61+
</div>
62+
</td>
63+
<td><span class="badge bg-green">90%</span></td>
64+
</tr>
65+
</table>
66+
</div>
67+
<!-- /.box-body -->
68+
<div class="box-footer clearfix">
69+
<ul class="pagination pagination-sm no-margin pull-right">
70+
<li><a href="#">&laquo;</a></li>
71+
<li><a href="#">1</a></li>
72+
<li><a href="#">2</a></li>
73+
<li><a href="#">3</a></li>
74+
<li><a href="#">&raquo;</a></li>
75+
</ul>
76+
</div>
77+
</div>
78+
<!-- /.box -->
79+
<div class="box">
80+
<div class="box-header">
81+
<h3 class="box-title">Condensed Full Width Table</h3>
82+
</div>
83+
<!-- /.box-header -->
84+
<div class="box-body no-padding">
85+
<table class="table table-condensed">
86+
<tr>
87+
<th style="width: 10px">#</th>
88+
<th>Task</th>
89+
<th>Progress</th>
90+
<th style="width: 40px">Label</th>
91+
</tr>
92+
<tr>
93+
<td>1.</td>
94+
<td>Update software</td>
95+
<td>
96+
<div class="progress progress-xs">
97+
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
98+
</div>
99+
</td>
100+
<td><span class="badge bg-red">55%</span></td>
101+
</tr>
102+
<tr>
103+
<td>2.</td>
104+
<td>Clean database</td>
105+
<td>
106+
<div class="progress progress-xs">
107+
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
108+
</div>
109+
</td>
110+
<td><span class="badge bg-yellow">70%</span></td>
111+
</tr>
112+
<tr>
113+
<td>3.</td>
114+
<td>Cron job running</td>
115+
<td>
116+
<div class="progress progress-xs progress-striped active">
117+
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
118+
</div>
119+
</td>
120+
<td><span class="badge bg-light-blue">30%</span></td>
121+
</tr>
122+
<tr>
123+
<td>4.</td>
124+
<td>Fix and squish bugs</td>
125+
<td>
126+
<div class="progress progress-xs progress-striped active">
127+
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
128+
</div>
129+
</td>
130+
<td><span class="badge bg-green">90%</span></td>
131+
</tr>
132+
</table>
133+
</div>
134+
<!-- /.box-body -->
135+
</div>
136+
<!-- /.box -->
137+
</div>
138+
<!-- /.col -->
139+
<div class="col-md-6">
140+
<div class="box">
141+
<div class="box-header">
142+
<h3 class="box-title">Simple Full Width Table</h3>
143+
<div class="box-tools">
144+
<ul class="pagination pagination-sm no-margin pull-right">
145+
<li><a href="#">&laquo;</a></li>
146+
<li><a href="#">1</a></li>
147+
<li><a href="#">2</a></li>
148+
<li><a href="#">3</a></li>
149+
<li><a href="#">&raquo;</a></li>
150+
</ul>
151+
</div>
152+
</div>
153+
<!-- /.box-header -->
154+
<div class="box-body no-padding">
155+
<table class="table">
156+
<tr>
157+
<th style="width: 10px">#</th>
158+
<th>Task</th>
159+
<th>Progress</th>
160+
<th style="width: 40px">Label</th>
161+
</tr>
162+
<tr>
163+
<td>1.</td>
164+
<td>Update software</td>
165+
<td>
166+
<div class="progress progress-xs">
167+
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
168+
</div>
169+
</td>
170+
<td><span class="badge bg-red">55%</span></td>
171+
</tr>
172+
<tr>
173+
<td>2.</td>
174+
<td>Clean database</td>
175+
<td>
176+
<div class="progress progress-xs">
177+
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
178+
</div>
179+
</td>
180+
<td><span class="badge bg-yellow">70%</span></td>
181+
</tr>
182+
<tr>
183+
<td>3.</td>
184+
<td>Cron job running</td>
185+
<td>
186+
<div class="progress progress-xs progress-striped active">
187+
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
188+
</div>
189+
</td>
190+
<td><span class="badge bg-light-blue">30%</span></td>
191+
</tr>
192+
<tr>
193+
<td>4.</td>
194+
<td>Fix and squish bugs</td>
195+
<td>
196+
<div class="progress progress-xs progress-striped active">
197+
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
198+
</div>
199+
</td>
200+
<td><span class="badge bg-green">90%</span></td>
201+
</tr>
202+
</table>
203+
</div>
204+
<!-- /.box-body -->
205+
</div>
206+
<!-- /.box -->
207+
<div class="box">
208+
<div class="box-header">
209+
<h3 class="box-title">Striped Full Width Table</h3>
210+
</div>
211+
<!-- /.box-header -->
212+
<div class="box-body no-padding">
213+
<table class="table table-striped">
214+
<tr>
215+
<th style="width: 10px">#</th>
216+
<th>Task</th>
217+
<th>Progress</th>
218+
<th style="width: 40px">Label</th>
219+
</tr>
220+
<tr>
221+
<td>1.</td>
222+
<td>Update software</td>
223+
<td>
224+
<div class="progress progress-xs">
225+
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
226+
</div>
227+
</td>
228+
<td><span class="badge bg-red">55%</span></td>
229+
</tr>
230+
<tr>
231+
<td>2.</td>
232+
<td>Clean database</td>
233+
<td>
234+
<div class="progress progress-xs">
235+
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
236+
</div>
237+
</td>
238+
<td><span class="badge bg-yellow">70%</span></td>
239+
</tr>
240+
<tr>
241+
<td>3.</td>
242+
<td>Cron job running</td>
243+
<td>
244+
<div class="progress progress-xs progress-striped active">
245+
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
246+
</div>
247+
</td>
248+
<td><span class="badge bg-light-blue">30%</span></td>
249+
</tr>
250+
<tr>
251+
<td>4.</td>
252+
<td>Fix and squish bugs</td>
253+
<td>
254+
<div class="progress progress-xs progress-striped active">
255+
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
256+
</div>
257+
</td>
258+
<td><span class="badge bg-green">90%</span></td>
259+
</tr>
260+
</table>
261+
</div>
262+
<!-- /.box-body -->
263+
</div>
264+
<!-- /.box -->
265+
</div>
266+
<!-- /.col -->
267+
</div>
268+
<!-- /.row -->
269+
<div class="row">
270+
<div class="col-xs-12">
271+
<div class="box">
272+
<div class="box-header">
273+
<h3 class="box-title">Responsive Hover Table</h3>
274+
<div class="box-tools">
275+
<div class="input-group input-group-sm" style="width: 150px;">
276+
<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
277+
<div class="input-group-btn">
278+
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
<!-- /.box-header -->
284+
<div class="box-body table-responsive no-padding">
285+
<table class="table table-hover">
286+
<tr>
287+
<th>ID</th>
288+
<th>User</th>
289+
<th>Date</th>
290+
<th>Status</th>
291+
<th>Reason</th>
292+
</tr>
293+
<tr>
294+
<td>183</td>
295+
<td>John Doe</td>
296+
<td>11-7-2014</td>
297+
<td><span class="label label-success">Approved</span></td>
298+
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
299+
</tr>
300+
<tr>
301+
<td>219</td>
302+
<td>Alexander Pierce</td>
303+
<td>11-7-2014</td>
304+
<td><span class="label label-warning">Pending</span></td>
305+
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
306+
</tr>
307+
<tr>
308+
<td>657</td>
309+
<td>Bob Doe</td>
310+
<td>11-7-2014</td>
311+
<td><span class="label label-primary">Approved</span></td>
312+
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
313+
</tr>
314+
<tr>
315+
<td>175</td>
316+
<td>Mike Doe</td>
317+
<td>11-7-2014</td>
318+
<td><span class="label label-danger">Denied</span></td>
319+
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
320+
</tr>
321+
</table>
322+
</div>
323+
<!-- /.box-body -->
324+
</div>
325+
<!-- /.box -->
326+
</div>
327+
</div>
328+
</section>

‎angular/app/components/tables-simple/tables-simple.component.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
class TablesSimpleController {
2+
constructor () {
3+
'ngInject'
4+
5+
//
6+
}
7+
8+
$onInit () {}
9+
}
10+
11+
export const TablesSimpleComponent = {
12+
templateUrl: './views/app/components/tables-simple/tables-simple.component.html',
13+
controller: TablesSimpleController,
14+
controllerAs: 'vm',
15+
bindings: {}
16+
}

‎angular/app/components/tables-simple/tables-simple.scss

Whitespace-only changes.

‎angular/config/routes.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
4141
}
4242
}
4343
})
44+
.state('app.tablessimple', {
45+
url: '/tables-simple',
46+
data: {
47+
auth: true
48+
},
49+
views: {
50+
'main@app': {
51+
template: '<tables-simple></tables-simple>'
52+
}
53+
}
54+
})
4455
.state('app.uiicons', {
4556
url: '/ui-icons',
4657
data: {

‎angular/index.components.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TablesSimpleComponent } from './app/components/tables-simple/tables-simple.component'
12
import { UiModalComponent } from './app/components/ui-modal/ui-modal.component'
23
import { UiTimelineComponent } from './app/components/ui-timeline/ui-timeline.component'
34
import { UiButtonsComponent } from './app/components/ui-buttons/ui-buttons.component'
@@ -27,6 +28,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
2728
import { RegisterFormComponent } from './app/components/register-form/register-form.component'
2829

2930
angular.module('app.components')
31+
.component('tablesSimple', TablesSimpleComponent)
3032
.component('uiModal', UiModalComponent)
3133
.component('uiTimeline', UiTimelineComponent)
3234
.component('uiButtons', UiButtonsComponent)

‎tests/angular/app/components/tables-simple.component.spec.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
ngDescribe({
2+
name: 'Test tables-simple component',
3+
modules: 'app',
4+
element: '<tables-simple></tables-simple>',
5+
tests: function (deps) {
6+
it('basic test', () => {
7+
//
8+
})
9+
}
10+
})

0 commit comments

Comments
 (0)