Skip to content

Commit

Permalink
Revert "UX: allow fullscreen composer on mobile (#25787)" (#25842)
Browse files Browse the repository at this point in the history 
This reverts commit 13eabff.
  • Loading branch information
@pmusaraj
pmusaraj committed Feb 23, 2024
1 parent dd292b3 commit b205aba
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 157 deletions.
65 changes: 32 additions & 33 deletions app/assets/javascripts/discourse/app/components/composer-container.hbs
View file
Expand Up @@ -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}}
{{#if this.composer.model.unlistTopic}}
<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>
{{#unless this.composer.site.mobileView}}
{{#if this.composer.model.unlistTopic}}
<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}}
{{/unless}}

{{#if this.composer.canEdit}}
<LinkToInput
@onClick={{this.composer.displayEditReason}}
@showInput={{this.composer.showEditReason}}
@icon="info-circle"
class="display-edit-reason"
>
<TextField
@value={{this.composer.editReason}}
@id="edit-reason"
@maxlength="255"
@placeholderKey="composer.edit_reason_placeholder"
/>
</LinkToInput>
{{/if}}
{{/unless}}

{{#if this.composer.canEdit}}
<LinkToInput
@onClick={{this.composer.displayEditReason}}
@showInput={{this.composer.showEditReason}}
@icon="info-circle"
class="display-edit-reason"
>
<TextField
@value={{this.composer.editReason}}
@id="edit-reason"
@maxlength="255"
@placeholderKey="composer.edit_reason_placeholder"
/>
</LinkToInput>
{{/if}}
</div>
</div>
{{/unless}}

<PluginOutlet
@name="before-composer-controls"
Expand Down
14 changes: 8 additions & 6 deletions app/assets/javascripts/discourse/app/components/composer-toggles.hbs
View file
Expand Up @@ -13,12 +13,14 @@
/>
{{/if}}

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

<DButton
@icon={{this.toggleIcon}}
Expand Down
8 changes: 8 additions & 0 deletions app/assets/javascripts/discourse/app/components/composer-toggles.js
View file
Expand Up @@ -40,4 +40,12 @@ export default Component.extend({
? "discourse-compress"
: "discourse-expand";
},

@discourseComputed("disableTextarea")
showFullScreenButton(disableTextarea) {
if (this.site.mobileView) {
return false;
}
return !disableTextarea;
},
});
5 changes: 5 additions & 0 deletions app/assets/javascripts/discourse/tests/acceptance/composer-uncategorized-test.js
View file
Expand Up @@ -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();
Expand Down
120 changes: 2 additions & 118 deletions app/assets/stylesheets/common/base/compose.scss
View file
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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)
)
);
}
}
}
}
117 changes: 117 additions & 0 deletions app/assets/stylesheets/desktop/compose.scss
View file
Expand Up @@ -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)
)
);
}
}
}
}

1 comment on commit b205aba

@discoursebot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/expand-composer-button-on-mobile/296469/8

Please sign in to comment.