TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 03:37:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console, login): v2 notification settings, login avatar (#3606)

Browse Source 
* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint

* notification-settings

* idp create redirect, sms provider create, i18n

* oidc configuration

* settings list

* new avatar colors for login

* cleaner js

* avatar theme login

* remove avatar elevation
This commit is contained in:
Max Peintner
2022-05-11 08:01:40 +02:00
committed by GitHub
parent 06e3330d2e
commit d431ccb965
36 changed files with 1493 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
internal/api/ui/login/static/resources/scripts/avatar.js
View File

@@ -1,62 +1,195 @@
const avatars = document.getElementsByClassName('lgn-avatar');
for (let i = 0; i < avatars.length; i++) {
const displayName = avatars[i].getAttribute('loginname');
if (displayName) {
const username = displayName.split('@')[0];
let separator = '_';
if (username.includes('-')) {
separator = '-';
}
if (username.includes('.')) {
separator = '.';
}
const split = username.split(separator);
const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
avatars[i].getElementsByClassName('initials')[0].innerHTML = initials;
avatars[i].style.background = this.getColor(displayName);
// set default white text instead of contrast text mode
avatars[i].style.color = '#ffffff';
}
}
function getColor(userName) {
const colors = [
'linear-gradient(40deg, #B44D51 30%, rgb(241,138,138))',
'linear-gradient(40deg, #B75073 30%, rgb(234,96,143))',
'linear-gradient(40deg, #84498E 30%, rgb(214,116,230))',
'linear-gradient(40deg, #705998 30%, rgb(163,131,220))',
'linear-gradient(40deg, #5C6598 30%, rgb(135,148,222))',
'linear-gradient(40deg, #7F90D3 30%, rgb(181,196,247))',
'linear-gradient(40deg, #3E93B9 30%, rgb(150,215,245))',
'linear-gradient(40deg, #3494A0 30%, rgb(71,205,222))',
'linear-gradient(40deg, #25716A 30%, rgb(58,185,173))',
'linear-gradient(40deg, #427E41 30%, rgb(97,185,96))',
'linear-gradient(40deg, #89A568 30%, rgb(176,212,133))',
'linear-gradient(40deg, #90924D 30%, rgb(187,189,98))',
'linear-gradient(40deg, #E2B032 30%, rgb(245,203,99))',
'linear-gradient(40deg, #C97358 30%, rgb(245,148,118))',
'linear-gradient(40deg, #6D5B54 30%, rgb(152,121,108))',
'linear-gradient(40deg, #6B7980 30%, rgb(134,163,177))',
];
let hash = 0;
if (userName.length === 0) {
return colors[hash];
}
hash = this.hashCode(userName);
return colors[hash % colors.length];
}
const COLORS = [
{
500: "#ef4444",
200: "#fecaca",
300: "#fca5a5",
600: "#dc2626",
700: "#b91c1c",
900: "#7f1d1d",
},
{
500: "#f97316",
200: "#fed7aa",
300: "#fdba74",
600: "#ea580c",
700: "#c2410c",
900: "#7c2d12",
},
{
500: "#f59e0b",
200: "#fde68a",
300: "#fcd34d",
600: "#d97706",
700: "#b45309",
900: "#78350f",
},
{
500: "#eab308",
200: "#fef08a",
300: "#fde047",
600: "#ca8a04",
700: "#a16207",
900: "#713f12",
},
{
500: "#84cc16",
200: "#d9f99d",
300: "#bef264",
600: "#65a30d",
700: "#4d7c0f",
900: "#365314",
},
{
500: "#22c55e",
200: "#bbf7d0",
300: "#86efac",
600: "#16a34a",
700: "#15803d",
900: "#14532d",
},
{
500: "#10b981",
200: "#a7f3d0",
300: "#6ee7b7",
600: "#059669",
700: "#047857",
900: "#064e3b",
},
{
500: "#14b8a6",
200: "#99f6e4",
300: "#5eead4",
600: "#0d9488",
700: "#0f766e",
900: "#134e4a",
},
{
500: "#06b6d4",
200: "#a5f3fc",
300: "#67e8f9",
600: "#0891b2",
700: "#0e7490",
900: "#164e63",
},
{
500: "#0ea5e9",
200: "#bae6fd",
300: "#7dd3fc",
600: "#0284c7",
700: "#0369a1",
900: "#0c4a6e",
},
{
500: "#3b82f6",
200: "#bfdbfe",
300: "#93c5fd",
600: "#2563eb",
700: "#1d4ed8",
900: "#1e3a8a",
},
{
500: "#6366f1",
200: "#c7d2fe",
300: "#a5b4fc",
600: "#4f46e5",
700: "#4338ca",
900: "#312e81",
},
{
500: "#8b5cf6",
200: "#ddd6fe",
300: "#c4b5fd",
600: "#7c3aed",
700: "#6d28d9",
900: "#4c1d95",
},
{
500: "#a855f7",
200: "#e9d5ff",
300: "#d8b4fe",
600: "#9333ea",
700: "#7e22ce",
900: "#581c87",
},
{
500: "#d946ef",
200: "#f5d0fe",
300: "#f0abfc",
600: "#c026d3",
700: "#a21caf",
900: "#701a75",
},
{
500: "#ec4899",
200: "#fbcfe8",
300: "#f9a8d4",
600: "#db2777",
700: "#be185d",
900: "#831843",
},
{
500: "#f43f5e",
200: "#fecdd3",
300: "#fda4af",
600: "#e11d48",
700: "#be123c",
900: "#881337",
},
];
function hashCode(str, seed = 0) {
let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
let h1 = 0xdeadbeef ^ seed,
h2 = 0x41c6ce57 ^ seed;
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i);
h1 = Math.imul(h1 ^ ch, 2654435761);
h2 = Math.imul(h2 ^ ch, 1597334677);
}
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
h1 =
Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
Math.imul(h2 ^ (h2 >>> 13), 3266489909);
h2 =
Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
Math.imul(h1 ^ (h1 >>> 13), 3266489909);
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
}
}
function getColor(value) {
let hash = 0;
if (value.length === 0) {
return COLORS[hash];
}
hash = hashCode(value);
return COLORS[hash % COLORS.length];
}
const avatars = document.getElementsByClassName("lgn-avatar");
for (let i = 0; i < avatars.length; i++) {
const displayName = avatars[i].getAttribute("loginname");
if (displayName) {
const username = displayName.split("@")[0];
let separator = "_";
if (username.includes("-")) {
separator = "-";
}
if (username.includes(".")) {
separator = ".";
}
const split = username.split(separator);
const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
avatars[i].getElementsByClassName("initials")[0].innerHTML = initials;
const colorPalette = this.getColor(displayName);
const isDark =
document.documentElement.classList.includes("lgn-dark-theme");
const backgroundShade = isDark ? 900 : 300;
const foregroundShade = isDark ? 200 : 900;
avatars[i].style.background = colorPalette[backgroundShade];
avatars[i].style.color = colorPalette[foregroundShade];
}
}

