Merge branch 'mobile_revision_direct' of https://github.com/browngraphicslab/Dash-Web into mobile_revision_direct

1 files changed, 69 insertions, 48 deletions

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 7b0ceb6cf..5c084ae92 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -73,7 +73,7 @@
     .collectionfreeformview-container {
         position: relative;
     }
-    
+
     >.formattedTextBox-sidebar-handle {
         right: unset;
         left: -5;
@@ -93,10 +93,13 @@
     left: 10%;
 }
 
-.formattedTextBox-inner-rounded,
-.formattedTextBox-inner {
+.formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected,
+.formattedTextBox-inner, .formattedTextBox-inner-selected {
     height: 100%;
-    white-space: pre-wrap; 
+    white-space: pre-wrap;
+    .ProseMirror:hover {
+        background: rgba(200,200,200,0.8);
+    }
     hr {
         display: block;
         unicode-bidi: isolate;
@@ -249,34 +252,37 @@ footnote::after {
 .prosemirror-links {
     display: none;
     position: absolute;
-    background-color: gray;
-    padding-bottom: 10px;
-    margin-top: 1em;
+    background-color: dimgray;
+    margin-top: 1.5em;
     z-index: 1;
+    padding: 5;
+    border-radius: 2px;
   }
   .prosemirror-hrefoptions{
       width:0px;
       border:unset;
       padding:0px;
-
   }
-  
+
   .prosemirror-links a {
     float: left;
     color: white;
     text-decoration: none;
+    border-radius: 3px;
   }
-  
+
   .prosemirror-links a:hover {
     background-color: #eee;
     color: black;
   }
-  
+
   .prosemirror-anchor:hover .prosemirror-links {
     display: grid;
   }
 
 .ProseMirror {
+    padding: 0px;
+    height: max-content;
     touch-action: none;
     span {
         font-family: inherit;
@@ -291,6 +297,9 @@ footnote::after {
         margin-left: 1em;
         font-family: inherit;
     }
+    .bullet {  p {display: inline; font-family: inherit} margin-left: 0; }
+    .bullet1 { p {display: inline; font-family: inherit} }
+    .bullet2,.bullet3,.bullet4,.bullet5,.bullet6 { p {display: inline; font-family: inherit} font-size: smaller; }
 
     .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
     .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
@@ -305,6 +314,8 @@ footnote::after {
     .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
     .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
 
+    .bullet:before, .bullet1:before, .bullet2:before, .bullet3:before, .bullet4:before, .bullet5:before { transition: 0.5s; display: inline-block; margin-left: -1em; width: 1em; content:" " }
+
     .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
     .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
     .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
@@ -312,11 +323,21 @@ footnote::after {
     .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
     .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
     .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-    
+
     .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
     .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
     .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
-    .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left:   -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+    .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left: -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+}
+
+.formattedTextBox-inner-rounded-selected,
+.formattedTextBox-inner-selected {
+    .ProseMirror {
+        padding:10px;
+    }
+    .ProseMirror:hover {
+        background: unset;
+    }
 }
 
 @media only screen and (max-width: 1000px) {
@@ -327,11 +348,11 @@ footnote::after {
         height: 100%;
         min-height: 100%;
     }
-    
+
     .ProseMirror:focus {
         outline: none !important;
     }
-    
+
     .formattedTextBox-cont {
         touch-action: none;
         cursor: text;
@@ -350,7 +371,7 @@ footnote::after {
         display: flex;
         flex-direction: row;
         transition: opacity 1s;
-    
+
         .formattedTextBox-dictation {
             height: 12px;
             width: 10px;
@@ -359,7 +380,7 @@ footnote::after {
             position: absolute;
         }
     }
-    
+
     .formattedTextBox-outer {
         position: relative;
         overflow: auto;
@@ -367,7 +388,7 @@ footnote::after {
         width: 100%;
         height: 100%;
     }
-    
+
     .formattedTextBox-sidebar-handle {
         position: absolute;
         top: calc(50% - 17.5px);
@@ -377,12 +398,12 @@ footnote::after {
         border-radius: 20px;
         cursor:grabbing;
     }
-    
+
     .formattedTextBox-cont>.formattedTextBox-sidebar-handle {
         right: 0;
         left: unset;
     }
-    
+
     .formattedTextBox-sidebar,
     .formattedTextBox-sidebar-inking {
         border-left: dashed 1px black;
@@ -390,21 +411,21 @@ footnote::after {
         display: inline-block;
         position: absolute;
         right: 0;
-    
+
         .collectionfreeformview-container {
             position: relative;
         }
-        
+
         >.formattedTextBox-sidebar-handle {
             right: unset;
             left: -5;
         }
     }
-    
+
     .formattedTextBox-sidebar-inking {
         pointer-events: all;
     }
-    
+
     .formattedTextBox-inner-rounded {
         height: 70%;
         width: 85%;
@@ -413,11 +434,11 @@ footnote::after {
         top: 15%;
         left: 10%;
     }
-    
+
     .formattedTextBox-inner-rounded,
     .formattedTextBox-inner {
         height: 100%;
-        white-space: pre-wrap; 
+        white-space: pre-wrap;
         hr {
             display: block;
             unicode-bidi: isolate;
@@ -430,7 +451,7 @@ footnote::after {
             border-width: 1px;
         }
     }
-    
+
     // .menuicon {
     //     display: inline-block;
     //     border-right: 1px solid rgba(0, 0, 0, 0.2);
@@ -442,21 +463,21 @@ footnote::after {
     //     text-align: center;
     //     min-width: 1.4em;
     // }
-    
+
     .strong,
     .heading {
         font-weight: bold;
     }
-    
+
     .em {
         font-style: italic;
     }
-    
+
     .userMarkOpen {
         background: rgba(255, 255, 0, 0.267);
         display: inline;
     }
-    
+
     .userMark {
         background: rgba(255, 255, 0, 0.267);
         font-size: 2px;
@@ -469,28 +490,28 @@ footnote::after {
         text-align: center;
         align-content: center;
     }
-    
+
     footnote {
         display: inline-block;
         position: relative;
         cursor: pointer;
-    
+
         div {
             padding: 0 !important;
         }
     }
-    
+
     footnote::after {
         content: counter(prosemirror-footnote);
         vertical-align: super;
         font-size: 75%;
         counter-increment: prosemirror-footnote;
     }
-    
+
     .ProseMirror {
         counter-reset: prosemirror-footnote;
     }
-    
+
     .footnote-tooltip {
         cursor: auto;
         font-size: 75%;
@@ -504,11 +525,11 @@ footnote::after {
         min-width: 50px;
         width: max-content;
     }
-    
+
     .prosemirror-attribution {
         font-size: 8px;
     }
-    
+
     .footnote-tooltip::before {
         border: 5px solid silver;
         border-top-width: 0px;
@@ -521,8 +542,8 @@ footnote::after {
         height: 0;
         width: 0;
     }
-    
-    
+
+
     .formattedTextBox-inlineComment {
         position: relative;
         width: 40px;
@@ -534,7 +555,7 @@ footnote::after {
             background: orange;
         }
     }
-    
+
     .formattedTextBox-summarizer {
         opacity: 0.5;
         position: relative;
@@ -544,7 +565,7 @@ footnote::after {
             content: "←";
         }
     }
-    
+
     .formattedTextBox-summarizer-collapsed {
         opacity: 0.5;
         position: relative;
@@ -554,13 +575,13 @@ footnote::after {
             content: "...";
         }
     }
-    
+
     .ProseMirror {
         touch-action: none;
         span {
             font-family: inherit;
         }
-    
+
         ol, ul {
             counter-reset: deci1 0 multi1 0;
             padding-left: 1em;
@@ -570,7 +591,7 @@ footnote::after {
             margin-left: 1em;
             font-family: inherit;
         }
-    
+
         .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
         .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
         .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
@@ -578,12 +599,12 @@ footnote::after {
         .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
         .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
         .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
-    
+
         .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0;     padding-left: 1.2em }
         .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
         .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
         .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
-    
+
         .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
         .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
         .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
@@ -591,7 +612,7 @@ footnote::after {
         .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
         .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
         .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-        
+
         .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
         .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
         .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }