Directly copy calendar link to clipboard

2018-12-11 22:12:26 +01:00 · 2018-12-11 22:12:26 +01:00 · 381c09907b
commit 381c09907b
parent 9652be3f7f
5 changed files with 87 additions and 42 deletions
--- a/css/src/style.scss
+++ b/css/src/style.scss
@ -51,16 +51,10 @@
 				display: none;
 			}

-			&.caldav .app-navigation-entry-edit.caldav {
-				display: inline-block;
-				height: auto;
-			}
-
 			.app-navigation-entry-edit {
 				padding-left: 5px !important;

-				&.name,
-				&.caldav {
+				&.name {
 					display: none;
 				}
 			}
@ -78,10 +72,6 @@
 			width: calc(100% - 72px);
 		}

-		&.caldav input[type='text'] {
-			width: calc(100% - 36px);
-		}
-
 		input.action {
 			background-color: $gray_easy;
 			width: 36px;
--- a/package-lock.json
+++ b/package-lock.json
@ -3232,6 +3232,16 @@
 			"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
 			"dev": true
 		},
+		"clipboard": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+			"integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+			"requires": {
+				"good-listener": "^1.2.2",
+				"select": "^1.1.2",
+				"tiny-emitter": "^2.0.0"
+			}
+		},
 		"cliui": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@ -4144,6 +4154,11 @@
 			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
 			"dev": true
 		},
+		"delegate": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+			"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+		},
 		"delegates": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@ -6709,6 +6724,14 @@
 				}
 			}
 		},
+		"good-listener": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+			"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+			"requires": {
+				"delegate": "^3.1.2"
+			}
+		},
 		"graceful-fs": {
 			"version": "4.1.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -10052,7 +10075,7 @@
 				},
 				"semver": {
 					"version": "5.3.0",
-					"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
 					"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
 					"dev": true
 				}
@ -10159,7 +10182,7 @@
 				},
 				"camelcase-keys": {
 					"version": "2.1.0",
-					"resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+					"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
 					"integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
 					"dev": true,
 					"requires": {
@ -10204,7 +10227,7 @@
 				},
 				"load-json-file": {
 					"version": "1.1.0",
-					"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
 					"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
 					"dev": true,
 					"requires": {
@ -10223,7 +10246,7 @@
 				},
 				"meow": {
 					"version": "3.7.0",
-					"resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+					"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
 					"integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
 					"dev": true,
 					"requires": {
@ -10276,7 +10299,7 @@
 				},
 				"pify": {
 					"version": "2.3.0",
-					"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+					"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
 					"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
 					"dev": true
 				},
@ -13422,7 +13445,7 @@
 			"dependencies": {
 				"source-map": {
 					"version": "0.4.4",
-					"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
 					"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
 					"dev": true,
 					"requires": {
@ -13431,6 +13454,11 @@
 				}
 			}
 		},
+		"select": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+			"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+		},
 		"semver": {
 			"version": "5.5.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz",
@ -15240,7 +15268,7 @@
 		},
 		"tar": {
 			"version": "2.2.1",
-			"resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
 			"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
 			"dev": true,
 			"requires": {
@ -15452,6 +15480,11 @@
 				"setimmediate": "^1.0.4"
 			}
 		},
+		"tiny-emitter": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+			"integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow=="
+		},
 		"tmp": {
 			"version": "0.0.33",
 			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@ -16075,6 +16108,14 @@
 			"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
 			"integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
 		},
+		"vue-clipboard2": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz",
+			"integrity": "sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==",
+			"requires": {
+				"clipboard": "^2.0.0"
+			}
+		},
 		"vue-eslint-parser": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
 		"uuid": "^3.3.2",
 		"v-tooltip": "2.0.0-rc.33",
 		"vue": "^2.5.20",
+		"vue-clipboard2": "^0.2.1",
 		"vue-router": "3.0.2",
 		"vuex": "^3.0.1",
 		"vuex-router-sync": "^5.0.0"
--- a/src/components/TheList.vue
+++ b/src/components/TheList.vue
@ -54,7 +54,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			v-click-outside="() => resetView(calendar)"
 			:calendar-id="calendar.id"
 			:to="'/calendars/' + calendar.id"
-			:class="{edit: editing == calendar.id, caldav: caldav == calendar.id}"
+			:class="{edit: editing == calendar.id}"
 			tag="li"
 			class="list with-menu editing"
 			active-class="active"
@ -79,9 +79,15 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								</a>
 							</li>
 							<li>
-								<a @click="showCalDAVUrl(calendar)">
+								<a @click="copyCalDAVUrl($event, calendar)">
 									<span class="icon-public" />
-									<span>{{ t('tasks', 'Link') }}</span>
+									<span>
+										{{ !copied
+											? t('tasks', 'Copy private link')
+											: copySuccess
+												? t('tasks', 'Copied')
+												: t('tasks', 'Can not copy') }}
+									</span>
 								</a>
 							</li>
 							<li>
@ -122,21 +128,6 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				</form>
 				<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
 			</div>
-			<div class="app-navigation-entry-edit caldav">
-				<form>
-					<input :value="url(calendar)"
-						class="caldav"
-						readonly
-						type="text"
-					>
-					<input :title="t('tasks', 'Cancel')"
-						type="cancel"
-						value=""
-						class="action icon-close"
-						@click="resetView(calendar)"
-					>
-				</form>
-			</div>
 		</RouterLink>
 		<li v-click-outside="cancelCreate" :class="{edit: creating}" class="newList icon-add reactive editing">
 			<a class="icon icon-bw addlist sprite"
@ -211,7 +202,8 @@ export default {
 	data() {
 		return {
 			editing: '',
-			caldav: '',
+			copySuccess: false,
+			copied: false,
 			creating: false,
 			nameError: false,
 			newCalendarName: '',
@ -266,13 +258,32 @@ export default {
 				if (this.editing === calendar.id) {
 					this.editing = ''
 				}
-				if (this.caldav === calendar.id) {
-					this.caldav = ''
-				}
 				this.tooltipTarget = ''
 			},
-			showCalDAVUrl: function(calendar) {
-				this.caldav = calendar.id
+			copyCalDAVUrl(event, calendar) {
+				// change to loading status
+				event.stopPropagation()
+
+				const url = this.url(calendar)
+
+				// copy link for calendar to clipboard
+				this.$copyText(url)
+					.then(e => {
+						event.preventDefault()
+						this.copySuccess = true
+						this.copied = true
+						// Notify calendar url was copied
+						OC.Notification.showTemporary(t('tasks', 'Calendar link copied to clipboard.'))
+					}, e => {
+						this.copySuccess = false
+						this.copied = true
+						OC.Notification.showTemporary(t('tasks', 'Calendar link could not be copied to clipboard.'))
+					}).then(() => {
+						setTimeout(() => {
+							// stop loading status regardless of outcome
+							this.copied = false
+						}, 2000)
+					})
 			},
 			exportUrl(calendar) {
 				var url = calendar.url
--- a/src/main.js
+++ b/src/main.js
@ -28,6 +28,7 @@ import router from './components/TheRouter'
 import store from './store/store'
 import { sync } from 'vuex-router-sync'
 import VTooltip from 'v-tooltip'
+import VueClipboard from 'vue-clipboard2'

 // Disable on production
 Vue.config.devtools = true
@ -47,6 +48,7 @@ __webpack_public_path__ = OC.linkTo('tasks', 'js/')
 sync(store, router)

 Vue.use(VTooltip)
+Vue.use(VueClipboard)

 if (!OCA.Tasks) {
 	/**