fix badge icons

This commit is contained in:
daria 2025-08-20 12:13:51 +03:00
parent 4bb7901fa2
commit dbb45a7b46
No known key found for this signature in database
GPG Key ID: 3B75240E6B2F2701
9 changed files with 29 additions and 17 deletions

View File

@ -84,12 +84,17 @@
}
}
.badges_include();
& > i.cp-badge {
& > span.cp-badge {
position: absolute;
z-index: 10;
bottom: var(--badges-offset);
right: var(--badges-offset);
border: 1px solid @cp_badges-color;
svg {
width:3rem;
height:3rem;
}
}
}
}

View File

@ -22,7 +22,7 @@
}
& {
i.cp-badge {
span.cp-badge {
width: var(--badges-width);
height: var(--badges-width);
box-sizing: content-box;
@ -43,7 +43,9 @@
background-color: @value;
}
});
svg {
margin: 0;
}
}
}

View File

@ -117,14 +117,14 @@
}
}
}
i.cp-badge {
span.cp-badge {
color: var(--msg-bg-color-dark);
border-color: var(--msg-bg-color-dark);
}
&:hover {
background-color: @msg-bg-color-darker;
background-color: var(--msg-bg-color-darker);
i.cp-badge {
span.cp-badge {
color: var(--msg-bg-color-darker);
border-color: var(--msg-bg-color-darker);
}
@ -247,7 +247,7 @@
.cp-app-contacts-header {
background-color: @msg-bg-color-lighter;
background-color: var(--msg-bg-color-lighter);
i.cp-badge {
span.cp-badge {
color: var(--msg-bg-color-lighter);
border-color: var(--msg-bg-color-lighter);
}

View File

@ -222,7 +222,7 @@
border-radius: @variables_radius;
border-right: 3px solid transparent;
.avatar_main(35px);
i.cp-badge {
span.cp-badge {
color: @cp_toolbar-bg2;
border-color: @cp_toolbar-bg2;
}
@ -230,7 +230,7 @@
cursor: pointer;
&:hover {
background: @cp_toolbar-bg3;
i.cp-badge {
span.cp-badge {
color: @cp_toolbar-bg3;
border-color: @cp_toolbar-bg3;
}
@ -282,10 +282,10 @@
padding: 0;
}
.cp-userlist-badge {
i {
span {
color: @cryptpad_color_brand;
}
i.cp-badge-error {
span.cp-badge-error {
color: @cryptpad_color_warn_red;
}
}

View File

@ -25,7 +25,12 @@ define([
if (!icon) { return; }
let cls = 'cp-badge';
if (id === 'error') { cls += ' cp-badge-error'; }
return Icons.get(icon,{'class': cls, 'title': Messages[`badges_${id}`] || id, 'data-badge': id})
let span = document.createElement('span');
span.setAttribute('class', cls);
span.setAttribute('title', Messages[`badges_${id}`] || id);
span.setAttribute('data-badge', id);
span.append(Icons.get(icon));
return span;
};
return Badges;

View File

@ -59,7 +59,7 @@
border-radius: 4px;
overflow: visible;
position: relative;
i.cp-badge {
span.cp-badge {
border-width: 3px;
}
.cp-app-profile-avatar-delete {

View File

@ -348,6 +348,7 @@ define([
};
var displayAvatar = function (val, data, badgeOK) {
setTimeout(()=> Lucide.createIcons());
var $span = APP.$avatar;
$span.empty();
const badge = data?.badge;

View File

@ -239,16 +239,14 @@
display: flex;
align-items: center;
font-size: 24px;
gap: 0.5rem;
margin-top: 10px;
.badges_main(40px);
i {
span {
cursor: pointer;
&:focus-visible {
outline: @variables_focus_style;
}
&:not(:last-child) {
margin-right: 0.5em;
}
}
}
}
@ -266,7 +264,7 @@
border-radius: 4px;
overflow: visible;
position: relative;
i.cp-badge {
span.cp-badge {
border-width: 3px;
}
.cp-settings-avatar-delete {

View File

@ -1938,6 +1938,7 @@ define([
]);
$badges.empty().append(content);
spinner = UI.makeSpinner($badges.find('.cp-settings-badges-list'));
setTimeout(() => Lucide.createIcons());
});
};
makeBlock('profile-badges', function(cb) {