[Glitch] Improvement variable height in single column layout

Port 96ac52dabd to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

app/javascript/flavours/glitch/components/autosuggest_textarea.js

@@ -192,7 +192,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
   }
 
   render () {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children } = this.props;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr' };
 
@@ -200,7 +200,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
       style.direction = 'rtl';
     }
 
-    return (
+    return [
+      <div className='compose-form__autosuggest-wrapper'>
         <div className='autosuggest-textarea'>
           <label>
             <span style={{ display: 'none' }}>{placeholder}</span>
@@ -222,12 +223,15 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
               aria-autocomplete='list'
             />
           </label>
-
+        </div>
+        {children}
+      </div>,
+      <div className='autosuggest-textarea__suggestions-wrapper'>
         <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
           {suggestions.map(this.renderSuggestion)}
         </div>
-      </div>
-    );
+      </div>,
+    ];
   }
 
 }

app/javascript/flavours/glitch/features/compose/components/compose_form.js

@@ -335,8 +335,9 @@ class ComposeForm extends ImmutablePureComponent {
           />
         </div>
 
-        <div className='composer--textarea'>
-          <TextareaIcons advancedOptions={advancedOptions} />
+        <div className='emoji-picker-wrapper'>
+          <EmojiPicker onPickEmoji={handleEmoji} />
+        </div>
 
         <AutosuggestTextarea
           ref={this.setAutosuggestTextarea}
@@ -352,15 +353,13 @@ class ComposeForm extends ImmutablePureComponent {
           onSuggestionSelected={this.onSuggestionSelected}
           onPaste={onPaste}
           autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
-          />
-
-          <EmojiPicker onPickEmoji={handleEmoji} />
-        </div>
-
+        >
+          <TextareaIcons advancedOptions={advancedOptions} />
           <div className='compose-form__modifiers'>
             <UploadFormContainer />
             <PollFormContainer />
           </div>
+        </AutosuggestTextarea>
 
         <OptionsContainer
           advancedOptions={advancedOptions}

app/javascript/flavours/glitch/features/ui/components/compose_panel.js

@@ -9,9 +9,6 @@ const ComposePanel = () => (
     <SearchContainer openInRoute />
     <NavigationContainer />
     <ComposeFormContainer />
-
-    <div className='flex-spacer' />
-
     <LinkFooter withHotkeys />
   </div>
 );

app/javascript/flavours/glitch/features/ui/index.js

@@ -320,7 +320,7 @@ export default class UI extends React.Component {
   handleHotkeyNew = e => {
     e.preventDefault();
 
-    const element = this.node.querySelector('.composer--textarea textarea');
+    const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea');
 
     if (element) {
       element.focus();

app/javascript/flavours/glitch/styles/components/composer.scss

@@ -12,7 +12,8 @@
   opacity: 0.0;
 
   &.composer--spoiler--visible {
-    height: 47px;
+    height: 36px;
+    margin-bottom: 11px;
     opacity: 1.0;
   }
 
@@ -98,6 +99,9 @@
   border-radius: 4px;
   padding: 10px;
   background: $ui-primary-color;
+  min-height: 23px;
+  overflow-y: auto;
+  flex: 0 2 auto;
 
   & > header {
     margin-bottom: 5px;
@@ -218,6 +222,7 @@
   position: absolute;
   right: 5px;
   top: 5px;
+  z-index: 1;
 
   ::-webkit-scrollbar-track:hover,
   ::-webkit-scrollbar-track:active {
@@ -225,7 +230,7 @@
   }
 }
 
-.composer--textarea,
+.compose-form__autosuggest-wrapper,
 .autosuggest-input {
   position: relative;
 
@@ -284,6 +289,12 @@
   }
 }
 
+.emoji-picker-wrapper,
+.autosuggest-textarea__suggestions-wrapper {
+  position: relative;
+  height: 0;
+}
+
 .autosuggest-textarea__suggestions {
   display: block;
   position: absolute;
@@ -485,6 +496,7 @@
   box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
   border-radius: 0 0 4px 4px;
   height: 27px;
+  flex: 0 0 auto;
 
   & > * {
     display: inline-block;
@@ -575,6 +587,7 @@
   text-align: right;
   white-space: nowrap;
   overflow: hidden;
+  justify-content: flex-end;
 
   & > .count {
     display: inline-block;

app/javascript/flavours/glitch/styles/components/index.scss

@@ -818,7 +818,8 @@
   margin-top: 10px;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 10px);
+  overflow-y: hidden;
 
   .search__input {
     line-height: 18px;
@@ -834,14 +835,33 @@
   .navigation-bar {
     padding-top: 20px;
     padding-bottom: 20px;
+    flex: 0 1 48px;
+    min-height: 20px;
   }
 
   .flex-spacer {
     background: transparent;
   }
 
+  .compose-form {
+    flex: 1;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 310px;
+    padding-bottom: 71px;
+    margin-bottom: -71px;
+  }
+
+  .compose-form__autosuggest-wrapper {
+    overflow-y: auto;
+    background-color: $white;
+    border-radius: 4px 4px 0 0;
+    flex: 0 1 auto;
+  }
+
   .autosuggest-textarea__textarea {
-    max-height: 200px;
+    overflow-y: hidden;
   }
 
   .compose-form__upload-thumbnail {
@@ -851,6 +871,9 @@
 
 .navigation-panel {
   margin-top: 10px;
+  margin-bottom: 10px;
+  height: calc(100% - 20px);
+  overflow-y: auto;
 
   hr {
     border: 0;

app/javascript/flavours/glitch/styles/mastodon-light/diff.scss

@@ -125,7 +125,7 @@
 // Change the default color of several parts of the compose form
 .composer {
 
-  .composer--spoiler input, .composer--textarea textarea {
+  .composer--spoiler input, .compose-form__autosuggest-wrapper textarea {
     color: lighten($ui-base-color, 80%);
 
     &:disabled { background: lighten($simple-background-color, 10%) }