robeaux 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/Gruntfile.js +43 -0
  3. data/Makefile +11 -2
  4. data/README.markdown +2 -0
  5. data/css/main.css +1 -0
  6. data/css/style.css +113 -24
  7. data/css/themes/blackboard.css +1 -0
  8. data/css/themes/dark.css +1 -0
  9. data/css/themes/gray.css +1 -0
  10. data/css/themes/whiteboard.css +1 -0
  11. data/images/bullet-connections-2.png +0 -0
  12. data/images/bullet-connections.png +0 -0
  13. data/images/bullet-devices-2.png +0 -0
  14. data/images/bullet-devices.png +0 -0
  15. data/images/devices-image-2.png +0 -0
  16. data/images/devices-image.png +0 -0
  17. data/images/logo-robeaux.png +0 -0
  18. data/images/robots-icon_03.png +0 -0
  19. data/index.html +15 -8
  20. data/js/controllers/widget_editor_ctrl.js +44 -0
  21. data/js/controllers/widgets_ctrl.js +40 -0
  22. data/js/directives/widget.js +50 -0
  23. data/js/router.js +5 -0
  24. data/js/services/themes.js +9 -5
  25. data/js/services/widgets.js +86 -0
  26. data/js/vendor/angular-route.min.js +1 -2
  27. data/js/vendor/angular.min.js +208 -206
  28. data/js/widgets/attitude.html +32 -0
  29. data/js/widgets/attitude.js +27 -0
  30. data/js/widgets/mindwave.html +51 -0
  31. data/js/widgets/mindwave.js +23 -0
  32. data/less/app.less +21 -0
  33. data/less/objects/buttons.less +32 -0
  34. data/less/objects/connections.less +28 -0
  35. data/less/objects/device.less +30 -0
  36. data/less/objects/forms.less +29 -0
  37. data/less/objects/list.less +27 -0
  38. data/less/objects/nav.less +33 -0
  39. data/less/objects/robot.less +43 -0
  40. data/less/objects/themes.less +18 -0
  41. data/less/objects/widgets.less +85 -0
  42. data/less/support/buttons.less +39 -0
  43. data/less/support/container.less +9 -0
  44. data/less/support/forms.less +18 -0
  45. data/less/support/mixins.less +3 -0
  46. data/less/themes/blackboard.less +158 -0
  47. data/less/themes/dark.less +148 -0
  48. data/less/themes/default.less +52 -0
  49. data/less/themes/gray.less +121 -0
  50. data/less/themes/whiteboard.less +152 -0
  51. data/less/vendor/elements.less +156 -0
  52. data/less/vendor/normalize.less +425 -0
  53. data/less/vendor/semantic-grid.less +67 -0
  54. data/less/views/devices.less +47 -0
  55. data/less/views/robots.less +132 -0
  56. data/less/views/themes.less +31 -0
  57. data/less/views/widgets.less +50 -0
  58. data/package.json +6 -3
  59. data/partials/device.html +66 -57
  60. data/partials/index.html +12 -6
  61. data/partials/robot.html +104 -51
  62. data/partials/themes.html +32 -29
  63. data/partials/widget_editor.html +68 -0
  64. data/robeaux.gemspec +1 -1
  65. data/test/controllers/device_commands_ctrl.js +129 -0
  66. data/test/controllers/device_events_ctrl.js +82 -0
  67. data/test/controllers/index_ctrl.js +48 -0
  68. data/test/controllers/nav_ctrl.js +40 -0
  69. data/test/controllers/robot_commands_ctrl.js +127 -0
  70. data/test/controllers/robot_ctrl.js +62 -0
  71. data/test/controllers/themes_ctrl.js +96 -0
  72. data/test/controllers/widget_editor_ctrl.js +111 -0
  73. data/test/controllers/widgets_ctrl.js +74 -0
  74. data/test/functions/functions.js +30 -0
  75. data/test/karma.conf.js +3 -7
  76. data/test/karma_test_all.conf.js +23 -0
  77. data/test/karma_test_controllers.conf.js +19 -0
  78. data/test/karma_test_functions.conf.js +14 -0
  79. data/test/karma_test_services.conf.js +17 -0
  80. data/test/services/themes.js +122 -0
  81. data/test/services/widgets.js +104 -0
  82. data/test/support/themes.json +9 -0
  83. data/test/support/widgets.json +18 -0
  84. data/test/vendor/angular-mocks.js +13 -13
  85. data/test/vendor/jquery.js +8 -8
  86. metadata +69 -3
  87. data/test/main.js +0 -248
