Merge branch 'staging'

mstdn-plusminus-io · Apr 10, 2023 · c04f2d2 · c04f2d2
2 parents 6b822a0 + 7a8c9f8
commit c04f2d2
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 37 deletions.
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -273,7 +273,7 @@ class ComposeForm extends ImmutablePureComponent {
     }
 
     return (
-      <form className='compose-form' onSubmit={this.handleSubmit}>
+      <form className='compose-form' onSubmit={this.handleSubmit} style={this.props.style}>
         <WarningContainer />
 
         <ReplyIndicatorContainer />
@@ -375,6 +375,13 @@ class ComposeForm extends ImmutablePureComponent {
 
             <div className='character-counter__wrapper'>
               <CharacterCounter max={this.state.maxCharacters} text={this.getFulltextForCharacterCounting()} />
+              <div className='compose-form__publish-button-wrapper'>
+                <Button
+                  type='submit'
+                  disabled={!this.canSubmit()}
+                  block
+                />
+              </div>
             </div>
           </div>
         </div>

diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -23,6 +23,7 @@ import ComposePanel from './compose_panel';
 import NavigationPanel from './navigation_panel';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { scrollRight } from '../../../scroll';
+import ComposeHalfModal from './compose_half_modal';
 
 const componentMap = {
   'COMPOSE': Compose,
@@ -156,6 +157,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
               <NavigationPanel />
             </div>
           </div>
+          <ComposeHalfModal />
         </div>
       );
     }

diff --git a/app/javascript/mastodon/features/ui/components/compose_half_modal.js b/app/javascript/mastodon/features/ui/components/compose_half_modal.js
@@ -0,0 +1,54 @@
+/* eslint-disable react/jsx-no-bind */
+
+import { throttle } from 'lodash';
+import React from 'react';
+import ComposeFormContainer from '../../compose/containers/compose_form_container';
+
+export default class ComposeHalfModal extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      offsetTop: 0,
+      pageTop: 0,
+      height: 0,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+    window.visualViewport.addEventListener('scroll', this.handleScroll);
+    window.visualViewport.addEventListener('resize', this.handleScroll);
+
+    this.handleScroll();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+    window.visualViewport.removeEventListener('scroll', this.handleScroll);
+    window.visualViewport.removeEventListener('resize', this.handleScroll);
+  }
+
+  handleScroll = throttle(() => {
+    const { height, offsetTop, pageTop } = window.visualViewport;
+    this.setState({
+      offsetTop,
+      pageTop,
+      height,
+    });
+  }, 15);
+
+  closeComposeHalfModal = () => {
+    document.documentElement.classList.remove('show-compose-half-modal');
+  };
+
+  render() {
+    return (
+      <div className={'compose-half-modal'} style={{ height: this.state.pageTop + this.state.height }}>
+        <ComposeFormContainer showClose onClose={this.closeComposeHalfModal} style={{ bottom: 0 }} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js
@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
 import Icon from 'mastodon/components/icon';
-import ComposeFormContainer from '../../compose/containers/compose_form_container';
 
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
@@ -38,12 +37,17 @@ class Header extends React.PureComponent {
   };
 
   openComposeHalfModal = () => {
-    document.documentElement.classList.add('show-compose-half-modal');
-  }
+    // const scrollChildren = document.querySelector('.scrollable > div');
+    // if (scrollChildren) {
+    //   const { pageTop } = window.visualViewport;
+    //   scrollChildren.style.top = `${-pageTop}px`;
+    //   scrollChildren.dataset.pageTop = pageTop;
+    // }
 
-  closeComposeHalfModal = () => {
-    document.documentElement.classList.remove('show-compose-half-modal');
-  }
+    setTimeout(() => {
+      document.documentElement.classList.add('show-compose-half-modal');
+    }, 0);
+  };
 
   render () {
     const { signedIn } = this.context.identity;
@@ -64,7 +68,6 @@ class Header extends React.PureComponent {
         <>
           {useHalfModal ? (
             <>
-              <div className={'compose-half-modal'}><ComposeFormContainer showClose onClose={this.closeComposeHalfModal} /></div>
               <div className={`button ${isBottomRightButton ? 'bottom_right' : ''}`} onClick={this.openComposeHalfModal} onKeyUp={this.openComposeHalfModal}>
                 {buttonInner}
               </div>

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -729,6 +729,10 @@ body > [data-popper-placement] {
     .character-counter__wrapper {
       align-self: center;
       margin-right: 4px;
+
+      .compose-form__publish-button-wrapper {
+        display: none;
+      }
     }
   }
 
@@ -2271,6 +2275,7 @@ a.account__display-name {
       display: flex;
       justify-content: flex-end;
       min-width: 285px;
+      min-height: 100dvh;
 
       &--start {
         justify-content: flex-start;
@@ -2423,15 +2428,25 @@ $ui-header-height: 55px;
   overflow: hidden;
 }
 
+.character-counter__wrapper .compose-form__publish-button-wrapper {
+  display: none;
+}
+
 .compose-half-modal {
   display: none;
-  position: fixed;
-  bottom: 0;
+  position: absolute;
   left: 0;
   right: 0;
-  background: $ui-base-color;
   z-index: 1;
 
+  .compose-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background: $ui-base-color;
+  }
+
   .compose-form__publish-button-wrapper {
     display: flex;
     justify-content: space-between;
@@ -2443,38 +2458,56 @@ $ui-header-height: 55px;
   }
 }
 
-html.show-compose-half-modal {
-  .compose-half-modal {
-    display: block;
-    max-height: 100dvh;
-    overflow: auto;
-  }
+@media screen and (max-width: (600px + (285px * 1) + (10px * 1))) {
+  html.show-compose-half-modal {
+    .ui__header__links .button {
+      display: none !important;
+    }
 
-  .compose-half-modal,
-  .compose-half-modal * {
-    touch-action: auto;
-  }
+    .compose-half-modal {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
 
-  .columns-area__panels {
-    filter: brightness(0.5);
+    .compose-half-modal,
+    .compose-half-modal * {
+      touch-action: auto;
+    }
 
-    .navigation-panel {
-      position: sticky;
-      top: 0;
+    .columns-area__panels__pane,
+    .columns-area__panels__main {
+      filter: brightness(0.5);
+      pointer-events: none !important;
     }
-  }
 
-  .columns-area__panels,
-  .columns-area__panels * {
-    pointer-events: none !important;
-  }
+    .columns-area__panels {
+      .navigation-panel {
+        position: sticky;
+        top: 0;
+      }
+    }
 
-  .autosuggest-textarea__textarea {
-    resize: none;
-  }
+    .autosuggest-textarea__textarea {
+      resize: none;
+    }
 
-  .compose-form__uploads-wrapper:empty {
-    display: none;
+    .compose-form__uploads-wrapper:empty {
+      display: none;
+    }
+
+    // .scrollable {
+    //   position: relative;
+    //   height: 100%;
+    //   overflow: hidden;
+    //   contain: size;
+
+    //   > * {
+    //     position: relative;
+    //   }
+    // }
   }
 }
 

diff --git a/app/javascript/styles/single-column-chat-dark/diff.scss b/app/javascript/styles/single-column-chat-dark/diff.scss
@@ -1,6 +1,14 @@
 // UserCSSで動確するとき用
 // @import "../mastodon/variables.scss";
 
+.character-counter__wrapper .compose-form__publish-button-wrapper {
+  display: none;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    display: block !important;
+  }
+}
+
 @media screen and (min-width: (600px + (285px * 1) + (10px * 1))) {
   ::-webkit-scrollbar-thumb {
     border-right: 2px solid transparent !important;
@@ -84,6 +92,7 @@
       max-width: 220px !important;
       /* from slack sidebar width */
       flex-shrink: 0;
+      min-height: 100dvh;
     }
 
     /* サイドバーがスクロールできるようにする */
@@ -672,4 +681,28 @@
       max-height: 66vh !important;
     }
   }
+
+  .character-counter__wrapper {
+    height: 30px;
+    margin-right: -4px !important;
+    display: flex;
+    align-items: center;
+
+    .character-counter {
+      margin-right: 0.5em;
+    }
+
+    .compose-form__publish-button-wrapper {
+      display: block;
+      height: 100%;
+
+      button {
+        height: 100%;
+      }
+    }
+  }
+
+  .compose-form__publish {
+    display: none !important;
+  }
 }
diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb
@@ -25,7 +25,7 @@ def suffix
     end
 
     def revision
-      2
+      3
     end
 
     def to_a
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ def suffix @@
         end
         def revision
         end
         def to_a
@@ Expand Down @@