Added new skin for ComboBox component.

bigbluebutton-client/branding/default/style/css/V2Theme.css

@@ -55,12 +55,10 @@ mx|Application {
 //------------------------------
 */
 
-.micSettingsWindowStyle {
+.audioSelectionsStyle {
-	borderColor : #FFFFFF;
+	horizontalGap:60;
-	cornerRadius : 4;
+	paddingLeft:30;
-	roundedBottomCorners : true;
+	paddingRight:30;
-	dropShadowEnabled : true;
-	shadowDistance : 0;
 }
 
 .webcamSettingsWindowTitleStyle, .micSettingsWindowTitleStyle {
@@ -304,7 +302,27 @@ mx|Button /*, .logoutButtonStyle, .chatSendButtonStyle, .helpLinkButtonStyle, .c
 
 mx|ComboBox
 {
-	/* TODO */
+	cornerRadius      : 2;
+	color             : #5e6c73;
+	textRollOverColor : #5e6c73;
+	textSelectedColor : #5e6c73;
+	fontSize          : 12;
+	
+	/* Normal state */
+	fillColorUp         : #ffffff;
+	fillColorOver       : #cdd4db;
+	fillColorDown       : #acb2b7;
+	fillColorDisabled   : #f0f2f6;
+	borderColorUp       : #cdd4db;
+	borderColorOver     : #cdd4db;
+	borderColorDown     : #acb2b7;
+	borderColorDisabled : #cdd4db;
+	
+	iconColor : #5e6c73;
+	
+	borderThikness : 1;
+	
+	skin: ClassReference("org.bigbluebutton.skins.ComboBoxSkin");
 }
 
 /*
@@ -560,6 +578,20 @@ mx|ProgressBar {
 	icon: Embed('assets/images/ic_note_format_16px.png');
 }
 
+/*
+//------------------------------
+//  TitleWindow
+//------------------------------
+*/
+
+mx|TitleWindow {
+	borderColor : #FFFFFF;
+	cornerRadius : 4;
+	roundedBottomCorners : true;
+	dropShadowEnabled : true;
+	shadowDistance : 0;
+}
+
 /*
 //------------------------------
 //  ToolTip
@@ -872,21 +904,6 @@ whiteboard|WhiteboardToolbar {
 	icon:   Embed('assets/images/webcam-muted.png');
 }
 
-mx|TitleWindow {
-	borderColor: #b9babc;
-	borderAlpha: 1;
-	borderThicknessLeft: 10;
-	borderThicknessTop: 0;
-	borderThicknessBottom: 10;
-	borderThicknessRight: 10;
-	roundedBottomCorners: true;
-	cornerRadius: 5;
-	headerHeight: 20;
-	backgroundAlpha: 1;
-	backgroundColor: #EFEFEF;
-	dropShadowEnabled: true;
-}
-
 .presentationFileUploadWindowTitleStyle, .presentationUploadTitleStyle {
 	fontFamily: Arial;
 	fontSize: 20;  

bigbluebutton-client/branding/default/style/css/org/bigbluebutton/skins/ComboBoxSkin.as

@@ -0,0 +1,191 @@
+/**
+ * BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
+ *
+ * Copyright (c) 2017 BigBlueButton Inc. and by respective authors (see below).
+ *
+ * This program is free software; you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free Software
+ * Foundation; either version 3.0 of the License, or (at your option) any later
+ * version.
+ *
+ * BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ * PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along
+ * with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+package org.bigbluebutton.skins {
+	import flash.display.Graphics;
+
+	import mx.core.UIComponent;
+	import mx.skins.Border;
+
+	public class ComboBoxSkin extends Border {
+
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden properties
+		//
+		//--------------------------------------------------------------------------
+
+		//----------------------------------
+		//  measuredWidth
+		//----------------------------------
+
+		/**
+		 *  @private
+		 */
+		override public function get measuredWidth():Number {
+			return UIComponent.DEFAULT_MEASURED_MIN_WIDTH;
+		}
+
+		//----------------------------------
+		//  measuredHeight
+		//----------------------------------
+
+		/**
+		 *  @private
+		 */
+		override public function get measuredHeight():Number {
+			return UIComponent.DEFAULT_MEASURED_MIN_HEIGHT;
+		}
+
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+
+		/**
+		 *  @private
+		 */
+		override protected function updateDisplayList(w:Number, h:Number):void {
+			super.updateDisplayList(w, h);
+
+			// User-defined styles.
+			var arrowColor:uint = getStyle("iconColor");
+			var arrowAlpha:Number = 1;
+
+			var borderColorUp:uint = getStyle("borderColorUp");
+			var borderColorOver:uint = getStyle("borderColorOver");
+			var borderColorDown:uint = getStyle("borderColorDown");
+			var borderColorDisabled:uint = getStyle("borderColorDisabled");
+
+			var borderThikness:uint = getStyle("borderThikness");
+
+			var fillColorUp:uint = getStyle("fillColorUp");
+			var fillColorOver:uint = getStyle("fillColorOver");
+			var fillColorDown:uint = getStyle("fillColorDown");
+			var fillColorDisabled:uint = getStyle("fillColorDisabled");
+
+			var cornerRadius:Number = getStyle("cornerRadius");
+			var dropdownBorderColor:Number = getStyle("dropdownBorderColor");
+
+			// The dropdownBorderColor is currently only used
+			// when displaying an error state.
+			if (!isNaN(dropdownBorderColor))
+				borderColorUp = dropdownBorderColor;
+
+			var cornerRadius1:Number = Math.max(cornerRadius - 1, 0);
+			var cr:Object = {tl: 0, tr: cornerRadius, bl: 0, br: cornerRadius};
+			var cr1:Object = {tl: 0, tr: cornerRadius - borderThikness, bl: 0, br: cornerRadius - borderThikness};
+
+			var arrowOnly:Boolean = true;
+
+			// If our name doesn't include "editable", we are drawing the non-edit
+			// skin which spans the entire control
+			if (name.indexOf("editable") < 0) {
+				arrowOnly = false;
+				cr.tl = cr.bl = cornerRadius;
+				cr1.tl = cr1.bl = cornerRadius1;
+			}
+
+			var g:Graphics = graphics;
+
+			g.clear();
+
+			// Draw the border and fill.
+			switch (name) {
+				case "upSkin":
+				case "editableUpSkin":  {
+					// border
+					drawRoundRect(0, 0, w, h, cr, borderColorUp, 1);
+
+					// button fill
+					drawRoundRect(borderThikness, borderThikness, w - (borderThikness * 2), h - (borderThikness * 2), cr1, fillColorUp, 1);
+
+					if (!arrowOnly) {
+						// line
+						drawRoundRect(w - 22, 4, 1, h - 8, 0, borderColorUp, 1);
+						drawRoundRect(w - 21, 4, 1, h - 8, 0, 0xFFFFFF, 0.2);
+					}
+
+					break;
+				}
+
+				case "overSkin":
+				case "editableOverSkin":  {
+					// border
+					drawRoundRect(0, 0, w, h, cr, borderColorOver, 1);
+
+					// button fill
+					drawRoundRect(borderThikness, borderThikness, w - (borderThikness * 2), h - (borderThikness * 2), cr1, fillColorOver, 1);
+
+					if (!arrowOnly) {
+						// line
+						drawRoundRect(w - 22, 4, 1, h - 8, 0, borderColorOver, 1);
+						drawRoundRect(w - 21, 4, 1, h - 8, 0, 0xFFFFFF, 0.2);
+					}
+
+					break;
+				}
+
+				case "downSkin":
+				case "editableDownSkin":  {
+					// border
+					drawRoundRect(0, 0, w, h, cr, borderColorDown, 1);
+
+					// button fill
+					drawRoundRect(borderThikness, borderThikness, w - (borderThikness * 2), h - (borderThikness * 2), cr1, fillColorDown, 1);
+
+					if (!arrowOnly) {
+						// line
+						drawRoundRect(w - 22, 4, 1, h - 8, 0, fillColorDown, 1);
+						drawRoundRect(w - 21, 4, 1, h - 8, 0, 0xFFFFFF, 0.2);
+					}
+
+					break;
+				}
+
+				case "disabledSkin":
+				case "editableDisabledSkin":  {
+					// border
+					drawRoundRect(0, 0, w, h, cr, borderColorDisabled, 1);
+
+					// button fill
+					drawRoundRect(borderThikness, borderThikness, w - (borderThikness * 2), h - (borderThikness * 2), cr1, fillColorDisabled, 1);
+
+					if (!arrowOnly) {
+						// line
+						drawRoundRect(w - 22, 4, 1, h - 8, 0, 0x999999, 0.5);
+					}
+
+					arrowColor = getStyle("disabledIconColor");
+					arrowAlpha = 0.45;
+
+					break;
+				}
+			}
+
+			// Draw the triangle.
+			g.beginFill(arrowColor, arrowAlpha);
+			g.moveTo(w - 10, h / 2 + 1.9);
+			g.lineTo(w - 13, h / 2 - 2);
+			g.lineTo(w - 7, h / 2 - 2);
+			g.lineTo(w - 10, h / 2 + 1.9);
+			g.endFill();
+		}
+	}
+}

bigbluebutton-client/src/org/bigbluebutton/main/views/AudioSelectionWindow.mxml

@@ -28,7 +28,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 				close="onCancelClicked()"
 				verticalScrollPolicy="off"
 				horizontalScrollPolicy="off"
-				styleName="micSettingsWindowStyle"
 				showCloseButton="true">
 
 	<fx:Script>
@@ -144,7 +143,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 				id="audioBrowserHint" styleName="audioBroswerHintBoxStyle">
 			<mx:Text width="100%" textAlign="center" text="{ResourceUtil.getInstance().getString('bbb.clientstatus.webrtc.message')}" styleName="audioBroswerHintTextStyle"/>
 		</mx:Box>
-		<mx:HBox width="100%" height="100%">
+		<mx:HBox width="100%" height="100%" styleName="audioSelectionsStyle">
 			<mx:VBox id="vboxMic" height="100%" width="30%" horizontalAlign="center" verticalAlign="middle">
 				<mx:Button id="btnMicrophone" buttonMode="true" styleName="btnMicrophoneStyle" width="140" height="140"
 						   click="onMicClick()"