double cliking dragger collapses menu

1 files changed, 19 insertions, 380 deletions

diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
index 1f619b4f5..8310a0da6 100644
--- a/src/client/util/TooltipTextMenu.scss
+++ b/src/client/util/TooltipTextMenu.scss
@@ -1,6 +1,5 @@
 @import "../views/globalCssVariables";
 .ProseMirror-menu-dropdown-wrap {
-    // margin: 0 4px;
     display: inline-block;
     position: relative;
 }
@@ -39,9 +38,10 @@
     font-size: 12px;
     background: white;
     border: 1px solid rgb(223, 223, 223);
-    min-width: 50px;
+    min-width: 40px;
     z-index: 50000;
     position: absolute;
+    box-sizing: content-box;
 
     .ProseMirror-menu-dropdown-item {
         cursor: pointer;
@@ -91,20 +91,22 @@
 .wrapper {
     position: absolute;
     pointer-events: all;
-}
+    display: flex;
+    align-items: center;
+    transform: translateY(-85px);
 
-.tooltipMenu {
-    position: absolute;
-    z-index: 20000;
+    height: 35px;
     background: #323232;
     border-radius: 6px;
-    transform: translateY(-85px);
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+
+}
+
+.tooltipMenu, .basic-tools {
+    z-index: 20000;
     pointer-events: all;
-    height: 35px;
-    // width: 650px;
     padding: 3px;
     padding-bottom: 5px;
-    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
     display: flex;
     align-items: center;
 
@@ -203,7 +205,7 @@
 }
 
 .underline svg {
-    margin-top: 15px;
+    margin-top: 13px;
 }
 
   .font-size-indicator {
@@ -232,21 +234,19 @@
     width: 1em;
     height: 1em;
     stroke-width: 3;
-    // stroke: greenyellow;
     fill: greenyellow;
     margin-right: 15px;
 }
 
-.dragger {
+.dragger-wrapper {
     color: #eee;
-    margin-left: 5px;
-    width: 16px;
     height: 22px;
-    display: inline-block;
+    padding: 0 5px;
+    box-sizing: content-box;
     cursor: grab;
 
-    .dragger-wrapper {
-        width: 100%;
+    .dragger {
+        width: 18px;
         height: 100%;
         display: flex;
         justify-content: space-evenly;
@@ -259,11 +259,6 @@
     }
 }
 
-// .menuicon:hover + .ProseMirror-menu-dropdown-wrap .buttonSettings-dropdown, 
-// .menuicon-active:hover + .ProseMirror-menu-dropdown-wrap .buttonSettings-dropdown {
-//     background-color: black;
-// }
-
 .button-dropdown-wrapper {
     display: flex;
     align-content: center;
@@ -374,360 +369,4 @@ button.colorPicker {
     &.active {
         border: 2px solid white !important;
     }
-}
-
-// @import "../views/globalCssVariables";
-
-// .ProseMirror-textblock-dropdown {
-//     min-width: 3em;
-//   }
-  
-//   .ProseMirror-menu {
-//     margin: 0 -4px;
-//     line-height: 1;
-//   }
-  
-//   .ProseMirror-tooltip .ProseMirror-menu {
-//     width: -webkit-fit-content;
-//     width: fit-content;
-//     white-space: pre;
-//   }
-  
-//   .ProseMirror-menuitem {
-//     margin-right: 3px;
-//     display: inline-block;
-//     z-index: 50000;
-//     position: relative;
-//   }
-  
-//   .ProseMirror-menuseparator {
-//    // border-right: 1px solid #ddd;
-//     margin-right: 3px;
-//   }
-  
-//   .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
-//     font-size: 90%;
-//     white-space: nowrap;
-//   }
-  
-//   .ProseMirror-menu-dropdown {
-//     vertical-align: 1px;
-//     cursor: pointer;
-//     position: relative;
-//     padding-right: 15px;
-//     margin: 3px;
-//     background: white;
-//     border-radius: 3px;
-//     text-align: center;
-//   }
-  
-//   .ProseMirror-menu-dropdown-wrap {
-//     padding: 1px 0 1px 4px;
-//     display: inline-block;
-//     position: relative;
-//   }
-  
-//   .ProseMirror-menu-dropdown:after {
-//     content: "";
-//     border-left: 4px solid transparent;
-//     border-right: 4px solid transparent;
-//     border-top: 4px solid currentColor;
-//     opacity: .6;
-//     position: absolute;
-//     right: 4px;
-//     top: calc(50% - 2px);
-//   }
-  
-//   .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
-//     background: $dark-color;
-//     color:white;
-//     border: 1px solid rgb(223, 223, 223);
-//     padding: 2px;
-//   }
-  
-//   .ProseMirror-menu-dropdown-menu {
-//     z-index: 50000;
-//     min-width: 6em;
-//     background: white;
-//     position: absolute;
-//   }
-  
-//   .linking {
-//       text-align: center;
-//   }
-
-//   .ProseMirror-menu-dropdown-item {
-//     cursor: pointer;
-//     padding: 2px 8px 2px 4px;
-//     width: auto;
-//     z-index: 100000;
-//   }
-  
-//   .ProseMirror-menu-dropdown-item:hover {
-//     background: white;
-//   }
-  
-//   .ProseMirror-menu-submenu-wrap {
-//     position: relative;
-//     margin-right: -4px;
-//   }
-  
-//   .ProseMirror-menu-submenu-label:after {
-//     content: "";
-//     border-top: 4px solid transparent;
-//     border-bottom: 4px solid transparent;
-//     border-left: 4px solid currentColor;
-//     opacity: .6;
-//     position: absolute;
-//     right: 4px;
-//     top: calc(50% - 4px);
-//   }
-  
-//   .ProseMirror-menu-submenu {
-//     display: none;
-//     min-width: 4em;
-//     left: 100%;
-//     top: -3px;
-//   }
-  
-//   .ProseMirror-menu-active {
-//     background: #eee;
-//     border-radius: 4px;
-//   }
-  
-//   .ProseMirror-menu-active {
-//     background: #eee;
-//     border-radius: 4px;
-//   }
-  
-//   .ProseMirror-menu-disabled {
-//     opacity: .3;
-//   }
-  
-//   .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
-//     display: block;
-//   }
-  
-//   .ProseMirror-menubar {
-//     border-top-left-radius: inherit;
-//     border-top-right-radius: inherit;
-//     position: relative;
-//     min-height: 1em;
-//     color: white;
-//     padding: 10px 10px;
-//     top: 0; left: 0; right: 0;
-//     border-bottom: 1px solid silver;
-//     background:$dark-color;
-//     z-index: 10;
-//     -moz-box-sizing: border-box;
-//     box-sizing: border-box;
-//     overflow: visible;
-//   }
-  
-//   .ProseMirror-icon {
-//     display: inline-block;
-//     line-height: .8;
-//     vertical-align: -2px; /* Compensate for padding */
-//     padding: 2px 8px;
-//     cursor: pointer;
-//   }
-  
-//   .ProseMirror-menu-disabled.ProseMirror-icon {
-//     cursor: default;
-//   }
-  
-//   .ProseMirror-icon svg {
-//     fill:white;
-//     height: 1em;
-//   }
-  
-//   .ProseMirror-icon span {
-//     vertical-align: text-top;
-//   }  
-  
-//   .ProseMirror ul, .ProseMirror ol {
-//     padding-left: 30px;
-//   }
-  
-//   .ProseMirror blockquote {
-//     padding-left: 1em;
-//     border-left: 3px solid #eee;
-//     margin-left: 0; margin-right: 0;
-//   }
-  
-//   .ProseMirror-example-setup-style img {
-//     cursor: default;
-//   }
-  
-//   .ProseMirror-prompt {
-//     background: white;
-//     padding: 5px 10px 5px 15px;
-//     border: 1px solid silver;
-//     position: fixed;
-//     border-radius: 3px;
-//     z-index: 11;
-//     box-shadow: -.5px 2px 5px white(255, 255, 255, 0.2);
-//   }
-  
-//   .ProseMirror-prompt h5 {
-//     margin: 0;
-//     font-weight: normal;
-//     font-size: 100%;
-//     color: #444;
-//   }
-  
-//   .ProseMirror-prompt input[type="text"],
-//   .ProseMirror-prompt textarea {
-//     background: white;
-//     border: none;
-//     outline: none;
-//   }
-  
-//   .ProseMirror-prompt input[type="text"] {
-//     padding: 0 4px;
-//   }
-  
-//   .ProseMirror-prompt-close {
-//     position: absolute;
-//     left: 2px; top: 1px;
-//     color: #666;
-//     border: none; background: transparent; padding: 0;
-//   }
-  
-//   .ProseMirror-prompt-close:after {
-//     content: "✕";
-//     font-size: 12px;
-//   }
-  
-//   .ProseMirror-invalid {
-//     background: #ffc;
-//     border: 1px solid #cc7;
-//     border-radius: 4px;
-//     padding: 5px 10px;
-//     position: absolute;
-//     min-width: 10em;
-//   }
-  
-//   .ProseMirror-prompt-buttons {
-//     margin-top: 5px;
-//     display: none;
-//   }
-
-// .tooltipMenu {
-//     position: absolute;
-//     z-index: 20000;
-//     background: #121721;
-//     border: 1px solid silver;
-//     border-radius: 15px;
-//     //height: 60px;
-//     //padding: 2px 10px;
-//     //margin-top: 100px;
-//     //-webkit-transform: translateX(-50%);
-//     //transform: translateX(-50%);
-//     transform: translateY(-85px);
-//     pointer-events: all;
-//     height: fit-content;
-//     width:550px;
-//     .ProseMirror-example-setup-style hr {
-//       padding: 2px 10px;
-//       border: none;
-//       margin: 1em 0;
-//     }
-    
-//     .ProseMirror-example-setup-style hr:after {
-//       content: "";
-//       display: block;
-//       height: 1px;
-//       background-color: silver;
-//       line-height: 2px;
-//     }
-// }
-
-// .tooltipExtras {
-//     position: absolute;
-//     z-index: 20000;
-//     background: #121721;
-//     border: 1px solid silver;
-//     border-radius: 15px;
-//     //height: 60px;
-//     //padding: 2px 10px;
-//     //margin-top: 100px;
-//     //-webkit-transform: translateX(-50%);
-//     //transform: translateX(-50%);
-//     transform: translateY(-115px);
-//     pointer-events: all;
-//     height: 25px;
-//     width:fit-content;
-//     .ProseMirror-example-setup-style hr {
-//       padding: 2px 10px;
-//       border: none;
-//       margin: 1em 0;
-//     }
-    
-//     .ProseMirror-example-setup-style hr:after {
-//       content: "";
-//       display: block;
-//       height: 1px;
-//       background-color: silver;
-//       line-height: 2px;
-//     }
-// }
-
-// .wrapper {
-//     position: absolute;
-//     pointer-events: all;
-// }
-
-//   .menuicon {
-//     display: inline-block;
-//     border-right: 1px solid white(0, 0, 0, 0.2);
-//     //color: rgb(19, 18, 18);
-//     color: rgb(226, 21, 21);
-//     line-height: 1;
-//     padding: 0px 2px;
-//     margin: 1px;
-//     cursor: pointer;
-//     text-align: center;
-//     min-width: 10px;
-    
-//   }
-//   .strong, .heading { font-weight: bold; }
-//   .em { font-style: italic; }
-//   .underline {text-decoration: underline}
-//   .superscript {vertical-align:super}
-//   .subscript { vertical-align:sub }
-//   .strikethrough {text-decoration-line:line-through}
-//   .font-size-indicator {
-//       font-size: 12px;
-//       padding-right: 0px;
-//   }
-//   .summarize{
-//       color: white;
-//       height: 20px;
-//       text-align: center;
-//   }
-
-//   .brush{
-//     display: inline-block;
-//     width: 1em;
-//     height: 1em;
-//     stroke-width: 0;
-//     stroke: currentColor;
-//     fill: currentColor;
-//     margin-right: 15px;
-//   }
-
-//   .brush-active{
-//     display: inline-block;
-//     width: 1em;
-//     height: 1em;
-//     stroke-width: 3;
-//     stroke: greenyellow;
-//     fill: greenyellow;
-//     margin-right: 15px;
-//   }
-
-//   .dragger{
-//       color: #eee;
-//       margin-left: 5px;
-//   }
\ No newline at end of file
+}
\ No newline at end of file