Avatar in the user admin button
yflory
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,27 +1307,31 @@ define([
|
|||
}
|
||||
var $image = $img.find('img');
|
||||
var onLoad = function () {
|
||||
var w = $image.width();
|
||||
var h = $image.height();
|
||||
if (w>h) {
|
||||
$image.css('max-height', '100%');
|
||||
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', 'column');
|
||||
if (cb) { cb($img); }
|
||||
return;
|
||||
}
|
||||
$image.css('max-width', '100%');
|
||||
$img.css('flex-direction', 'row');
|
||||
if (cb) { cb($img); }
|
||||
return;
|
||||
}
|
||||
$image.css('max-width', '100%');
|
||||
$img.css('flex-direction', 'column');
|
||||
if (cb) { cb($img); }
|
||||
};
|
||||
};
|
||||
if ($image[0].complete) { onLoad(); }
|
||||
$image.on('load', onLoad);
|
||||
}
|
||||
});
|
||||
observer.observe($img[0], {
|
||||
attributes: false,
|
||||
childList: true,
|
||||
characterData: false
|
||||
});
|
||||
});
|
||||
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…
Reference in New Issue