Refactor icons to make it easier to extend and modify
This commit is contained in:
Lucas Zawacki
Felipe Cecagno
parent
301a07773b
commit
9315a596f7
@ -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) => {
|
||||
|
||||
@ -106,44 +106,52 @@
|
||||
</template>
|
||||
|
||||
<template name="icon">
|
||||
<svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
|
||||
{{#if equals 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"}}
|
||||
<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"}}
|
||||
<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"}}
|
||||
<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"}}
|
||||
<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"}}
|
||||
<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>
|
||||
{{#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">
|
||||
{{> 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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</template>
|
||||
|
||||
@ -73,43 +73,24 @@
|
||||
</span>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{#if equals user.emoji_status "happy"}}
|
||||
{{> icon name="happy-face" size="25"}}
|
||||
{{#if user.presenter}}
|
||||
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter">
|
||||
<i class="icon fi-projection-screen statusIcon"></i>
|
||||
</span>
|
||||
{{else}}
|
||||
{{#if equals user.emoji_status "neutral"}}
|
||||
{{> icon name="neutral-face" size="25"}}
|
||||
{{#if equals user.role "MODERATOR"}}
|
||||
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
|
||||
<i class="icon fi-torso statusIcon"></i>
|
||||
</span>
|
||||
{{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>
|
||||
</span>
|
||||
{{else}}
|
||||
{{#if equals user.role "MODERATOR"}}
|
||||
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
|
||||
<i class="icon fi-torso statusIcon"></i>
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#each emojiIcons}}
|
||||
{{#if equals name ../user.emoji_status}}
|
||||
{{> icon name=icon size="25" title=title}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
||||
{{#if isCurrentUser userId}}
|
||||
|
||||
@ -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>
|
||||
</button>
|
||||
{{#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"}}
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user