Skip to content

Commit 74e9836

Browse files
ritzalamritzalam
committed
Merge pull request bigbluebutton#102 from SenecaCDOT-BigBlueButton/css-improvements
cleaned up the UI a little
2 parents 3d87c1c + f1b9e19 commit 74e9836

File tree

3 files changed

+142
-138
lines changed

3 files changed

+142
-138
lines changed

‎bigbluebutton-client/branding/default/style/css/BBBDefault.css

Lines changed: 97 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -395,70 +395,54 @@ DataGrid {
395395
icon: Embed('assets/images/questionmark.png');
396396
}
397397

398-
MDIWindow {
399-
398+
MDIWindow { /*None of the following properties are overridden by the MDIWindow class*/
399+
backgroundSize: '100%';
400+
401+
cornerRadius: 5;
402+
dropShadowEnabled: false;
403+
titleStyleName: "mypanelTitle";
404+
405+
cornerResizeImg: Embed(source="assets/swf/Blue.swf", symbol="Corner_Resize");
406+
cornerResizeWidth: 2;
407+
cornerResizeHeight: 2;
408+
cornerResizePaddingRight: 2;
409+
cornerResizePaddingBottom: 2;
410+
411+
controlButtonWidth: 10;
412+
controlButtonHeight: 10;
413+
controlButtonGap: 4;
400414
}
401415

402416
.mdiWindowFocus, .presentationWindowStyleFocus, .videoDockStyleFocus
403417
{
404418
headerHeight: 26;
405419
roundedBottomCorners: true;
406-
backgroundAlpha: 1;
407420
backgroundColor: #b9babc;
408-
backgroundSize: '100%';
421+
backgroundAlpha: 1;
409422

410423
borderStyle: solid;
411424
borderColor: #b9babc;
412425
borderAlpha: 1;
413-
borderThickness: 1;
414-
borderThicknessLeft: 1;
415-
borderThicknessTop: 1;
416-
borderThicknessBottom: 1;
417-
borderThicknessRight: 1;
418-
cornerRadius: 0;
419-
dropShadowEnabled: false;
420-
titleStyleName: "mypanelTitle";
421-
422-
cornerResizeImg: Embed(source="assets/swf/Blue.swf", symbol="Corner_Resize");
423-
cornerResizeWidth: 2;
424-
cornerResizeHeight: 2;
425-
cornerResizePaddingRight: 2;
426-
cornerResizePaddingBottom: 2;
427-
428-
controlButtonWidth: 10;
429-
controlButtonHeight: 10;
430-
controlButtonGap: 4;
426+
borderThicknessLeft: 3;
427+
borderThicknessTop: 0;
428+
borderThicknessBottom: 3;
429+
borderThicknessRight: 3;
431430
}
432431

433432
.mdiWindowNoFocus, .presentationWindowStyleNoFocus, .videoDockStyleNoFocus
434433
{
435434
headerHeight: 26;
436-
roundedBottomCorners: false;
437-
backgroundAlpha: 0.5;
435+
roundedBottomCorners: true;
438436
backgroundColor: #b9babc;
439-
backgroundSize: '100%';
440-
437+
backgroundAlpha: 0.5;
438+
441439
borderStyle: solid;
442440
borderColor: #b9babc;
443441
borderAlpha: 0.5;
444-
borderThickness: 1;
445-
borderThicknessLeft: 1;
446-
borderThicknessTop: 1;
447-
borderThicknessBottom: 1;
448-
borderThicknessRight: 1;
449-
cornerRadius: 0;
450-
dropShadowEnabled: false;
451-
titleStyleName: "mypanelTitle";
452-
453-
cornerResizeImg: Embed(source="assets/swf/Blue.swf", symbol="Corner_Resize");
454-
cornerResizeWidth: 2;
455-
cornerResizeHeight: 2;
456-
cornerResizePaddingRight: 2;
457-
cornerResizePaddingBottom: 2;
458-
459-
controlButtonWidth: 10;
460-
controlButtonHeight: 10;
461-
controlButtonGap: 4;
442+
borderThicknessLeft: 3;
443+
borderThicknessTop: 0;
444+
borderThicknessBottom: 3;
445+
borderThicknessRight: 3;
462446
}
463447

464448
.presentationSlideViewStyle {
@@ -477,110 +461,105 @@ MDIWindow {
477461

478462
.videoViewStyleNoFocus
479463
{
480-
borderColor: #b9babc;
481-
borderAlpha: 0.5;
482-
borderThicknessLeft: 5;
483-
borderThicknessTop: 5;
484-
borderThicknessBottom: 5;
485-
borderThicknessRight: 5;
486-
roundedBottomCorners: true;
487-
cornerRadius: 5;
488464
headerHeight: 20;
489-
backgroundColor: #b9babc;
465+
roundedBottomCorners: true;
466+
backgroundColor: #e6e6e6;
490467
backgroundAlpha: 0.5;
491-
dropShadowEnabled: false;
492-
titleStyleName: "mypanelTitle";
468+
469+
borderStyle: solid;
470+
borderColor: #b9babc;
471+
borderAlpha: 0.5;
472+
borderThicknessLeft: 3;
473+
borderThicknessTop: 0;
474+
borderThicknessBottom: 3;
475+
borderThicknessRight: 3;
493476
}
494477

495478
.videoViewStyleFocus
496479
{
497-
borderColor: #b9babc;
498-
borderAlpha: 1;
499-
borderThicknessLeft: 5;
500-
borderThicknessTop: 5;
501-
borderThicknessBottom: 5;
502-
borderThicknessRight: 5;
503-
roundedBottomCorners: true;
504-
cornerRadius: 5;
505480
headerHeight: 20;
506-
backgroundColor: #b9babc;
481+
roundedBottomCorners: true;
482+
backgroundColor: #e6e6e6;
507483
backgroundAlpha: 1;
508-
dropShadowEnabled: false;
509-
titleStyleName: "mypanelTitle";
484+
485+
borderStyle: solid;
486+
borderColor: #b9babc;
487+
borderAlpha: 1;
488+
borderThicknessLeft: 3;
489+
borderThicknessTop: 0;
490+
borderThicknessBottom: 3;
491+
borderThicknessRight: 3;
510492
}
511493

512494
.videoPublishStyleNoFocus
513495
{
514-
borderColor: #b9babc;
515-
borderAlpha: 0.5;
516-
borderThicknessLeft: 5;
517-
borderThicknessTop: 5;
518-
borderThicknessBottom: 5;
519-
borderThicknessRight: 5;
520-
roundedBottomCorners: true;
521-
cornerRadius: 5;
522-
headerHeight: 20;
523-
backgroundColor: #b9babc;
524-
backgroundAlpha: 0.5;
525-
dropShadowEnabled: false;
526-
titleStyleName: "mypanelTitle";
496+
headerHeight: 20;
497+
roundedBottomCorners: true;
498+
backgroundColor: #e6e6e6;
499+
backgroundAlpha: 0.5;
500+
501+
borderStyle: solid;
502+
borderColor: #b9babc;
503+
borderAlpha: 0.5;
504+
borderThicknessLeft: 3;
505+
borderThicknessTop: 0;
506+
borderThicknessBottom: 3;
507+
borderThicknessRight: 3;
527508
}
528509

529510
.videoPublishStyleFocus
530511
{
531-
borderColor: #b9babc;
532-
borderAlpha: 1;
533-
borderThicknessLeft: 5;
534-
borderThicknessTop: 5;
535-
borderThicknessBottom: 5;
536-
borderThicknessRight: 5;
537-
roundedBottomCorners: true;
538-
cornerRadius: 5;
539-
headerHeight: 20;
540-
backgroundColor: #b9babc;
541-
backgroundAlpha: 1;
542-
dropShadowEnabled: false;
543-
titleStyleName: "mypanelTitle";
512+
headerHeight: 20;
513+
roundedBottomCorners: true;
514+
backgroundColor: #e6e6e6;
515+
backgroundAlpha: 1;
516+
517+
borderStyle: solid;
518+
borderColor: #b9babc;
519+
borderAlpha: 1;
520+
borderThicknessLeft: 3;
521+
borderThicknessTop: 0;
522+
borderThicknessBottom: 3;
523+
borderThicknessRight: 3;
544524
}
545525

546526
.videoAvatarStyleNoFocus
547527
{
548-
borderColor: #b9babc;
549-
borderAlpha: 0.5;
550-
borderThicknessLeft: 5;
551-
borderThicknessTop: 5;
552-
borderThicknessBottom: 5;
553-
borderThicknessRight: 5;
554-
roundedBottomCorners: true;
555-
cornerRadius: 5;
556-
headerHeight: 20;
557-
backgroundColor: #b9babc;
558-
backgroundAlpha: 0.5;
559-
dropShadowEnabled: false;
560-
titleStyleName: "mypanelTitle";
528+
headerHeight: 20;
529+
roundedBottomCorners: true;
530+
backgroundColor: #e6e6e6;
531+
backgroundAlpha: 0.5;
532+
533+
borderStyle: solid;
534+
borderColor: #b9babc;
535+
borderAlpha: 0.5;
536+
borderThicknessLeft: 3;
537+
borderThicknessTop: 0;
538+
borderThicknessBottom: 3;
539+
borderThicknessRight: 3;
561540
}
562541

563542
.videoAvatarStyleFocus
564543
{
565-
borderColor: #b9babc;
566-
borderAlpha: 1;
567-
borderThicknessLeft: 5;
568-
borderThicknessTop: 5;
569-
borderThicknessBottom: 5;
570-
borderThicknessRight: 5;
571-
roundedBottomCorners: true;
572-
cornerRadius: 5;
573-
headerHeight: 20;
574-
backgroundColor: #b9babc;
575-
backgroundAlpha: 1;
576-
dropShadowEnabled: false;
577-
titleStyleName: "mypanelTitle";
544+
headerHeight: 20;
545+
roundedBottomCorners: true;
546+
backgroundColor: #e6e6e6;
547+
backgroundAlpha: 1;
548+
549+
borderStyle: solid;
550+
borderColor: #b9babc;
551+
borderAlpha: 1;
552+
borderThicknessLeft: 3;
553+
borderThicknessTop: 0;
554+
borderThicknessBottom: 3;
555+
borderThicknessRight: 3;
578556
}
579557

580558
.mypanelTitle {
581559
color: #5e5f63;
582560
fontFamily: Arial;
583561
fontSize: 12;
562+
fontWeight: bold;
584563
}
585564

586565
.closeBtnFocus, .closeBtnNoFocus

‎bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/ChatBox.mxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -587,7 +587,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
587587
</mx:Script>
588588

589589
<mx:HBox width="100%" height="{chatListHeight}" verticalScrollPolicy="off">
590-
<chat:AdvancedList width="100%" height="{chatListHeight}" id="chatMessagesList" selectable="true" variableRowHeight="true" alternatingItemColors="[#EFEFEF, #FEFEFE]"
590+
<chat:AdvancedList width="100%" height="{chatListHeight}" id="chatMessagesList" selectable="false" variableRowHeight="true"
591591
itemRenderer="org.bigbluebutton.modules.chat.views.ChatMessageRenderer" verticalScrollPolicy="auto" wordWrap="true"
592592
dataProvider="{chatMessages.messages}"
593593
tabIndex="{baseIndex}"

‎bigbluebutton-client/src/org/bigbluebutton/modules/chat/views/ChatMessageRenderer.mxml

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
2121
-->
2222

2323
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top"
24-
verticalScrollPolicy="off" xmlns:common="org.bigbluebutton.common.*" dataChange="validateNow()"
24+
verticalScrollPolicy="off" xmlns:common="org.bigbluebutton.common.*"
2525
creationComplete="onCreationComplete()">
2626

2727
<mx:Script>
@@ -46,12 +46,8 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
4646
* do this, we'll get a stale data which will display the chat
4747
* message repeatedly. (ralam Nov 1, 2010)
4848
*/
49-
ChangeWatcher.watch(this, "data", dataChangeHandler);
50-
if (data != null) {
51-
chatMsg = data as ChatMessage;
52-
data = null;
53-
chatMsg.translateMessage();
54-
}
49+
//ChangeWatcher.watch(this, "data", dataChangeHandler);
50+
//dataChangeHandler(); // call to intialize
5551
5652
/**
5753
* The next line will refresh the display so that chat history don't show up as
@@ -62,13 +58,42 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
6258
validateNow();
6359
}
6460
65-
private function dataChangeHandler(e:Event = null):void{
66-
if (data == null) {
67-
return;
68-
}
69-
chatMsg = data as ChatMessage;
70-
data = null;
71-
chatMsg.translateMessage();
61+
//private function dataChangeHandler(e:Event = null):void{
62+
override public function set data(value:Object):void {
63+
//if (data == null) {
64+
// return;
65+
//}
66+
super.data = value;
67+
68+
//chatMsg = data as ChatMessage;
69+
//data = null;
70+
71+
if (data == null) return;
72+
73+
data.translateMessage();
74+
75+
/*
76+
This is setting the backgroundColor style. It changes the value correct and the if
77+
statement works, but the style never takes effect. I have no idea what's wrong.
78+
Chad
79+
*/
80+
//LogUtil.debug ("senderId: " + data.senderId);
81+
//LogUtil.debug("backColor " + this.getStyle("backgroundColor") + "alpha " + this.getStyle("backgroundAlpha"));
82+
if (data.senderId == " ") {
83+
this.setStyle("backgroundColor", 0xff0000);
84+
} else {
85+
this.setStyle("backgroundColor", 0x00ff00);
86+
}
87+
88+
// The visibility check has to go here becasue ORs don't work with databinding
89+
lblTime.visible = (!(data.lastTime == data.time) || !(data.senderId == data.lastSenderId));
90+
// check the visibility of the name as well because events might fire in different order
91+
lblName.visible = !(data.senderId == data.lastSenderId);
92+
93+
//remove the header if not needed to save space
94+
hbHeader.includeInLayout = hbHeader.visible = lblName.visible || lblTime.visible;
95+
96+
validateNow();
7297
}
7398
7499
private function onRollOver():void{
@@ -82,16 +107,16 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
82107
]]>
83108
</mx:Script>
84109

85-
<mx:HBox width="100%">
86-
<mx:Label id="lblName" text="{chatMsg.name} " visible="{!(chatMsg.senderId == chatMsg.lastSenderId)}" color="gray" width="100%" textAlign="left"/>
110+
<mx:HBox width="100%" id="hbHeader">
111+
<mx:Label id="lblName" text="{data.name} " visible="true" color="gray" width="100%" textAlign="left"/>
87112
<mx:Spacer width="100%"/>
88-
<mx:Text id="lblTime" htmlText="{chatMsg.translateLocale} {rolledOver ? chatMsg.senderTime : chatMsg.time}" textAlign="right"
89-
visible="{!(chatMsg.lastTime == chatMsg.time) || !(chatMsg.senderId == chatMsg.lastSenderId)}"
113+
<mx:Text id="lblTime" htmlText="{data.translateLocale} {rolledOver ? data.senderTime : data.time}" textAlign="right"
114+
visible="true"
90115
color="gray" width="100%"/>
91116
</mx:HBox>
92117
<mx:HBox width="100%">
93118
<mx:Spacer width="5"/>
94-
<mx:Text id="txtMessage" htmlText="{rolledOver ? chatMsg.senderText : chatMsg.translatedText}" link="onLinkClick(event)" color="{chatMsg.senderColor}"
119+
<mx:Text id="txtMessage" htmlText="{rolledOver ? data.senderText : data.translatedText}" link="onLinkClick(event)" color="{data.senderColor}"
95120
rollOver="onRollOver()" rollOut="onRollOut()" width="100%" selectable="true"/>
96121
</mx:HBox>
97122
</mx:VBox>

0 commit comments

Comments
 (0)