vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: flip avatar colors in dark color mode

Browse source
This commit is contained in:
Shivam Mishra 2020-09-18 14:11:06 +05:30
parent b6d49f97d0
commit 08a46a79a0
2 changed files with 88 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frappe/public/js/frappe/utils/common.js
View file

@ -96,26 +96,26 @@ frappe.ui.scroll = function(element, animate, additional_offset) {
};
frappe.palette = [
['--orange-100', '--orange-600'],
['--pink-50', '--pink-500'],
['--blue-50', '--blue-500'],
['--green-50', '--green-500'],
['--dark-green-50', '--dark-green-500'],
['--red-50', '--red-500'],
['--yellow-50', '--yellow-500'],
['--purple-50', '--purple-500'],
['--gray-50', '--gray-500']
['--orange-avatar-bg', '--orange-avatar-color'],
['--pink-avatar-bg', '--pink-avatar-color'],
['--blue-avatar-bg', '--blue-avatar-color'],
['--green-avatar-bg', '--green-avatar-color'],
['--dark-green-avatar-bg', '--dark-green-avatar-color'],
['--red-avatar-bg', '--red-avatar-color'],
['--yellow-avatar-bg', '--yellow-avatar-color'],
['--purple-avatar-bg', '--purple-avatar-color'],
['--gray-avatar-bg', '--gray-avatar-color0']
]
frappe.get_palette = function(txt) {
var idx = cint((parseInt(md5(txt).substr(4,2), 16) + 1) / 5.33);
return frappe.palette[idx%8];
frappe.get_palette = function (txt) {
var idx = cint((parseInt(md5(txt).substr(4, 2), 16) + 1) / 5.33);
return frappe.palette[idx % 8];
}
frappe.get_abbr = function(txt, max_length) {
frappe.get_abbr = function (txt, max_length) {
if (!txt) return "";
var abbr = "";
$.each(txt.split(" "), function(i, w) {
$.each(txt.split(" "), function (i, w) {
if (abbr.length >= (max_length || 2)) {
// break
return false;

82
frappe/public/scss/avatar.scss
View file

@ -1,3 +1,69 @@
:root {
--avatar-frame-color: var(--blue-500);
--avatar-frame-bg: var(--blue-100);
--avatar-frame-border: var(--blue-100);
--orange-avatar-bg: var(--orange-100);
--orange-avatar-color: var(--orange-600);
--pink-avatar-bg: var(--pink-50);
--pink-avatar-color: var(--pink-500);
--blue-avatar-bg: var(--blue-50);
--blue-avatar-color: var(--blue-500);
--green-avatar-bg: var(--green-50);
--green-avatar-color: var(--green-500);
--dark-green-avatar-bg: var(--dark-green-50);
--dark-green-avatar-color: var(--dark-green-500);
--red-avatar-bg: var(--red-50);
--red-avatar-color: var(--red-500);
--yellow-avatar-bg: var(--yellow-50);
--yellow-avatar-color: var(--yellow-500);
--purple-avatar-bg: var(--purple-50);
--purple-avatar-color: var(--purple-500);
--gray-avatar-bg: var(--gray-50);
--gray-avatar-color: var(--gray-50);
}
[data-theme="dark"] {
--avatar-frame-color: var(--blue-50);
--avatar-frame-bg: var(--blue-400);
--avatar-frame-border: var(--blue-400);
--orange-avatar-bg: var(--orange-600);
--orange-avatar-color: var(--orange-100);
--pink-avatar-bg: var(--pink-500);
--pink-avatar-color: var(--pink-50);
--blue-avatar-bg: var(--blue-500);
--blue-avatar-color: var(--blue-50);
--green-avatar-bg: var(--green-500);
--green-avatar-color: var(--green-50);
--dark-green-avatar-bg: var(--dark-green-500);
--dark-green-avatar-color: var(--dark-green-50);
--red-avatar-bg: var(--red-500);
--red-avatar-color: var(--red-50);
--yellow-avatar-bg: var(--yellow-500);
--yellow-avatar-color: var(--yellow-50);
--purple-avatar-bg: var(--purple-500);
--purple-avatar-color: var(--purple-50);
--gray-avatar-bg: var(--gray-50);
--gray-avatar-color: var(--gray-50);
}
.avatar {
display: inline-block;
vertical-align: middle;
@ -7,7 +73,7 @@
display: inline-block;
width: 100%;
height: 100%;
background-color: var(--blue-100);
background-color: var(--avatar-frame-bg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
@ -30,7 +96,7 @@
}
.avatar-empty::after {
content: '\002D';
content: "\002D";
line-height: 28px;
}
}
@ -48,7 +114,6 @@
width: 72px;
height: 72px;
.standard-image {
font-size: var(--text-2xl);
}
@ -83,8 +148,9 @@
display: flex;
justify-content: center;
align-items: center;
background-color: var(--gray-50);
color: var(--blue-500);
background-color: var(--avatar-frame-bg);
color: var(--avatar-frame-color);
border: 1px solid var(--avatar-frame-border);
font-weight: normal;
}
@ -116,9 +182,9 @@
}
.avatar {
transition: margin .1s ease-in-out;
transition: margin 0.1s ease-in-out;
.avatar-frame {
border: 1px solid var(--fg-color);
border: 1px solid var(--avatar-frame-border);
}
&:not(.avatar-extra-count):hover {
@ -142,4 +208,4 @@
margin-right: calc(-1 * var(--margin-sm));
}
}
}
}