Revert "UX: allow fullscreen composer on mobile (#25787)" (#25842)

This reverts commit 13eabff739.

app/assets/javascripts/discourse/app/components/composer-container.hbs

@@ -46,47 +46,46 @@
         </span>
 
         <div class="reply-to">
+          {{#unless this.composer.model.viewFullscreen}}
+            <div class="reply-details">
+              <ComposerActionTitle
+                @model={{this.composer.model}}
+                @canWhisper={{this.composer.canWhisper}}
+              />
 
-          <div class="reply-details">
-            <ComposerActionTitle
-              @model={{this.composer.model}}
-              @canWhisper={{this.composer.canWhisper}}
-            />
-
-            {{#unless this.composer.model.viewFullscreen}}
               <PluginOutlet
                 @name="composer-action-after"
                 @outletArgs={{hash model=this.composer.model}}
               />
-            {{/unless}}
 
-            {{#unless this.composer.site.mobileView}}
+              {{#unless this.composer.site.mobileView}}
-              {{#if this.composer.model.unlistTopic}}
+                {{#if this.composer.model.unlistTopic}}
-                <span class="unlist">({{i18n "composer.unlist"}})</span>
+                  <span class="unlist">({{i18n "composer.unlist"}})</span>
-              {{/if}}
-              {{#if this.composer.isWhispering}}
-                {{#if this.composer.model.noBump}}
-                  <span class="no-bump">{{d-icon "anchor"}}</span>
                 {{/if}}
-              {{/if}}
+                {{#if this.composer.isWhispering}}
-            {{/unless}}
+                  {{#if this.composer.model.noBump}}
+                    <span class="no-bump">{{d-icon "anchor"}}</span>
+                  {{/if}}
+                {{/if}}
+              {{/unless}}
 
-            {{#if this.composer.canEdit}}
+              {{#if this.composer.canEdit}}
-              <LinkToInput
+                <LinkToInput
-                @onClick={{this.composer.displayEditReason}}
+                  @onClick={{this.composer.displayEditReason}}
-                @showInput={{this.composer.showEditReason}}
+                  @showInput={{this.composer.showEditReason}}
-                @icon="info-circle"
+                  @icon="info-circle"
-                class="display-edit-reason"
+                  class="display-edit-reason"
-              >
+                >
-                <TextField
+                  <TextField
-                  @value={{this.composer.editReason}}
+                    @value={{this.composer.editReason}}
-                  @id="edit-reason"
+                    @id="edit-reason"
-                  @maxlength="255"
+                    @maxlength="255"
-                  @placeholderKey="composer.edit_reason_placeholder"
+                    @placeholderKey="composer.edit_reason_placeholder"
-                />
+                  />
-              </LinkToInput>
+                </LinkToInput>
-            {{/if}}
+              {{/if}}
-          </div>
+            </div>
+          {{/unless}}
 
           <PluginOutlet
             @name="before-composer-controls"

app/assets/javascripts/discourse/app/components/composer-toggles.hbs

@@ -13,12 +13,14 @@
     />
   {{/if}}
 
-  <DButton
+  {{#if this.showFullScreenButton}}
-    @icon={{this.fullscreenIcon}}
+    <DButton
-    @action={{this.toggleFullscreen}}
+      @icon={{this.fullscreenIcon}}
-    @title={{this.fullscreenTitle}}
+      @action={{this.toggleFullscreen}}
-    class="btn-flat toggle-fullscreen btn-mini-toggle"
+      @title={{this.fullscreenTitle}}
-  />
+      class="btn-flat toggle-fullscreen btn-mini-toggle"
+    />
+  {{/if}}
 
   <DButton
     @icon={{this.toggleIcon}}

app/assets/javascripts/discourse/app/components/composer-toggles.js

@@ -40,4 +40,12 @@ export default Component.extend({
       ? "discourse-compress"
       : "discourse-expand";
   },
+
+  @discourseComputed("disableTextarea")
+  showFullScreenButton(disableTextarea) {
+    if (this.site.mobileView) {
+      return false;
+    }
+    return !disableTextarea;
+  },
 });

app/assets/javascripts/discourse/tests/acceptance/composer-uncategorized-test.js

@@ -26,6 +26,11 @@ acceptance(
         "textarea is disabled"
       );
 
+      assert.ok(
+        !exists("button.toggle-fullscreen"),
+        "fullscreen button is not present"
+      );
+
       const categoryChooser = selectKit(".category-chooser");
 
       await categoryChooser.expand();

app/assets/stylesheets/common/base/compose.scss

@@ -613,7 +613,8 @@ div.ac-wrap {
 body.ios-safari-composer-hacks {
   #main-outlet,
   header,
-  .grippie {
+  .grippie,
+  html:not(.fullscreen-composer) & .toggle-fullscreen {
     display: none;
   }
 
@@ -656,120 +657,3 @@ body:not(.ios-safari-composer-hacks) {
 .draft-error {
   color: var(--danger);
 }
-
-// fullscreen composer styles
-.fullscreen-composer {
-  overflow: hidden;
-
-  .profiler-results {
-    display: none;
-  }
-
-  #reply-control {
-    &.fullscreen {
-      // important needed because of inline styles when height is changed manually with grippie
-      height: 100vh !important;
-      max-height: 100%; // prevents devices from miscalculating using vh
-      z-index: z("header") + 1;
-
-      @supports (--custom: property) {
-        height: calc(var(--composer-vh, 1vh) * 100) !important;
-      }
-
-      .d-editor-preview-wrapper {
-        margin-top: 1%;
-      }
-
-      .reply-to {
-        border-bottom: 1px solid var(--primary-low);
-        margin-bottom: 0;
-        padding-bottom: 8px;
-      }
-
-      .d-editor-textarea-wrapper {
-        border: none;
-      }
-      &.show-preview .d-editor-textarea-wrapper {
-        border-right: 1px solid var(--primary-low);
-      }
-      #draft-status,
-      #file-uploading {
-        margin-left: 0;
-        text-align: initial;
-      }
-      .composer-popup {
-        top: 30px;
-      }
-      &:before {
-        content: "";
-        background: var(--secondary);
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        z-index: -1;
-        left: 0;
-      }
-    }
-  }
-}
-
-.composer-fullscreen-prompt {
-  animation: fadeIn 1s ease-in-out;
-  animation-delay: 1.5s;
-  animation-direction: reverse;
-  animation-fill-mode: forwards;
-  @media (prefers-reduced-motion) {
-    animation-duration: 0s;
-  }
-  position: fixed;
-  left: 50%;
-  top: 10%;
-  transform: translate(-50%, 0);
-  .rtl & {
-    // R2 is not smart enough to support this swap
-    transform: translate(50%, 0);
-  }
-  z-index: z("header") + 1;
-  background: var(--primary-very-high);
-  color: var(--secondary);
-  padding: 0.5em 0.75em;
-  pointer-events: none;
-  border-radius: 2px;
-  kbd {
-    background: none;
-  }
-}
-
-@media screen and (min-width: $reply-area-max-width) {
-  .sidebar-wrapper .sidebar-container {
-    .has-sidebar-page & {
-      height: auto;
-    }
-  }
-  #reply-control:not(.fullscreen) {
-    .has-sidebar-page & {
-      width: auto;
-      max-width: calc(
-        (var(--d-max-width) + (var(--d-sidebar-width) / 2)) - 1.5rem
-      );
-      margin-left: 0;
-      margin-right: 0;
-      transform: translateX(
-        calc(
-          ((100vw - var(--d-max-width) - (var(--d-sidebar-width) / 0.5)) / 2) +
-            17em + 1rem
-        )
-      );
-
-      &.hide-preview {
-        max-width: calc(740px);
-        transform: translateX(
-          calc(
-            ((100vw - 740px - var(--d-sidebar-width)) / 2) +
-              var(--d-sidebar-width)
-          )
-        );
-      }
-    }
-  }
-}

app/assets/stylesheets/desktop/compose.scss

@@ -252,3 +252,120 @@ a.toggle-preview {
 #file-uploading {
   text-align: right;
 }
+
+// fullscreen composer styles
+.fullscreen-composer {
+  overflow: hidden;
+
+  .profiler-results {
+    display: none;
+  }
+
+  #reply-control {
+    &.fullscreen {
+      // important needed because of inline styles when height is changed manually with grippie
+      height: 100vh !important;
+      max-height: 100%; // prevents devices from miscalculating using vh
+      z-index: z("header") + 1;
+
+      @supports (--custom: property) {
+        height: calc(var(--composer-vh, 1vh) * 100) !important;
+      }
+
+      .d-editor-preview-wrapper {
+        margin-top: 1%;
+      }
+
+      .reply-to {
+        border-bottom: 1px solid var(--primary-low);
+        margin-bottom: 0;
+        padding-bottom: 8px;
+      }
+
+      .d-editor-textarea-wrapper {
+        border: none;
+      }
+      &.show-preview .d-editor-textarea-wrapper {
+        border-right: 1px solid var(--primary-low);
+      }
+      #draft-status,
+      #file-uploading {
+        margin-left: 0;
+        text-align: initial;
+      }
+      .composer-popup {
+        top: 30px;
+      }
+      &:before {
+        content: "";
+        background: var(--secondary);
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: -1;
+        left: 0;
+      }
+    }
+  }
+}
+
+.composer-fullscreen-prompt {
+  animation: fadeIn 1s ease-in-out;
+  animation-delay: 1.5s;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  @media (prefers-reduced-motion) {
+    animation-duration: 0s;
+  }
+  position: fixed;
+  left: 50%;
+  top: 10%;
+  transform: translate(-50%, 0);
+  .rtl & {
+    // R2 is not smart enough to support this swap
+    transform: translate(50%, 0);
+  }
+  z-index: z("header") + 1;
+  background: var(--primary-very-high);
+  color: var(--secondary);
+  padding: 0.5em 0.75em;
+  pointer-events: none;
+  border-radius: 2px;
+  kbd {
+    background: none;
+  }
+}
+
+@media screen and (min-width: $reply-area-max-width) {
+  .sidebar-wrapper .sidebar-container {
+    .has-sidebar-page & {
+      height: auto;
+    }
+  }
+  #reply-control:not(.fullscreen) {
+    .has-sidebar-page & {
+      width: auto;
+      max-width: calc(
+        (var(--d-max-width) + (var(--d-sidebar-width) / 2)) - 1.5rem
+      );
+      margin-left: 0;
+      margin-right: 0;
+      transform: translateX(
+        calc(
+          ((100vw - var(--d-max-width) - (var(--d-sidebar-width) / 0.5)) / 2) +
+            17em + 1rem
+        )
+      );
+
+      &.hide-preview {
+        max-width: calc(740px);
+        transform: translateX(
+          calc(
+            ((100vw - 740px - var(--d-sidebar-width)) / 2) +
+              var(--d-sidebar-width)
+          )
+        );
+      }
+    }
+  }
+}