wip use pubsup for tabs

+ ui fixes

capsule-prototype/css/flatten_timeline.css

@@ -3,7 +3,7 @@
 	flex: 1;
 	color: white;
 	overflow-x: hidden;	
-	overflow-y: scroll;	
+	overflow-y: auto;	
 }
 
 #flattentimeline.drag  {

capsule-prototype/css/mosaic.css

@@ -15,7 +15,7 @@
 
 #mosaic_tab {
 	display: flex;
-	overflow: scroll;
+	overflow: auto;
 	flex-direction: column;
 }
 
@@ -44,13 +44,12 @@
 	padding: var(--base-spacing);
 	margin: var(--base-spacing);
 	border-radius: var(--border-radius);
-	dispaly: flex;
+	display: flex;
 	flex-direction: column;
 }
 
 .mosaic_item {
 	width: var(--card-width);
-	height: var(--card-height);
 	display: flex;
 	flex-direction: column;
 	align-items: center;

capsule-prototype/css/old_mosaic.css

+
+#mosaic_tab {
+	background: #243538;
+	overflow: scroll;
+	padding: 20px;
+	display: none;
+}
+
+.mosaic_category {
+	padding: 1.0em 1vw;
+	margin: 2vh 0 1.5vh 0;
+	border-radius: 3px;
+	background: rgba(0,0,0,.15);
+}
+
+.mosaic_category_grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+	grid-auto-rows: 150px;
+}
+
+.mosaic_filter {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+}
+
+.mosaic_filter_item {
+	padding: 1.0em 1vw;
+	margin: 2vh 0.5vw 1.5vh 0.5vw;
+	border-radius: 3px;
+	cursor:pointer;
+}
+
+.mosaic_filter_disabled {
+	opacity: 0.5;
+}
+
+.mosaic_filter_disabled>h2:after {
+	background-image: url('images/icn-menu-filter.png');
+}
+
+.mosaic_filter_item > h2, .mosaic_category h2 {
+	text-transform: capitalize;
+}
+
+.mosaic_filter_item:not(.mosaic_filter_disabled) > h2:after{
+	background-image: url('images/icn-menu-preview.png');
+}
+
+.mosaic_filter_item > h2:after{
+	display:inline-block;
+	height:20px;
+	width:20px;
+	content: " ";
+	background-size: 20px 20px;
+	margin-left: 5px;
+	padding-top: 3px;
+	background-repeat: no-repeat;
+}
+
+.mosaic_filter_item_all > h2:after {
+	background-image: url('images/icn-reload.png') !important;
+}
+
+.mosaic_item img {
+	/* To correctly align image, regardless of content height: */
+	vertical-align: top;
+	display: inline-block;
+	/* To horizontally center images and caption */
+	text-align: center;
+	/* The width of the container also implies margin around the images. */
+	width: 100px;
+	margin: 2vh 0 1.5vh 0;
+	cursor:pointer;
+}
+
+.mosaic_item .caption {
+	/*
+	display:block;
+	*/
+}
+

capsule-prototype/js/online-script.js

 var rekall = new Rekall();
 var rekall_common = new Object();
+var pubSub = null;
+
+window.onload = function() {
+	pubSub = window.top.PubSub;
+	pubSub.subscribe('mosaic', openMosaic);
+	pubSub.subscribe('video', openVideo);
+};
+
 $(document).ready(function() {
 
 	rekall.allowProjectDeletion(window.app.Settings.Project.ProjectDeletionEnabled)
@@ -346,15 +354,7 @@ function setEditionControls() {
 		}
 	});
 
-	$('#tab_selector_form').change(function(event) {
-		$('#mosaic_tab').toggle();
-		$('#video_tab').toggle();
-
-		if (event.target.value == 'mosaic') {
-			rekall.timeline.pause();
-			openMosaic();
-		}
-	});
+	$('#tab_selector_form').change(function(event) { pubSub.publish(event.target.value) });
 
 	$("#popupEdit").click(function(event){
 		event.stopPropagation();
@@ -796,6 +796,12 @@ function closeEdit() {
 	$("#popupEdit").hide();
 }
 
+function openVideo() {
+		$('#mosaic_tab').hide();
+		$('#video_tab').show();
+		$('#left_menu .bottom').show();
+}
+
 function openMosaic() {
     function getMosaicItem(tagOrDoc) {
         let path = Utils.getPreviewPath(tagOrDoc);
@@ -824,6 +830,12 @@ function openMosaic() {
             .append($('<h2/>').text(text));
     }
 
+		
+		rekall.timeline.pause();
+		$('#mosaic_tab').show();
+		$('#video_tab').hide();
+		$('#left_menu .bottom').hide();
+
     let container = $('#mosaic_tab');
     container.html('');
     let filterdiv = $('<div/>').addClass('mosaic_filter');

capsule-prototype/js/rekall/Sorting.js

@@ -261,9 +261,9 @@ Sorting.prototype.analyseEnd = function(minTagCount) {
 	else {
 		this.categories = Utils.sortObj(this.categories, this.valAreFloats);
 		if(this.analyse) {
-			console.log("----------------------------------------------------------------");
+			console.debug("----------------------------------------------------------------");
 			for (var key in this.categories)
-				console.log(key);
+				console.debug(key);
 		}
 		
 		

templates/project/edit.html.twig

@@ -16,7 +16,7 @@
   <script>
       window.onload = function (){
           const iframe = document.getElementById('legacyContent').contentWindow;
-          iframe.init('init', PubSub);
+          iframe.rekall.Rekall('init', PubSub);
       }
   </script>
 {% endblock %}