Fossil SCM

CSS tweaks to attempt to counter some Safari message spacing problems - cannot test locally. Also limit the chat image preview to 40% of the viewport width/height, to avoid it taking up the whole screen for a large image.

stephan 2020-12-27 01:07 trunk
Commit 670732a68ffb57eb650a474de0aa81d7e1ae55e248804e58d7af028a4ec97fb1
Parent a6650eb776e82b6…
2 files changed +4 -2 +9 -2
~ src/chat.js ~ src/default.css
M src/chat.js
+4 -2
--- src/chat.js
+++ src/chat.js
@@ -656,20 +656,21 @@
656656
 label: "Left-align my posts",
657657
 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
658658
 callback: function f(){
659659
 document.body.classList.toggle('my-messages-right');
660660
 }
661
- }/**,{
661
+ },{
662662
 label: "Bottom-up chat",
663
+ disable: true,
663664
 boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
664665
 callback: function(){
665666
 document.body.classList.toggle('chat-bottom-up');
666667
 Chat.settings.set('bottom-up',
667668
 document.body.classList.contains('chat-bottom-up'));
668669
 setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
669670
 }
670
- }*/,{
671
+ },{
671672
 label: "Images inline",
672673
 boolValue: ()=>Chat.settings.getBool('images-inline'),
673674
 callback: function(){
674675
 const v = Chat.settings.getBool('images-inline',true);
675676
 Chat.settings.set('images-inline', !v);
@@ -682,10 +683,11 @@
682683
 show their current values.
683684
 */
684685
 settingsPopup.options.refresh = function(){
685686
 D.clearElement(this.e);
686687
 settingsOps.forEach(function(op){
688
+ if(op.disable) return;
687689
 const line = D.addClass(D.span(), 'menu-entry');
688690
 const btn = D.append(D.addClass(D.span(), 'button'), op.label);
689691
 D.attr(btn, 'role', 'button');
690692
 const callback = function(ev){
691693
 settingsPopup.hide();
692694
--- src/chat.js
+++ src/chat.js
@@ -656,20 +656,21 @@
656 label: "Left-align my posts",
657 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
658 callback: function f(){
659 document.body.classList.toggle('my-messages-right');
660 }
661 }/**,{
662 label: "Bottom-up chat",
 
663 boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
664 callback: function(){
665 document.body.classList.toggle('chat-bottom-up');
666 Chat.settings.set('bottom-up',
667 document.body.classList.contains('chat-bottom-up'));
668 setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
669 }
670 }*/,{
671 label: "Images inline",
672 boolValue: ()=>Chat.settings.getBool('images-inline'),
673 callback: function(){
674 const v = Chat.settings.getBool('images-inline',true);
675 Chat.settings.set('images-inline', !v);
@@ -682,10 +683,11 @@
682 show their current values.
683 */
684 settingsPopup.options.refresh = function(){
685 D.clearElement(this.e);
686 settingsOps.forEach(function(op){
 
687 const line = D.addClass(D.span(), 'menu-entry');
688 const btn = D.append(D.addClass(D.span(), 'button'), op.label);
689 D.attr(btn, 'role', 'button');
690 const callback = function(ev){
691 settingsPopup.hide();
692
--- src/chat.js
+++ src/chat.js
@@ -656,20 +656,21 @@
656 label: "Left-align my posts",
657 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
658 callback: function f(){
659 document.body.classList.toggle('my-messages-right');
660 }
661 },{
662 label: "Bottom-up chat",
663 disable: true,
664 boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
665 callback: function(){
666 document.body.classList.toggle('chat-bottom-up');
667 Chat.settings.set('bottom-up',
668 document.body.classList.contains('chat-bottom-up'));
669 setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
670 }
671 },{
672 label: "Images inline",
673 boolValue: ()=>Chat.settings.getBool('images-inline'),
674 callback: function(){
675 const v = Chat.settings.getBool('images-inline',true);
676 Chat.settings.set('images-inline', !v);
@@ -682,10 +683,11 @@
683 show their current values.
684 */
685 settingsPopup.options.refresh = function(){
686 D.clearElement(this.e);
687 settingsOps.forEach(function(op){
688 if(op.disable) return;
689 const line = D.addClass(D.span(), 'menu-entry');
690 const btn = D.append(D.addClass(D.span(), 'button'), op.label);
691 D.attr(btn, 'role', 'button');
692 const callback = function(ev){
693 settingsPopup.hide();
694
M src/default.css
+9 -2
--- src/default.css
+++ src/default.css
@@ -1497,20 +1497,21 @@
14971497
 padding: 0.25em 0.5em;
14981498
 margin-top: 0;
14991499
 min-width: 9em /*avoid unsightly "underlap" with the neighboring
15001500
 .message-widget-tab element*/;
15011501
 white-space: pre-wrap/*needed for multi-line edits*/;
1502
+ flex: 1 1 auto;
15021503
 }
15031504
 body.chat.monospace-messages .message-widget-content,
15041505
 body.chat.monospace-messages textarea,
15051506
 body.chat.monospace-messages input[type=text]{
15061507
 font-family: monospace;
15071508
 }
15081509
 /* User name and timestamp (a LEGEND-like element) */
15091510
 body.chat .message-widget .message-widget-tab {
15101511
 border-radius: 0.25em 0.25em 0 0;
1511
- margin: 0 0.25em 0em 0.15em;
1512
+ margin: 0.25em 0.25em 0em 0.15em;
15121513
 padding: 0 0.5em 0.15em 0.5em;
15131514
 cursor: pointer;
15141515
 white-space: nowrap;
15151516
 }
15161517
 body.chat .fossil-tooltip.help-buttonlet-content {
@@ -1641,10 +1642,11 @@
16411642
 display: flex;
16421643
 flex-direction: column;
16431644
 overflow: auto;
16441645
 width: 100%;
16451646
 flex: 1 1 auto;
1647
+ justify-content: flex-start;
16461648
 }
16471649
 body.chat.chat-bottom-up #chat-messages-wrapper {
16481650
 flex-direction: column-reverse;
16491651
 z-index: 99 /* so that it scrolls under input area. If it's
16501652
 lower than div.content then mouse events to it
@@ -1653,11 +1655,10 @@
16531655
 body.chat.chat-only-mode #chat-message-wrapper {
16541656
 }
16551657
16561658
 body.chat div.content {
16571659
 padding: 0;
1658
- position: relative;
16591660
 display: flex;
16601661
 flex-direction: column;
16611662
 align-items: stretch;
16621663
 max-height: 85vh /* rough approximate */;
16631664
 }
@@ -1741,6 +1742,12 @@
17411742
 flex: 0 1 auto;
17421743
 padding: 0.5em 1em;
17431744
 margin-left: 0.5em;
17441745
 white-space: pre;
17451746
 font-family: monospace;
1747
+}
1748
+body.chat #chat-drop-details img {
1749
+ /* If we don't artificially limit the img preview size, they can be
1750
+ so big that the user cannot navigate to the buttons. */
1751
+ max-height: 40vh;
1752
+ max-width: 40vw;
17461753
 }
17471754
--- src/default.css
+++ src/default.css
@@ -1497,20 +1497,21 @@
1497 padding: 0.25em 0.5em;
1498 margin-top: 0;
1499 min-width: 9em /*avoid unsightly "underlap" with the neighboring
1500 .message-widget-tab element*/;
1501 white-space: pre-wrap/*needed for multi-line edits*/;
 
1502 }
1503 body.chat.monospace-messages .message-widget-content,
1504 body.chat.monospace-messages textarea,
1505 body.chat.monospace-messages input[type=text]{
1506 font-family: monospace;
1507 }
1508 /* User name and timestamp (a LEGEND-like element) */
1509 body.chat .message-widget .message-widget-tab {
1510 border-radius: 0.25em 0.25em 0 0;
1511 margin: 0 0.25em 0em 0.15em;
1512 padding: 0 0.5em 0.15em 0.5em;
1513 cursor: pointer;
1514 white-space: nowrap;
1515 }
1516 body.chat .fossil-tooltip.help-buttonlet-content {
@@ -1641,10 +1642,11 @@
1641 display: flex;
1642 flex-direction: column;
1643 overflow: auto;
1644 width: 100%;
1645 flex: 1 1 auto;
 
1646 }
1647 body.chat.chat-bottom-up #chat-messages-wrapper {
1648 flex-direction: column-reverse;
1649 z-index: 99 /* so that it scrolls under input area. If it's
1650 lower than div.content then mouse events to it
@@ -1653,11 +1655,10 @@
1653 body.chat.chat-only-mode #chat-message-wrapper {
1654 }
1655
1656 body.chat div.content {
1657 padding: 0;
1658 position: relative;
1659 display: flex;
1660 flex-direction: column;
1661 align-items: stretch;
1662 max-height: 85vh /* rough approximate */;
1663 }
@@ -1741,6 +1742,12 @@
1741 flex: 0 1 auto;
1742 padding: 0.5em 1em;
1743 margin-left: 0.5em;
1744 white-space: pre;
1745 font-family: monospace;
 
 
 
 
 
 
1746 }
1747
--- src/default.css
+++ src/default.css
@@ -1497,20 +1497,21 @@
1497 padding: 0.25em 0.5em;
1498 margin-top: 0;
1499 min-width: 9em /*avoid unsightly "underlap" with the neighboring
1500 .message-widget-tab element*/;
1501 white-space: pre-wrap/*needed for multi-line edits*/;
1502 flex: 1 1 auto;
1503 }
1504 body.chat.monospace-messages .message-widget-content,
1505 body.chat.monospace-messages textarea,
1506 body.chat.monospace-messages input[type=text]{
1507 font-family: monospace;
1508 }
1509 /* User name and timestamp (a LEGEND-like element) */
1510 body.chat .message-widget .message-widget-tab {
1511 border-radius: 0.25em 0.25em 0 0;
1512 margin: 0.25em 0.25em 0em 0.15em;
1513 padding: 0 0.5em 0.15em 0.5em;
1514 cursor: pointer;
1515 white-space: nowrap;
1516 }
1517 body.chat .fossil-tooltip.help-buttonlet-content {
@@ -1641,10 +1642,11 @@
1642 display: flex;
1643 flex-direction: column;
1644 overflow: auto;
1645 width: 100%;
1646 flex: 1 1 auto;
1647 justify-content: flex-start;
1648 }
1649 body.chat.chat-bottom-up #chat-messages-wrapper {
1650 flex-direction: column-reverse;
1651 z-index: 99 /* so that it scrolls under input area. If it's
1652 lower than div.content then mouse events to it
@@ -1653,11 +1655,10 @@
1655 body.chat.chat-only-mode #chat-message-wrapper {
1656 }
1657
1658 body.chat div.content {
1659 padding: 0;
 
1660 display: flex;
1661 flex-direction: column;
1662 align-items: stretch;
1663 max-height: 85vh /* rough approximate */;
1664 }
@@ -1741,6 +1742,12 @@
1742 flex: 0 1 auto;
1743 padding: 0.5em 1em;
1744 margin-left: 0.5em;
1745 white-space: pre;
1746 font-family: monospace;
1747 }
1748 body.chat #chat-drop-details img {
1749 /* If we don't artificially limit the img preview size, they can be
1750 so big that the user cannot navigate to the buttons. */
1751 max-height: 40vh;
1752 max-width: 40vw;
1753 }
1754

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button