From d838856711ce97829a59658d463b29047f84f49d Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 24 Aug 2017 14:13:29 +0100 Subject: [PATCH] Popup on copy link. Former-commit-id: e483df4402733b102d11b10436ff74aad11dfa7c [formerly 6d761c2ee838a9766f755b6c54cdc2ca388b5934] [formerly 1365e9e067af021ad0c680bae3af963dc4a90b28 [formerly 889871ec0a1fac26dee1b3152d0f87e2a7af2c65]] Former-commit-id: ba443a90fded4501c0a6872eb293c14b2923c627 [formerly d21c6b9ab41869d2b10aa99853bc5b6931b63d96] Former-commit-id: 7c19b231861797c62dc35c1e8a28f4ceeb8761c7 --- assets/src/components/files/Editor.vue | 2 +- assets/src/components/files/Listing.vue | 10 ++--- assets/src/components/files/ListingItem.vue | 4 +- assets/src/components/prompts/Copy.vue | 2 +- assets/src/components/prompts/Delete.vue | 4 +- assets/src/components/prompts/Error.vue | 31 --------------- assets/src/components/prompts/FileList.vue | 4 +- assets/src/components/prompts/Info.vue | 2 +- assets/src/components/prompts/Move.vue | 2 +- .../src/components/prompts/NewArchetype.vue | 4 +- assets/src/components/prompts/NewDir.vue | 2 +- assets/src/components/prompts/NewFile.vue | 2 +- assets/src/components/prompts/Prompts.vue | 8 ---- assets/src/components/prompts/Rename.vue | 2 +- assets/src/components/prompts/Share.vue | 21 ++++++---- assets/src/components/prompts/Success.vue | 23 ----------- assets/src/css/base.css | 1 - assets/src/css/prompts.css | 21 ++++++++++ assets/src/css/styles.css | 12 ++++++ assets/src/i18n/en.yaml | 2 + assets/src/i18n/pt.yaml | 2 + assets/src/main.js | 38 +++++++++++++++++++ assets/src/views/GlobalSettings.vue | 13 +++---- assets/src/views/ProfileSettings.vue | 11 +++--- assets/src/views/User.vue | 12 +++--- assets/src/views/Users.vue | 2 +- package-lock.json | 5 +++ package.json | 1 + rice-box.go.REMOVED.git-id | 2 +- 29 files changed, 129 insertions(+), 116 deletions(-) delete mode 100644 assets/src/components/prompts/Error.vue delete mode 100644 assets/src/components/prompts/Success.vue diff --git a/assets/src/components/files/Editor.vue b/assets/src/components/files/Editor.vue index 49207996..f0367f3a 100644 --- a/assets/src/components/files/Editor.vue +++ b/assets/src/components/files/Editor.vue @@ -134,7 +134,7 @@ export default { }) .catch(error => { buttons.done(button) - this.$store.commit('showError', error) + this.$showError(error) this.$store.commit('setSchedule', '') }) } diff --git a/assets/src/components/files/Listing.vue b/assets/src/components/files/Listing.vue index b1c07ac3..2b8eb7f0 100644 --- a/assets/src/components/files/Listing.vue +++ b/assets/src/components/files/Listing.vue @@ -210,17 +210,13 @@ export default { if (this.$store.state.clipboard.key === 'x') { api.move(items).then(() => { this.$store.commit('setReload', true) - }).catch(error => { - this.$store.commit('showError', error) - }) + }).catch(this.$showError) return } api.copy(items).then(() => { this.$store.commit('setReload', true) - }).catch(error => { - this.$store.commit('showError', error) - }) + }).catch(this.$showError) }, resizeEvent () { // Update the columns size based on the window width. @@ -348,7 +344,7 @@ export default { }) .catch(error => { finish() - this.$store.commit('showError', error) + this.$showError(error) }) return false diff --git a/assets/src/components/files/ListingItem.vue b/assets/src/components/files/ListingItem.vue index c92c91d1..8b8a6496 100644 --- a/assets/src/components/files/ListingItem.vue +++ b/assets/src/components/files/ListingItem.vue @@ -109,9 +109,7 @@ export default { .then(() => { this.$store.commit('setReload', true) }) - .catch(error => { - this.$store.commit('showError', error) - }) + .catch(this.$showError) }, click: function (event) { if (this.selectedCount !== 0) event.preventDefault() diff --git a/assets/src/components/prompts/Copy.vue b/assets/src/components/prompts/Copy.vue index 972782cc..3900577c 100644 --- a/assets/src/components/prompts/Copy.vue +++ b/assets/src/components/prompts/Copy.vue @@ -56,7 +56,7 @@ export default { }) .catch(error => { buttons.done('copy') - this.$store.commit('showError', error) + this.$showError(error) }) } } diff --git a/assets/src/components/prompts/Delete.vue b/assets/src/components/prompts/Delete.vue index ae0399b5..44a71c88 100644 --- a/assets/src/components/prompts/Delete.vue +++ b/assets/src/components/prompts/Delete.vue @@ -43,7 +43,7 @@ export default { }) .catch(error => { buttons.done('delete') - this.$store.commit('showError', error) + this.$showError(error) }) return @@ -70,7 +70,7 @@ export default { .catch(error => { buttons.done('delete') this.$store.commit('setReload', true) - this.$store.commit('showError', error) + this.$showError(error) }) } } diff --git a/assets/src/components/prompts/Error.vue b/assets/src/components/prompts/Error.vue deleted file mode 100644 index fd319762..00000000 --- a/assets/src/components/prompts/Error.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/assets/src/components/prompts/FileList.vue b/assets/src/components/prompts/FileList.vue index 652dc742..15e9c538 100644 --- a/assets/src/components/prompts/FileList.vue +++ b/assets/src/components/prompts/FileList.vue @@ -53,7 +53,7 @@ export default { // so we fetch the data from the previous directory. api.fetch(url.removeLastDir(this.$route.path)) .then(this.fillOptions) - .catch(this.showError) + .catch(this.$showError) }, methods: { fillOptions (req) { @@ -96,7 +96,7 @@ export default { api.fetch(uri) .then(this.fillOptions) - .catch(this.showError) + .catch(this.$showError) }, touchstart (event) { let url = event.currentTarget.dataset.url diff --git a/assets/src/components/prompts/Info.vue b/assets/src/components/prompts/Info.vue index be7fdca2..ff3a7991 100644 --- a/assets/src/components/prompts/Info.vue +++ b/assets/src/components/prompts/Info.vue @@ -111,7 +111,7 @@ export default { api.checksum(link, hash) .then((hash) => { event.target.innerHTML = hash }) - .catch(error => { this.$store.commit('showError', error) }) + .catch(this.$showError) } } } diff --git a/assets/src/components/prompts/Move.vue b/assets/src/components/prompts/Move.vue index 7155d53f..7e7f41e3 100644 --- a/assets/src/components/prompts/Move.vue +++ b/assets/src/components/prompts/Move.vue @@ -56,7 +56,7 @@ export default { }) .catch(error => { buttons.done('move') - this.$store.commit('showError', error) + this.$showError(error) }) event.preventDefault() diff --git a/assets/src/components/prompts/NewArchetype.vue b/assets/src/components/prompts/NewArchetype.vue index 9228a7ee..0356bcc5 100644 --- a/assets/src/components/prompts/NewArchetype.vue +++ b/assets/src/components/prompts/NewArchetype.vue @@ -37,9 +37,7 @@ export default { .then((url) => { this.$router.push({ path: url }) }) - .catch(error => { - this.$store.commit('showError', error) - }) + .catch(this.$showError) }, new (url, type) { url = removePrefix(url) diff --git a/assets/src/components/prompts/NewDir.vue b/assets/src/components/prompts/NewDir.vue index 42559a0f..25137e6b 100644 --- a/assets/src/components/prompts/NewDir.vue +++ b/assets/src/components/prompts/NewDir.vue @@ -43,7 +43,7 @@ export default { api.post(uri) .then(() => { this.$router.push({ path: uri }) }) - .catch(error => { this.$store.commit('showError', error) }) + .catch(this.$showError) // Close the prompt this.$store.commit('closeHovers') diff --git a/assets/src/components/prompts/NewFile.vue b/assets/src/components/prompts/NewFile.vue index 94ea0c94..c43826c1 100644 --- a/assets/src/components/prompts/NewFile.vue +++ b/assets/src/components/prompts/NewFile.vue @@ -44,7 +44,7 @@ export default { // Create the new file. api.post(uri) .then(() => { this.$router.push({ path: uri }) }) - .catch(error => { this.$store.commit('showError', error) }) + .catch(this.$showError) // Close the prompt. this.$store.commit('closeHovers') diff --git a/assets/src/components/prompts/Prompts.vue b/assets/src/components/prompts/Prompts.vue index a840ae82..84bc4e12 100644 --- a/assets/src/components/prompts/Prompts.vue +++ b/assets/src/components/prompts/Prompts.vue @@ -9,8 +9,6 @@ - - @@ -27,8 +25,6 @@ import Rename from './Rename' import Download from './Download' import Move from './Move' import Copy from './Copy' -import Error from './Error' -import Success from './Success' import NewFile from './NewFile' import NewDir from './NewDir' import NewArchetype from './NewArchetype' @@ -47,9 +43,7 @@ export default { NewArchetype, Schedule, Rename, - Error, Download, - Success, Move, Copy, Share, @@ -70,8 +64,6 @@ export default { }, computed: { ...mapState(['show', 'plugins']), - showError: function () { return this.show === 'error' }, - showSuccess: function () { return this.show === 'success' }, showInfo: function () { return this.show === 'info' }, showHelp: function () { return this.show === 'help' }, showDelete: function () { return this.show === 'delete' }, diff --git a/assets/src/components/prompts/Rename.vue b/assets/src/components/prompts/Rename.vue index 434bf7cd..231c34bf 100644 --- a/assets/src/components/prompts/Rename.vue +++ b/assets/src/components/prompts/Rename.vue @@ -68,7 +68,7 @@ export default { } this.$store.commit('setReload', true) }).catch(error => { - this.$store.commit('showError', error) + this.$showError(error) }) this.$store.commit('closeHovers') diff --git a/assets/src/components/prompts/Share.vue b/assets/src/components/prompts/Share.vue index db2ec429..20dfbe7c 100644 --- a/assets/src/components/prompts/Share.vue +++ b/assets/src/components/prompts/Share.vue @@ -18,7 +18,7 @@ :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">delete - @@ -54,7 +54,7 @@ diff --git a/assets/src/css/base.css b/assets/src/css/base.css index f5582857..e6f4018a 100644 --- a/assets/src/css/base.css +++ b/assets/src/css/base.css @@ -2,7 +2,6 @@ body { font-family: 'Roboto', sans-serif; padding-top: 4em; background-color: #f8f8f8; - user-select: none; color: #212121; } diff --git a/assets/src/css/prompts.css b/assets/src/css/prompts.css index b1a7fbe6..e85d9e0f 100644 --- a/assets/src/css/prompts.css +++ b/assets/src/css/prompts.css @@ -206,3 +206,24 @@ margin-right: .5em; border: 1px solid #dadada; } + +.prompt#share .action.copy-clipboard::after { + content: 'Copied!'; + position: absolute; + left: -25%; + width: 150%; + font-size: .6em; + text-align: center; + background: #44a6f5; + color: #fff; + padding: .5em .2em; + border-radius: .4em; + top: -2em; + transition: .1s ease opacity; + opacity: 0; +} + +.prompt#share .action.copy-clipboard.active::after { + opacity: 1; +} + diff --git a/assets/src/css/styles.css b/assets/src/css/styles.css index f9c2f488..a90d60bd 100644 --- a/assets/src/css/styles.css +++ b/assets/src/css/styles.css @@ -1,4 +1,5 @@ @import "~normalize.css/normalize.css"; +@import "~noty/lib/noty.css"; @import "./fonts.css"; @import "./base.css"; @import "./header.css"; @@ -180,6 +181,17 @@ * PROMPT * * * * * * * * * * * * * * * * */ +.noty_buttons { + text-align: right; + padding: 0 10px 10px !important; +} + +.noty_buttons button { + background: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0,0,0,0.1); + box-shadow: 0 0 0 0; + font-size: 14px; +} /* * * * * * * * * * * * * * * * * FOOTER * diff --git a/assets/src/i18n/en.yaml b/assets/src/i18n/en.yaml index 1539d8d8..a52155ca 100644 --- a/assets/src/i18n/en.yaml +++ b/assets/src/i18n/en.yaml @@ -31,6 +31,8 @@ buttons: update: Update upload: Upload permalink: Get Permanent Link +success: + linkCopied: Link copied! errors: forbidden: You're not welcome here. internal: Something really went wrong. diff --git a/assets/src/i18n/pt.yaml b/assets/src/i18n/pt.yaml index e3d8b2ff..d7885916 100644 --- a/assets/src/i18n/pt.yaml +++ b/assets/src/i18n/pt.yaml @@ -31,6 +31,8 @@ buttons: update: Atualizar upload: Enviar permalink: Obter link permanente +success: + linkCopied: Link copiado! errors: forbidden: Tu não és bem-vindo aqui. internal: Algo correu bastante mal. diff --git a/assets/src/main.js b/assets/src/main.js index 33c69173..57e7b930 100644 --- a/assets/src/main.js +++ b/assets/src/main.js @@ -3,9 +3,47 @@ import App from './App' import store from './store' import router from './router' import i18n from './i18n' +import Noty from 'noty' Vue.config.productionTip = true +const notyDefault = { + type: 'info', + layout: 'bottomRight', + timeout: 1000, + progressBar: true +} + +Vue.prototype.$noty = function (opts) { + new Noty(Object.assign({}, notyDefault, opts)).show() +} + +Vue.prototype.$showSuccess = function (message) { + new Noty(Object.assign({}, notyDefault, { + text: message, + type: 'success' + })).show() +} + +Vue.prototype.$showError = function (error) { + // TODO: add btns: close and report issue + let n = new Noty(Object.assign({}, notyDefault, { + text: error, + type: 'error', + timeout: null, + buttons: [ + Noty.button(i18n.t('buttons.reportIssue'), 'cancel', function () { + window.open('https://github.com/hacdias/filemanager/issues/new') + }), + Noty.button(i18n.t('buttons.close'), '', function () { + n.close() + }) + ] + })) + + n.show() +} + /* eslint-disable no-new */ new Vue({ el: '#app', diff --git a/assets/src/views/GlobalSettings.vue b/assets/src/views/GlobalSettings.vue index 28c23829..75963c27 100644 --- a/assets/src/views/GlobalSettings.vue +++ b/assets/src/views/GlobalSettings.vue @@ -45,7 +45,7 @@