pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Create hover info box.

pull/154/head
Evan Theurer 12 years ago
parent
f433586742
commit
979a23497d
3 changed files with 89 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      src/styles/components/_buddycondensed.scss
  2. 31
      static/js/directives/buddycondensed.js
  3. 24
      static/partials/buddycondensed.html

44
src/styles/components/_buddycondensed.scss
Unescape View File

@ -19,13 +19,9 @@ @@ -19,13 +19,9 @@
*
*/
#buddycondensed {
display: table;
float: left;
height: 50px;
overflow: hidden;
display: inline-block;
position: fixed;
padding-left: 20px;
vertical-align: bottom;
min-width: 355px;
}
.buddycondensed {
&.buddy {
@ -34,6 +30,7 @@ @@ -34,6 +30,7 @@
cursor: auto;
min-height: 50px;
vertical-align: bottom;
overflow: visible;
.buddyPicture {
margin: 2px;
}
@ -44,6 +41,7 @@ @@ -44,6 +41,7 @@
background: #f8f8f8;
display: none;
position: fixed;
top: 49px;
&:hover {
display: block;
}
@ -52,11 +50,45 @@ @@ -52,11 +50,45 @@
display: inline-block;
font-weight: bold;
padding-left: 10px;
cursor: default;
&:hover ~ .overDefaultDisplayNum {
display: block;
}
}
.actions {
background: #FFF;
border: 1px solid rgba(128, 128, 128, 0.16);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 2px;
display: none;
cursor: default;
height: 51px;
padding: 0 15px;
bottom: 10px;
position: relative;
white-space: nowrap;
z-index: 10;
.btn-group {
margin-bottom: 5px;
width: 55px;
}
.btn-primary {
padding: 2px 4px;
}
.fa {
font-size: 20px;
color: #FFF;
line-height: 24px;
}
.displayName {
margin-right: 10px;
}
}
.buddyPicture {
cursor: pointer;
overflow: visible;
&:hover .actions {
display: inline-block;
}
}
}

31
static/js/directives/buddycondensed.js
Unescape View File

@ -25,6 +25,29 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ @@ -25,6 +25,29 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
var controller = ['$scope', 'mediaStream', 'contacts', function($scope, mediaStream, contacts) {
var buddycondensed = [];
var empty = function(x) {
return x === null || x === undefined || isNaN(x) || x === "";
};
var sortCondensed = function() {
var unnamed = buddycondensed.length;
buddycondensed.sort(function(current, next) {
if(!current.Status || current.Status && empty(current.Status.displayName)) {
return 1;
} else {
if(next.Status && !empty(next.Status.displayName)) {
if (current.Status.displayName < next.Status.displayName) {
return -1;
} else if (current.Status.displayName > next.Status.displayName) {
return 1;
} else {
return 0;
}
} else {
return 0;
}
}
});
};
var joined = function(buddy) {
buddycondensed.push(buddy);
};
@ -37,13 +60,14 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ @@ -37,13 +60,14 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
}
$scope.$apply();
};
// replace session data with contact data
var contactadded = function(data) {
//console.log('contactadded', data);
var hasSession = false;
for (var i in buddycondensed) {
// replace session data with contact data
if(buddycondensed[i].Userid === data.Userid) {
buddycondensed[i] = angular.extend(buddycondensed[i], data);
buddycondensed[i] = data;
//console.log('contactadded replaced', 'data', data.Status && data.Status.displayName, 'buddycondensed[i]', buddycondensed[i].Status && buddycondensed[i].Status.displayName);
hasSession = true;
break;
}
@ -70,6 +94,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ @@ -70,6 +94,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
$scope.maxBuddiesToShow = 5;
contacts.e.on("contactadded", function(event, data) {
contactadded(data);
sortCondensed();
});
mediaStream.api.e.on("received.userleftorjoined", function(event, dataType, data) {
//console.log("received.userleftorjoined", data.Id);
@ -78,6 +103,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ @@ -78,6 +103,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
} else {
joined(data);
}
sortCondensed();
});
mediaStream.api.e.on("received.users", function(event, data) {
//console.log("received.users", data);
@ -87,6 +113,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ @@ -87,6 +113,7 @@ define(['angular', 'text!partials/buddycondensed.html'], function(angular, templ
joined(x);
}
});
sortCondensed();
$scope.$apply();
});
}];

24
static/partials/buddycondensed.html
Unescape View File

@ -3,12 +3,32 @@ @@ -3,12 +3,32 @@
<span class="desc" ng-if="listOverDefault().length > maxBuddiesToShow">+ {{listOverDefault().length - maxBuddiesToShow}} {{_("more")}}</span>
<div class="defaultDisplayNum pull-left">
<span ng-repeat="buddy in listDefault()">
<span class="buddyPicture"><i class="fa fa-user"/><img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/></span>
<span class="buddyPicture">
<i class="fa fa-user"/>
<img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
<span class="actions">
<span class="displayName">{{buddy.Userid|displayName}}</span>
<div class="btn-group">
<a class="btn btn-primary" data-action="call" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" data-action="chat" title="Start chat"><i class="fa fa-comments-o"></i></a>
</div>
</span>
</span>
</span>
</div>
<div class="overDefaultDisplayNum">
<span ng-repeat="buddy in listOverDefault()">
<span class="buddyPicture"><i class="fa fa-user"/><img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/></span>
<span class="buddyPicture">
<i class="fa fa-user"/>
<img ng-show="buddy.Status.buddyPicture" alt ng-src="{{buddy.Userid | buddyImageSrc}}"/>
<span class="actions">
<span class="displayName">{{buddy.Userid|displayName}}</span>
<div class="btn-group">
<a class="btn btn-primary" data-action="call" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" data-action="chat" title="Start chat"><i class="fa fa-comments-o"></i></a>
</div>
</span>
</span>
</span>
</div>
</div>

Write Preview
Loading…
Cancel
Save