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

Use foundation icons for users list

Browse Source
This commit is contained in:
perroned 2015-05-06 21:14:17 -07:00
parent bbbcc3061c
commit a241c75093
3 changed files with 67 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -627,3 +627,22 @@ body {
height: 28px;
width: 87px;
}
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: -8px;
top: 40%;
right: 0;
border-top: 3px solid;
border-color: black;
-webkit-transform:rotate(-122deg);
-moz-transform:rotate(-122deg);
-ms-transform:rotate(-122deg);
-o-transform:rotate(-122deg);
transform:rotate(-122deg);
width: 28px;
}

30
bigbluebutton-html5/app/client/stylesheets/users.less
View File

@ -12,27 +12,15 @@
}
}
#usericons {
float: right;
span {
margin-left: 3px;
padding: 2px;
border: 1px solid white;
@media @desktop-portrait {
font-size: 25px;
}
@media @mobile-portrait, @mobile-portrait-with-keyboard{
font-size: 3vh;
}
}
.raisedHandIcon, .muteIcon {
&:hover {
cursor: pointer;
border: 1px solid #f2f2f2;
background-color: #f2f2f2;
border-radius: 4px;
}
}
.usericon {
font-size: 16px;
}
.flashingUserIcon {
border-radius: 6px;
padding: 5px;
padding-right: 0px;
background-color: rgba(174, 173, 173, 0.5);
}
.usernameEntry {

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

@ -1,54 +1,77 @@
<template name="displayUserIcons">
{{#if isUserSharingVideo userId}}
<span class="userListSettingIcon glyphicon glyphicon-facetime-video" rel="tooltip" data-placement="bottom" title="{{user.name}} is sharing their webcam"></span>
{{/if}}
<!-- audio, video, locking, presenter/moderator, hand raised -->
{{#if isUserInAudio userId}}
<!-- if the user is listen only, only display the one icon -->
{{#if isUserListenOnlyAudio userId}}
<span class="userListSettingIcon glyphicon glyphicon-headphones" title="Listening only"></span>
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is only listening">
<i class="icon fi-volume-none usericon"></i>
</span>
{{else}}
{{#if isCurrentUser userId}}
{{#if isUserMuted userId}}
<span class="muteIcon userListSettingIcon glyphicon glyphicon-volume-off" rel="tooltip" data-placement="bottom" title="Unmute yourself"></span>
<span rel="tooltip" class="strikethrough" data-placement="bottom" title="Unmute yourself">
<i class="icon fi-microphone usericon"></i>
</span>
{{else}}
{{#if isCurrentUserTalking}}
<span class="muteIcon userListSettingIcon glyphicon glyphicon-volume-up" rel="tooltip" data-placement="bottom" title="is talking"></span>
<span rel="tooltip" class="flashingUserIcon" data-placement="bottom" title="you are talking">
<i class="icon fi-microphone usericon"></i>
</span>
{{else}}
<span class="muteIcon userListSettingIcon glyphicon glyphicon-volume-down" rel="tooltip" data-placement="bottom" title="is not talking"></span>
<span rel="tooltip" class="" data-placement="bottom" title="you are talking">
<i class="icon fi-microphone usericon"></i>
</span>
{{/if}}
{{/if}}
{{else}}
{{#if isUserMuted userId}}
<span class="userListSettingIcon glyphicon glyphicon-volume-off" rel="tooltip" data-placement="bottom" title="{{user.name}} is muted"></span>
<span rel="tooltip" class="strikethrough" data-placement="bottom" title="{{user.name}} is muted">
<i class="icon fi-microphone usericon"></i>
</span>
{{else}}
{{#if isUserTalking userId}}
<span class="userListSettingIcon glyphicon glyphicon-volume-up" rel="tooltip" data-placement="bottom" title="{{user.name}} is talking"></span>
<span rel="tooltip" class="flashingUserIcon" data-placement="bottom" title="{{user.name}} is talking">
<i class="icon fi-microphone usericon"></i>
</span>
{{else}}
<span class="userListSettingIcon glyphicon glyphicon-volume-down" rel="tooltip" data-placement="bottom" title="{{user.name}} is not talking"></span>
<span rel="tooltip" class="" data-placement="bottom" title="{{user.name}} is not talking">
<i class="icon fi-microphone usericon"></i>
</span>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{#if isUserSharingVideo userId}}
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is sharing their webcam">
<i class="icon fi-video usericon"></i>
</span>
{{/if}}
{{#if userLockedIconApplicable userId}}
<span class="userListSettingIcon glyphicon ion-locked" rel="tooltip" data-placement="bottom" title="The viewer is locked"></span>
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is locked">
<i class="icon fi-lock usericon"></i>
</span>
{{/if}}
{{#if user.presenter}}
<span class="userListSettingIcon glyphicon glyphicon-picture" rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter"></span>
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter">
<i class="icon fi-projection-screen usericon"></i>
</span>
{{else}}
{{#if equals user.role "MODERATOR"}}
<span class="userListSettingIcon glyphicon glyphicon-user" rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator"></span>
<span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
<i class="icon fi-torso usericon"></i>
</span>
{{/if}}
{{/if}}
{{#if user.raise_hand}}
{{#if isCurrentUser userId}}
<span class="raisedHandIcon userListSettingIcon ion-android-hand" rel="tooltip" data-placement="bottom" title="Lower your hand"></span>
<span class="ion-android-hand usericon" rel="tooltip" data-placement="bottom" title="Lower your hand"></span>
{{else}}
<span class="userListSettingIcon ion-android-hand" rel="tooltip" data-placement="bottom" title="{{user.name}} has raised their hand"></span>
<span class="ion-android-hand usericon" rel="tooltip" data-placement="bottom" title="{{user.name}} has raised their hand"></span>
{{/if}}
{{/if}}
</template>