patch: miniapps panel (#1310)

* v

* Update satolist.js

* v

* v

* Update package.json

components/main/index.css

@@ -209,7 +209,6 @@
   position: fixed;
   left: 0;
   bottom: 0;
-  background: rgb(var(--background-main));
   color: rgb(var(--neutral-grad-3));
   padding: 1em;
   text-align: center;
@@ -226,6 +225,9 @@
 #main .addbutton i {
   font-size: 0.8em;
 }
+#main .addbutton i {
+  width: 22px;
+}
 #main .addbutton.scrollactive {
   display: block;
   opacity: 0.8;

components/main/index.js

@@ -166,7 +166,7 @@ var main = (function(){
 
 			addbuttonscroll  : function(){
 
-				if (self.app.lastScrollTop > 400){
+				if (self.app.lastScrollTop > 1200){
 					if(!addbuttonShowed)
 						el.addbutton.addClass('scrollactive')
 

components/main/index.less

@@ -285,7 +285,6 @@
 		position: fixed;
 		left :  0;
 		bottom : 0;
-		background: rgb(var(--background-main));
 		color : rgb(var(--neutral-grad-3));
 		padding : 2 * @rhythm;
 		text-align: center;
@@ -300,6 +299,10 @@
 			font-size: 0.8em;
 		}
 
+		i{
+			width: 22px;
+		}
+
 		&.scrollactive{
 			display: block;
 			opacity: 0.8;

components/miniapps/index.css

@@ -0,0 +1,12 @@
+#miniapps {
+  width: 100%;
+}
+#miniapps .miniapp {
+  cursor: pointer;
+  padding: 0.5em 0.75em;
+  width: 100%;
+  background: rgb(var(--background-secondary-theme));
+}
+#miniapps .miniapp .appimage {
+  aspect-ratio: 1;
+}

components/miniapps/index.js

@@ -0,0 +1,143 @@
+var miniapps = (function(){
+
+	var self = new nModule();
+
+	var essenses = {};
+
+	var Essense = function(p){
+
+		var primary = deep(p, 'history');
+
+		var el, ed;
+
+		var actions = {
+
+		}
+
+		var events = {
+
+		}
+
+		var renders = {
+			miniapps : function(){
+				var apps = self.app.apps.get.forminiapps()
+
+				self.shell({
+					name :  'apps',
+					data : {
+						apps
+					},
+
+					el : el.c
+
+				}, function(_p){
+					if(clbk) clbk()
+				})
+			}
+		}
+
+		var state = {
+			save : function(){
+
+			},
+			load : function(){
+
+			}
+		}
+
+		var initEvents = function(){
+
+			self.app.apps.on('installed', renders.miniapps)
+			self.app.apps.on('removed', renders.miniapps)
+			self.app.apps.on('loaded', renders.miniapps)
+		}
+
+		return {
+			primary : primary,
+
+			getdata : function(clbk, p){
+
+
+				ed = p.settings.essenseData
+
+				var data = {
+					ed
+				};
+
+
+				pretry(() => {
+					return self.app.apps.inited
+				}, 100, 15000).then(() => {
+					var apps = self.app.apps.get.forminiapps()
+
+					data.apps = apps
+
+
+					clbk(data);
+				})
+
+
+
+			},
+
+			destroy : function(){
+				ed = {}
+				el = {};
+
+				self.app.apps.off('installed', renders.miniapps)
+				self.app.apps.off('removed', renders.miniapps)
+				self.app.apps.off('loaded', renders.miniapps)
+			},
+
+			init : function(p){
+
+				state.load();
+
+				el = {};
+				el.c = p.el.find('#' + self.map.id);
+
+				initEvents();
+
+				renders.miniapps()
+
+				p.clbk(null, p);
+			}
+		}
+	};
+
+
+
+	self.run = function(p){
+
+		var essense = self.addEssense(essenses, Essense, p);
+
+		self.init(essense, p);
+
+	};
+
+	self.stop = function(){
+
+		_.each(essenses, function(essense){
+
+			window.rifticker.add(() => {
+				essense.destroy();
+			})
+
+		})
+
+	}
+
+	return self;
+})();
+
+
+if(typeof module != "undefined")
+{
+	module.exports = miniapps;
+}
+else{
+
+	app.modules.miniapps = {};
+	app.modules.miniapps.module = miniapps;
+
+}

components/miniapps/index.less

@@ -0,0 +1,16 @@
+@import "../../css/__cssvar";
+
+#miniapps{
+    width: 100%;
+    .miniapp{
+        cursor: pointer;
+        padding :@rhythm 1.5 * @rhythm;
+        width: 100%;
+
+        background: rgb(var(--background-secondary-theme));
+
+        .appimage{
+            aspect-ratio: 1;
+        }
+    }
+}

components/miniapps/templates/apps.html

@@ -0,0 +1,7 @@
+<% _.each(apps, function(app){ %> 
+    <a href="<%-app.url%>">
+        <div class="miniapp">
+            <div class="appimage" image="<%-app.icon%>"></div>
+        </div>	
+    </a>
+	<% }) %>

components/miniapps/templates/index.html

@@ -0,0 +1,3 @@
+<div id="<%-module.map.id%>">
+
+</div>

config/Bastyon.json

@@ -23,6 +23,7 @@
         "name" : "Barteron",
         "grantedPermissions" : ["account", "chat"],
         "includeinsearch" : true,
+        "includeminiapps" : true,
         "store" : {}
     }],
     "protocol" : "bastyon",

