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

Refactor icons to make it easier to extend and modify

Browse Source
This commit is contained in:
Lucas Zawacki 2016-02-29 15:58:19 -05:00 committed by Felipe Cecagno
parent 301a07773b
commit 9315a596f7
5 changed files with 80 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
bigbluebutton-html5/app/client/globals.js
View File

@ -292,6 +292,17 @@ Handlebars.registerHelper("getPollQuestions", () => {
}
});
Template.registerHelper('emojiIcons', function () {
return [
{ name: 'sad', icon: 'sad-face', title: '' },
{ name: 'happy', icon: 'happy-face', title: ''},
{ name: 'confused', icon: 'confused-face', title: ''},
{ name: 'neutral', icon: 'neutral-face', title: ''},
{ name: 'away', icon: 'clock', title: ''},
{ name: 'raiseHand', icon: 'hand', title: 'Lower your Hand'}
];
});
this.getSortedUserList = function(users) {
if((users != null ? users.length : void 0) > 1) {
users.sort((a, b) => {

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

@ -106,44 +106,52 @@
</template>
<template name="icon">
{{#if equals name "hand"}}
<span rel="tooltip" data-placement="bottom" title="{{title}}">
<i class="ion-android-hand"></i>
</span>
{{else}}
<svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
{{#if equals name "happy-face"}}
{{> Template.dynamic template=name}}
</svg>
{{/if}}
</template>
<template name="happy-face">
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
{{else}}
{{#if equals name "neutral-face"}}
</template>
<template name="neutral-face">
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "confused-face"}}
</template>
<template name="confused-face">
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "sad-face"}}
</template>
<template name="sad-face">
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
<path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
{{else}}
{{#if equals name "clock"}}
</template>
<template name="clock">
<circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
<path d="m25 25 l 0 -8" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path d="m25 25 l 5 5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{else}}
{{#if equals name "plus"}}
</template>
<template name="plus">
<path d="m25 18 l 0 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path d="m18 25 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
</svg>
</template>

33
bigbluebutton-html5/app/client/views/users/user_item.html
View File

@ -73,26 +73,6 @@
</span>
{{/unless}}
{{/if}}
{{#if equals user.emoji_status "happy"}}
{{> icon name="happy-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "neutral"}}
{{> icon name="neutral-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "confused"}}
{{> icon name="confused-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "sad"}}
{{> icon name="sad-face" size="25"}}
{{else}}
{{#if equals user.emoji_status "away"}}
{{> icon name="clock" size="25"}}
{{else}}
{{#if equals user.emoji_status "raiseHand"}}
<span rel="tooltip" data-placement="bottom" title="Lower your hand">
<i class="icon ion-android-hand statusIcon"></i>
</span>
{{else}}
{{#if user.presenter}}
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter">
<i class="icon fi-projection-screen statusIcon"></i>
@ -102,14 +82,15 @@
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
<i class="icon fi-torso statusIcon"></i>
</span>
{{else}}
{{#each emojiIcons}}
{{#if equals name ../user.emoji_status}}
{{> icon name=icon size="25" title=title}}
{{/if}}
{{/each}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
</div>
{{#if isCurrentUser userId}}

21
bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html
View File

@ -15,24 +15,11 @@
<button type="submit" class="FABTriggerButton">
<i class="ion-android-hand"></i>
</button>
<button type="submit" class="sadEmojiButton {{#if equals getCurrentUserEmojiStatus 'sad'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="sad-face" size="50"}}
</button>
<button type="submit" class="happyEmojiButton {{#if equals getCurrentUserEmojiStatus 'happy'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="happy-face" size="50"}}
</button>
<button type="submit" class="confusedEmojiButton {{#if equals getCurrentUserEmojiStatus 'confused'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="confused-face" size="50"}}
</button>
<button type="submit" class="neutralEmojiButton {{#if equals getCurrentUserEmojiStatus 'neutral'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="neutral-face" size="50"}}
</button>
<button type="submit" class="awayEmojiButton {{#if equals getCurrentUserEmojiStatus 'away'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name="clock" size="50"}}
</button>
<button type="submit" class="raiseHandEmojiButton {{#if equals getCurrentUserEmojiStatus 'raiseHand'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
<i class="ion-android-hand"></i>
{{#each emojiIcons}}
<button type="submit" value={{name}} class="{{name}}EmojiButton {{#if equals getCurrentUserEmojiStatus name}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
{{> icon name=icon size="50"}}
</button>
{{/each}}
</div>
{{#if isMobile}}
{{> makeButton btn_class="soaringButton fullscreenButton whiteboardFullscreenButton" i_class="ion-arrow-expand"}}

71
bigbluebutton-html5/app/client/views/whiteboard/whiteboard.js
View File

@ -53,79 +53,14 @@ Template.whiteboard.events({
return document.webkitExitFullscreen();
}
},
'click .sadEmojiButton.inactiveEmojiButton'(event) {
if($('.sadEmojiButton').css('opacity') === '1') {
'click .inactiveEmojiButton'(event) {
if($(event.target).css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"sad"
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();
}
},
'click .happyEmojiButton.inactiveEmojiButton'(event) {
if($('.happyEmojiButton').css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"happy"
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();
}
},
'click .confusedEmojiButton.inactiveEmojiButton'(event) {
if($('.confusedEmojiButton').css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"confused"
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();
}
},
'click .neutralEmojiButton.inactiveEmojiButton'(event) {
if($('.neutralEmojiButton').css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"neutral"
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();
}
},
'click .awayEmojiButton.inactiveEmojiButton'(event) {
if($('.awayEmojiButton').css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"away"
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();
}
},
'click .raiseHandEmojiButton.inactiveEmojiButton'(event) {
if($('.raiseHandEmojiButton').css('opacity') === '1') {
BBB.setEmojiStatus(
BBB.getMeetingId(),
getInSession('userId'),
getInSession('userId'),
getInSession('authToken'),
"raiseHand"
event.target.value
);
$('.FABTriggerButton').blur();
return toggleEmojisFAB();