Change: スマホから公開範囲などの選択肢を表示するときのデザインを調整 (#508)

app/javascript/mastodon/features/compose/components/circle_dropdown.jsx

@@ -148,11 +148,21 @@ class CircleDropdown extends PureComponent {
   };
 
   handleToggle = () => {
-    if (this.state.open && this.activeElement) {
+    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      this.activeElement.focus({ preventScroll: true });
+      if (this.state.open) {
+        this.props.onModalClose();
+      } else {
+        this.props.onModalOpen({
+          actions: this.options.map(option => ({ ...option, active: option.value === this.props.circleId })),
+          onClick: this.handleModalActionClick,
+        });
+      }
+    } else {
+      if (this.state.open && this.activeElement) {
+        this.activeElement.focus({ preventScroll: true });
+      }
+      this.setState({ open: !this.state.open });
     }
-
-    this.setState({ open: !this.state.open });
   };
 
   handleModalActionClick = (e) => {

app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx

@@ -142,11 +142,21 @@ class ExpirationDropdown extends PureComponent {
   };
 
   handleToggle = () => {
-    if (this.state.open && this.activeElement) {
+    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      this.activeElement.focus({ preventScroll: true });
+      if (this.state.open) {
+        this.props.onModalClose();
+      } else {
+        this.props.onModalOpen({
+          actions: this.options.map(option => ({ ...option, active: false })),
+          onClick: this.handleModalActionClick,
+        });
+      }
+    } else {
+      if (this.state.open && this.activeElement) {
+        this.activeElement.focus({ preventScroll: true });
+      }
+      this.setState({ open: !this.state.open });
     }
-
-    this.setState({ open: !this.state.open });
   };
 
   handleModalActionClick = (e) => {

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -188,11 +188,30 @@ class PrivacyDropdown extends PureComponent {
   };
 
   handleToggle = () => {
-    if (this.state.open && this.activeElement) {
+    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      this.activeElement.focus({ preventScroll: true });
+      if (this.state.open) {
+        this.props.onModalClose();
+      } else {
+        this.props.onModalOpen({
+          actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
+          onClick: this.handleModalActionClick,
+        });
+      }
+    } else {
+      if (this.state.open && this.activeElement) {
+        this.activeElement.focus({ preventScroll: true });
+      }
+      this.setState({ open: !this.state.open });
     }
+  };
 
-    this.setState({ open: !this.state.open });
+  handleModalActionClick = (e) => {
+    e.preventDefault();
+
+    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
+
+    this.props.onModalClose();
+    this.props.onChange(value);
   };
 
   handleKeyDown = e => {

app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx

@@ -165,11 +165,30 @@ class SearchabilityDropdown extends PureComponent {
   };
 
   handleToggle = () => {
-    if (this.state.open && this.activeElement) {
+    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      this.activeElement.focus({ preventScroll: true });
+      if (this.state.open) {
+        this.props.onModalClose();
+      } else {
+        this.props.onModalOpen({
+          actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
+          onClick: this.handleModalActionClick,
+        });
+      }
+    } else {
+      if (this.state.open && this.activeElement) {
+        this.activeElement.focus({ preventScroll: true });
+      }
+      this.setState({ open: !this.state.open });
     }
+  };
 
-    this.setState({ open: !this.state.open });
+  handleModalActionClick = (e) => {
+    e.preventDefault();
+
+    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
+
+    this.props.onModalClose();
+    this.props.onChange(value);
   };
 
   handleKeyDown = e => {

app/javascript/mastodon/features/compose/containers/privacy_dropdown_container.js

@@ -17,11 +17,11 @@ const mapDispatchToProps = dispatch => ({
   },
 
   isUserTouching,
-  onModalOpen: props => dispatch(openModal({
+  onModalOpen: props => dispatch(openModal({  // kmyblue: Do not remove
     modalType: 'ACTIONS',
     modalProps: props,
   })),
-  onModalClose: () => dispatch(closeModal({
+  onModalClose: () => dispatch(closeModal({  // kmyblue: Do not remove
     modalType: undefined,
     ignoreFocus: false,
   })),