Download as
Browse Code »

Commit dd0ffec791959622ecada4513a594291b8b1543b

Authored by Adabriand Furtado
1 parent 10cdc2df
Exists in master

Modal com tutorial no primeiro acesso.

Showing 8 changed files with 79 additions and 16 deletions   Show diff stats
view/css/main.css
  Diff comments   View file @dd0ffec
... ... @@ -2,6 +2,7 @@
2 2 @import url("submit-sign.css");
3 3 @import url("teached-signs.css");
4 4 @import url("ranking.css");
  5 +@import url("tutorial.css");
5 6  
6 7 /* Main */
7 8 body nav.navbar:first-child {
... ... @@ -99,6 +100,15 @@ body {
99 100 padding-top: 42px;
100 101 }
101 102  
  103 +#main-container .modal {
  104 + top: 80px;
  105 +}
  106 +
  107 +#main-container .tutorial-info {
  108 + margin-top: 0px;
  109 +}
  110 +
  111 +
102 112 .sub-main-container {
103 113 display: none;
104 114 }
... ...
view/css/teached-signs.css
  Diff comments   View file @dd0ffec
1   -.teached-signs-msg[type=one] {
  1 +#teached-signs-container .teached-signs-msg[type=one] {
2 2 display: none;
3 3 }
4 4  
5   -.teached-signs-msg[type=more] {
  5 +#teached-signs-container .teached-signs-msg[type=more] {
6 6 display: none;
7 7 }
8 8  
9   -.col-btn {
  9 +#teached-signs-container .col-btn {
10 10 padding-right: 5px;
11 11 margin-bottom: 10px;
12 12 }
13 13  
14   -.modal {
15   - top: 100px;
16   -}
17   -
18   -.modal-xlg {
  14 +#teached-signs-container .modal-xlg {
19 15 width: 100%;
20 16 }
21 17  
22   -.modal-content {
  18 +#teached-signs-container .modal-content {
23 19 background: none;
24 20 border: none;
25 21 box-shadow: none;
... ...
view/css/tutorial.css 0 → 100644
  Diff comments   View file @dd0ffec
... ... @@ -0,0 +1,3 @@
  1 +#tutorial-container .modal-title {
  2 + color: #34495e;
  3 +}
0 4 \ No newline at end of file
... ...
view/js/render-sign.js
  Diff comments   View file @dd0ffec
