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,6 +2,7 @@
2 @import url("submit-sign.css"); 2 @import url("submit-sign.css");
3 @import url("teached-signs.css"); 3 @import url("teached-signs.css");
4 @import url("ranking.css"); 4 @import url("ranking.css");
  5 +@import url("tutorial.css");
5 6
6 /* Main */ 7 /* Main */
7 body nav.navbar:first-child { 8 body nav.navbar:first-child {
@@ -99,6 +100,15 @@ body { @@ -99,6 +100,15 @@ body {
99 padding-top: 42px; 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 .sub-main-container { 112 .sub-main-container {
103 display: none; 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 display: none; 2 display: none;
3 } 3 }
4 4
5 -.teached-signs-msg[type=more] { 5 +#teached-signs-container .teached-signs-msg[type=more] {
6 display: none; 6 display: none;
7 } 7 }
8 8
9 -.col-btn { 9 +#teached-signs-container .col-btn {
10 padding-right: 5px; 10 padding-right: 5px;
11 margin-bottom: 10px; 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 width: 100%; 15 width: 100%;
20 } 16 }
21 17
22 -.modal-content { 18 +#teached-signs-container .modal-content {
23 background: none; 19 background: none;
24 border: none; 20 border: none;
25 box-shadow: none; 21 box-shadow: none;
view/css/tutorial.css 0 → 100644
  Diff comments   View file @dd0ffec
@@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
  1 +#tutorial-container .modal-title {
  2 + color: #34495e;
  3 +}
0 \ No newline at end of file 4 \ No newline at end of file
view/js/render-sign.js
  Diff comments   View file @dd0ffec
1 (function(renderSign, $, undefined) { 1 (function(renderSign, $, undefined) {
2 2
3 - var api_url = ''; 3 + var apiUrl = '';
4 4
5 function _submitParameterJSON(parsedParameterJSON, callback) { 5 function _submitParameterJSON(parsedParameterJSON, callback) {
6 console.log(parsedParameterJSON); 6 console.log(parsedParameterJSON);
7 $.ajax({ 7 $.ajax({
8 type : 'POST', 8 type : 'POST',
9 - url : api_url + '/sign', 9 + url : apiUrl + '/sign',
10 data : JSON.stringify(parsedParameterJSON), 10 data : JSON.stringify(parsedParameterJSON),
11 contentType : 'application/json', 11 contentType : 'application/json',
12 success : function(response) { 12 success : function(response) {
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 } 41 }
42 42
43 function _getRenderedAvatarBaseUrl(userId, signName) { 43 function _getRenderedAvatarBaseUrl(userId, signName) {
44 - return api_url + '/public/' + userId + '/' + signName; 44 + return apiUrl + '/public/' + userId + '/' + signName;
45 } 45 }
46 46
47 renderSign.showRenderedAvatar = function(parameterJSON) { 47 renderSign.showRenderedAvatar = function(parameterJSON) {
@@ -74,8 +74,8 @@ @@ -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 $("#render-edit").off("click").on("click", function() { 79 $("#render-edit").off("click").on("click", function() {
80 _showRenderScreen(false); 80 _showRenderScreen(false);
81 configurationScreen.show(true); 81 configurationScreen.show(true);
view/js/tutorial.js 0 → 100644
  Diff comments   View file @dd0ffec
@@ -0,0 +1,25 @@ @@ -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 \ No newline at end of file 26 \ No newline at end of file
view/js/wikilibras.js
  Diff comments   View file @dd0ffec
@@ -194,6 +194,8 @@ @@ -194,6 +194,8 @@
194 loadHtmlHelper.setup(baseUrl); 194 loadHtmlHelper.setup(baseUrl);
195 iconHelper.setup(baseUrl); 195 iconHelper.setup(baseUrl);
196 dynworkflow.setup(baseUrl); 196 dynworkflow.setup(baseUrl);
  197 +
  198 + tutorial.setup(pybossaEndpoint, projectName, _getLoggedUser());
197 submitSign.setup(uploadSignsUrl); 199 submitSign.setup(uploadSignsUrl);
198 teachedSigns.setup(); 200 teachedSigns.setup();
199 renderSign.setup(apiUrl); 201 renderSign.setup(apiUrl);
@@ -255,7 +257,7 @@ @@ -255,7 +257,7 @@
255 257
256 wikilibras.showTutorialContainer = function() { 258 wikilibras.showTutorialContainer = function() {
257 $(".sub-main-container").hide(); 259 $(".sub-main-container").hide();
258 - $("#tutorial-container").show(); 260 + $("#navbar-tutorial-container").show();
259 } 261 }
260 262
261 wikilibras.showDemoTask = function() { 263 wikilibras.showDemoTask = function() {
view/templates/index.html
  Diff comments   View file @dd0ffec
@@ -244,7 +244,7 @@ @@ -244,7 +244,7 @@
244 </div> 244 </div>
245 </div> 245 </div>
246 </div> 246 </div>
247 - <div id="tutorial-container" class="sub-main-container"> 247 + <div id="navbar-tutorial-container" class="sub-main-container">
248 <h4>Veja como ensinar o Ícaro uma expressão.</h4> 248 <h4>Veja como ensinar o Ícaro uma expressão.</h4>
249 <iframe width="560" height="315" 249 <iframe width="560" height="315"
250 src="http://www.youtube.com/embed/AFRxTpNJc4I?controls=2&showinfo=0"> 250 src="http://www.youtube.com/embed/AFRxTpNJc4I?controls=2&showinfo=0">
@@ -256,6 +256,8 @@ @@ -256,6 +256,8 @@
256 </div> 256 </div>
257 <div id="ranking-container" class="sub-main-container container"> 257 <div id="ranking-container" class="sub-main-container container">
258 </div> 258 </div>
  259 + <div id="tutorial-container">
  260 + </div>
259 </div> 261 </div>
260 262
261 <!-- External Libs --> 263 <!-- External Libs -->
@@ -284,6 +286,7 @@ @@ -284,6 +286,7 @@
284 <script src="{{ server }}/js/helpers/icon-helper.js"></script> 286 <script src="{{ server }}/js/helpers/icon-helper.js"></script>
285 <script src="{{ server }}/js/helpers/tmpJSONParser.js"></script> 287 <script src="{{ server }}/js/helpers/tmpJSONParser.js"></script>
286 288
  289 +<script src="{{ server }}/js/tutorial.js"></script>
287 <script src="{{ server }}/js/ranking.js"></script> 290 <script src="{{ server }}/js/ranking.js"></script>
288 <script src="{{ server }}/js/teached-signs.js"></script> 291 <script src="{{ server }}/js/teached-signs.js"></script>
289 <script src="{{ server }}/js/submit-sign.js"></script> 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 @@ @@ -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 \ No newline at end of file 25 \ No newline at end of file