diff --git a/html/main.html b/html/main.html index 9cf277e3..a41f9f5b 100644 --- a/html/main.html +++ b/html/main.html @@ -4,6 +4,9 @@ <%template "head" .%> +
+ +
diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss new file mode 100644 index 00000000..c784352d --- /dev/null +++ b/src/styles/components/helptour.scss @@ -0,0 +1,47 @@ +/*! + * Spreed WebRTC. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed WebRTC. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +#helptour { +} + +.helptour { + .in { + display: block; + } + .popover { + opacity: 0.85; + } + .meetingRoom { + top: 84px; + left: 10px; + .arrow { + left: 10%; + } + } + .buddyList { + left: initial; + right: 280px; + top: 70px; + .arrow { + top: 20%; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index e061bb08..81722cd9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -52,5 +52,6 @@ @import 'components/contactsmanager'; @import 'components/presentation'; @import 'components/youtubevideo'; +@import "components/helptour"; @import 'shame'; diff --git a/static/js/directives/directives.js b/static/js/directives/directives.js index 5c60f9ec..77c5930a 100644 --- a/static/js/directives/directives.js +++ b/static/js/directives/directives.js @@ -49,7 +49,8 @@ define([ 'directives/title', 'directives/welcome', 'directives/menu', - 'directives/ui'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, welcome, menu, ui) { + 'directives/ui', + 'directives/helptour'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, welcome, menu, ui, helptour) { var directives = { onEnter: onEnter, @@ -78,7 +79,8 @@ define([ title: title, welcome: welcome, menu: menu, - ui: ui + ui: ui, + helptour: helptour }; var initialize = function(angModule) { diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js new file mode 100644 index 00000000..ed86c4ab --- /dev/null +++ b/static/js/directives/helptour.js @@ -0,0 +1,78 @@ +/* + * Spreed WebRTC. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed WebRTC. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, template, templatehelptour) { + + //helptour + return [function() { + + var controller = ['$scope', '$rootScope', '$timeout', 'mediaStream', '$modal', function($scope, $rootScope, $timeout, mediaStream, $modal) { + var displayTime = 500; + var doStep = function(i, elem) { + $timeout(function() { + $(elem).addClass('in'); + }, displayTime * i, true); + $timeout(function() { + $(elem).removeClass('in'); + }, displayTime * (i + 1), true); + }; + var startTour = function() { + $scope.steps.each(function(i, x) { + doStep(i, x); + }); + }; + var introTour = function() { + $scope.layout.settings = false; + var controller = ['$scope', '$modalInstance', function($scope, $modalInstance) { + $scope.goTour = function() { + $modalInstance.dismiss(); + startTour(); + }; + }]; + $modal.open({ + template: templatehelptour, + controller: controller, + resolve: {}, + size: 'sm' + }); + }; + introTour(); + $scope.$on('showHelpTour', function(current, last) { + if(current) { + introTour(); + } + }); + }]; + + var link = function($scope, $elem, $attrs) { + $scope.steps = $elem.find('.popover'); + }; + + return { + restrict: 'E', + scope: true, + replace: true, + template: template, + controller: controller, + link: link + }; + }]; +}); diff --git a/static/js/directives/settings.js b/static/js/directives/settings.js index f145b6de..8e21c936 100644 --- a/static/js/directives/settings.js +++ b/static/js/directives/settings.js @@ -55,7 +55,7 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t return ["$compile", "mediaStream", function($compile, mediaStream) { - var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', 'userSettingsData', 'constraints', 'appData', '$timeout', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage, userSettingsData, constraints, appData, $timeout) { + var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', 'userSettingsData', 'constraints', 'appData', '$timeout', '$rootScope', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage, userSettingsData, constraints, appData, $timeout, $rootScope) { $scope.layout.settings = false; $scope.showAdvancedSettings = true; @@ -85,6 +85,10 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t } }); + $scope.takeTour = function() { + $rootScope.$broadcast('showHelpTour'); + }; + $scope.saveSettings = function() { var form = $scope.settingsform; if (form.$valid && form.$dirty) { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html new file mode 100644 index 00000000..70c0fcef --- /dev/null +++ b/static/partials/helpoverlay.html @@ -0,0 +1,10 @@ +
+
+

{{_('Meeting Room')}}

+
{{_('Change the current meeting room here. Not all rooms names are available and certain characters are automatically removed.')}}
+
+
+

{{_('Buddy List')}}

+
{{_('Every person in a room is listed here.')}}
+
+
diff --git a/static/partials/helptour.html b/static/partials/helptour.html new file mode 100644 index 00000000..228c2fc0 --- /dev/null +++ b/static/partials/helptour.html @@ -0,0 +1,15 @@ +
+
+ +

{{_('Tour')}}

+
+
+

Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.

+
+
+
+ + +
+
+
diff --git a/static/partials/settings.html b/static/partials/settings.html index b4fd34bb..7d4009f9 100644 --- a/static/partials/settings.html +++ b/static/partials/settings.html @@ -274,6 +274,15 @@ {{_('Show advanced settings')}}{{_('Hide advanced settings')}} + + {{_('Help')}} +
+ +
+ +
+
+