Fossil SCM

chat: make user names stand out more to help differentiate between color-colliding users, per /chat discussion.

stephan 2021-04-07 15:35 trunk

Commit 58e5348b367b519cffbb673141f40bef3a369b899b85e2951d3f4c1ee8b73542

Parent bcc9a6ea3ec1446…

2 files changed +7 -5 +6

M src/chat.js

+7 -5

		--- src/chat.js
		+++ src/chat.js
		@@ -604,13 +604,10 @@
604	604	' ',pad2(d.getHours()),':',pad2(d.getMinutes()),
605	605	':',pad2(d.getSeconds())
606	606	].join('');
607	607	};
608	608	cf.prototype = {
609		- setLabel: function(label){
610		- return this;
611		- },
612	609	scrollIntoView: function(){
613	610	this.e.content.scrollIntoView();
614	611	},
615	612	setMessage: function(m){
616	613	const ds = this.e.body.dataset;
		@@ -626,14 +623,16 @@
626	623	this.e.tab.style.backgroundColor = m.uclr;
627	624	}
628	625	const d = new Date(m.mtime);
629	626	D.clearElement(this.e.tab);
630	627	var contentTarget = this.e.content;
	628	+ var eXFrom /* element holding xfrom name */;
631	629	if(m.xfrom){
	630	+ eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
632	631	D.append(
633		- this.e.tab,
634		- D.text(m.xfrom," #",(m.msgid\|\|'???'),' @ ',theTime(d))
	632	+ this.e.tab, eXFrom,
	633	+ D.text(" #",(m.msgid\|\|'???'),' @ ',theTime(d))
635	634	);
636	635	}else{/notification/
637	636	D.addClass(this.e.body, 'notification');
638	637	if(m.isError){
639	638	D.addClass([contentTarget, this.e.tab], 'error');
		@@ -683,10 +682,13 @@
683	682	}else{
684	683	contentTarget.innerHTML = m.xmsg;
685	684	}
686	685	}
687	686	this.e.tab.addEventListener('click', this._handleLegendClicked, false);
	687	+ if(eXFrom){
	688	+ eXFrom.addEventListener('click', ()=>this.e.tab.click(), false);
	689	+ }
688	690	return this;
689	691	},
690	692	/* Event handler for clicking .message-user elements to show their
691	693	timestamps. */
692	694	_handleLegendClicked: function f(ev){
693	695

	--- src/chat.js
	+++ src/chat.js
	@@ -604,13 +604,10 @@
604	' ',pad2(d.getHours()),':',pad2(d.getMinutes()),
605	':',pad2(d.getSeconds())
606	].join('');
607	};
608	cf.prototype = {
609	setLabel: function(label){
610	return this;
611	},
612	scrollIntoView: function(){
613	this.e.content.scrollIntoView();
614	},
615	setMessage: function(m){
616	const ds = this.e.body.dataset;
	@@ -626,14 +623,16 @@
626	this.e.tab.style.backgroundColor = m.uclr;
627	}
628	const d = new Date(m.mtime);
629	D.clearElement(this.e.tab);
630	var contentTarget = this.e.content;

631	if(m.xfrom){

632	D.append(
633	this.e.tab,
634	D.text(m.xfrom," #",(m.msgid\|\|'???'),' @ ',theTime(d))
635	);
636	}else{/notification/
637	D.addClass(this.e.body, 'notification');
638	if(m.isError){
639	D.addClass([contentTarget, this.e.tab], 'error');
	@@ -683,10 +682,13 @@
683	}else{
684	contentTarget.innerHTML = m.xmsg;
685	}
686	}
687	this.e.tab.addEventListener('click', this._handleLegendClicked, false);



688	return this;
689	},
690	/* Event handler for clicking .message-user elements to show their
691	timestamps. */
692	_handleLegendClicked: function f(ev){
693

	--- src/chat.js
	+++ src/chat.js
	@@ -604,13 +604,10 @@
604	' ',pad2(d.getHours()),':',pad2(d.getMinutes()),
605	':',pad2(d.getSeconds())
606	].join('');
607	};
608	cf.prototype = {



609	scrollIntoView: function(){
610	this.e.content.scrollIntoView();
611	},
612	setMessage: function(m){
613	const ds = this.e.body.dataset;
	@@ -626,14 +623,16 @@
623	this.e.tab.style.backgroundColor = m.uclr;
624	}
625	const d = new Date(m.mtime);
626	D.clearElement(this.e.tab);
627	var contentTarget = this.e.content;
628	var eXFrom /* element holding xfrom name */;
629	if(m.xfrom){
630	eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
631	D.append(
632	this.e.tab, eXFrom,
633	D.text(" #",(m.msgid\|\|'???'),' @ ',theTime(d))
634	);
635	}else{/notification/
636	D.addClass(this.e.body, 'notification');
637	if(m.isError){
638	D.addClass([contentTarget, this.e.tab], 'error');
	@@ -683,10 +682,13 @@
682	}else{
683	contentTarget.innerHTML = m.xmsg;
684	}
685	}
686	this.e.tab.addEventListener('click', this._handleLegendClicked, false);
687	if(eXFrom){
688	eXFrom.addEventListener('click', ()=>this.e.tab.click(), false);
689	}
690	return this;
691	},
692	/* Event handler for clicking .message-user elements to show their
693	timestamps. */
694	_handleLegendClicked: function f(ev){
695

M src/default.css

		--- src/default.css
		+++ src/default.css
		@@ -1517,10 +1517,16 @@
1517	1517	cursor: pointer;
1518	1518	white-space: nowrap;
1519	1519	}
1520	1520	body.chat .fossil-tooltip.help-buttonlet-content {
1521	1521	font-size: 80%;
	1522	+}
	1523	+body.chat .message-widget .message-widget-tab .xfrom {
	1524	+ /* Element which holds the "this message is from user X" part
	1525	+ of the message banner. */
	1526	+ font-style: italic;
	1527	+ font-weight: bold;
1522	1528	}
1523	1529	/* The popup element for displaying message timestamps
1524	1530	and deletion controls. */
1525	1531	body.chat .chat-message-popup {
1526	1532	font-family: monospace;
1527	1533

	--- src/default.css
	+++ src/default.css
	@@ -1517,10 +1517,16 @@
1517	cursor: pointer;
1518	white-space: nowrap;
1519	}
1520	body.chat .fossil-tooltip.help-buttonlet-content {
1521	font-size: 80%;






1522	}
1523	/* The popup element for displaying message timestamps
1524	and deletion controls. */
1525	body.chat .chat-message-popup {
1526	font-family: monospace;
1527

	--- src/default.css
	+++ src/default.css
	@@ -1517,10 +1517,16 @@
1517	cursor: pointer;
1518	white-space: nowrap;
1519	}
1520	body.chat .fossil-tooltip.help-buttonlet-content {
1521	font-size: 80%;
1522	}
1523	body.chat .message-widget .message-widget-tab .xfrom {
1524	/* Element which holds the "this message is from user X" part
1525	of the message banner. */
1526	font-style: italic;
1527	font-weight: bold;
1528	}
1529	/* The popup element for displaying message timestamps
1530	and deletion controls. */
1531	body.chat .chat-message-popup {
1532	font-family: monospace;
1533