@@ -0,0 +1,132 @@
1
+ body {
2
+ background: @body-background-color;
3
+ font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
4
+ color: @body-text-color;
5
+ }
6
+
7
+ .container-wrap {
8
+ margin-bottom: 30px;
9
+ }
10
+
11
+ .container, .robot, .widgets, .connections, .themes {
12
+ width: @gridsystem-width;
13
+ padding:0;
14
+ .container();
15
+ }
16
+
17
+ .row {
18
+ background: #fff;
19
+ padding: 15px 0;
20
+ margin-top: 10px;
21
+ .clearfix();
22
+ }
23
+
24
+ .robot-details {
25
+ .column(12);
26
+ }
27
+
28
+ .robot {
29
+
30
+ h2 {
31
+ .column(12);
32
+ text-align: center;
33
+ margin-bottom: 15px;
34
+ }
35
+
36
+ .input, .results {
37
+ .column(6);
38
+ }
39
+ }
40
+
41
+ .robot-detail {
42
+ .widgets {
43
+ .new-widget-instance {
44
+ height: 100vh;
45
+ width: 100%;
46
+ }
47
+
48
+ .active-widgets {
49
+
50
+ .add-widget {
51
+ .column(3);
52
+ }
53
+
54
+ button {
55
+ font-size: 2em;
56
+ }
57
+
58
+ widget {
59
+ .column(9);
60
+ }
61
+ }
62
+
63
+ .panel {
64
+ margin: 10% auto;
65
+ width: 600px;
66
+
67
+ .type {
68
+ .column(5);
69
+ }
70
+
71
+ .attrs {
72
+ .column(7);
73
+
74
+ label {
75
+ .column(4);
76
+ }
77
+
78
+ input {
79
+ .column(8);
80
+ }
81
+ }
82
+ }
83
+ }
84
+
85
+ .robot-devices {
86
+ .column(6);
87
+ }
88
+
89
+ .robot-connection {
90
+ .column(6);
91
+ }
92
+ }
93
+
94
+ .commands, .device-commands {
95
+ .param {
96
+ .row(6);
97
+ height: 40px;
98
+
99
+ input[type='text'] {
100
+ .column(2,6);
101
+ }
102
+
103
+ select {
104
+ .column(1.5,6);
105
+ }
106
+
107
+ .close {
108
+ .column(0.5,6);
109
+ line-height: 34px;
110
+ &:hover {
111
+ color: #f00;
112
+ cursor: pointer;
113
+ }
114
+ }
115
+ }
116
+
117
+ .input>select, &>select {
118
+ width: 100%;
119
+ .container-block();
120
+ margin-bottom: 15px;
121
+ }
122
+
123
+ button {
124
+ width: 70%;
125
+ margin-top: 15px;
126
+ .container-block();
127
+ }
128
+
129
+ table {
130
+ width: 100%;
131
+ }
132
+ }
@@ -0,0 +1,31 @@
1
+ .themes {
2
+ .sidebar {
3
+ .column(4);
4
+ }
5
+
6
+ .new-theme {
7
+ .row(4);
8
+
9
+ input {
10
+ .column(3,4);
11
+ }
12
+
13
+ button {
14
+ .column(1,4);
15
+ }
16
+ }
17
+
18
+ .editor {
19
+ .column(8);
20
+
21
+ textarea {
22
+ width: 100%;
23
+ height: 250px;
24
+ }
25
+ }
26
+
27
+ .footer {
28
+ .clearfix();
29
+ .column(12);
30
+ }
31
+ }
@@ -0,0 +1,50 @@
1
+ .widgets {
2
+ .sidebar {
3
+ .column(3);
4
+ }
5
+
6
+ .new-widget {
7
+ .row(3);
8
+
9
+ input {
10
+ .column(2, 3);
11
+ }
12
+
13
+ button {
14
+ .column(1, 3);
15
+ }
16
+ }
17
+
18
+ .new-attr {
19
+ .row(9);
20
+
21
+ input {
22
+ .column(5, 9);
23
+ }
24
+
25
+ button {
26
+ .column(3, 9);
27
+ }
28
+ }
29
+
30
+ .editor {
31
+ .column(9);
32
+ }
33
+
34
+ .attrs {
35
+ .column(9, 9);
36
+ }
37
+
38
+ .field {
39
+ .column(4.5, 9);
40
+
41
+ textarea {
42
+ width: 100%;
43
+ min-height: 250px;
44
+ }
45
+ }
46
+
47
+ .footer {
48
+ .column(12);
49
+ }
50
+ }
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "robeaux",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "An AngularJS interface for the CPPP-IO API spec",
5
5
  "homepage": "http://cylonjs.com",
