Browse Source

Implemented page loader.

pull/12/head
Simon Eisenmann 11 years ago committed by Simon Eisenmann
parent
commit
943b81b851
  1. 4
      html/main.html
  2. 2
      src/styles/components/_usability.scss
  3. 13
      src/styles/global/_base.scss
  4. 8
      static/js/directives/directives.js
  5. 11
      static/js/directives/usability.js
  6. 43
      static/partials/usability.html

4
html/main.html

@ -6,9 +6,7 @@ @@ -6,9 +6,7 @@
<body ng-controller="MediastreamController" ng-class="{withBuddylist: showBuddylist, withChat: chatEnabled, withSettings: showSettings, slideright: !showBuddylist}">
<div id="background"></div>
<div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
<div class="ng-cloak" id="help">
<usability/>
</div>
<page></page>
<div id="bar">
<div class="left">
<%template "logo" .%>

2
src/styles/components/_usability.scss

@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
*/
#help {
position:absolute;
top:120px;
top:80px;
bottom:10px;
left:0px;
right:0px;

13
src/styles/global/_base.scss

@ -100,4 +100,17 @@ z-index:0; @@ -100,4 +100,17 @@ z-index:0;
}
#loader.done {
opacity:0;
}
#page {
position:absolute;
top:44px;
bottom:0px;
left:0px;
right:0px;
}
.welcome {
color:#aaa;
text-shadow: 0 0 5px black;
font-size:1.1em;
margin-top:80px;
}

8
static/js/directives/directives.js

@ -33,8 +33,9 @@ define([ @@ -33,8 +33,9 @@ define([
'directives/fileinfo',
'directives/screenshare',
'directives/roombar',
'directives/socialshare'
], function(_, onEnter, onEscape, statusMessage, buddyList, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare) {
'directives/socialshare',
'directives/page'
], function(_, onEnter, onEscape, statusMessage, buddyList, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page) {
var directives = {
onEnter: onEnter,
@ -49,7 +50,8 @@ define([ @@ -49,7 +50,8 @@ define([
fileInfo: fileInfo,
screenshare: screenshare,
roomBar: roomBar,
socialShare: socialShare
socialShare: socialShare,
page: page
};
var initialize = function (angModule) {

11
static/js/directives/usability.js

@ -34,7 +34,7 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _, @@ -34,7 +34,7 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
var ctrl = this;
ctrl.setInfo = function(info) {
$scope.usabilityInfo = info;
}
};
ctrl.setInfo("waiting");
$scope.continueConnect = function(status) {
@ -45,14 +45,15 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _, @@ -45,14 +45,15 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
$scope.connect()
ctrl.setInfo("initializing");
initializer = $timeout(function() {
ctrl.setInfo("noroom");
ctrl.setInfo("ok");
$scope.$emit("welcome");
}, 1000);
complete = true;
} else {
ctrl.setInfo("denied");
}
// Check if we should show settings per default.
$scope.showSettings = $scope.loadedUser ? 0 : 1;
$scope.$parent.showSettings = $scope.loadedUser ? 0 : 1;
});
};
@ -91,13 +92,13 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _, @@ -91,13 +92,13 @@ define(['jquery', 'underscore', 'text!partials/usability.html'], function($, _,
});
$scope.$on("room", function(event, room) {
console.log("roomStatus", room !== null ? true : false);
//console.log("roomStatus", room !== null ? true : false);
if (complete) {
if (initializer !== null) {
$timeout.cancel(initializer);
initializer = null;
}
ctrl.setInfo(room !== null ? "room" : "noroom");
ctrl.setInfo("ok");
}
});

43
static/partials/usability.html

@ -2,49 +2,6 @@ @@ -2,49 +2,6 @@
<div class="animate-show" ng-hide="showSettings">
<div class="fadetogglecontainer" ng-switch="usabilityInfo">
<div ng-switch-when="checking"><i class="fa fa-refresh fa-spin fa-4x pull-right"></i>{{_("Checking camera and microphone access.")}}</div>
<div ng-switch-when="room">
<div ng-show="roomlink">
<h3 style="margin-top:0px">{{_("Room")}} {{roomid}}</h3>
<p><i>{{_("Link:")}}</i></p>
<p>
<div class="input-group-lg">
<input type="text" class="form-control" ng-model="roomlink" disabled>
</div>
</p>
<p><i>{{_("You are in this room.")}}</i></p>
<small>
<ul class="fa-ul">
<li><i class="fa-li fa fa-share-square"></i>{{_("Share this URL with the people you want to meet.")}}</li>
<li><i class="fa-li fa fa-repeat"></i>{{_("You can use and re-use this room as many times as you want.")}}</li>
</ul>
</small>
<social-share/>
</div>
<div ng-show="!roomlink">
<p>{{_("You are in the general room.")}}</p>
<p>{{_('Break out into a seperate room at any time by clicking on the icon in the top left corner.')}}</p>
</div>
</div>
<div ng-switch-when="noroom" ng-controller="RoomchangeController">
<h3 style="margin-top:0px">{{_("Create your room")}}</h3>
<p><i>{{_("This is your room link:")}}</i></p>
<p>
<div class="input-group input-group-lg">
<input type="text" class="form-control roomdata-link-input" ng-model="roomdata.link" placeholder="{{_('Creating room link ...')}}" disabled>
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-disabled="!roomdata.link" ng-click="changeRoomToId(roomdata.name)">{{_("Start")}}</button>
</span>
</div>
</p>
<p><i>{{_("Just click start")}}</i></p>
<small>
<ul class="fa-ul">
<li><i class="fa-li fa fa-share-square"></i>{{_("Share this URL with the people you want to meet.")}}</li>
<li><i class="fa-li fa fa-repeat"></i>{{_("You can use and re-use this room as many times as you want.")}}</li>
</ul>
</small>
<social-share/>
</div>
<div ng-switch-when="usermedia"><i><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</i></div>
<div ng-switch-when="denied"><i><i class="fa fa-exclamation-triangle fa-4x pull-right"></i>{{_("Camera / microphone access required.")}}</i></div>
</div>

Loading…
Cancel
Save