Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This reverts commit 13eabff739.
This commit is contained in:
Penar Musaraj 2024-02-23 12:21:26 -05:00 committed by GitHub
parent dd292b31cc
commit b205abadfc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 172 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/assets/javascripts/discourse/app/components/composer-container.hbs
View File

@ -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}}
{{/unless}}
{{#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}}
</div>
{{#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>
{{/unless}}
<PluginOutlet
@name="before-composer-controls"

14
app/assets/javascripts/discourse/app/components/composer-toggles.hbs
View File

@ -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}}

8
app/assets/javascripts/discourse/app/components/composer-toggles.js
View File

@ -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
app/assets/javascripts/discourse/tests/acceptance/composer-uncategorized-test.js
View File

@ -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();

120
app/assets/stylesheets/common/base/compose.scss
View File

@ -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)
)
);
}
}
}
}

117
app/assets/stylesheets/desktop/compose.scss
View File

@ -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)
)
);
}
}
}
}