Linkify links in task title

This commit is contained in:
Raimund Schlüßler 2019-01-06 21:36:12 +01:00
parent 41e4544b45
commit bbe2719dff
No known key found for this signature in database
GPG key ID: 036FA7EB1A599178
6 changed files with 110 additions and 20 deletions

View file

@ -356,7 +356,7 @@
overflow-y: auto;
}
.task-body .title-wrapper span.title a {
.task-body .task-info-wrapper .title span a {
cursor: pointer;
text-decoration: underline;
}

75
package-lock.json generated
View file

@ -6448,14 +6448,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -6475,8 +6473,7 @@
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
@ -6624,7 +6621,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -9316,6 +9312,12 @@
"merge-stream": "^1.0.1"
}
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"optional": true
},
"js-base64": {
"version": "2.4.9",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@ -9343,8 +9345,7 @@
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
"dev": true
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
},
"js-yaml": {
"version": "3.12.0",
@ -9597,6 +9598,16 @@
"type-check": "~0.3.2"
}
},
"linkifyjs": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.7.tgz",
"integrity": "sha512-Cbn77BnYEslpAObZZoP6GVQHF1j5T6RsDydNq5RVxIy4eiZAiADRx7qHfWzfEMQecc1PtZFog1AsCGGX2WjQLA==",
"requires": {
"jquery": "^3.3.1",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
},
"load-json-file": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@ -9961,7 +9972,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@ -10937,8 +10947,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"object-copy": {
"version": "0.1.0",
@ -12470,6 +12479,16 @@
"sisteransi": "^0.1.1"
}
},
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"optional": true,
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"proto-list": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@ -12680,6 +12699,30 @@
}
}
},
"react": {
"version": "16.7.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
"integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
"optional": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"scheduler": "^0.12.0"
}
},
"react-dom": {
"version": "16.7.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
"integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
"optional": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"scheduler": "^0.12.0"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@ -13975,6 +14018,16 @@
"xmlchars": "^1.3.1"
}
},
"scheduler": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
"integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
"optional": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"schema-utils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",

View file

@ -30,6 +30,7 @@
"cdav-library": "github:nextcloud/cdav-library#0d5be948bbe5682ac350f8534c4459885e5eb25d",
"ical.js": "~1.3.0",
"jstimezonedetect": "",
"linkifyjs": "~2.1.7",
"nextcloud-vue": "^0.4.6",
"p-limit": "^2.1.0",
"uuid": "^3.3.2",

View file

@ -83,7 +83,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</span>
<div class="task-info-wrapper">
<div class="title">
<span>{{ task.summary }}</span>
<span v-linkify="task.summary" />
</div>
<div class="categories-list">
<span v-for="category in task.categories" :key="category" class="category">
@ -124,12 +124,14 @@ import { overdue, valid, sort } from '../store/storeHelper'
import ClickOutside from 'vue-click-outside'
import { mapGetters, mapActions } from 'vuex'
import focus from '../directives/focus'
import { linkify } from '../directives/linkify.js'
export default {
name: 'TaskBodyComponent',
directives: {
ClickOutside,
focus
focus,
linkify
},
filters: {
formatDate: function(date) {

View file

@ -40,12 +40,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
/>
</a>
<div v-click-outside="() => finishEditing('summary')">
<div :class="{'strike-through': task.completed}"
<div v-linkify="task.summary"
:class="{'strike-through': task.completed}"
class="title-text"
@click="editProperty('summary')"
>
{{ task.summary }}
</div>
/>
<div class="expandable-container">
<div class="expandingArea active">
<pre><span>{{ tmpTask.summary }}</span><br></pre>
@ -285,6 +284,7 @@ import { valid, overdue } from '../store/storeHelper'
import { DatetimePicker, Multiselect } from 'nextcloud-vue'
import ClickOutside from 'vue-click-outside'
import { linkify } from '../directives/linkify.js'
export default {
components: {
@ -292,7 +292,8 @@ export default {
Multiselect
},
directives: {
ClickOutside
ClickOutside,
linkify
},
filters: {
startDate: function(date) {
@ -468,7 +469,7 @@ export default {
}),
...mapGetters({
task: 'getTaskByRoute'
})
}),
},
methods: {
...mapActions([

33
src/directives/linkify.js Normal file
View file

@ -0,0 +1,33 @@
/**
* Nextcloud - Tasks
*
* @author Raimund Schlüßler
* @copyright 2019 Raimund Schlüßler <raimund.schluessler@mailbox.org>
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
* License as published by the Free Software Foundation; either
* version 3 of the License, or any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
'use strict'
import linkifyStr from 'linkifyjs/string'
function linkify(el, binding) {
el.innerHTML = linkifyStr(binding.value, {
defaultProtocol: 'https'
})
}
export {
linkify
}