Implemented MainView style.

bigbluebutton · Dec 9, 2016 · 6aef6e6 · 6aef6e6
1 parent ed3db7b
commit 6aef6e6
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/clients/flash/air-client/src/css/xhdpi.css b/clients/flash/air-client/src/css/xhdpi.css
@@ -1,5 +1,7 @@
 @namespace s "library://ns.adobe.com/flex/spark";
 @namespace main "org.bigbluebutton.air.main.views.*";
+@namespace mainviews "org.bigbluebutton.lib.main.views.*";
+@namespace skins "org.bigbluebutton.lib.main.views.skins.*";
 
 @media (application-dpi: 320) {
 	main|LoadingScreen {
@@ -10,6 +12,23 @@
 		height : 80;
 	}
 
+	main|MainView {
+		menuHeight    : 160;
+		toolbarHeight : 80;
+	}
+
+	mainviews|MenuButtonsBase {
+		bottom   : 35;
+		top      : 14;
+		gap      : 45;
+	}
+
+	skins|MenuButtonSkin {
+		fontSize     : 24;
+		iconSize     : 36;
+		labelPadding : 12;
+	}
+
 	.titleLabel
 	{
 		fontSize : 34;
@@ -32,12 +51,6 @@
 		right : 30;
 	}
 
-	.menuButton
-	{
-		fontSize : 14;
-		iconSize : 30;
-	}
-
 	.participantIcon
 	{
 		width    : 32;

diff --git a/clients/flash/air-client/src/org/bigbluebutton/air/main/views/MainView.as b/clients/flash/air-client/src/org/bigbluebutton/air/main/views/MainView.as
@@ -6,6 +6,8 @@ package org.bigbluebutton.air.main.views {
 	import org.bigbluebutton.lib.presentation.views.PresentationViewBase;
 	import org.osmf.layout.HorizontalAlign;
 
+	[Style(name = "menuHeight", inherit = "no", type = "Number")]
+	[Style(name = "toolbarHeight", inherit = "no", type = "Number")]
 	public class MainView extends NoTabView {
 		private var _topToolbar:TopToolbarAIR;
 
@@ -23,7 +25,6 @@ package org.bigbluebutton.air.main.views {
 
 			_topToolbar = new TopToolbarAIR();
 			_topToolbar.percentWidth = 100;
-			_topToolbar.height = getStyle("height");
 			addElement(_topToolbar);
 
 			_presentationView = new PresentationViewBase();
@@ -40,6 +41,9 @@ package org.bigbluebutton.air.main.views {
 
 			_presentationView.width = w;
 			_presentationView.height = h - _topToolbar.height - _menuButtons.height;
+
+			_menuButtons.height = getStyle("menuHeight");
+			_topToolbar.height = getStyle("toolbarHeight");
 		}
 	}
 }
diff --git a/.../common-library/src/main/actionscript/org/bigbluebutton/lib/main/views/MenuButtonsBase.as b/.../common-library/src/main/actionscript/org/bigbluebutton/lib/main/views/MenuButtonsBase.as
@@ -1,12 +1,12 @@
 package org.bigbluebutton.lib.main.views {
 
-	import org.bigbluebutton.lib.main.views.skins.MenuButtonSkin;
-
 	import spark.components.Button;
-	import spark.components.Group;
-	import spark.layouts.HorizontalLayout;
+	import spark.components.HGroup;
 
-	public class MenuButtonsBase extends Group {
+	[Style(name = "bottom", inherit = "no", type = "Number")]
+	[Style(name = "gap", inherit = "no", type = "Number")]
+	[Style(name = "top", inherit = "no", type = "Number")]
+	public class MenuButtonsBase extends HGroup {
 		private var _micButton:Button;
 
 		public function get micButton():Button {
@@ -28,9 +28,6 @@ package org.bigbluebutton.lib.main.views {
 		public function MenuButtonsBase() {
 			super();
 
-			var l:HorizontalLayout = new HorizontalLayout();
-			l.gap = 10;
-			layout = l;
 
 			_micButton = new Button();
 			_micButton.percentWidth = 100;
@@ -53,5 +50,13 @@ package org.bigbluebutton.lib.main.views {
 			_statusButton.styleName = "handStatusButton menuButton";
 			addElement(_statusButton);
 		}
+
+		override protected function updateDisplayList(w:Number, h:Number):void {
+			super.updateDisplayList(w, h);
+
+			bottom = getStyle("bottom");
+			gap = getStyle("gap");
+			top = getStyle("top");
+		}
 	}
 }
diff --git a/...-library/src/main/actionscript/org/bigbluebutton/lib/main/views/skins/MenuButtonSkin.mxml b/...-library/src/main/actionscript/org/bigbluebutton/lib/main/views/skins/MenuButtonSkin.mxml
@@ -4,6 +4,7 @@
 	<!-- host component -->
 	<fx:Metadata>
 		[HostComponent("spark.components.Button")]
+		[Style(name="labelPadding", inherit="no", type="Number")]
 	</fx:Metadata>
 
 	<fx:Script>
@@ -18,7 +19,7 @@
 			}
 		]]>
 	</fx:Script>
-	
+
 	<!-- states -->
 	<s:states>
 		<s:State name="disabled" />
@@ -28,7 +29,7 @@
 	</s:states>
 
 	<s:Ellipse id="backgroundEllipse"
-			   height="{getStyle('iconSize') * 3/2}"
+			   height="{getStyle('iconSize') * 2}"
 			   width="{backgroundEllipse.height}"
 			   x="{(this.width - backgroundEllipse.width)/2}"
 			   y="{(this.height - backgroundEllipse.height)/2}">
@@ -37,17 +38,17 @@
 						  color.down="{hostComponent.getStyle('selectedBackgroundColor')}" />
 		</s:fill>
 	</s:Ellipse>
-	<s:Label 	id="icon"
-				   fontSize="{getStyle('iconSize')}"
-				   fontFamily="{getStyle('iconFont')}"
-				   color="{getStyle('iconColor')}"
-				   horizontalCenter="0"
-				   verticalCenter="0" />
+	<s:Label id="icon"
+			 fontSize="{getStyle('iconSize')}"
+			 fontFamily="{getStyle('iconFont')}"
+			 color="{getStyle('iconColor')}"
+			 horizontalCenter="0"
+			 verticalCenter="0" />
 
 	<s:Label id="iconLabel"
 			 text="{hostComponent.label}"
 			 x="{(this.width - iconLabel.width)/2}"
-			 y="{backgroundEllipse.y + backgroundEllipse.height * 9/8}"
-			 fontSize="{getStyle('fontSize')}"/>
+			 y="{backgroundEllipse.y + backgroundEllipse.height + getStyle('labelPadding')}"
+			 fontSize="{getStyle('fontSize')}" />
 
 </s:Skin>