diff --git a/src/packages/collaboration/lib/participant-view.coffee b/src/packages/collaboration/lib/participant-view.coffee index a56aa4f32..b6c89b2be 100644 --- a/src/packages/collaboration/lib/participant-view.coffee +++ b/src/packages/collaboration/lib/participant-view.coffee @@ -5,7 +5,12 @@ module.exports = class ParticipantView extends View @content: -> @div class: 'collaboration-participant overlay floating large', => - @video autoplay: true, outlet: 'video' + @div class: 'video-container', => + @video autoplay: true, outlet: 'video' + @div class: 'actions', => + @a href: '#', class: 'remove', type: 'button', outlet: 'removeButton', title: 'Remove this person' + @a href: '#', class: 'toggle-video', type: 'button', outlet: 'toggleVideoButton', title: 'Toggle video on/off' + @a href: '#', class: 'toggle-audio', type: 'button', outlet: 'toggleAudioButton', title: 'Toggle audio on/off' @div class: 'volume-container', outlet: 'volumeContainer', => @div class: 'volume', outlet: 'volume' @@ -16,10 +21,20 @@ class ParticipantView extends View @video.click => @toggleClass('large') - @attr('title', email) + @removeButton.click @onClickRemove + @toggleVideoButton.click @onClickToggleVideo + @toggleAudioButton.click @onClickToggleAudio + # @attr('title', email) # emailMd5 = crypto.createHash('md5').update(email).digest('hex') # @avatar.attr('src', "http://www.gravatar.com/avatar/#{emailMd5}?s=32") attach: -> rootView.append(this) + + onClickRemove: => + false + onClickToggleVideo: => + false + onClickToggleAudio: => + false diff --git a/src/packages/collaboration/stylesheets/collaboration.less b/src/packages/collaboration/stylesheets/collaboration.less index 50eafc21e..8a4321be9 100644 --- a/src/packages/collaboration/stylesheets/collaboration.less +++ b/src/packages/collaboration/stylesheets/collaboration.less @@ -58,13 +58,23 @@ } } + .actions { + display: none; + } + &.large { padding: @video-padding; width: @large-width + @video-padding*2 + 2px; + .video-container { + overflow: hidden; + position: relative; + } + video { width: @large-width; border-radius: 2px 2px 0 0; + cursor: pointer; } .volume-container { width: @large-width; @@ -74,6 +84,49 @@ height: 5px; } } + + .actions { + position: absolute; + display: block; + + width: @large-width; + height: 24px; + line-height: 24px; + + bottom: -24px; + + background: rgba(0, 0, 0, 0.6); + + transition: bottom .15s; + + .remove{ + float: right; + margin-right: 5px; + .mini-icon(remove-close); + } + + .toggle-video{ + margin-left: 5px; + .mini-icon(arr-right); + } + .toggle-audio{ + margin-left: 5px; + .mini-icon(arr-up); + } + + .remove:before, .toggle-audio:before, .toggle-video:before { + color: rgba(255, 255, 255, 0.8); + } + .remove:hover:before, .toggle-audio:hover:before, .toggle-video:hover:before { + color: #fff; + } + } + + &:hover{ + .actions{ + bottom: 0px; + } + } } }