Browse Source

Add a help tour of important app features.

pull/149/head
Evan Theurer 12 years ago
parent
commit
398a766adb
  1. 3
      html/main.html
  2. 47
      src/styles/components/helptour.scss
  3. 1
      src/styles/main.scss
  4. 6
      static/js/directives/directives.js
  5. 78
      static/js/directives/helptour.js
  6. 6
      static/js/directives/settings.js
  7. 10
      static/partials/helpoverlay.html
  8. 15
      static/partials/helptour.html
  9. 9
      static/partials/settings.html

3
html/main.html

@ -4,6 +4,9 @@
<%template "head" .%> <%template "head" .%>
</head> </head>
<body spreed-webrtc> <body spreed-webrtc>
<div id="helptour">
<helptour/>
</div>
<div id="background"></div> <div id="background"></div>
<div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div> <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
<ui></ui> <ui></ui>

47
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 <http://www.gnu.org/licenses/>.
*
*/
#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%;
}
}
}

1
src/styles/main.scss

@ -52,5 +52,6 @@
@import 'components/contactsmanager'; @import 'components/contactsmanager';
@import 'components/presentation'; @import 'components/presentation';
@import 'components/youtubevideo'; @import 'components/youtubevideo';
@import "components/helptour";
@import 'shame'; @import 'shame';

6
static/js/directives/directives.js

@ -49,7 +49,8 @@ define([
'directives/title', 'directives/title',
'directives/welcome', 'directives/welcome',
'directives/menu', '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 = { var directives = {
onEnter: onEnter, onEnter: onEnter,
@ -78,7 +79,8 @@ define([
title: title, title: title,
welcome: welcome, welcome: welcome,
menu: menu, menu: menu,
ui: ui ui: ui,
helptour: helptour
}; };
var initialize = function(angModule) { var initialize = function(angModule) {

78
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 <http://www.gnu.org/licenses/>.
*
*/
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
};
}];
});

6
static/js/directives/settings.js

@ -55,7 +55,7 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t
return ["$compile", "mediaStream", function($compile, mediaStream) { 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.layout.settings = false;
$scope.showAdvancedSettings = true; $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() { $scope.saveSettings = function() {
var form = $scope.settingsform; var form = $scope.settingsform;
if (form.$valid && form.$dirty) { if (form.$valid && form.$dirty) {

10
static/partials/helpoverlay.html

@ -0,0 +1,10 @@
<div class="helptour">
<div class="popover bottom meetingRoom">
<div class="arrow"></div><h3 class="popover-title">{{_('Meeting Room')}}</h3>
<div class="popover-content">{{_('Change the current meeting room here. Not all rooms names are available and certain characters are automatically removed.')}}</div>
</div>
<div class="popover left buddyList">
<div class="arrow"></div><h3 class="popover-title">{{_('Buddy List')}}</h3>
<div class="popover-content">{{_('Every person in a room is listed here.')}}</div>
</div>
</div>

15
static/partials/helptour.html

@ -0,0 +1,15 @@
<div>
<div class="modal-header">
<button type="button" class="close" ng-click="$close()">×</button>
<h3 class="modal-title">{{_('Tour')}}</h3>
</div>
<div class="modal-body">
<p>Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.</p>
</div>
<div class="modal-footer">
<div class="pull-right">
<button class="btn btn-default" ng-click="$dismiss()">{{_('Cancel')}}</button>
<button class="btn btn-primary" ng-click="goTour()">{{_('Go')}}</button>
</div>
</div>
</div>

9
static/partials/settings.html

@ -274,6 +274,15 @@
<a ng-click="showAdvancedSettings = !showAdvancedSettings"><span ng-show="showAdvancedSettings">{{_('Show advanced settings')}}</span><span ng-hide="showAdvancedSettings">{{_('Hide advanced settings')}}</span></a> <a ng-click="showAdvancedSettings = !showAdvancedSettings"><span ng-show="showAdvancedSettings">{{_('Show advanced settings')}}</span><span ng-hide="showAdvancedSettings">{{_('Hide advanced settings')}}</span></a>
</div> </div>
</div> </div>
<settings-help>
<legend>{{_('Help')}}</legend>
<div class="form-group">
<label class="col-xs-4 control-label">{{_('Tour features')}}</label>
<div class="col-xs-8">
<button class="btn btn-success" ng-click="takeTour()">{{_('Take tour')}}</button>
</div>
</div>
</settings-help>
<hr/> <hr/>

Loading…
Cancel
Save