1 1 (function(renderSign, $, undefined) {
2 2  
3   - var api_url = '';
  3 + var apiUrl = '';
4 4  
5 5 function _submitParameterJSON(parsedParameterJSON, callback) {
6 6 console.log(parsedParameterJSON);
7 7 $.ajax({
8 8 type : 'POST',
9   - url : api_url + '/sign',
  9 + url : apiUrl + '/sign',
10 10 data : JSON.stringify(parsedParameterJSON),
11 11 contentType : 'application/json',
12 12 success : function(response) {
... ... @@ -41,7 +41,7 @@
41 41 }
42 42  
43 43 function _getRenderedAvatarBaseUrl(userId, signName) {
44   - return api_url + '/public/' + userId + '/' + signName;
  44 + return apiUrl + '/public/' + userId + '/' + signName;
45 45 }
46 46  
47 47 renderSign.showRenderedAvatar = function(parameterJSON) {
... ... @@ -74,8 +74,8 @@
74 74 });
75 75 };
76 76  
77   - renderSign.setup = function(apiUrl) {
78   - api_url = apiUrl;
  77 + renderSign.setup = function(url) {
  78 + apiUrl = url;
79 79 $("#render-edit").off("click").on("click", function() {
80 80 _showRenderScreen(false);
81 81 configurationScreen.show(true);
... ...
view/js/tutorial.js 0 → 100644
  Diff comments   View file @dd0ffec
... ... @@ -0,0 +1,25 @@
  1 +(function(tutorial, $, undefined) {
  2 +
  3 + var TUTORIAL_DURATION = 30 * 2;
  4 + var pybossaEndpoint = '';
  5 + var projectName = '';
  6 + var loggedUser = '';
  7 +
  8 + function _finishTutorialSetup() {
  9 + var cookieName = loggedUser + "_" + projectName + '_tutorial';
  10 + var isFirstTime = typeof Cookies.get(cookieName) === 'undefined';
  11 + if (isFirstTime) {
  12 + $("#tutorial-container .modal").modal("show");
  13 + }
  14 + Cookies.set(cookieName, true, {expires : TUTORIAL_DURATION, path: pybossaEndpoint +
  15 + "/project/" + projectName});
  16 + }
  17 +
  18 + tutorial.setup = function(endpoint, name, user) {
  19 + pybossaEndpoint = endpoint;
  20 + projectName = name;
  21 + loggedUser = user;
  22 + loadHtmlHelper.load('/tutorial/tutorial.html', '#tutorial-container', _finishTutorialSetup);
  23 + };
  24 +
  25 +}(window.tutorial = window.tutorial || {}, jQuery));
0 26 \ No newline at end of file
... ...
view/js/wikilibras.js
  Diff comments   View file @dd0ffec
... ... @@ -194,6 +194,8 @@
194 194 loadHtmlHelper.setup(baseUrl);
195 195 iconHelper.setup(baseUrl);
196 196 dynworkflow.setup(baseUrl);
  197 +
  198 + tutorial.setup(pybossaEndpoint, projectName, _getLoggedUser());
197 199 submitSign.setup(uploadSignsUrl);
198 200 teachedSigns.setup();
199 201 renderSign.setup(apiUrl);
... ... @@ -255,7 +257,7 @@
255 257  
256 258 wikilibras.showTutorialContainer = function() {
257 259 $(".sub-main-container").hide();
258   - $("#tutorial-container").show();
  260 + $("#navbar-tutorial-container").show();
259 261 }
260 262  
261 263 wikilibras.showDemoTask = function() {
... ...
view/templates/index.html
  Diff comments   View file @dd0ffec
... ... @@ -244,7 +244,7 @@
244 244 </div>
245 245 </div>
246 246 </div>
247   - <div id="tutorial-container" class="sub-main-container">
  247 + <div id="navbar-tutorial-container" class="sub-main-container">
248 248 <h4>Veja como ensinar o Ícaro uma expressão.</h4>
249 249 <iframe width="560" height="315"
250 250 src="http://www.youtube.com/embed/AFRxTpNJc4I?controls=2&showinfo=0">
... ... @@ -256,6 +256,8 @@
256 256 </div>
257 257 <div id="ranking-container" class="sub-main-container container">
258 258 </div>
  259 + <div id="tutorial-container">
  260 + </div>
259 261 </div>
260 262  
261 263 <!-- External Libs -->
... ... @@ -284,6 +286,7 @@
284 286 <script src="{{ server }}/js/helpers/icon-helper.js"></script>
285 287 <script src="{{ server }}/js/helpers/tmpJSONParser.js"></script>
286 288  
  289 +<script src="{{ server }}/js/tutorial.js"></script>
287 290 <script src="{{ server }}/js/ranking.js"></script>
288 291 <script src="{{ server }}/js/teached-signs.js"></script>
289 292 <script src="{{ server }}/js/submit-sign.js"></script>
... ...
view/templates/tutorial/tutorial.html 0 → 100644
  Diff comments   View file @dd0ffec
... ... @@ -0,0 +1,24 @@
  1 +<div class="modal fade" tabindex="-1" role="dialog">
  2 + <div class="modal-dialog" role="document">
  3 + <div class="modal-content">
  4 + <div class="modal-header">
  5 + <button type="button" class="close" data-dismiss="modal"
  6 + aria-label="Fechar">
  7 + <span aria-hidden="true">&times;</span>
  8 + </button>
  9 + <h4 class="modal-title">Bem-vindo ao WikiLibras</h4>
  10 + </div>
  11 + <div class="modal-body">
  12 + <h5 class="tutorial-info">
  13 + Veja como você pode contribuir.
  14 + </h4>
  15 + <iframe width="570" height="315"
  16 + src="http://www.youtube.com/embed/AFRxTpNJc4I?controls=2&showinfo=0">
  17 + </iframe>
  18 + </div>
  19 + <div class="modal-footer">
  20 + <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
  21 + </div>
  22 + </div>
  23 + </div>
  24 +</div>
0 25 \ No newline at end of file
... ...