Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Tutorial for Clock Activity #512

Merged
merged 11 commits into from
Dec 21, 2019
Merged

Add Tutorial for Clock Activity #512

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
52906ac
Add button tags and link related files
AndreaGon Dec 21, 2019
bf41320
Upload bootstrap, jquery, and tutorial.js
AndreaGon Dec 21, 2019
8216391
Add bootstrap.css
AndreaGon Dec 21, 2019
641b2d4
Add the svg files for tutorial interface
AndreaGon Dec 21, 2019
b33fb34
Add CSS for tutorial
AndreaGon Dec 21, 2019
7f38f76
Added translation for tutorial
AndreaGon Dec 21, 2019
73bdc23
Add functionality to help button
AndreaGon Dec 21, 2019
d191a96
Fix indentation
AndreaGon Dec 21, 2019
b2b3314
Use white space instead of TAB
AndreaGon Dec 21, 2019
3074bcc
Use bottom placement instead of right for toolbar
AndreaGon Dec 21, 2019
bb50817
Add tutorial for Clock's hands
AndreaGon Dec 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions activities/Clock.activity/css/activity.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ canvas {
background-image: url(../icons/write-date.svg);
}

#main-toolbar #help-button {
background-image: url(../icons/help.svg);
}

/*Add image to fullscreen/unfullscreen button*/
#fullscreen-button {
background-image: url(../icons/view-fullscreen.svg);
Expand All @@ -69,6 +73,136 @@ canvas {
visibility: hidden;
z-index: 5;
}

/*Tutorial CSS*/
.tutorial-title {
background-color: #808080 !important;
color: #ffffff !important;
}

.tutorial-prev-icon {
display: inline-flex;
width: 90px;
}

.tutorial-prev-icon.icon-button {
color: white;
}

.tutorial-prev-icon.icon-button.disabled {
color: black;
}

.tutorial-prev-icon1 {
margin-left: 6px;
margin-top: 6px;
}