6
6
  "bugs": "https://github.com/hybridgroup/robeaux/issues",
@@ -11,8 +11,11 @@
11
11
  },
12
12
  "license": "Apache 2.0",
13
13
  "devDependencies": {
14
+ "grunt": "^0.4.5",
15
+ "grunt-contrib-less": "^0.12.0",
16
+ "grunt-contrib-watch": "^0.6.1",
14
17
  "karma": "~0.12.16",
15
- "karma-phantomjs-launcher": "~0.1",
16
- "karma-jasmine": "~0.1.5"
18
+ "karma-jasmine": "~0.1.5",
19
+ "karma-phantomjs-launcher": "~0.1"
17
20
  }
18
21
  }
data/partials/device.html CHANGED
@@ -1,67 +1,76 @@
1
- <div class="device-detail">
2
- <header>
3
- <h2>Commands</h2>
4
- <h2>Events</h2>
5
- </header>
6
-
7
- <div class="device-commands" ng-controller="DeviceCommandsCtrl">
8
- <select ng-model="command" ng-options="cmd for cmd in device.commands">
9
- </select>
10
-
11
- <div class="params">
12
- <div class="param" ng-repeat="param in device.params">
13
- <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
14
- <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
15
- <select ng-options="type for type in types" ng-model="param.type"></select>
16
- <span class="close" ng-click="removeParam($index)">X</span>
17
- </div>
1
+ <section class="device-detail">
2
+ <div class="row">
3
+ <div class="device-header">
4
+ <h2>Commands</h2>
5
+ <h2>Events</h2>
18
6
  </div>
7
+ </div>
19
8
 
20
- <button ng-click="submit()" ng-disabled="isDisabled()">run</button>
9
+ <div class="row row-device">
10
+ <div class="container">
11
+ <div class="device-commands" ng-controller="DeviceCommandsCtrl">
12
+ <select ng-model="command" ng-options="cmd for cmd in device.commands">
13
+ </select>
21
14
 
22
- <table class="results">
23
- <thead>
24
- <th>Results</th>
25
- </thead>
15
+ <div class="params">
16
+ <div class="param" ng-repeat="param in device.params">
17
+ <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
18
+ <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
19
+ <select ng-options="type for type in types" ng-model="param.type"></select>
20
+ <span class="close" ng-click="removeParam($index)">&#x2716;</span>
21
+ </div>
22
+ </div>
26
23
 
27
- <tbody>
28
- <tr class="result" ng-repeat="entry in device.results">
29
- <td>{{entry.result}}</td>
30
- </tr>
31
- </tbody>
32
- </table>
33
- </div>
24
+ <button class="btn btn-run" ng-click="submit()" ng-disabled="isDisabled()">run</button>
34
25
 
35
- <div class="device-events" ng-controller="DeviceEventsCtrl">
36
- <div class="input">
37
- <input type=text" ng-model="eventName" placeholder="event name">
38
- <button ng-click="listen()">listen</button>
39
- </div>
26
+ <table class="results">
27
+ <thead>
28
+ <tr>
29
+ <th>Results</th>
30
+ </tr>
31
+ </thead>
32
+ <tbody>
33
+ <tr class="result" ng-repeat="entry in device.results">
34
+ <td>{{entry.result}}</td>
35
+ </tr>
36
+ </tbody>
37
+ </table>
38
+ </div>
39
+
40
+ <div class="device-events" ng-controller="DeviceEventsCtrl">
41
+ <div class="input">
42
+ <input type="text" ng-model="eventName" placeholder="event name">
43
+ <button class="btn btn-robot" ng-click="listen()">listen</button>
44
+ </div>
40
45
 