66
internal/api/ui/login/static/resources/themes/scss/styles/avatar/avatar_theme.scss
View File

@@ -1,45 +1,53 @@
@import 'avatar';
@import "avatar";
@import "../elevation/elevation";
@mixin lgn-avatar-theme() {
@include lgn-avatar-color();
@include lgn-avatar-color();
}
@mixin lgn-avatar-color() {
.lgn-avatar:not(.transparent) {
@include _lgn-avatar-theme-property("background-color", false);
@include lgn-avatar-elevation(2);
}
.lgn-avatar:not(.transparent) {
@include _lgn-avatar-theme-property("background-color", false);
// @include lgn-avatar-elevation(2);
}
.lgn-avatar .initials{
@include _lgn-avatar-theme-property("color", true);
}
// .lgn-avatar .initials {
// @include _lgn-avatar-theme-property("color", true);
// }
}
@mixin _lgn-avatar-theme-property($property, $contrast) {
$color: if($contrast, var(--zitadel-color-primary-contrast), var(--zitadel-color-primary));
$color: if(
$contrast,
var(--zitadel-color-primary-contrast),
var(--zitadel-color-primary)
);
&.lgn-primary {
#{$property}: $color;
}
&.lgn-accent {
#{$property}: $color;
}
&.lgn-warn {
#{$property}: $color;
}
&.lgn-primary,
&.lgn-accent,
&.lgn-warn,
&.lgn-primary {
#{$property}: $color;
}
&.lgn-accent {
#{$property}: $color;
}
&.lgn-warn {
#{$property}: $color;
}
&.lgn-primary,
&.lgn-accent,
&.lgn-warn,
&[disabled] {
&[disabled] {
&[disabled] {
$btn-color: if($property == "color", var(--zitadel-color-button-disabled), var(--itadel-color-button-disabled-background));
#{$property}: $btn-color;
}
$btn-color: if(
$property == "color",
var(--zitadel-color-button-disabled),
var(--itadel-color-button-disabled-background)
);
#{$property}: $btn-color;
}
}
}
@mixin lgn-avatar-elevation($zValue, $opacity: $lgn-elevation-opacity) {
@include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
}
@include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
}

16
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@@ -2798,9 +2798,6 @@ a:hover, a:active {
color: var(--zitadel-color-warn);
}
.lgn-avatar:not(.transparent) {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.lgn-avatar:not(.transparent).lgn-primary {
background-color: var(--zitadel-color-primary);
}
@@ -2814,19 +2811,6 @@ a:hover, a:active {
background-color: var(--itadel-color-button-disabled-background);
}
.lgn-avatar .initials.lgn-primary {
color: var(--zitadel-color-primary-contrast);
}
.lgn-avatar .initials.lgn-accent {
color: var(--zitadel-color-primary-contrast);
}
.lgn-avatar .initials.lgn-warn {
color: var(--zitadel-color-primary-contrast);
}
.lgn-avatar .initials.lgn-primary[disabled], .lgn-avatar .initials.lgn-accent[disabled], .lgn-avatar .initials.lgn-warn[disabled], .lgn-avatar .initials[disabled][disabled] {
color: var(--zitadel-color-button-disabled);
}
.lgn-select, select {
background-image: var(--zitadel-icon-select);
}

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long