Skip to content

Commit 007f179

Browse files
DervisevicDervisevic
committed
Lot of progress, new design, error handling, loaders, Looks good. A little more remains
1 parent 849a5f6 commit 007f179

File tree

1 file changed

+117
-29
lines changed

1 file changed

+117
-29
lines changed

‎examples/bootstrap-example.html‎

Lines changed: 117 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,34 @@
1111
<link rel="stylesheet" href="../bower_components/spectrum/spectrum.css">
1212

1313
<style type="text/css">
14+
.spinner {
15+
width: 35px;
16+
height: 35px;
17+
background-color: #333;
18+
19+
border-radius: 100%;
20+
-webkit-animation: scaleout 1.0s infinite ease-in-out;
21+
animation: scaleout 1.0s infinite ease-in-out;
22+
}
23+
24+
@-webkit-keyframes scaleout {
25+
0% { -webkit-transform: scale(0.0) }
26+
100% {
27+
-webkit-transform: scale(1.0);
28+
opacity: 0;
29+
}
30+
}
31+
32+
@keyframes scaleout {
33+
0% {
34+
transform: scale(0.0);
35+
-webkit-transform: scale(0.0);
36+
} 100% {
37+
transform: scale(1.0);
38+
-webkit-transform: scale(1.0);
39+
opacity: 0;
40+
}
41+
}
1442

1543
body,html {
1644
min-height: 1400px;
@@ -31,32 +59,76 @@
3159
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
3260
display: none !important;
3361
}
62+
63+
.navbar-form > .form-group > .input-group {
64+
margin-left: 20px;
65+
}
66+
67+
.btn:active,
68+
.btn:focus,
69+
.btn.active {
70+
background-image: none;
71+
outline: 0;
72+
-webkit-box-shadow: none;
73+
box-shadow: none;
74+
}
75+
76+
.error {
77+
color: red;
78+
}
79+
3480
</style>
3581
</head>
3682
<body ng-app="test" ng-controller="TestCtrl" ng-cloak>
83+
<nav class="navbar navbar-default">
84+
<div class="container-fluid">
85+
<!-- Brand and toggle get grouped for better mobile display -->
86+
<div class="navbar-header">
87+
<a class="navbar-brand glyphicon glyphicon-home" href="/"></a>
88+
</div>
89+
90+
91+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
92+
<form class="navbar-form navbar-left" role="search">
93+
<div class="form-group">
94+
95+
<button class="btn btn-primary" ng-click="save();">Save configuration</button>
96+
97+
<div class="input-group" ng-show="navbarMode === 'default' && !error"></div>
98+
<div class="input-group" ng-show="navbarMode === 'loaded' && !error">
99+
<span ng-show="loadedData.user">Loaded configuration created by {{loadedData.user}} {{loadedData.created}}.</span>
100+
<div ng-show="!loadedData" class="spinner"></div>
101+
</div>
102+
103+
<div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.url && !error">
104+
<div class="input-group-addon">Link</div>
105+
<input type="text" class="form-control" value="{{savedGistData.url}}">
106+
<span class="input-group-btn">
107+
<button class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
108+
</span>
109+
</div>
110+
111+
<div class="input-group" ng-show="navbarMode === 'saved' && savedGistData.data.html_url && !error">
112+
<div class="input-group-addon">Gist</div>
113+
<input type="text" class="form-control" value="{{savedGistData.data.html_url}}">
114+
<span class="input-group-btn">
115+
<button class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
116+
</span>
117+
</div>
118+
119+
<div class="input-group" ng-show="navbarMode === 'saved' && !savedGistData && !error">
120+
<div class="spinner"></div>
121+
</div>
122+
123+
<div class="input-group error" ng-show="error">{{error}}</div>
124+
</div>
125+
</form>
126+
</div><!-- /.navbar-collapse -->
127+
</div><!-- /.container-fluid -->
128+
</nav>
37129