.tutorial-prev-icon2 {
background-image: url(../icons/go-left.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
}

.tutorial-prev-icon3 {
display: none;
width: 20px;
height: 20px;
background-size: 20px 20px;
background-color: white;
margin-top: -20px;
}

.tutorial-next-icon {
display: inline-flex;
width: 90px;
}

.tutorial-next-icon.icon-button {
color: white;
}

.tutorial-next-icon.icon-button.disabled {
color: black;
}

.tutorial-next-icon1 {
margin-left: 6px;
margin-top: 6px;
}

.tutorial-next-icon2 {
background-image: url(../icons/go-right.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
}

.tutorial-next-icon3 {
display: none;
width: 20px;
height: 20px;
background-size: 20px 20px;
background-color: white;
margin-top: -20px;
}

.tutorial-end-icon {
display: inline-flex;
width: 90px;
}

.tutorial-end-icon.icon-button {
color: white;
}

.tutorial-end-icon.icon-button.disabled {
color: black;
}

.tutorial-end-icon1 {
margin-left: 6px;
margin-top: 6px;
}

.tutorial-end-icon2 {
background-image: url(../icons/dialog-cancel.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
}

.tutorial-end-icon3 {
display: none;
width: 20px;
height: 20px;
background-size: 20px 20px;
background-color: white;
margin-top: -20px;
}

.icon-tutorial-text {
margin-top: 7px;
padding-left: 4px;
padding-right: 38px;
display: inline-block;
}

.web-activity-icon {
background-repeat: no-repeat;
background-position: center;
padding: 2px;
}

.icon-button {
border-radius: 22px;
margin-top: 5px;
height: 35px;
background-color: #808080;
border: 2px solid #808080;
}

/*Added the media query to avoid accidentally stopping*/
/*the activity on double clicking the unfullscreen button*/
@media only screen and (max-width: 870px)
Expand Down
26 changes: 26 additions & 0 deletions activities/Clock.activity/css/bootstrap-tour-standalone.min.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions activities/Clock.activity/icons/dialog-cancel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions activities/Clock.activity/icons/go-left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions activities/Clock.activity/icons/go-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions activities/Clock.activity/icons/help.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion activities/Clock.activity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
<link rel="stylesheet" media="screen and (device-width: 1200px) and (device-height: 900px)"
href="lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" href="css/activity.css">
<link rel="stylesheet" href="css/bootstrap-tour-standalone.min.css">
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap-tour-standalone.min.js"></script>
<script>if (window.module) module = window.module;</script>
<script data-main="js/loader" src="lib/require.js"></script>
</head>

Expand All @@ -22,7 +27,8 @@
<button class="toolbutton" id="write-time-button" title="Write time"></button>
<button class="toolbutton" id="write-date-button" title="Write date"></button>
<button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
<button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
<button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
<button class="toolbutton pull-right" id="help-button" title="Tutorial"></button>
</div>
<div id="canvas">
<div id="clock-container">
Expand Down
12 changes: 11 additions & 1 deletion activities/Clock.activity/js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiobuttonsgroup","mustache","moment-with-locales.min","webL10n"], function (activity,env,radioButtonsGroup,mustache,moment) {
define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiobuttonsgroup","mustache","moment-with-locales.min","webL10n", "tutorial"], function (activity,env,radioButtonsGroup,mustache,moment, webL10n, tutorial) {

// Manipulate the DOM only when it is ready.
requirejs(['domReady!'], function (doc) {
Expand All @@ -9,6 +9,11 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
var array=["simple","none","none"];
env.getEnvironment(function(err, environment) {
currentenv = environment;

// Set current language to Sugarizer
var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language;
llaske marked this conversation as resolved.
Show resolved Hide resolved
var language = environment.user ? environment.user.language : defaultLanguage;
webL10n.language.code = language;

// Load from datastore
if (!environment.objectId) {
Expand Down Expand Up @@ -43,6 +48,11 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
});
}
});

//Run tutorial when help button is clicked
document.getElementById("help-button").addEventListener('click', function(e) {
llaske marked this conversation as resolved.
Show resolved Hide resolved
tutorial.start();
});

var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
Expand Down
22 changes: 22 additions & 0 deletions activities/Clock.activity/lib/bootstrap-tour-standalone.min.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions activities/Clock.activity/lib/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

78 changes: 78 additions & 0 deletions activities/Clock.activity/lib/tutorial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
define(["webL10n"], function (l10n) {
var tutorial = {};
tutorial.start = function() {
var steps = [
{
element: "",
orphan: true,
placement: "bottom",
title: l10n.get("TutoExplainTitle"),
content: l10n.get("TutoExplainContent")
},
{
element: "#simple-clock-button",
placement: "right",
llaske marked this conversation as resolved.
Show resolved Hide resolved
title: l10n.get("TutoSimpleTitle"),
content: l10n.get("TutoSimpleContent")
},
{
element: "#nice-clock-button",
placement: "right",
title: l10n.get("TutoNiceTitle"),
content: l10n.get("TutoNiceContent")
},
{
element: "#write-time-button",
placement: "right",
title: l10n.get("TutoTimeTitle"),
content: l10n.get("TutoTimeContent")
},
{
element: "#write-date-button",
placement: "right",
title: l10n.get("TutoDateTitle"),
content: l10n.get("TutoDateContent")
}
];
var tour = new Tour({
template: "\
<div class='popover tour'>\
<div class='arrow'></div>\
<h3 class='popover-title tutorial-title'></h3>\
<div class='popover-content'></div>\
<div class='popover-navigation' style='display: flex; flex-wrap:wrap; justify-content: center; align-items: center'>\
<div class='tutorial-prev-icon icon-button' data-role='prev'>\
<div class='tutorial-prev-icon1 web-activity'>\
<div class='tutorial-prev-icon2 web-activity-icon'></div>\
<div class='tutorial-prev-icon3 web-activity-disable'></div>\
</div>\
<div class='icon-tutorial-text'>"+l10n.get("TutoPrev")+"</div>\
</div>\
<span data-role='separator' style='margin: 4px'>|</span>\
<div class='tutorial-next-icon icon-button' data-role='next'>\
<div class='tutorial-next-icon1 web-activity'>\
<div class='tutorial-next-icon2 web-activity-icon'></div>\
<div class='tutorial-next-icon3 web-activity-disable'></div>\
</div>\
<div class='icon-tutorial-text'>"+l10n.get("TutoNext")+"</div>\
</div>\
<div class='tutorial-end-icon icon-button' data-role='end'>\
<div class='tutorial-end-icon1 web-activity'>\
<div class='tutorial-end-icon2 web-activity-icon'></div>\
<div class='tutorial-end-icon3 web-activity-disable'></div>\
</div>\
<div class='icon-tutorial-text'>"+l10n.get("TutoEnd")+"</div>\
</div>\
</div>\
</div>",
storage: false,
backdrop: true,
steps: steps
});
tour.init();
tour.start(true);

};

return tutorial;
});
Loading