IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Adjust quote button position on mobile (#14411)

Browse Source
This commit is contained in:
Penar Musaraj 2021-09-22 03:34:29 -04:00 committed by GitHub
parent 181d89bce6
commit c599469e9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/app/components/quote-button.js
View File

@ -43,7 +43,7 @@ function regexSafeStr(str) {
export default Component.extend({ export default Component.extend({
classNames: ["quote-button"], classNames: ["quote-button"],
classNameBindings: ["visible"], classNameBindings: ["visible", "_displayFastEditInput:fast-editing"],
visible: false, visible: false,
privateCategory: alias("topic.category.read_restricted"), privateCategory: alias("topic.category.read_restricted"),
editPost: null, editPost: null,
@ -215,15 +215,11 @@ export default Component.extend({
let top = markerOffset.top; let top = markerOffset.top;
let left = markerOffset.left + Math.max(0, parentScrollLeft); let left = markerOffset.left + Math.max(0, parentScrollLeft);
if (showAtEnd) { if (showAtEnd) {
const nearRightEdgeOfScreen = top = top + 25;
$(window).width() - $quoteButton.outerWidth() < left + 10;
top = nearRightEdgeOfScreen ? top + 50 : top + 20;
left = Math.min( left = Math.min(
left + 10, left + 10,
$(window).width() - $quoteButton.outerWidth() - 10 window.innerWidth - this.element.clientWidth - 10
); );
} else { } else {
top = top - $quoteButton.outerHeight() - 5; top = top - $quoteButton.outerHeight() - 5;
@ -346,6 +342,11 @@ export default Component.extend({
this.toggleProperty("_displayFastEditInput"); this.toggleProperty("_displayFastEditInput");
schedule("afterRender", () => { schedule("afterRender", () => {
if (this.site.mobileView) {
this.element.style.left = `${
(window.innerWidth - this.element.clientWidth) / 2
}px`;
}
document.querySelector("#fast-edit-input")?.focus(); document.querySelector("#fast-edit-input")?.focus();
}); });
} else { } else {

5
app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
View File

@ -52,8 +52,9 @@
}} }}
{{d-button {{d-button
action=(action "_saveFastEdit") action=(action "_saveFastEdit")
class="btn-default btn-primary save-fast-edit" class="btn-small btn-primary save-fast-edit"
label="save" icon="pencil-alt"
label="composer.save_edit"
disabled=_saveFastEditDisabled disabled=_saveFastEditDisabled
isLoading=_isSavingFastEdit isLoading=_isSavingFastEdit
}} }}

9
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -384,6 +384,10 @@ aside.quote {
display: flex; display: flex;
} }
&.fast-editing {
opacity: 1;
}
.buttons { .buttons {
display: flex; display: flex;
} }
@ -396,7 +400,8 @@ aside.quote {
.fast-edit-container { .fast-edit-container {
display: flex; display: flex;
padding: 0.25em; padding: 0.5em;
padding-top: 0;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -407,7 +412,7 @@ aside.quote {
} }
.save-fast-edit { .save-fast-edit {
margin-top: 0.25em; margin-top: 0.5em;
} }
} }