Fossil SCM
Chat message background color determined by username.
Commit
adb93ca9805fff293337db896d511e7a76048d3145dbdbfb391dd6f5eab40e82
Parent
441ee6af06c98a2…
2 files changed
+2
-6
+2
| --- src/chat.js | ||
| +++ src/chat.js | ||
| @@ -49,10 +49,11 @@ | ||
| 49 | 49 | if( m.msgid>mxMsg ) mxMsg = m.msgid; |
| 50 | 50 | row.classList.add('message-row'); |
| 51 | 51 | injectMessage(row); |
| 52 | 52 | const eWho = document.createElement('legend'); |
| 53 | 53 | eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left')); |
| 54 | + eWho.style.backgroundColor = m.uclr; | |
| 54 | 55 | row.appendChild(eWho); |
| 55 | 56 | eWho.classList.add('message-user'); |
| 56 | 57 | let whoName; |
| 57 | 58 | if( m.xfrom===_me ){ |
| 58 | 59 | whoName = 'me'; |
| @@ -64,10 +65,11 @@ | ||
| 64 | 65 | whoName+' @ '+ |
| 65 | 66 | localTimeString(new Date(Date.parse(m.mtime+".000Z")))) |
| 66 | 67 | ); |
| 67 | 68 | let span = document.createElement("div"); |
| 68 | 69 | span.classList.add('message-content'); |
| 70 | + span.style.backgroundColor = m.uclr; | |
| 69 | 71 | row.appendChild(span); |
| 70 | 72 | if( m.fsize>0 ){ |
| 71 | 73 | if( m.fmime && m.fmime.startsWith("image/") ){ |
| 72 | 74 | let img = document.createElement("img"); |
| 73 | 75 | img.src = "chat-download/" + m.msgid; |
| 74 | 76 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -49,10 +49,11 @@ | |
| 49 | if( m.msgid>mxMsg ) mxMsg = m.msgid; |
| 50 | row.classList.add('message-row'); |
| 51 | injectMessage(row); |
| 52 | const eWho = document.createElement('legend'); |
| 53 | eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left')); |
| 54 | row.appendChild(eWho); |
| 55 | eWho.classList.add('message-user'); |
| 56 | let whoName; |
| 57 | if( m.xfrom===_me ){ |
| 58 | whoName = 'me'; |
| @@ -64,10 +65,11 @@ | |
| 64 | whoName+' @ '+ |
| 65 | localTimeString(new Date(Date.parse(m.mtime+".000Z")))) |
| 66 | ); |
| 67 | let span = document.createElement("div"); |
| 68 | span.classList.add('message-content'); |
| 69 | row.appendChild(span); |
| 70 | if( m.fsize>0 ){ |
| 71 | if( m.fmime && m.fmime.startsWith("image/") ){ |
| 72 | let img = document.createElement("img"); |
| 73 | img.src = "chat-download/" + m.msgid; |
| 74 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -49,10 +49,11 @@ | |
| 49 | if( m.msgid>mxMsg ) mxMsg = m.msgid; |
| 50 | row.classList.add('message-row'); |
| 51 | injectMessage(row); |
| 52 | const eWho = document.createElement('legend'); |
| 53 | eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left')); |
| 54 | eWho.style.backgroundColor = m.uclr; |
| 55 | row.appendChild(eWho); |
| 56 | eWho.classList.add('message-user'); |
| 57 | let whoName; |
| 58 | if( m.xfrom===_me ){ |
| 59 | whoName = 'me'; |
| @@ -64,10 +65,11 @@ | |
| 65 | whoName+' @ '+ |
| 66 | localTimeString(new Date(Date.parse(m.mtime+".000Z")))) |
| 67 | ); |
| 68 | let span = document.createElement("div"); |
| 69 | span.classList.add('message-content'); |
| 70 | span.style.backgroundColor = m.uclr; |
| 71 | row.appendChild(span); |
| 72 | if( m.fsize>0 ){ |
| 73 | if( m.fmime && m.fmime.startsWith("image/") ){ |
| 74 | let img = document.createElement("img"); |
| 75 | img.src = "chat-download/" + m.msgid; |
| 76 |
-6
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -1483,11 +1483,10 @@ | ||
| 1483 | 1483 | } |
| 1484 | 1484 | /* Rows for the current user have the .user-is-me CSS class |
| 1485 | 1485 | and get right-aligned. */ |
| 1486 | 1486 | .message-row.user-is-me { |
| 1487 | 1487 | justify-content: flex-end; |
| 1488 | - /*background-color: #d2dde1;*/ | |
| 1489 | 1488 | } |
| 1490 | 1489 | /* The content area of a message (the body element of a FIELDSET) */ |
| 1491 | 1490 | .message-content { |
| 1492 | 1491 | display: inline-block; |
| 1493 | 1492 | border-radius: 0.25em; |
| @@ -1494,25 +1493,20 @@ | ||
| 1494 | 1493 | border: 1px solid rgba(0,0,0,0.2); |
| 1495 | 1494 | box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); |
| 1496 | 1495 | padding: 0.25em 1em; |
| 1497 | 1496 | margin-top: -0.75em; |
| 1498 | 1497 | } |
| 1499 | -.message-row.user-is-me .message-content { | |
| 1500 | - background-color: #d2dde1; | |
| 1501 | -} | |
| 1502 | 1498 | /* User name for the post (a LEGEND element) */ |
| 1503 | 1499 | .message-row .message-user { |
| 1504 | - background: inherit; | |
| 1505 | 1500 | border-radius: 0.25em 0.25em 0 0; |
| 1506 | 1501 | padding: 0 0.5em; |
| 1507 | 1502 | /*text-align: left; Firefox requires the 'align' attribute */ |
| 1508 | 1503 | margin-left: 0.25em; |
| 1509 | 1504 | padding: 0 0.5em 0em 0.5em; |
| 1510 | 1505 | margin-bottom: 0.4em; |
| 1511 | - background-color: #d2dde1; | |
| 1512 | 1506 | } |
| 1513 | 1507 | /* Reposition "my" posts to the right */ |
| 1514 | 1508 | .message-row.user-is-me .message-user { |
| 1515 | 1509 | /*text-align: right; Firefox requires the 'align' attribute */ |
| 1516 | 1510 | margin-left: 0; |
| 1517 | 1511 | margin-right: 0.25em; |
| 1518 | 1512 | } |
| 1519 | 1513 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1483,11 +1483,10 @@ | |
| 1483 | } |
| 1484 | /* Rows for the current user have the .user-is-me CSS class |
| 1485 | and get right-aligned. */ |
| 1486 | .message-row.user-is-me { |
| 1487 | justify-content: flex-end; |
| 1488 | /*background-color: #d2dde1;*/ |
| 1489 | } |
| 1490 | /* The content area of a message (the body element of a FIELDSET) */ |
| 1491 | .message-content { |
| 1492 | display: inline-block; |
| 1493 | border-radius: 0.25em; |
| @@ -1494,25 +1493,20 @@ | |
| 1494 | border: 1px solid rgba(0,0,0,0.2); |
| 1495 | box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); |
| 1496 | padding: 0.25em 1em; |
| 1497 | margin-top: -0.75em; |
| 1498 | } |
| 1499 | .message-row.user-is-me .message-content { |
| 1500 | background-color: #d2dde1; |
| 1501 | } |
| 1502 | /* User name for the post (a LEGEND element) */ |
| 1503 | .message-row .message-user { |
| 1504 | background: inherit; |
| 1505 | border-radius: 0.25em 0.25em 0 0; |
| 1506 | padding: 0 0.5em; |
| 1507 | /*text-align: left; Firefox requires the 'align' attribute */ |
| 1508 | margin-left: 0.25em; |
| 1509 | padding: 0 0.5em 0em 0.5em; |
| 1510 | margin-bottom: 0.4em; |
| 1511 | background-color: #d2dde1; |
| 1512 | } |
| 1513 | /* Reposition "my" posts to the right */ |
| 1514 | .message-row.user-is-me .message-user { |
| 1515 | /*text-align: right; Firefox requires the 'align' attribute */ |
| 1516 | margin-left: 0; |
| 1517 | margin-right: 0.25em; |
| 1518 | } |
| 1519 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1483,11 +1483,10 @@ | |
| 1483 | } |
| 1484 | /* Rows for the current user have the .user-is-me CSS class |
| 1485 | and get right-aligned. */ |
| 1486 | .message-row.user-is-me { |
| 1487 | justify-content: flex-end; |
| 1488 | } |
| 1489 | /* The content area of a message (the body element of a FIELDSET) */ |
| 1490 | .message-content { |
| 1491 | display: inline-block; |
| 1492 | border-radius: 0.25em; |
| @@ -1494,25 +1493,20 @@ | |
| 1493 | border: 1px solid rgba(0,0,0,0.2); |
| 1494 | box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); |
| 1495 | padding: 0.25em 1em; |
| 1496 | margin-top: -0.75em; |
| 1497 | } |
| 1498 | /* User name for the post (a LEGEND element) */ |
| 1499 | .message-row .message-user { |
| 1500 | border-radius: 0.25em 0.25em 0 0; |
| 1501 | padding: 0 0.5em; |
| 1502 | /*text-align: left; Firefox requires the 'align' attribute */ |
| 1503 | margin-left: 0.25em; |
| 1504 | padding: 0 0.5em 0em 0.5em; |
| 1505 | margin-bottom: 0.4em; |
| 1506 | } |
| 1507 | /* Reposition "my" posts to the right */ |
| 1508 | .message-row.user-is-me .message-user { |
| 1509 | /*text-align: right; Firefox requires the 'align' attribute */ |
| 1510 | margin-left: 0; |
| 1511 | margin-right: 0.25em; |
| 1512 | } |
| 1513 |