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

Merge pull request #646 from gthacoder/meteor-client-right-hand-menu

Browse Source 
HTML5 client: right-hand menu.
This commit is contained in:
Chad Pilkey 2015-05-26 17:27:09 -04:00
commit 217b5c37d6
5 changed files with 125 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
bigbluebutton-html5/app/client/main.coffee
View File

@ -52,14 +52,6 @@ Template.header.events
$(".tooltip").hide()
BBB.raiseHand(BBB.getMeetingId(), getInSession("userId"), getInSession("userId"), getInSession("authToken"))
"click .settingsIcon": (event) ->
setInSession("tempFontSize", getInSession("messageFontSize"))
$("#settingsModal").foundation('reveal', 'open');
"click .signOutIcon": (event) ->
$('.signOutIcon').blur()
$("#logoutModal").foundation('reveal', 'open');
"click .hideNavbarIcon": (event) ->
$(".tooltip").hide()
toggleNavbar()
@ -82,6 +74,9 @@ Template.menu.events
'click .slideButton': (event) ->
toggleMenu()
'click .toggleChatButton': (event) ->
toggleChatbar()
Template.main.rendered = ->
$("#dialog").dialog(
modal: true
@ -132,5 +127,13 @@ Template.main.events
'click .shield': (event) ->
closePushMenus()
'click .settingsIcon': (event) ->
setInSession("tempFontSize", getInSession("messageFontSize"))
$("#settingsModal").foundation('reveal', 'open');
'click .signOutIcon': (event) ->
$('.signOutIcon').blur()
$("#logoutModal").foundation('reveal', 'open');
Template.makeButton.rendered = ->
$('button[rel=tooltip]').tooltip()

6
bigbluebutton-html5/app/client/main.html
View File

@ -79,8 +79,8 @@
<template name="menu">
<div id="{{id}}">
{{> makeButton btn_class="slideButton" i_class="ion-chatbubble" label="Chat"}}
{{> makeButton btn_class="slideButton" i_class="ion-gear-b" label="Settings"}}
{{> makeButton btn_class="slideButton" i_class="ion-log-out" label="Log out"}}
{{> makeButton btn_class="slideButton toggleChatButton" i_class="ion-chatbubble" label="Chat"}}
{{> makeButton btn_class="slideButton settingsIcon" i_class="ion-gear-b" label="Settings"}}
{{> makeButton btn_class="slideButton signOutIcon" i_class="ion-log-out" label="Log out"}}
</div>
</template>

76
bigbluebutton-html5/app/client/stylesheets/modals.less
View File

@ -1,9 +1,67 @@
@import "variables";
#settingsModal {
border-radius: 15px; display: none; padding:0px;
border-radius: 15px;
display: none;
padding: 0px;
@media @desktop-portrait, @landscape {
min-width: 430px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 90%;
height: 50%;
}
.bar {
padding: 10px;
}
.topBar {
border-bottom: 1px solid grey;
p:first-child {
float: left;
i {
@media @desktop-portrait, @landscape {
font-size: 30px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
font-size: 300%;
}
}
}
p:nth-child(2) {
text-align: right;
.closeSettings {
@media @desktop-portrait, @landscape {
font-size: 30px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
font-size: 450%;
}
position: inherit;
}
}
}
.bottomBar {
border-top: 1px solid grey;
text-align: right;
.closeSettings {
@media @desktop-portrait, @landscape {
font-size: 12px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
font-size: 250%;
}
position: inherit;
}
}
.settingsBody {
padding: 10px;
text-align: center;
@media @mobile-portrait-with-keyboard, @mobile-portrait {
font-size: 200%;
height: 70%;
}
}
p {
margin-bottom: 0px;
}
@ -11,7 +69,6 @@
margin-left: 20px;
font-style: normal;
}
.joinAudioButton {
width: 80px;
height: 70px;
@ -24,4 +81,19 @@
margin: auto;
width: 400px;
padding: 0px;
@media @mobile-portrait-with-keyboard, @mobile-portrait {
height: 30%;
.settingsButton {
width: 80%;
height: 80%;
}
}
}
#saveSettings {
@media @desktop-portrait, @landscape {
font-size: 12px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
font-size: 250%;
}
}

38
bigbluebutton-html5/app/client/stylesheets/style.less
View File

@ -347,9 +347,11 @@ body {
}
.signOutIcon {
height: 28px;
width: 75px;
margin-left: 10px;
@media @landscape {
height: 28px;
width: 75px;
margin-left: 10px;
}
}
.rightNavbarSection {
@ -378,8 +380,10 @@ body {
}
.settingsIcon {
width: 57px;
margin-right: 5px;
@media @landscape {
width: 57px;
margin-right: 5px;
}
}
#menu {
@ -435,12 +439,28 @@ body {
right: 5%;
position: fixed;
text-align: center;
width: 20%;
@media @landscape {
width: 20%;
}
@media @desktop-portrait {
width: 40%;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 90%;
p {
font-size: 250%;
}
}
.logoutButton {
padding: 0px;
width: 50px;
height: 30px;
@media @desktop-portrait, @landscape {
width: 50px;
height: 30px;
}
@media @mobile-portrait-with-keyboard, @mobile-portrait {
width: 20%;
font-size: 200%;
}
background-color: rgb(229, 229, 229);
color: rgb(121, 121, 121);
font-weight: bold;

16
bigbluebutton-html5/app/client/views/modals/modals.html
View File

@ -29,25 +29,25 @@
</template>
<template name="settingsModal">
<div class="bar" style="border-bottom:1px solid grey">
<p style="float: left">
<i class="ion-gear-b" style="font-size:30px">
<div class="bar topBar">
<p>
<i class="ion-gear-b">
<span class="modalTitle">BigBlueButton Settings</span>
</i>
</p>
<p style="text-align:right">
<a href="#" class="closeSettings close-reveal-modal" style="font-size: 30px; position: inherit;">&#215;</a>
<p>
<a href="#" class="closeSettings close-reveal-modal">&#215;</a>
</p>
</div>
<div style="padding: 10px; text-align: center;">
<div class="settingsBody">
{{> settingsAudio}}<br/>
{{> optionsFontSize}}<br/>
{{{getBBBSettingsInfo}}}
</div>
<div class="bar" style="border-top:1px solid grey; text-align: right;">
<a href="#" class="closeSettings close-reveal-modal" style="font-size: 12px; position: inherit;"><u>Cancel</u></a>
<div class="bar bottomBar">
<a href="#" class="closeSettings close-reveal-modal"><u>Cancel</u></a>
{{> makeButton id="saveSettings" btn_class="settingsButton" rel="tooltip" title="Save Changes" style="margin-bottom: 0px; background-color: #007095; border-radius: 15px; padding: 5px 10px 5px 10px" text="Save"}}
</div>
</template>