41
- <table class="listeners">
42
- <thead>
43
- <th colspan="2">Listeners</th>
44
- </thead>
46
+ <div class="listeners-div">
47
+ <table class="listeners">
48
+ <thead>
49
+ <th colspan="2">Listeners</th>
50
+ </thead>
45
51
 
46
- <tbody>
47
- <tr class="listener" ng-repeat="(name, listeners) in device.listeners">
48
- <td>{{name}}</td>
49
- <td class="remove" ng-click="remove(name)">remove</td>
50
- </tr>
51
- </tbody>
52
- </table>
52
+ <tbody>
53
+ <tr class="listener" ng-repeat="(name, listeners) in device.listeners">
54
+ <td>{{name}}</td>
55
+ <td class="remove" ng-click="remove(name)">remove</td>
56
+ </tr>
57
+ </tbody>
58
+ </table>
59
+ </div>
53
60
 
54
- <table class="events">
55
- <thead>
56
- <th colspan="2">Events</th>
57
- </thead>
61
+ <table class="events">
62
+ <thead>
63
+ <th colspan="2">Events</th>
64
+ </thead>
58
65
 
59
- <tbody>
60
- <tr class="event" ng-repeat="event in device.events">
61
- <td>{{event.name}}</td>
62
- <td>{{event.data}}</td>
63
- </tr>
64
- </tbody>
65
- </table>
66
+ <tbody>
67
+ <tr class="event" ng-repeat="event in device.events">
68
+ <td>{{event.name}}</td>
69
+ <td>{{event.data}}</td>
70
+ </tr>
71
+ </tbody>
72
+ </table>
73
+ </div>
74
+ </div>
66
75
  </div>
67
- </div>
76
+ </section>
data/partials/index.html CHANGED
@@ -1,11 +1,17 @@
1
1
  <div class="robots">
2
- <div class="robot" ng-repeat="robot in robots" ng-click="details(robot.name)">
3
- <span class="icon">robot</span>
4
- <span class="name">{{robot.name}}</span>
2
+ <div class="row" ng-repeat="robot in robots" ng-click="details(robot.name)">
3
+ <div class="robot">
4
+ <div class="robot-details">
5
5
 
6
- <div class="details">
7
- <span><strong>Connections:</strong> {{robot.connections.length}}</span>
8
- <span><strong>Devices:</strong> {{robot.devices.length}}</span>
6
+ <span class="btn btn-robot btn-big">robot</span>
7
+ <span class="name">{{robot.name}}</span>
8
+
9
+ <div class="details">
10
+ <span class="bullet-connections"><strong>Connections</strong> {{robot.connections.length}}</span>
11
+ <span class="bullet-devices"><strong>Devices</strong> {{robot.devices.length}}</span>
12
+ </div>
13
+
14
+ </div>
9
15
  </div>
10
16
  </div>
11
17
  </div>
data/partials/robot.html CHANGED
@@ -1,74 +1,127 @@
1
1
  <div class="robot-detail">
2
- <div class="robot" ng-class="{'with-commands': (robot.commands.length > 0)}">
3
- <span class="icon">robot</span>
4
- <span class="name">{{robot.name}}</span>
5
2
 
6
- <div class="details">
7
- <span><strong>Connections:</strong> {{robot.connections.length}}</span>
8
- <span><strong>Devices:</strong> {{robot.devices.length}}</span>
9
- </div>
3
+ <!-- begin robot section -->
4
+ <div class="row">
5
+ <div class="robot" ng-class="{'with-commands': (robot.commands.length > 0)}">
6
+ <div class="robot-details">
7
+ <span class="btn btn-robot btn-big">robot</span>
8
+ <span class="name">{{robot.name}}</span>
9
+
10
+ <div class="details">
11
+ <span class="bullet-connections"><strong>Connections</strong> {{robot.connections.length}}</span>
12
+ <span class="bullet-devices"><strong>Devices</strong> {{robot.devices.length}}</span>
13
+ </div>
14
+ </div>
15
+
16
+ <div class="commands" ng-if="(robot.commands.length > 0)" ng-controller="RobotCommandsCtrl">
17
+ <h2>Commands</h2>
18
+ <div class="input">
19
+ <select ng-model="command" ng-options="cmd for cmd in robot.commands">
20
+ </select>
10
21
 
