pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add and remove slides as required.

pull/149/head
Evan Theurer 12 years ago
parent
4b659a51fc
commit
540c373c00
7 changed files with 131 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      src/styles/components/helptour.scss
  2. 74
      static/js/directives/helptour.js
  3. 2
      static/js/directives/settings.js
  4. 45
      static/partials/helpoverlay.html
  5. 15
      static/partials/helptour.html
  6. 15
      static/partials/helptourend.html
  7. 16
      static/partials/helptourstart.html

74
src/styles/components/helptour.scss
Unescape View File

@ -1,4 +1,4 @@
/*! /*
* Spreed WebRTC. * Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG * Copyright (C) 2013-2014 struktur AG
* *
@ -21,32 +21,37 @@
$darken-tour-opacity: .4; $darken-tour-opacity: .4;
#helptour {
}
.helptour { .helptour {
.tourControl { .tourControl {
text-align: center; text-align: center;
hr { hr {
margin: 10px 0; margin: 10px 0;
} }
} }
.in { .in {
display: block; display: block;
} }
.slideInfo { .slideInfo {
float: right; float: right;
} }
.popover { .popover {
opacity: 0.95; opacity: 0.95;
} }
.roomPane { .roomPane {
top: 97px;
left: 10px; left: 10px;
top: 97px;
.arrow { .arrow {
left: 10%; left: 10%;
} }
} }
.buddyListPane { .buddyListPane {
left: initial; left: initial;
right: 280px; right: 280px;
@ -55,96 +60,83 @@ $darken-tour-opacity: .4;
top: 20%; top: 20%;
} }
} }
.chatPane { .chatPane {
left: initial; left: initial;
right: 540px; right: 540px;
top: 70px; top: 70px;
.arrow { .arrow {
top: 20%; top: 20%;
} }
} }
.settingsPane { .settingsPane {
left: initial; left: initial;
right: 540px; right: 540px;
top: 200px; top: 200px;
.arrow { .arrow {
top: 20%; top: 20%;
} }
} }
.mediaAccessPane {
top: 10px; .optionsPane {
left: initial; float: right;
right: 10px; margin-right: 20px;
position: relative;
top: 71px;
} }
.welcomePane { .welcomePane {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
top: 150px; top: 150px;
.btn { .btn {
margin-top: 10px; margin-top: 10px;
} }
} }
} }
.arrow+.secondArrow {
border-width: 11px;
&:after {
border-width: 10px;
content: "";
}
}
.arrow+.secondArrow,
.arrow+.secondArrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: rgba(0, 0, 0, 0);
border-style: solid;
}
.secondArrow.right {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, 0.25);
&:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #FFF;
}
}
.helptourShowRoomPane { .helptourShowRoomPane {
// scss-lint:disable IdSelector
#bar, #bar,
#buddylist { #buddylist {
opacity: $darken-tour-opacity; opacity: $darken-tour-opacity;
} }
.overlaybar { .overlaybar {
background: $componentfg2; background: $componentfg2;
} }
} }
.helptourShowSettingsPane { .helptourShowSettingsPane {
// scss-lint:disable IdSelector
#roombar { #roombar {
opacity: $darken-tour-opacity; opacity: $darken-tour-opacity;
} }
} }
.helptourShowOptionsPane,
.helptourShowChatPane { .helptourShowChatPane {
// scss-lint:disable IdSelector
#roombar, #roombar,
#buddylist { #buddylist {
opacity: $darken-tour-opacity; opacity: $darken-tour-opacity;
} }
} }
.helptourShowBuddyListPane { .helptourShowBuddyListPane {
// scss-lint:disable IdSelector
#bar, #bar,
#roombar { #roombar {
opacity: $darken-tour-opacity; opacity: $darken-tour-opacity;
} }
} }
.helptourShowMediaAccessPane,
.helptourShowWelcomePane { .helptourShowWelcomePane {
// scss-lint:disable IdSelector
#bar, #bar,
#roombar, #roombar,
#buddylist { #buddylist {

74
static/js/directives/helptour.js
Unescape View File

@ -19,12 +19,13 @@
* *
*/ */
define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, angular, template, templatehelptour) { "use strict";
define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/helptourstart.html', 'text!partials/helptourend.html'], function($, angular, template, templatehelptourstart, templatehelptourend) {
//helptour //helptour
return [function() { return [function() {
var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) { var controller = ['$scope', '$timeout', '$modal', '$rootScope', function($scope, $timeout, $modal, $rootScope) {
var isToggled = false; var isToggled = false;
var displayTime = 12000; var displayTime = 12000;
var shown = localStorage.getItem('mediastream-helptour'); var shown = localStorage.getItem('mediastream-helptour');
@ -85,8 +86,8 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
screenshare: false, screenshare: false,
settings: true settings: true
}; };
var tourLayoutShowMediaAccessPane = { var tourLayoutShowOptionsPane = {
buddylist: true, buddylist: false,
buddylistAutoHide: false, buddylistAutoHide: false,
chat: false, chat: false,
chatMaximized: false, chatMaximized: false,
@ -107,14 +108,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
screenshare: false, screenshare: false,
settings: false settings: false
}; };
menus.triggerMediaAccess = function() { var initRoomLayout = function() {
if (isToggled) {
mediaStream.webrtc.testMediaAccess(function() {});
} else {
mediaStream.webrtc.stop();
}
};
menus.initRoomLayout = function() {
$scope.layout = angular.extend($scope.layout, tourLayout); $scope.layout = angular.extend($scope.layout, tourLayout);
}; };
menus.toggleRoom = function() { menus.toggleRoom = function() {
@ -126,6 +120,9 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
menus.toggleSettings = function() { menus.toggleSettings = function() {
$scope.layout = angular.extend($scope.layout, tourLayoutShowSettingsPane); $scope.layout = angular.extend($scope.layout, tourLayoutShowSettingsPane);
}; };
menus.toggleOptions = function() {
$scope.layout = angular.extend($scope.layout, tourLayoutShowOptionsPane);
};
menus.toggleCSS = function(css) { menus.toggleCSS = function(css) {
$('body').toggleClass(css); $('body').toggleClass(css);
}; };
@ -135,7 +132,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
if (menu) { if (menu) {
isToggled = !isToggled; isToggled = !isToggled;
if(!isToggled) { if(!isToggled) {
menus.initRoomLayout(); initRoomLayout();
} else { } else {
menus[menu](); menus[menu]();
} }
@ -153,17 +150,27 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
toggleTargetMenu(); toggleTargetMenu();
$($scope.steps[$scope.currentIndex]).addClass('in'); $($scope.steps[$scope.currentIndex]).addClass('in');
}; };
var startTour = function() {
if ($scope.currentIndex === $scope.steps.length - 1 && isToggled) {
outStep();
$scope.currentIndex = 0;
}
inStep(0);
};
var initTour = function() { var initTour = function() {
backupLayout = angular.extend({}, $scope.layout); backupLayout = angular.extend({}, $scope.layout);
menus.initRoomLayout(); initRoomLayout();
$scope.startTour(); startTour();
}; };
var reset = function() { var reset = function() {
if (isToggled) {
outStep(); outStep();
}
$scope.currentIndex = null; $scope.currentIndex = null;
$scope.layout = angular.extend($scope.layout, backupLayout); $scope.layout = angular.extend($scope.layout, backupLayout);
isToggled = false;
}; };
var introTour = function() { var introTourSlide = function() {
var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) {
scope.goTour = function() { scope.goTour = function() {
$modalInstance.dismiss(); $modalInstance.dismiss();
@ -171,19 +178,30 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
}; };
}]; }];
$modal.open({ $modal.open({
template: templatehelptour, template: templatehelptourstart,
controller: controller, controller: controller,
size: 'sm' size: 'md'
}); });
}; };
$scope.currentIndex = null; $scope.endTourSlide = function() {
$scope.startTour = function() {
if ($scope.currentIndex === $scope.steps.length - 1) {
outStep(); outStep();
$scope.currentIndex = 0; var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) {
} scope.goTour = function() {
inStep(0); $modalInstance.dismiss();
startTour();
}; };
scope.endTour = function() {
$modalInstance.dismiss();
reset();
};
}];
$modal.open({
template: templatehelptourend,
controller: controller,
size: 'md'
});
};
$scope.currentIndex = null;
$scope.stepBackward = function() { $scope.stepBackward = function() {
outStep(); outStep();
inStep($scope.currentIndex - 1); inStep($scope.currentIndex - 1);
@ -195,12 +213,12 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
$scope.exitTour = function() { $scope.exitTour = function() {
reset(); reset();
}; };
$scope.$on('showHelpTour', function() { $scope.$on('showHelpTourStart', function() {
introTour(); introTourSlide();
}); });
$rootScope.$on("room", function(event, room) { $rootScope.$on("rooms.ready", function(event, room) {
if (!shown) { if (!shown) {
introTour(); introTourSlide();
localStorage.setItem('mediastream-helptour', 1); localStorage.setItem('mediastream-helptour', 1);
} }
}); });

2
static/js/directives/settings.js
Unescape View File

@ -86,7 +86,7 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t
}); });
$scope.takeTour = function() { $scope.takeTour = function() {
$rootScope.$broadcast('showHelpTour'); $rootScope.$broadcast('showHelpTourStart');
}; };
$scope.saveSettings = function() { $scope.saveSettings = function() {

45
static/partials/helpoverlay.html
Unescape View File

@ -1,10 +1,10 @@
<div class="helptour"> <div class="helptour">
<div class="tourSteps"> <div class="tourSteps">
<div class="popover bottom roomPane" data-menu="toggleRoom" data-css="helptourShowRoomPane"> <div class="popover left settingsPane" data-menu="toggleSettings" data-css="helptourShowSettingsPane">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">{{_('A room')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</span></h3> <h3 class="popover-title">{{_('Settings')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content"> <div class="popover-content">
{{_('Place to meet people(buddy). Change rooms here and easily send friends a room link with the social media links provided. Not all room names are available and certain characters are automatically removed.')}} {{_('Complete your profile by adding your name and picture. You also can enter a status message. If you want, you can change further settings like your camera, video quality, or language. Confirm your settings with a click on “close”.')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
@ -12,11 +12,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> <div class="popover bottom roomPane" data-menu="toggleRoom" data-css="helptourShowRoomPane">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">{{_('Buddy List')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> <h3 class="popover-title">{{_('Rooms')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</span></h3>
<div class="popover-content"> <div class="popover-content">
{{_('List of all buddys in the same room and saved contacts.')}} {{_('Create a new room or enter the name of an existing room and click on the icon to enter the room. You can share the room by email, Facebook, Twitter, Google+, and Xing. Your contacts can meet you without creating an account.')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
@ -26,9 +26,9 @@
</div> </div>
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> <div class="popover left buddyListPane" data-css="helptourShowBuddyListPane">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">{{_('A buddy')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> <h3 class="popover-title">{{_('Buddies')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content"> <div class="popover-content">
{{_('An individual in the same room. If someone is in the same room, a buddy card will be shown. Simply hover over the card to callout chat/call actions. If a star appears next to a buddy comment, the buddy is logged in. When the star is filled the buddy is a contact. Click the star to add a buddy as a contact or remove a contact.')}} {{_('A buddy is a person in the same room. Want to call or chat with them? Simple hover over a buddy and start a conversation. You can add other other persons as well to create a group call. ')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
@ -36,11 +36,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="popover left chatPane" data-menu="toggleChat" data-css="helptourShowChatPane"> <div class="popover left buddyListPane" data-css="helptourShowBuddyListPane">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">{{_('Chat sessions')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> <h3 class="popover-title">{{_('Contacts')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content"> <div class="popover-content">
{{_('Group and individual chat sessions. Chat with everyone in a room or chat individually. In group chats you are able to share files and your current location. In individual chats you are also able to start a video call.')}} {{_('When a buddy and you are logged in you can add him as a contact. Just click on the unfilled star to send a contact request. When the star is filled you are contacts. You can call or chat with a contact even when you are in different rooms.')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
@ -48,11 +48,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="popover left settingsPane" data-menu="toggleSettings" data-css="helptourShowSettingsPane"> <div class="popover left chatPane" data-menu="toggleChat" data-css="helptourShowChatPane">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">{{_('Settings')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> <h3 class="popover-title">{{_('Chat')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content"> <div class="popover-content">
{{_('Choose a name, upload a picture, signin, and customize you experience.')}} {{_('You can chat with everyone in a room (room chat) or with a buddy. You also can share a file or your location within the chat. When chatting with a buddy, you can start a call from the chat window.')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
@ -60,26 +60,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="popover bottom mediaAccessPane" data-menu="triggerMediaAccess" data-css="helptourShowMediaAccessPane"> <div class="popover bottom optionsPane" data-menu="toggleOptions" data-css="helptourShowOptionsPane">
<div class="arrow"></div> <div class="arrow"></div>
<div class="secondArrow right"></div> <h3 class="popover-title">{{_('Options menu')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<h3 class="popover-title">{{_('Media permission')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content"> <div class="popover-content">
{{_('Everytime a call is made or recieved a permission window from the browser will show up like this. To make a call you must accept, otherwise the browser cannot use your wecam and video to make a call. This is a security and privacy precaution.')}} {{_('On the options menu you can activate different options like mute/unmute your microphone or activate/deactivate your camera. You also can open the chat view to open a group chat. During a call you have further options like sharing your screen, sharing a file as presentation, or even a YouTube Video.')}}
<div class="tourControl"> <div class="tourControl">
<hr> <hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button> <button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button> <button class="btn btn-primary" ng-click="endTourSlide()">Continue Tour</button>
</div> </div>
</div> </div>
</div> </div>
<div class="popover bottom welcomePane" data-css="helptourShowWelcomePane">
<h3 class="popover-title">{{_('Welcome')}}</h3>
<div class="popover-content">
{{_('Welcome to spreed-webrtc! Start calling and chatting now.')}}
<button class="btn btn-primary btn-block" ng-click="exitTour()">Exit Tour</button>
<button class="btn btn-default btn-block" ng-click="startTour()">Replay Tour</button>
</div>
</div>
</div> </div>
</div> </div>

15
static/partials/helptour.html
Unescape View File

@ -1,15 +0,0 @@
<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. The tour can be accessed again under settings.')}}</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>

15
static/partials/helptourend.html
Unescape View File

@ -0,0 +1,15 @@
<div>
<div class="modal-header">
<button type="button" class="close" ng-click="$close()">×</button>
<h3 class="modal-title">{{_('Start your video calls now!')}}</h3>
</div>
<div class="modal-body">
<p>{{_('Go on, invite your friends and start your calls. You can restart the tour anytime you want in "Settings".')}}</p>
</div>
<div class="modal-footer">
<div class="pull-right">
<button class="btn btn-default" ng-click="endTour()">{{_('Exit Tour.')}}</button>
<button class="btn btn-primary" ng-click="goTour()">{{_('Replay Tour')}}</button>
</div>
</div>
</div>

16
static/partials/helptourstart.html
Unescape View File

@ -0,0 +1,16 @@
<div>
<div class="modal-header">
<button type="button" class="close" ng-click="$close()">×</button>
<h3 class="modal-title">{{_('Welcome to spreed-webrtc!')}}</h3>
</div>
<div class="modal-body">
<p>{{_('spreed-webrtc is your personal online presence and virtual classroom. It is complete with content library, document sharing, and P2P file sharing. Start your presence or training with a blink: simply select the contacts you want to include.')}}</p>
<p>{{_('Do you want to take a tour?')}}</p>
</div>
<div class="modal-footer">
<div class="pull-right">
<button class="btn btn-default" ng-click="$dismiss()">{{_('No, thanks.')}}</button>
<button class="btn btn-primary" ng-click="goTour()">{{_('Yes, show me spreed-webrtc.')}}</button>
</div>
</div>
</div>
Write Preview
Loading…
Cancel
Save