css/main.css

@@ -2316,6 +2316,7 @@ input[type=radio].radio:checked + label {
 }
 #windowsContainer .rightchatspacer {
   margin-right: 0;
+  margin-left: 0;
 }
 #windowsContainer .wnd:nth-last-child(2) .wndback,
 #windowsContainer .wnd:nth-last-child(1) .wndback {
@@ -6456,14 +6457,29 @@ html.mobileview #bnavigation .fakem {
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#ffffff', GradientType=0 );
     }
 }*/
+#miniappscnt {
+  position: fixed;
+  left: 0;
+  width: 44px;
+  bottom: 52px;
+  border-top-right-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+  overflow: hidden;
+  z-index: 15;
+}
 @media only screen and (max-width: 1400px) {
   .rightchatspacer {
     margin-right: 33px;
+    margin-left: 33px;
   }
 }
 @media only screen and (max-width: 768px) {
   .rightchatspacer {
     margin-right: 0;
+    margin-left: 0;
+  }
+  #miniappscnt {
+    display: none;
   }
 }
 @media only screen and (max-width: 1366px) {
@@ -6479,6 +6495,7 @@ html.mobileview #bnavigation .fakem {
 }
 html.mobileview .rightchatspacer {
   margin-right: 0;
+  margin-left: 0;
 }
 html.mobileview #content .work {
   /*width: 100%;*/

css/main.less

@@ -2694,6 +2694,7 @@ input[type=radio].radio:checked + label {
 #windowsContainer{
     .rightchatspacer{
         margin-right: 0;
+        margin-left: 0;
     }
     .wnd{
 
@@ -7910,18 +7911,33 @@ html{
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#ffffff', GradientType=0 );
     }
 }*/
-
+#miniappscnt{
+    position: fixed;
+    left: 0;
+    width: 44px;
+    bottom: 52px;
+    border-top-right-radius: @rhythm;
+    border-bottom-right-radius: @rhythm;
+    overflow: hidden;
+    z-index: 15;
+}
 
 
 @media only screen and (max-width: 1400px) {
     .rightchatspacer{
         margin-right: 33px;
+        margin-left: 33px;
     }
 }
 
 @media only screen and (max-width: 768px) {
     .rightchatspacer{
         margin-right: 0;
+        margin-left: 0;
+    }
+
+    #miniappscnt{
+        display: none;
     }
 }
 
@@ -7936,9 +7952,6 @@ html{
 }
 
 
-
-
-
 @media only screen and (max-width: 1280px) {
     #content{
         .work{
@@ -7951,6 +7964,7 @@ html{
 html.mobileview{
     .rightchatspacer{
         margin-right: 0;
+        margin-left: 0;
     }
 
     #content .work{

js/_map.js

@@ -968,8 +968,18 @@ __map =  {
 		viewchangereload : true
 	},
 
-
-
+	miniapps : {
+		uri : "miniapps",
+		href : "miniapps",
+		add : {
+			el : 'miniapps'
+		},
+		now : true,
+		anonimus : true,
+		renew : true,
+		reload : true,
+		viewchangereload : true
+	},
 
 	bnavigation : {
 		uri : "bnavigation",

js/app.js

@@ -1408,6 +1408,7 @@ Application = function (p) {
 		self.el = {
 			camera: $('#camera'),
 			content: $('#content'),
+			miniapps: $('#miniappscnt'),
 			app: $('#application'),
 			header: $('#headerWrapper'),
 			menu: $('#menuWrapper'),