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

@@ -134,7 +134,7 @@ export default {
         })
         .catch(error => {
           buttons.done(button)
-          this.$store.commit('showError', error)
+          this.$showError(error)
           this.$store.commit('setSchedule', '')
         })
     }

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 => {
+        }).catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
         return
       }
 
       api.copy(items).then(() => {
         this.$store.commit('setReload', true)
-      }).catch(error => {
+      }).catch(this.$showError)
-        this.$store.commit('showError', error)
-      })
     },
     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

assets/src/components/files/ListingItem.vue

@@ -109,9 +109,7 @@ export default {
         .then(() => {
           this.$store.commit('setReload', true)
         })
-        .catch(error => {
+        .catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
     },
     click: function (event) {
       if (this.selectedCount !== 0) event.preventDefault()

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)
         })
     }
   }

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)
         })
     }
   }

assets/src/components/prompts/Error.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="prompt error">
-    <i class="material-icons">error_outline</i>
-    <h3>{{ $t('prompts.error') }}</h3>
-    <pre>{{ $store.state.showMessage }}</pre>
-    <div>
-      <button @click="close"
-        autofocus
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>
-      <button @click="reportIssue"
-        class="cancel"
-        :aria-label="$t('buttons.reportIssue')"
-        :title="$t('buttons.reportIssue')">{{ $t('buttons.reportIssue') }}</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'error',
-  methods: {
-    reportIssue () {
-      window.open('https://github.com/hacdias/filemanager/issues/new')
-    },
-    close () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

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

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)
     }
   }
 }

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()

assets/src/components/prompts/NewArchetype.vue

@@ -37,9 +37,7 @@ export default {
         .then((url) => {
           this.$router.push({ path: url })
         })
-        .catch(error => {
+        .catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
     },
     new (url, type) {
       url = removePrefix(url)

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')

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')

assets/src/components/prompts/Prompts.vue

@@ -9,8 +9,6 @@
     <info v-else-if="showInfo"></info>
     <move v-else-if="showMove"></move>
     <copy v-else-if="showCopy"></copy>
-    <error v-else-if="showError"></error>
-    <success v-else-if="showSuccess"></success>
     <replace v-else-if="showReplace"></replace>
     <schedule v-else-if="show === 'schedule'"></schedule>
     <new-archetype v-else-if="show === 'new-archetype'"></new-archetype>
@@ -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' },

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')

assets/src/components/prompts/Share.vue

@@ -18,7 +18,7 @@
           :aria-label="$t('buttons.delete')"
           :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
 
-        <button class="action copy"
+        <button class="action copy-clipboard"
           :data-clipboard-text="buildLink(link.hash)"
           :aria-label="$t('buttons.copyToClipboard')"
           :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 import { getShare, deleteShare, share } from '@/utils/api'
 import moment from 'moment'
 import Clipboard from 'clipboard'
@@ -101,20 +101,25 @@ export default {
       })
       .catch(error => {
         if (error === 404) return
-        this.showError(error)
+        this.$showError(error)
       })
   },
   mounted () {
-    this.clip = new Clipboard('.copy')
+    this.clip = new Clipboard('.copy-clipboard')
+    this.clip.on('success', (e) => {
+      this.$showSuccess(this.$t('success.linkCopied'))
+    })
+  },
+  beforeDestroy () {
+    this.clip.destroy()
   },
   methods: {
-    ...mapMutations([ 'showError' ]),
     submit: function (event) {
       if (!this.time) return
 
       share(this.url, this.time, this.unit)
         .then(result => { this.links.push(result); this.sort() })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     getPermalink (event) {
       share(this.url)
@@ -123,7 +128,7 @@ export default {
           this.sort()
           this.hasPermanent = true
         })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     deleteLink (event, link) {
       event.preventDefault()
@@ -132,7 +137,7 @@ export default {
           if (!link.expires) this.hasPermanent = false
           this.links = this.links.filter(item => item.hash !== link.hash)
         })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     humanTime (time) {
       return moment(time).fromNow()

assets/src/components/prompts/Success.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="prompt success">
-    <i class="material-icons">done</i>
-    <h3>{{ $store.state.showMessage }}</h3>
-    <div>
-      <button @click="close"
-        :aria-label="$t('buttons.ok')"
-        :title="$t('buttons.ok')"
-        autofocus>{{ $t('buttons.ok') }}</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'success',
-  methods: {
-    close () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

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;
 }
 

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;
+}
+

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           *

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.

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.

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',

assets/src/views/GlobalSettings.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 import { getSettings, updateSettings } from '@/utils/api'
 
 export default {
@@ -73,10 +73,9 @@ export default {
           })
         }
       })
