BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented an auto hiding toolbar to toggle deskshare options

Browse Source
This commit is contained in:
Mateus Dalepiane 2015-02-13 03:32:58 -02:00 committed by Felipe Cecagno
parent 9e9bbfc72e
commit dfceb138b0
2 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
bigbluebutton-client/src/org/bigbluebutton/modules/deskshare/view/components/DesktopViewButton.mxml → bigbluebutton-client/src/org/bigbluebutton/modules/deskshare/view/components/DesktopViewToolbar.mxml
View File

@ -1,14 +1,12 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mate="http://mate.asfusion.com/" xmlns:mate="http://mate.asfusion.com/"
initialize="init()" initialize="init()"
creationComplete="onCreationComplete()" creationComplete="onCreationComplete()"
visible="{buttonVisible}" visible="{toolbarVisible}"
hideEffect="{fadeOut}" showEffect="{fadeIn}" horizontalAlign="center"
toolTip = "{ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}" hideEffect="{fadeOut}" showEffect="{fadeIn}" >
label = "{ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}"
height="20" width="20" >
<mx:Script> <mx:Script>
<![CDATA[ <![CDATA[
import mx.core.UIComponent; import mx.core.UIComponent;
@ -17,15 +15,15 @@
import org.bigbluebutton.core.UsersUtil; import org.bigbluebutton.core.UsersUtil;
import org.bigbluebutton.util.i18n.ResourceUtil; import org.bigbluebutton.util.i18n.ResourceUtil;
[Bindable] private var buttonVisible:Boolean = false; [Bindable] private var toolbarVisible:Boolean = false;
private var mousedOver:Boolean = false; private var mousedOver:Boolean = false;
private var globalDispatcher:Dispatcher; private var globalDispatcher:Dispatcher;
private var _buttonHideTimer:Timer; private var _toolbarHideTimer:Timer;
public function init():void{ public function init():void{
_buttonHideTimer = new Timer(500, 1); _toolbarHideTimer = new Timer(500, 1);
_buttonHideTimer.addEventListener(TimerEvent.TIMER, hideButton); _toolbarHideTimer.addEventListener(TimerEvent.TIMER, hideToolbar);
} }
private function onCreationComplete():void { private function onCreationComplete():void {
@ -35,27 +33,27 @@
} }
private function checkVisibility():void { private function checkVisibility():void {
buttonVisible = (buttonAllowed() && mousedOver); toolbarVisible = (toolbarAllowed() && mousedOver);
} }
public function hideButton(e:TimerEvent = null):void { public function hideToolbar(e:TimerEvent = null):void {
mousedOver = false; mousedOver = false;
checkVisibility(); checkVisibility();
} }
private function handleMouseIn(e:MouseEvent = null):void { private function handleMouseIn(e:MouseEvent = null):void {
_buttonHideTimer.reset(); _toolbarHideTimer.reset();
mousedOver = true; mousedOver = true;
checkVisibility(); checkVisibility();
} }
private function handleMouseOut(e:MouseEvent = null):void { private function handleMouseOut(e:MouseEvent = null):void {
_buttonHideTimer.reset(); _toolbarHideTimer.reset();
_buttonHideTimer.start(); _toolbarHideTimer.start();
} }
private function buttonAllowed():Boolean { private function toolbarAllowed():Boolean {
// Created to make possible to create rules to allow or not the button // Created to make possible to create rules to allow or not the toolbar
return true; return true;
} }
@ -68,4 +66,4 @@
<mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" /> <mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" />
<mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" /> <mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" />
</mx:Button> </mx:HBox>

35
bigbluebutton-client/src/org/bigbluebutton/modules/deskshare/view/components/DesktopViewWindow.mxml
View File

@ -86,12 +86,12 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
[Bindable] private var baseIndex:int; [Bindable] private var baseIndex:int;
[Bindable] private var dsOptions:DeskshareOptions; [Bindable] private var dsOptions:DeskshareOptions;
private function init():void{ private function init():void{
dsOptions = new DeskshareOptions(); dsOptions = new DeskshareOptions();
baseIndex = dsOptions.baseTabIndex; baseIndex = dsOptions.baseTabIndex;
} }
private function onCreationComplete():void{ private function onCreationComplete():void{
this.addChildAt(videoHolder, 0); this.addChildAt(videoHolder, 0);
videoHolder.percentWidth = 100; videoHolder.percentWidth = 100;
@ -112,21 +112,22 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
maximizeRestoreBtn.tabIndex = baseIndex+2; maximizeRestoreBtn.tabIndex = baseIndex+2;
closeBtn.tabIndex = baseIndex+3; closeBtn.tabIndex = baseIndex+3;
btnActualSize.registerListeners(this); bottomBar.registerListeners(this);
fitToActualSize();
} }
private function onResizeStartEvent(event:MDIWindowEvent):void { private function onResizeStartEvent(event:MDIWindowEvent):void {
if (event.window == this) { if (event.window == this) {
resizer.onResizeStart(); resizer.onResizeStart();
} }
} }
private function onResizeEndEvent(event:MDIWindowEvent):void { private function onResizeEndEvent(event:MDIWindowEvent):void {
if (event.window == this) { if (event.window == this) {
resizer.onResizeEnd(); resizer.onResizeEnd();
} }
} }
private function onResizeEvent():void { private function onResizeEvent():void {
if (this.minimized) { if (this.minimized) {
return; return;
@ -138,15 +139,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
else { else {
resizer.onResize(this.width - horizontalBorder, this.height - verticalBorder, this.maximized, video.width, video.height, videoWidth / videoHeight, false, onResizeCallback); resizer.onResize(this.width - horizontalBorder, this.height - verticalBorder, this.maximized, video.width, video.height, videoWidth / videoHeight, false, onResizeCallback);
} }
updateButtonPosition();
}
private function updateButtonPosition():void {
if(btnActualSize) {
btnActualSize.x = 0;// this.width - btnActualSize.width*2;
btnActualSize.y = 0;// this.height - btnActualSize.height*2;
trace("x: " + btnActualSize.x + " y: " + btnActualSize.y);
}
} }
private function onResizeCallback(externalWidth:int, externalHeight:int, internalWidth:int, internalHeight:int, internalOffsetX:int, internalOffsetY:int):void { private function onResizeCallback(externalWidth:int, externalHeight:int, internalWidth:int, internalHeight:int, internalOffsetX:int, internalOffsetY:int):void {
@ -253,7 +245,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
} }
private function fitWindowToVideo():void { private function fitWindowToVideo():void {
this.restore();
video.width = videoHolder.width = videoWidth; video.width = videoHolder.width = videoWidth;
video.height = videoHolder.height = videoHeight; video.height = videoHolder.height = videoHeight;
this.height = videoHeight + verticalBorder; this.height = videoHeight + verticalBorder;
@ -317,9 +308,13 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
<mx:Move id="cursorMove" target="{cursorImg}"/> <mx:Move id="cursorMove" target="{cursorImg}"/>
<mx:Image id="cursorImg" visible="false" source="@Embed('../../assets/images/cursor4.png')"/> <mx:Image id="cursorImg" visible="false" source="@Embed('../../assets/images/cursor4.png')"/>
<views:DesktopViewButton id="btnActualSize" <views:DesktopViewToolbar id="bottomBar" visible="true" height="30" horizontalAlign="center" paddingTop="0" paddingBottom="0" width="100%" >
click="determineHowToDisplayVideo()" <mx:Button id="btnActualSize" paddingTop="0" paddingBottom="0" styleName="deskshareControlButtonStyle"
label="{actualSize ? ResourceUtil.getInstance().getString('bbb.desktopView.fitToWindow') : ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}" click="determineHowToDisplayVideo()"
toolTip="{actualSize ? ResourceUtil.getInstance().getString('bbb.desktopView.fitToWindow') : ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}" /> height="90%"
label="{actualSize ? ResourceUtil.getInstance().getString('bbb.desktopView.fitToWindow') : ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}"
toolTip="{actualSize ? ResourceUtil.getInstance().getString('bbb.desktopView.fitToWindow') : ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}"
tabIndex="{baseIndex+4}"/>
</views:DesktopViewToolbar>
</MDIWindow> </MDIWindow>