11
- <div class="commands" ng-if="(robot.commands.length > 0)" ng-controller="RobotCommandsCtrl">
12
- <h2>Commands</h2>
13
- <div class="input">
14
- <select ng-model="command" ng-options="cmd for cmd in robot.commands">
15
- </select>
16
-
17
- <div class="params">
18
- <div class="param" ng-repeat="param in robot.params">
19
- <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
20
- <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
21
- <select ng-options="type for type in types" ng-model="param.type"></select>
22
- <span class="close" ng-click="removeParam($index)">X</span>
22
+ <div class="params">
23
+ <div class="param" ng-repeat="param in robot.params">
24
+ <input placeholder='name' type="text" ng-model="param.name" ng-focus="addParam($last)">
25
+ <input placeholder='value' type="text" ng-model="param.value" ng-focus="addParam($last)">
26
+ <select ng-options="type for type in types" ng-model="param.type"></select>
27
+ <span class="close" ng-click="removeParam($index)">&#x2716;</span>
28
+ </div>
23
29
  </div>
30
+
31
+ <button class="btn btn-run" ng-click="submit()" ng-disabled="isDisabled()">run</button>
24
32
  </div>
25
33
 
26
- <button ng-click="submit()" ng-disabled="isDisabled()">run</button>
27
- </div>
34
+ <div class="results">
35
+ <table>
36
+ <thead>
37
+ <th>Results</th>
38
+ </thead>
28
39
 
29
- <div class="results">
30
- <table>
31
- <thead>
32
- <th>Results</th>
33
- </thead>
34
-
35
- <tbody>
36
- <tr class="result" ng-repeat="entry in robot.results">
37
- <td>{{entry.result}}</td>
38
- </tr>
39
- </tbody>
40
- </table>
40
+ <tbody>
41
+ <tr class="result" ng-repeat="entry in robot.results">
42
+ <td>{{entry.result}}</td>
43
+ </tr>
44
+ </tbody>
45
+ </table>
46
+ </div>
41
47
  </div>
42
48
  </div>
43
49
  </div>
50
+ <!-- end robot section -->
44
51
 
45
- <div ng-show="device" ng-include="'/partials/device.html'">
46
- </div>
52
+ <!-- begin widgets -->
53
+ <div class="row">
54
+ <div class="widgets" ng-controller="WidgetsCtrl">
55
+ <div class="new-widget-instance" ng-show="newWidget">
56
+ <div class="panel">
57
+ <div class="panel-header">
58
+ <span class="close" ng-click="newWidget = null"> &#x2716; </span>
59
+ <h2>New Widget Instance</h2>
60
+ </div>
47
61
 
48
- <section>
49
- <div class="robot-devices">
50
- <div class="device"
51
- ng-class="{selected: selected(device)}"
52
- ng-repeat="device in robot.devices"
53
- ng-click="select(device)">
54
- <span class="icon">device</span>
55
- <span class="name">{{device.name}}</span>
62
+ <div class="panel-body">
63
+ <div class="type">
64
+ <h3>Widget Type:</h3>
65
+ <select ng-model="newWidget.base" ng-options="w.name for w in widgets.list"></select>
66
+ </div>
56
67
 
57
- <div class="details">
58
- <span>{{device.connection}}</span>
68
+ <div class="attrs" ng-if="newWidget.base.attrs.length">
69
+ <h3>Params:</h3>
70
+
71
+ <div class="attr-element" ng-repeat="attr in newWidget.base.attrs">
72
+ <label>{{attr}}</label>
73
+ <input type="text" ng-model="newWidget.attrs[attr]">
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="panel-footer">
79
+ <button class="btn btn-device" ng-click="newActiveWidget(newWidget)">Create</button>
80
+ <button class="btn btn-run" ng-click="newWidget = null">Close</button>
81
+ </div>
59
82
  </div>
60
83
  </div>
84
+
85
+ <div class="active-widgets">
86
+ <div class="add-widget">
87
+ <button class="btn btn-robot btn-big" ng-click="newWidget = { base: '', attrs: {} }"> &#x2b; </button>
88
+ </div>
89
+
90
+ <widget ng-repeat="widget in activeWidgets" data-name="{{widget.name}}" data-attrs="{{widget.attrs}}">
91
+ <span class="close" ng-click="removeWidget($index)"> &#x2716; </span>
92
+ </widget>
93
+ </div>
61
94
  </div>