-      .catch(error => { this.showError(error) })
+      .catch(error => { this.$showError(error) })
   },
   methods: {
-    ...mapMutations([ 'showSuccess', 'showError' ]),
     capitalize (name, where = '_') {
       if (where === 'caps') where = /(?=[A-Z])/
       let splitted = name.split(where)
@@ -103,8 +102,8 @@ export default {
       }
 
       updateSettings(commands, 'commands')
-        .then(() => { this.showSuccess(this.$t('settings.commandsUpdated')) })
+        .then(() => { this.$showSuccess(this.$t('settings.commandsUpdated')) })
-        .catch(error => { this.showError(error) })
+        .catch(error => { this.$showError(error) })
     },
     saveStaticGen (event) {
       event.preventDefault()
@@ -124,8 +123,8 @@ export default {
       }
 
       updateSettings(staticGen, 'staticGen')
-        .then(() => { this.showSuccess(this.$t('settings.settingsUpdated')) })
+        .then(() => { this.$showSuccess(this.$t('settings.settingsUpdated')) })
-        .catch(error => { this.showError(error) })
+        .catch(error => { this.$showError(error) })
     },
     parseStaticGen (staticgen) {
       for (let option of staticgen) {

assets/src/views/ProfileSettings.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 import { updateUser } from '@/utils/api'
 import Languages from '@/components/Languages'
 
@@ -64,7 +64,6 @@ export default {
     this.locale = this.user.locale
   },
   methods: {
-    ...mapMutations([ 'showSuccess' ]),
     updatePassword (event) {
       event.preventDefault()
 
@@ -78,9 +77,9 @@ export default {
       }
 
       updateUser(user, 'password').then(location => {
-        this.showSuccess(this.$t('settings.passwordUpdated'))
+        this.$showSuccess(this.$t('settings.passwordUpdated'))
       }).catch(e => {
-        this.$store.commit('showError', e)
+        this.$showError(e)
       })
     },
     updateSettings (event) {
@@ -93,9 +92,9 @@ export default {
       updateUser(user, 'partial').then(location => {
         this.$store.commit('setUser', user)
         this.$emit('css-updated')
-        this.showSuccess(this.$t('settings.settingsUpdated'))
+        this.$showSuccess(this.$t('settings.settingsUpdated'))
       }).catch(e => {
-        this.$store.commit('showError', e)
+        this.$showError(e)
       })
     }
   }

assets/src/views/User.vue

@@ -203,9 +203,9 @@ export default {
 
       deleteUser(this.id).then(location => {
         this.$router.push({ path: '/users' })
-        this.$store.commit('showSuccess', this.$t('settings.userDeleted'))
+        this.$showSuccess(this.$t('settings.userDeleted'))
       }).catch(e => {
-        this.$store.commit('showError', e)
+        this.$showError(e)
       })
     },
     save (event) {
@@ -215,9 +215,9 @@ export default {
       if (this.$route.path === '/users/new') {
         newUser(user).then(location => {
           this.$router.push({ path: location })
-          this.$store.commit('showSuccess', this.$t('settings.userCreated'))
+          this.$showSuccess(this.$t('settings.userCreated'))
         }).catch(e => {
-          this.$store.commit('showError', e)
+          this.$showError(e)
         })
 
         return
@@ -228,9 +228,9 @@ export default {
           this.$store.commit('setUser', user)
         }
 
-        this.$store.commit('showSuccess', this.$t('settings.userUpdated'))
+        this.$showSuccess(this.$t('settings.userUpdated'))
       }).catch(e => {
-        this.$store.commit('showError', e)
+        this.$showError(e)
       })
     },
     parseForm () {

assets/src/views/Users.vue

@@ -44,7 +44,7 @@ export default {
     api.getUsers().then(users => {
       this.users = users
     }).catch(error => {
-      this.$store.commit('showError', error)
+      this.$showError(error)
     })
   }
 }

package-lock.json

@@ -4941,6 +4941,11 @@
       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
       "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
     },
+    "noty": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/noty/-/noty-3.1.2.tgz",
+      "integrity": "sha512-5Rn8695fMcGTJdn8gIrG0sYXXNIEwc8BFq4EpyHF3rFwoAt7/kgN2lKrIZ0bUxtFZuYFcnfqwU+4uF6vm21bVg=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "filesize": "^3.5.10",
     "moment": "^2.18.1",
     "normalize.css": "^7.0.0",
+    "noty": "^3.1.2",
     "vue": "^2.3.3",
     "vue-i18n": "^7.1.0",
     "vue-router": "^2.7.0",

rice-box.go.REMOVED.git-id

@@ -1 +1 @@
-60f3c5fb4e901be9b2920d60643c26ad4d414706
+8cd7343b99621ae03aa9fae0a5cb69dcf5b31963