github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-19 06:33:07 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Remove share as link fallback on touch devices (#9332)

Browse Source
This commit is contained in:
Penar Musaraj 2020-04-01 15:18:30 -04:00 committed by GitHub
parent 65d9a9c1ce
commit b82f6098ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/discourse/components/share-panel.js
View File

@ -1,10 +1,10 @@
import { isEmpty } from "@ember/utils"; import { isEmpty } from "@ember/utils";
import { alias } from "@ember/object/computed"; import { alias } from "@ember/object/computed";
import { schedule } from "@ember/runloop";
import Component from "@ember/component"; import Component from "@ember/component";
import { escapeExpression } from "discourse/lib/utilities"; import { escapeExpression } from "discourse/lib/utilities";
import discourseComputed from "discourse-common/utils/decorators"; import discourseComputed from "discourse-common/utils/decorators";
import Sharing from "discourse/lib/sharing"; import Sharing from "discourse/lib/sharing";
import { later } from "@ember/runloop";
export default Component.extend({ export default Component.extend({
tagName: null, tagName: null,
@ -43,31 +43,14 @@ export default Component.extend({
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
later(() => {
const shareUrl = this.shareUrl; if (this.element) {
const $linkInput = $(this.element.querySelector(".topic-share-url")); const textArea = this.element.querySelector(".topic-share-url");
const $linkForTouch = $( textArea.style.height = textArea.scrollHeight + "px";
this.element.querySelector(".topic-share-url-for-touch a") textArea.focus();
); textArea.setSelectionRange(0, this.shareUrl.length);
schedule("afterRender", () => {
if (!this.capabilities.touch) {
$linkForTouch.parent().remove();
$linkInput
.val(shareUrl)
.select()
.focus();
} else {
$linkInput.remove();
$linkForTouch.attr("href", shareUrl).text(shareUrl);
const range = window.document.createRange();
range.selectNode($linkForTouch[0]);
window.getSelection().addRange(range);
} }
}); }, 200);
}, },
actions: { actions: {

22
app/assets/javascripts/discourse/components/share-popup.js
View File

@ -1,5 +1,5 @@
import { isEmpty } from "@ember/utils"; import { isEmpty } from "@ember/utils";
import { bind, scheduleOnce } from "@ember/runloop"; import { bind, scheduleOnce, later } from "@ember/runloop";
import Component from "@ember/component"; import Component from "@ember/component";
import { wantsNewWindow } from "discourse/lib/intercept-click"; import { wantsNewWindow } from "discourse/lib/intercept-click";
import { longDateNoYear } from "discourse/lib/formatter"; import { longDateNoYear } from "discourse/lib/formatter";
@ -35,21 +35,15 @@ export default Component.extend({
}, },
_focusUrl() { _focusUrl() {
const link = this.link;
if (!this.capabilities.touch) {
const $linkInput = $("#share-link input");
$linkInput.val(link);
// Wait for the fade-in transition to finish before selecting the link: // Wait for the fade-in transition to finish before selecting the link:
window.setTimeout(() => $linkInput.select().focus(), 160); later(() => {
} else { if (this.element) {
const $linkForTouch = $("#share-link .share-for-touch a"); const linkInput = this.element.querySelector("#share-link input");
$linkForTouch.attr("href", link); linkInput.value = this.link;
$linkForTouch.text(link); linkInput.setSelectionRange(0, this.link.length);
const range = window.document.createRange(); linkInput.focus();
range.selectNode($linkForTouch[0]);
window.getSelection().addRange(range);
} }
}, 200);
}, },
_showUrl($target, url) { _showUrl($target, url) {

1
app/assets/javascripts/discourse/templates/components/share-panel.hbs
View File

@ -4,7 +4,6 @@
<div class="body"> <div class="body">
{{textarea value=shareUrl class="topic-share-url"}} {{textarea value=shareUrl class="topic-share-url"}}
<div class="topic-share-url-for-touch"><a></a></div>
<div class="sources"> <div class="sources">
{{#each sources as |source|}} {{#each sources as |source|}}

1
app/assets/javascripts/discourse/templates/components/share-popup.hbs
View File

@ -8,7 +8,6 @@
<div> <div>
<input type="text"> <input type="text">
<div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
</div> </div>
<div class="actions"> <div class="actions">

14
app/assets/stylesheets/common/base/share_link.scss
View File

@ -15,12 +15,6 @@
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
} }
.share-for-touch .overflow-ellipsis {
clear: both;
}
.share-for-touch {
margin: 14px 0;
}
.title { .title {
margin-bottom: s(1); margin-bottom: s(1);
@ -107,11 +101,3 @@
} }
} }
} }
.discourse-no-touch #share-link .share-for-touch {
display: none;
}
.discourse-touch #share-link input[type="text"] {
display: none;
}

8
app/assets/stylesheets/common/components/share-and-invite-modal.scss
View File

@ -44,14 +44,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.topic-share-url-for-touch {
a {
word-break: break-all;
font-size: $font-up-1;
}
}
.topic-share-url-for-touch,
.topic-share-url { .topic-share-url {
margin-bottom: s(2); margin-bottom: s(2);
} }