handling empty text

src/components/dialogs/TitleDialog.tsx

@@ -40,6 +40,11 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
     const { height: title_height } = this.ref_title.getBoundingClientRect();
     const { height: text_height } = this.ref_text.getBoundingClientRect();
 
+    if (text_height === 0) {
+      this.setState({ height: 0, height_raised: 0 });
+      return;
+    }
+
     const title_margin = parseInt(getStyle(this.ref_title, 'margin-bottom'), 10) || 0;
     const text_margins = (parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
       parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;;
@@ -47,15 +52,12 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
 
     const container_height = sizer_height - title_height - title_margin - text_margins;
 
-    console.log(this.ref_text.getBoundingClientRect());
-
     const min_height = (this.props.minLines || 3) * text_line;
     const max_height = (this.props.maxLines || 20) * text_line;
 
     const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
     const height_raised = nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) + text_margins;
 
-    console.log({ height, height_raised });
     this.setState({ height, height_raised });
   };
 
@@ -79,13 +81,16 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
             </div>
             <div
               className="title-dialog-pane title-dialog-text"
-              style={{ height: raised ? height_raised : height }}
+              style={{
+                height: (raised ? height_raised : height),
+                display: height === 0 ? 'none' : 'block'
+              }}
               ref={el => { this.ref_overflow = el; }}
             >
               <div
                 ref={el => { this.ref_text = el; }}
               >
-                Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по
+
               </div>
             </div>
           </div>

src/styles/panel.less

@@ -648,15 +648,21 @@
   touch-action: auto;
   display: flex;
   flex-direction: column;
+  opacity: 0;
+
+  @media(max-width: @mobile_breakpoint) {
+    display: none;
+  }
 
   &.active {
+    opacity: 1;
     transform: translate(0, 0);
   }
 
   .title-dialog-pane {
     margin-bottom: 10px;
     padding: 10px;
-    background: #111111;
+    background: @dialog_background;
     color: fade(white, 50%);
     font-size: 13px;
     box-sizing: border-box;
@@ -672,13 +678,32 @@
 
   .title-dialog-text {
     overflow: hidden;
-    //display: flex;
     transition: height 500ms;
     line-height: 14px;
     padding: 0;
+    position: relative;
 
     > div {
       margin: 10px;
     }
+
+    ::after {
+      content: ' ';
+      width: 100%;
+      height: 40px;
+      background: linear-gradient(fade(@dialog_background, 0), @dialog_background);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      transition: opacity 250ms;
+      pointer-events: none;
+      touch-action: none;
+    }
+
+    &:hover {
+      ::after {
+        opacity: 0;
+      }
+    }
   }
 }