Merge pull request #72 from fancycode/controls_bar

Controls bar updates

src/styles/components/_presentation.scss

@@ -99,6 +99,10 @@
   line-height: 28px;
 }
 
+.overlaybar-content .pagecontrol {
+  height: 30px;
+}
+
 .presentation .overlaybar a.btn-prev {
   left: 40px;
 }
@@ -118,13 +122,16 @@
   color: #333;
   margin-top: 20px;
   width: 160px;
+  height: 122px;
   display: inline-block;
   margin-left: 20px;
   cursor: pointer;
   position: relative;
+  vertical-align: middle;
 }
 
 .presentation .thumbnail:first-child {
+  cursor: default;
   margin-left: 0;
 }
 
@@ -145,6 +152,8 @@
   position: absolute;
   left: 0;
   right: 0;
+  top: 0;
+  bottom: 0;
   text-align: center;
 }
 

static/js/directives/presentation.js

@@ -36,7 +36,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 			$scope.currentFileInfo = null;
 			$scope.currentPage = null;
 			$scope.receivedPage = null;
-			$scope.downloading = false;
+			$scope.loading = false;
 			$scope.downloadSize = 0;
 			$scope.downloadProgress = 0;
 			$scope.sharedFilesCache = {};
@@ -70,17 +70,14 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 				}
 			};
 
