Fossil

Check-in [adb93ca980]
Login

Check-in [adb93ca980]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Chat message background color determined by username.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chatroom-dev
Files: files | file ages | folders
SHA3-256: adb93ca9805fff293337db896d511e7a76048d3145dbdbfb391dd6f5eab40e82
User & Date: drh 2020-12-23 02:24:18.175
Context
2020-12-23
02:27
Add Chat to the /sitemap, so that it appears on the hamburger menu. ... (check-in: 0272d8bb35 user: drh tags: chatroom-dev)
02:24
Chat message background color determined by username. ... (check-in: adb93ca980 user: drh tags: chatroom-dev)
01:33
Basic chat functionality seems to be on-line again. ... (check-in: 441ee6af06 user: drh tags: chatroom-dev)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
47
48
49
50
51
52
53

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

69
70
71
72
73
74
75

      let m = jx.msgs[i];
      let row = document.createElement("fieldset");
      if( m.msgid>mxMsg ) mxMsg = m.msgid;
      row.classList.add('message-row');
      injectMessage(row);
      const eWho = document.createElement('legend');
      eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));

      row.appendChild(eWho);
      eWho.classList.add('message-user');
      let whoName;
      if( m.xfrom===_me ){
        whoName = 'me';
        row.classList.add('user-is-me');
      }else{
        whoName = m.xfrom;
      }
      eWho.append(textNode(
                  whoName+' @ '+
                  localTimeString(new Date(Date.parse(m.mtime+".000Z"))))
      );
      let span = document.createElement("div");
      span.classList.add('message-content');

      row.appendChild(span);
      if( m.fsize>0 ){
        if( m.fmime && m.fmime.startsWith("image/") ){
          let img = document.createElement("img");
          img.src = "chat-download/" + m.msgid;
          span.appendChild(img);
        }else{








>















>








47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

      let m = jx.msgs[i];
      let row = document.createElement("fieldset");
      if( m.msgid>mxMsg ) mxMsg = m.msgid;
      row.classList.add('message-row');
      injectMessage(row);
      const eWho = document.createElement('legend');
      eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));
      eWho.style.backgroundColor = m.uclr;
      row.appendChild(eWho);
      eWho.classList.add('message-user');
      let whoName;
      if( m.xfrom===_me ){
        whoName = 'me';
        row.classList.add('user-is-me');
      }else{
        whoName = m.xfrom;
      }
      eWho.append(textNode(
                  whoName+' @ '+
                  localTimeString(new Date(Date.parse(m.mtime+".000Z"))))
      );
      let span = document.createElement("div");
      span.classList.add('message-content');
      span.style.backgroundColor = m.uclr;
      row.appendChild(span);
      if( m.fsize>0 ){
        if( m.fmime && m.fmime.startsWith("image/") ){
          let img = document.createElement("img");
          img.src = "chat-download/" + m.msgid;
          span.appendChild(img);
        }else{
︙︙
Changes to src/default.css.
︙︙
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518

  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
  border: none;
}
/* Rows for the current user have the .user-is-me CSS class
   and get right-aligned. */
.message-row.user-is-me {
  justify-content: flex-end;
  /*background-color: #d2dde1;*/
}
/* The content area of a message (the body element of a FIELDSET) */
.message-content {
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 1em;
  margin-top: -0.75em;
}
.message-row.user-is-me .message-content {
  background-color: #d2dde1;
}
/* User name for the post (a LEGEND element) */
.message-row .message-user {
  background: inherit;
  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin-left: 0.25em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;
  background-color: #d2dde1;
}
/* Reposition "my" posts to the right */
.message-row.user-is-me .message-user {
  /*text-align: right; Firefox requires the 'align' attribute */
  margin-left: 0;
  margin-right: 0.25em;
}








<










<
<
<


<






<








1481
1482
1483
1484
1485
1486
1487

1488
1489
1490
1491
1492
1493
1494
1495
1496
1497



1498
1499

1500
1501
1502
1503
1504
1505

1506
1507
1508
1509
1510
1511
1512

  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);*/
  border: none;
}
/* Rows for the current user have the .user-is-me CSS class
   and get right-aligned. */
.message-row.user-is-me {
  justify-content: flex-end;

}
/* The content area of a message (the body element of a FIELDSET) */
.message-content {
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 1em;
  margin-top: -0.75em;
}



/* User name for the post (a LEGEND element) */
.message-row .message-user {

  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin-left: 0.25em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;

}
/* Reposition "my" posts to the right */
.message-row.user-is-me .message-user {
  /*text-align: right; Firefox requires the 'align' attribute */
  margin-left: 0;
  margin-right: 0.25em;
}