38130
<div class="col-md-12">
39131
<h1>Schema Form Example</h1>
40-
<div class="row">
41-
<div class="col-md-4"><p ng-if="error" class="alert alert-danger ">{{error}}</p></div>
42-
</div>
43-
<div class="row">
44-
<div class="col-sm-4">
45-
<button ng-click="save();">Save</button>
46-
</div>
47-
</div>
48-
<br>
49-
<div class="row">
50-
<div class="col-md-2">
51-
<div class="input-group">
52-
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
53-
<span class="input-group-btn">
54-
<button class="btn btn-default copy" type="button"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>
55-
</span>
56-
</div>
57-
58-
</div>
59-
</div>
60132
<div class="row">
61133
<div class="col-sm-4">
62134
<h3>The Generated Form</h3>
@@ -95,6 +167,7 @@ <h3>Schema</h3>
95167
</div>
96168
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
97169
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery.ui@1.10"></script>
170+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
98171
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
99172
<script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
100173
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
@@ -124,7 +197,8 @@ <h3>Schema</h3>
124197
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
125198
//
126199
// To test the tinymce addon, uncomment the files above and inject 'tx-tinymce' below.
127-
angular.module('test',['schemaForm','ui.ace']).controller('TestCtrl', function($scope, $http, $location){
200+
/*global alert*/
201+
angular.module('test',['schemaForm','ui.ace']).controller('TestCtrl', function($scope, $http, $location) {
128202

129203
$scope.tests = [
130204
//{ name: "Simple", data: 'data/simple.json' },
@@ -138,16 +212,25 @@ <h3>Schema</h3>
138212
{ name: "Hack: Conditional required", data: 'data/conditional-required.json' },
139213
];
140214

215+
$scope.navbarMode = 'default';
216+
141217
// Load data from gist.
142218
if ($location.path().length > 4) {
219+
$scope.navbarMode = 'loaded';
143220
var gistId = $location.path().replace('/','');
144221
$scope.loading = true;
145222
$http.get('https://api.github.com/gists/' + gistId).success(function(res) {
223+
$scope.error = null;
224+
$scope.loadedData = {
225+
created: moment(res.created_at).fromNow(),
226+
user: res.user !== null ? res.user.login : 'Anonymous'
227+
}
146228
$scope.loading = false;
147229
$scope.schemaJson = res.files['schema.json'].content;
148230
$scope.formJson = res.files['form.json'].content;
149231
$scope.modelData = res.files['model.json'].content;
150-
}).error(function(res) {
232+
}).error(function() {
233+
$scope.loadedData = 'dummy';
151234
$scope.error = 'Failed to load gist.';
152235
});
153236
}
@@ -216,6 +299,8 @@ <h3>Schema</h3>
216299
// To be able to save invalid json and point out errors, we
217300
// don't save the schema/form but rather the ones in the input.
218301

302+
$scope.navbarMode = 'saved';
303+
219304
var gist = {
220305
"description": "A saved configuration for a schema form example, http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html",
221306
"public": true,
@@ -233,22 +318,25 @@ <h3>Schema</h3>
233318
};
234319

235320
$http.post('https://api.github.com/gists', gist).success(function(data) {
236-
$scope.savedGistData = data;
321+
$scope.error = null;
237322
$location.path('/' + data.id);
238-
$scope.link = data.html_url;
239-
}).error(function(data) {
240-
$scope.error = 'Failed to save gist.'
323+
$scope.savedGistData = {
324+
data: data,
325+
url: $location.absUrl()
326+
};
327+
}).error(function() {
328+
$scope.error = 'Failed to save gist.';
241329
});
242-
}
330+
};
243331

244-
$scope.submitForm = function(form, model) {
332+
$scope.submitForm = function(form) {
245333
// First we broadcast an event so all fields validate themselves
246334
$scope.$broadcast('schemaFormValidate');
247335
// Then we check if the form is valid
248336
if (form.$valid) {
249337
alert('You did it!');
250338
}
251-
}
339+
};
252340

253341
});
254342
// @license-end

0 commit comments

Comments
 (0)