Implemented an auto hiding toolbar to toggle deskshare options

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

View File

@ -1,14 +1,12 @@
<?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/"
initialize="init()"
creationComplete="onCreationComplete()"
visible="{buttonVisible}"
hideEffect="{fadeOut}" showEffect="{fadeIn}"
toolTip = "{ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}"
label = "{ResourceUtil.getInstance().getString('bbb.desktopView.actualSize')}"
height="20" width="20" >
visible="{toolbarVisible}"
horizontalAlign="center"
hideEffect="{fadeOut}" showEffect="{fadeIn}" >
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
@ -17,15 +15,15 @@
import org.bigbluebutton.core.UsersUtil;
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 globalDispatcher:Dispatcher;
private var _buttonHideTimer:Timer;
private var _toolbarHideTimer:Timer;
public function init():void{
_buttonHideTimer = new Timer(500, 1);
_buttonHideTimer.addEventListener(TimerEvent.TIMER, hideButton);
_toolbarHideTimer = new Timer(500, 1);
_toolbarHideTimer.addEventListener(TimerEvent.TIMER, hideToolbar);
}
private function onCreationComplete():void {
@ -35,27 +33,27 @@
}
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;
checkVisibility();
}
private function handleMouseIn(e:MouseEvent = null):void {
_buttonHideTimer.reset();
_toolbarHideTimer.reset();
mousedOver = true;
checkVisibility();
}
private function handleMouseOut(e:MouseEvent = null):void {
_buttonHideTimer.reset();
_buttonHideTimer.start();
_toolbarHideTimer.reset();
_toolbarHideTimer.start();
}
private function buttonAllowed():Boolean {
// Created to make possible to create rules to allow or not the button
private function toolbarAllowed():Boolean {
// Created to make possible to create rules to allow or not the toolbar
return true;
}
@ -68,4 +66,4 @@
<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:Button>
</mx:HBox>

View File

@ -86,12 +86,12 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
[Bindable] private var baseIndex:int;
[Bindable] private var dsOptions:DeskshareOptions;
private function init():void{
dsOptions = new DeskshareOptions();
baseIndex = dsOptions.baseTabIndex;
}
private function onCreationComplete():void{
this.addChildAt(videoHolder, 0);
videoHolder.percentWidth = 100;
@ -112,21 +112,22 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
maximizeRestoreBtn.tabIndex = baseIndex+2;
closeBtn.tabIndex = baseIndex+3;
btnActualSize.registerListeners(this);
bottomBar.registerListeners(this);
fitToActualSize();
}
private function onResizeStartEvent(event:MDIWindowEvent):void {
if (event.window == this) {
resizer.onResizeStart();
}
}
private function onResizeEndEvent(event:MDIWindowEvent):void {
if (event.window == this) {
resizer.onResizeEnd();
}
}
private function onResizeEvent():void {
if (this.minimized) {
return;
@ -138,15 +139,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
else {
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 {
@ -253,7 +245,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
}
private function fitWindowToVideo():void {
this.restore();
video.width = videoHolder.width = videoWidth;
video.height = videoHolder.height = videoHeight;
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:Image id="cursorImg" visible="false" source="@Embed('../../assets/images/cursor4.png')"/>
<views:DesktopViewButton id="btnActualSize"
click="determineHowToDisplayVideo()"
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')}" />
<views:DesktopViewToolbar id="bottomBar" visible="true" height="30" horizontalAlign="center" paddingTop="0" paddingBottom="0" width="100%" >
<mx:Button id="btnActualSize" paddingTop="0" paddingBottom="0" styleName="deskshareControlButtonStyle"
click="determineHowToDisplayVideo()"
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>