Avatar in the user admin button

pull/1/head
yflory 8 years ago
parent be6ee672d3
commit ff10c282d4

@ -37,3 +37,64 @@
background: linear-gradient(@start, @end); /* Standard syntax */
}
.avatar (@width) {
&.avatar {
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
display: inline-flex;
align-items: center;
&.clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.3);
}
}
.default, media-tag {
display: inline-flex;
width: @width;
height: @width;
justify-content: center;
align-items: center;
margin-right: 5px;
border-radius: @width / 30px;
overflow: hidden;
box-sizing: content-box;
}
.default {
.unselectable();
background: white;
color: black;
font-size: 40px;
}
.right-col {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
flex-flow: column;
.friend {
padding: 0;
}
}
.name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
media-tag {
min-height: @width;
min-width: @width;
max-height: @width;
max-width: @width;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
}
}
}
}

@ -106,56 +106,12 @@ body .userlist-drawer {
margin: 10px 0;
margin-bottom: 20px;
&>span {
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
background: rgba(0,0,0,0.1);
margin: 2px 0;
font-size: 16px;
display: inline-flex;
align-items: center;
&.clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.3);
}
}
background: rgba(0,0,0,0.1);
.avatar(50px);
.default, media-tag {
display: inline-flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
margin-right: 5px;
border-radius: 10px / 6px;
overflow: hidden;
border: 1px solid black;
box-sizing: content-box;
}
.default {
.unselectable();
background: white;
color: black;
font-size: 40px;
}
.name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
media-tag {
min-height: 50px;
min-width: 50px;
max-height: 50px;
max-width: 50px;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
flex-shrink: 0;
}
}
}
}
@ -856,6 +812,10 @@ body .cryptpad-toolbar {
cursor: default;
font-size: 32px;
}
&.avatar {
.avatar(64px);
border: 0;
}
}
}
.cryptpad-backup {

@ -1307,29 +1307,33 @@ define([
}
var $image = $img.find('img');
var onLoad = function () {
var w = $image.width();
var h = $image.height();
var img = new Image();
img.src = $image.attr('src');
img.onload = function () {
var w = img.width;
var h = img.height;
if (w>h) {
$image.css('max-height', '100%');
$img.css('flex-direction', 'row');
$img.css('flex-direction', 'column');
if (cb) { cb($img); }
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'column');
$img.css('flex-direction', 'row');
if (cb) { cb($img); }
};
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
});
});
});
}
};
@ -1622,7 +1626,11 @@ define([
var $avatar = $userAdmin.find('.buttonTitle');
var url = getStore() ? getStore().getProfile().avatar : undefined;
$avatar.html('');
common.displayAvatar($avatar, url, accountName, function ($img) {});
common.displayAvatar($avatar, url, accountName, function ($img) {
if ($img) {
$userAdmin.find('button').addClass('avatar');
}
});
}
$userAdmin.find('a.logout').click(function () {

@ -207,7 +207,7 @@ define([
editUsersNames.forEach(function (data) {
var name = data.name || Messages.anonymous;
var $name = $('<span>', {'class': 'name'}).text(name);
var $span = $('<span>', {'title': name});
var $span = $('<span>', {'title': name, 'class': 'avatar'});
if (data.profile) {
$span.addClass('clickable');
$span.click(function () {

Loading…
Cancel
Save