-			$scope.resetProperties = function(keepControlsBar) {
+			$scope.resetProperties = function() {
 				$scope.isPresenter = false;
-				$scope.hideControlsBar = !keepControlsBar;
 				$scope.currentFileInfo = null;
 				$scope.currentPage = null;
 				$scope.receivedPage = null;
 			};
 
 			$scope.$on("pdfLoaded", function(event, source, doc) {
-				$scope.downloading = false;
-				$scope.hideControlsBar = !$scope.isPresenter;
 				$scope.currentPageNumber = -1;
 				if ($scope.isPresenter) {
 					$scope.$emit("showPdfPage", 1);
@@ -94,7 +91,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 			});
 
 			$scope.$on("pdfLoadError", function(event, source, errorMessage, moreInfo) {
-				$scope.downloading = false;
+				$scope.loading = false;
 				alertify.dialog.alert(errorMessage);
 			});
 
@@ -133,6 +130,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 
 			downloadScope.$on("writeComplete", function(event, url, fileInfo) {
 				event.stopPropagation();
+				$scope.downloadSize = 0;
 				// need to store for internal file it and received token
 				// to allow cleanup and prevent duplicate download
 				fileInfo.url = url;
@@ -155,6 +153,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 
 				$scope.presentationLoaded = false;
 				$scope.pendingPageRequest = null;
+				$scope.loading = true;
 
 				var token = fileInfo.id;
 				var existing = $scope.sharedFilesCache[token];
@@ -167,7 +166,6 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 				downloadProgressBar.style.width = '0%';
 				$scope.downloadProgress = 0;
 				$scope.downloadSize = fileInfo.size;
-				$scope.downloading = true;
 				downloadScope.info = fileInfo;
 
 				downloadScope.handler = mediaStream.tokens.on(token, function(event, currenttoken, to, data, type, to2, from, xfer) {
@@ -319,6 +317,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 			};
 
 			$scope.$on("pdfPageLoading", function(event, page) {
+				$scope.loading = false;
 				$scope.currentPageNumber = page;
 				if ($scope.receivedPage === page) {
 					// we received this page request, don't publish to others
@@ -336,10 +335,12 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 			});
 
 			$scope.$on("pdfPageLoadError", function(event, page, errorMessage) {
+				$scope.loading = false;
 				alertify.dialog.alert(errorMessage);
 			});
 
 			$scope.$on("pdfPageRenderError", function(event, pageNumber, maxPageNumber, errorMessage) {
+				$scope.loading = false;
 				alertify.dialog.alert(errorMessage);
 			});
 
@@ -357,6 +358,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 				$scope.isPresenter = true;
 				$scope.currentFileInfo = fileInfo;
 				$scope.receivedPage = null;
+				$scope.loading = true;
 				$scope.$emit("openPdf", file);
 				addVisibleSharedFile(file);
 				$scope.sharedFilesCache[fileInfo.id] = file;
@@ -401,6 +403,15 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
 				return namespace + "_" + $scope.myid;
 			};
 
+			var uploadBinder = fileUpload.bindClick(namespace, $element.find('.thumbnail button')[0], function(files) {
+				console.log("Files selected", files);
+				filesSelected(files);
+			});
+			uploadBinder.namespace = function() {
+				// Inject own id into namespace.
+				return namespace + "_" + $scope.myid;
+			};
+
 			$scope.showPresentation = function() {
 				console.log("Presentation active");
 				$scope.layout.presentation = true;

static/partials/presentation.html

@@ -1,13 +1,13 @@
 <div class="presentation">
 	<div class="presentationpane nicescroll">
-		<div class="welcome container-fluid" ng-show="downloading">
+		<div class="welcome container-fluid" ng-show="loading">
 			<h1>{{_('Loading presentation ...')}}</h1>
-			<div class="progress">
+			<div class="progress" ng-show="downloadSize &gt; 0">
 				<span class="download-info">{{downloadSize|humanizeFilesize}} <span ng-show="downloading">/ {{downloadProgress}}%</span></span>
 				<div class="progress-bar progress-bar-success"></div>
 			</div>
 		</div>
-		<div class="welcome container-fluid" ng-hide="maxPageNumber !== -1 || downloading">
+		<div class="welcome container-fluid" ng-hide="maxPageNumber !== -1 || loading">
 			<h1>{{_('Please upload a PDF document')}}</h1>
 			<div class="center-block">
 				<p>{{_('Documents are shared with everyone in this call.')}}</p>
@@ -15,17 +15,25 @@
 				<p>{{_('You can drag files here too.')}}</p>
 			</div>
 		</div>
-		<pdfcanvas ng-hide="maxPageNumber === -1 || downloading" />
+		<pdfcanvas ng-hide="maxPageNumber === -1 || loading" />
 	</div>
 	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideControlsBar}">
 		<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Presentation controls')}}"><i class="fa fa-cogs"></i></a>
 		<div class="overlaybar-content">
-			<div class="clearfix" ng-show="maxPageNumber !== -1 && !downloading">
-				<a class="overlaybar-button btn-prev" ng-click="prevPage()" ng-show="currentPageNumber &gt; 1" title="{{_('Prev')}}"><i class="fa fa-backward"></i></a>
-				<div class="pageinfo center-block"><input class="form-control input-sm" type="number" ng-model="currentPageNumber" /> / {{ maxPageNumber }}</div>
-				<a class="overlaybar-button btn-next" ng-click="nextPage()" ng-show="currentPageNumber &lt; maxPageNumber" title="{{_('Next')}}"><i class="fa fa-forward"></i></a>
+			<div class="pagecontrol" ng-show="(maxPageNumber !== -1 && !downloading) || visibleSharedFiles.length">
+				<div class="clearfix" ng-show="maxPageNumber !== -1 && !downloading">
+					<a class="overlaybar-button btn-prev" ng-click="prevPage()" ng-show="currentPageNumber &gt; 1" title="{{_('Prev')}}"><i class="fa fa-backward"></i></a>
+					<div class="pageinfo center-block"><input class="form-control input-sm" type="number" ng-model="currentPageNumber" /> / {{ maxPageNumber }}</div>
+					<a class="overlaybar-button btn-next" ng-click="nextPage()" ng-show="currentPageNumber &lt; maxPageNumber" title="{{_('Next')}}"><i class="fa fa-forward"></i></a>
+				</div>
 			</div>
 			<div class="presentations nicescroll" ng-show="visibleSharedFiles.length">
+				<div class="thumbnail">
+					<div class="fa filetype fa-plus"></div>
+					<div class="caption">
+						<button class="btn btn-primary">{{_('Upload')}}</button>
+					</div>
+				</div>
 				<div class="thumbnail" ng-repeat="info in visibleSharedFiles | orderBy : 'sortkey'" ng-click="selectPresentation(info)" title="{{ info.name }}">
 					<div class="fa active fa-check" ng-show="info.id === currentFileInfo.id"></div>
 					<a class="btn btn-danger delete" ng-click="deletePresentation($event, info)"><i class="fa fa-trash-o fa-lg"></i></a>