diff --git a/activities/Gears.activity/css/activity.css b/activities/Gears.activity/css/activity.css index 307315bd6..cf77fcb59 100644 --- a/activities/Gears.activity/css/activity.css +++ b/activities/Gears.activity/css/activity.css @@ -31,6 +31,24 @@ background-image: url(../icons/toolbar-help.svg); } +#fullscreen-button { + background-image: url(../icons/view-fullscreen.svg); +} + +#unfullscreen-button { + background-image: url(../icons/view-return.svg); + border: 0; + border-radius: 0px; + margin: 1px; + width: 45px; + height: 45px; + top: 0; + right: 5%; + position: absolute; + visibility: hidden; + z-index: 5; +} + @media screen and (max-width: 567px) { .toolbar { padding-left: 10px; diff --git a/activities/Gears.activity/icons/view-fullscreen.svg b/activities/Gears.activity/icons/view-fullscreen.svg new file mode 100644 index 000000000..f71058c69 --- /dev/null +++ b/activities/Gears.activity/icons/view-fullscreen.svg @@ -0,0 +1,6 @@ + + +]> + + \ No newline at end of file diff --git a/activities/Gears.activity/icons/view-return.svg b/activities/Gears.activity/icons/view-return.svg new file mode 100644 index 000000000..dade2d208 --- /dev/null +++ b/activities/Gears.activity/icons/view-return.svg @@ -0,0 +1,74 @@ + +image/svg+xml \ No newline at end of file diff --git a/activities/Gears.activity/index.html b/activities/Gears.activity/index.html index ff088534f..8130107ed 100644 --- a/activities/Gears.activity/index.html +++ b/activities/Gears.activity/index.html @@ -28,10 +28,12 @@ +
+ diff --git a/activities/Gears.activity/js/activity.js b/activities/Gears.activity/js/activity.js index 3c69f727f..27412b05b 100644 --- a/activities/Gears.activity/js/activity.js +++ b/activities/Gears.activity/js/activity.js @@ -117,6 +117,22 @@ define(["sugar-web/activity/activity","sugar-web/graphics/radiobuttonsgroup","ge gearSketch.playDemo(); }); + // Full screen. + document.getElementById("fullscreen-button").addEventListener('click', function() { + document.getElementById("main-toolbar").style.opacity = 0; + document.getElementById("canvas").style.top = "0px"; + gearSketch.canvasOffsetY = gearSketch.canvas.getBoundingClientRect().top; + gearSketch.updateCanvasSize(); + document.getElementById("unfullscreen-button").style.visibility = "visible"; + }); + document.getElementById("unfullscreen-button").addEventListener('click', function() { + document.getElementById("main-toolbar").style.opacity = 1; + document.getElementById("canvas").style.top = "55px"; + gearSketch.canvasOffsetY = gearSketch.canvas.getBoundingClientRect().top; + gearSketch.updateCanvasSize(); + document.getElementById("unfullscreen-button").style.visibility = "hidden"; + }); + }); });