95
+ </div>
96
+ <!-- end widgets -->
62
97
 
63
- <div class="robot-connections">
64
- <div class="connection" ng-repeat="connection in robot.connections">
65
- <span class="icon">connection</span>
66
- <span class="name">{{connection.name}}</span>
98
+ <div ng-show="device" ng-include="'/partials/device.html'"></div>
67
99
 
68
- <div class="details">
69
- <span ng-if="connection.port">{{connection.port}}</span>
100
+ <!-- begin connections -->
101
+ <section class="row">
102
+ <div class="connections">
103
+ <div class="robot-devices">
104
+ <div class="device" ng-class="{selected: selected(device)}" ng-repeat="device in robot.devices">
105
+ <button ng-click="select(device)" class="btn btn-device">device</button>
106
+ <span class="name">{{device.name}}</span>
107
+
108
+ <div class="details">
109
+ <span>{{device.connection}}</span>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="robot-connections">
115
+ <div class="connection" ng-repeat="connection in robot.connections">
116
+ <span class="btn btn-connect">connection</span>
117
+ <span class="name">{{connection.name}}</span>
118
+
119
+ <div class="details">
120
+ <span ng-if="connection.port">{{connection.port}}</span>
121
+ </div>
70
122
  </div>
71
123
  </div>
72
124
  </div>
73
125
  </section>
126
+ <!-- end connections -->
74
127
  </div>
data/partials/themes.html CHANGED
@@ -1,39 +1,42 @@
1
- <div class="themes">
2
- <div class="sidebar">
3
- <h2>Themes</h2>
1
+ <div class="row">
2
+ <div class="themes">
3
+ <div class="sidebar">
4
+ <h2>Themes</h2>
4
5
 
5
- <div class="list">
6
- <div class="theme"
7
- ng-repeat="theme in themes.list | filter:{custom: true}"
8
- ng-click="edit(theme)"
9
- ng-class="{selected: (editing === theme)}">
10
- {{theme.name}}
11
- <span class="close" ng-if="theme.custom" ng-click="remove(theme.name)">X</span>
6
+ <div class="new-theme">
7
+ <input type="text" ng-model="name" placeholder="new theme name">
8
+ <button ng-click="add(name)" class="btn btn-device">Add</button>
9
+ </div>
10
+
11
+ <div class="list">
12
+ <div class="theme"
13
+ ng-repeat="theme in themes.list | filter:{custom: true}"
14
+ ng-click="edit(theme)"
15
+ ng-class="{selected: (editing === theme)}">
16
+ {{theme.name}}
17
+ <span class="close" ng-if="theme.custom" ng-click="remove(theme.name)">&#x2716;</span>
18
+ </div>
12
19
  </div>
13
- </div>
14
20
 
15
- <div class="new-theme">
16
- <input type="text" ng-model="name" placeholder="new theme name">
17
- <button ng-click="add(name)">add new theme</button>
18
21
  </div>
19
- </div>
20
22
 
21
- <div class="editor">
22
- <h2>Editor</h2>
23
+ <div class="editor">
24
+ <h2>Editor</h2>
23
25
 
24
- <textarea ng-disabled="!editing" ng-model="editing.css" ng-blur="themes.save()" placeholder="write your css here">
25
- </textarea>
26
- </div>
26
+ <textarea ng-disabled="!editing" ng-model="editing.css" ng-blur="themes.save()" placeholder="write your css here">
27
+ </textarea>
28
+ </div>
27
29
 
28
- <div class="footer">
29
- <button class="save" ng-click="themes.save()">save</button>
30
- <button class="reset" ng-click="themes.reset()">reset</button>
30
+ <div class="footer">
31
+ <button class="btn btn-save" ng-click="themes.save()">save</button>
32
+ <button class="btn btn-reset" ng-click="themes.reset()">reset</button>
31
33
 
32
- <div class="selector">
33
- <span>use theme: </span>
34
- <select ng-model="themes.active"
35
- ng-options="theme.name for theme in themes.list">
36
- </select>
34
+ <div class="selector">
35
+ <span>use theme: </span>
36
+ <select ng-model="themes.active"
37
+ ng-options="theme.name for theme in themes.list">
38
+ </select>
39
+ </div>
37
40
  </div>
38
41
  </div>
39
- </div>
42
+ </div>