Improved components, pages and translation

evens-stone · evens-stone · commit 270cd017c9e7 · 2020-07-08T19:38:07.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,51 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app">
+      <style>
+        .container {
+          display: flex;
+          min-height: 100vh;
+          align-items: center;
+          justify-content: center;
+        }
+        .lds-ripple {
+          display: inline-block;
+          position: relative;
+          width: 80px;
+          height: 80px;
+        }
+        .lds-ripple div {
+          position: absolute;
+          border: 4px solid #fff;
+          opacity: 1;
+          border-radius: 50%;
+          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        }
+        .lds-ripple div:nth-child(2) {
+          animation-delay: -0.5s;
+        }
+        @keyframes lds-ripple {
+          0% {
+            top: 36px;
+            left: 36px;
+            width: 0;
+            height: 0;
+            opacity: 1;
+          }
+          100% {
+            top: 0px;
+            left: 0px;
+            width: 72px;
+            height: 72px;
+            opacity: 0;
+          }
+        }
+      </style>
+      <div class="container">
+        <div class="lds-ripple"><div></div><div></div></div>
+      </div>
+    </div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/components/editor/MarkdownEditor.vue b/src/components/editor/MarkdownEditor.vue
@@ -66,8 +66,8 @@ export default {
     return {
       hasState: false,
       options: {
-        usageStatistics: true,
         hideModeSwitch: false,
+        usageStatistics: false,
         minHeight: this.minHeight,
         placeholder: this.placeholder
       }
diff --git a/src/components/snippet/Form.vue b/src/components/snippet/Form.vue
@@ -25,6 +25,7 @@
               solo
               outlined
               flat
+              autofocus="on"
               autocomplete="off"
               hide-details="auto"
               :persistent-hint="false"
@@ -92,7 +93,7 @@
     </v-card-text>
     <v-card-text v-else class="pt-6 pb-6 text-center">
       <p>
-        <v-icon x-large class="pa-6 green green--text lighten-5 rounded">
+        <v-icon x-large class="pa-6 green green--text lighten-5 rounded-circle">
           mdi-check-circle-outline
         </v-icon>
       </p>
@@ -141,6 +142,9 @@ import MyTagInputWidget from '@/components/tag/MyTagInputWidget.vue'
 import CodeMirrorEditor from '@/components/editor/CodeMirrorEditor.vue'
 import { required } from 'vee-validate/dist/rules'
 import { extend } from 'vee-validate'
+import {
+  SET_ONE
+} from '@/store/mutations.type'
 import {
   SAVE
 } from '@/store/actions.type'
@@ -201,12 +205,19 @@ export default {
         this.$store
           .dispatch(`snippet/${SAVE}`, this.getPayload())
           .then(() => {
-            this.done = true
+            // this.done = true
+            this.$store.commit(`snippet/${SET_ONE}`, {})
             this.$refs.form.reset()
-            this._.delay(() => {
-              this.done = false
-              this.close()
-            }, 2000)
+            // this._.delay(() => {
+            //   this.done = false
+            //   // this.close()
+            // }, 2000)
+            this.vscode.postMessage({
+              action: "alert",
+              type: "success",
+              context: 'saved',
+              message: this.$t("snippet_saved_")
+            })
           })
           .catch((e) => {
             this.errors = e.response.data.errors || {}
diff --git a/src/components/snippet/ListItem.vue b/src/components/snippet/ListItem.vue
@@ -98,19 +98,19 @@
             <div class="code-btn-container">
               <v-tooltip bottom>
                 <template v-slot:activator="{ on }">
-                  <v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 mr-2" @click="save">
-                    <v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
+                  <v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
+                    <v-icon small>mdi-menu-open</v-icon>
                   </v-btn>
                 </template>
-                <span>{{ $t('add_to_collection') }}</span>
+                <span>{{ $t('use_now') }}</span>
               </v-tooltip>
               <v-tooltip bottom>
                 <template v-slot:activator="{ on }">
-                  <v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
-                    <v-icon small>mdi-content-copy</v-icon>
+                  <v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 ml-4" @click="save">
+                    <v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
                   </v-btn>
                 </template>
-                <span>{{ $t('use_now') }}</span>
+                <span>{{ $t('add_to_collection') }}</span>
               </v-tooltip>
             </div>
           </div>
diff --git a/src/components/tag/MyTagInputWidget.vue b/src/components/tag/MyTagInputWidget.vue
@@ -72,7 +72,7 @@
           </v-icon>
           <span v-else class="caption font-weight-bold">{{ (data.item.name || '').charAt(0).toUpperCase() }}</span>
         </v-avatar>
-        <span v-text="data.item.name" />
+        <span class="text-capitalize" v-text="data.item.name" />
         <v-icon v-if="data.item.trusted" x-small color="white" class="ml-2">
           mdi-shield-check
         </v-icon>
diff --git a/src/components/tag/MyTagListItemWidget.vue b/src/components/tag/MyTagListItemWidget.vue
@@ -12,7 +12,7 @@
         mdi-pound
       </v-icon>
     </v-avatar>
-    {{ item.name }}
+    <span class="text-capitalize">{{ item.name }}</span>
     <v-icon v-if="item.trusted" small color="green" class="ml-2">
       mdi-shield-check
     </v-icon>
diff --git a/src/locales/en.js b/src/locales/en.js
@@ -187,7 +187,13 @@ export default {
   acknowledgement: 'Acknowledgement',
   launch_challenge: 'Launch Challenge',
   search_hint: 'Enter some keywords and press enter to find your snippets',
-  search_hint_more: 'Tips, use those keys: @username to search in user repo. @me to search in your repo #tag to search for specific tag',
+  search_hint_more: `<b>Tips</b> <br> Use the keywords below for advanced searches: 
+    <br> @me search in your repo
+    <br> @username search in user repo 
+    <br> #tag search for specific tag
+    <br> :trusted positive boolean
+    <br> :!deprecated negative boolean
+    <br> :type[wiki, personal] specific type`,
   by: 'by',
   link: 'Link',
   menu: 'Menu',
@@ -296,7 +302,7 @@ export default {
   snippet_added_from_favorite: 'Snippet added to favorites!',
   snippet_removed_from_favorite: 'Snippet removed from favorites!',
   sorry_anything_found: 'Sorry! We couldn\'t find anything for',
-  try_different_keyword: 'try different or less specific keywords',
+  try_different_keyword: 'Try different or less specific keywords',
   dont_show_in_profile: 'Don\'t show in my profile',
   save_informations: 'Save information',
   save_snippet_: 'Save snippet',
@@ -703,6 +709,7 @@ export default {
   see_synonyms: 'See synonyms',
   snippet_saved: 'Snippet saved',
   item_saved: '{item} saved successfully!',
+  snippet_saved_: 'Snippet saved successfully!',
   item_updated: '{item} updated successfully!',
   item_changed: '{item} changed successfully!',
   item_added: '{item} added successfully!',
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -16,6 +16,8 @@
                 full-width
                 large
                 outlined
+                autofocus="on"
+                autocomplete="off"
                 flat
                 rounded
                 solo
@@ -67,7 +69,9 @@
               <template v-if="dirty">
                 {{ $t('try_different_keyword') }}
               </template>
-              <template v-else>{{ $t('search_hint_more') }}</template>
+              <template v-else>
+                <span v-html="$t('search_hint_more')" />
+              </template>
             </p>
           </div>
         </div>
diff --git a/src/pages/New.vue b/src/pages/New.vue
@@ -2,34 +2,37 @@
   <v-main>
       <v-container>
         <my-form v-if="authenticated" />
-        <v-card v-else>
-            <v-card-title primary-title class="headline text-left text-capitalize">
-              <v-avatar size="32" class="mr-3">
-                <v-img class=" deep-orange" src="https://snippetify.com/apple-touch-icon.png" alt="Snippetify logo">
-                  <template v-slot:placeholder>
-                    <v-row class="fill-height ma-0" align="center" justify="center">
-                      <span style="color:#fff" class="body-1 font-weight-bold text-uppercase">{S}</span>
-                    </v-row>
-                  </template>
-                </v-img>
-              </v-avatar>
-              {{ $t('not_authenticated') }}
-            </v-card-title>
-            <v-divider></v-divider>
-            <v-card-text class="pt-6 pb-6 text-center">
-                <p><v-icon x-large class="pa-6 red red--text lighten-5 rounded-circle">mdi-power-plug-off-outline</v-icon></p>
-                <p class="small text--secondary font-italic">{{ $t('authenticated_required') }}</p>
-            </v-card-text>
-            <v-divider></v-divider>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn @click="close" color="error" text depressed large>{{ $t('close') }}</v-btn>
-            </v-card-actions>
-        </v-card>
+        <div v-else class="empty-container d-flex justify-center align-center">
+          <v-card>
+              <v-card-title primary-title class="headline text-left text-capitalize">
+                <v-avatar size="32" class="mr-3">
+                  <v-img class=" deep-orange" src="https://snippetify.com/apple-touch-icon.png" alt="Snippetify logo">
+                    <template v-slot:placeholder>
+                      <v-row class="fill-height ma-0" align="center" justify="center">
+                        <span style="color:#fff" class="body-1 font-weight-bold text-uppercase">{S}</span>
+                      </v-row>
+                    </template>
+                  </v-img>
+                </v-avatar>
+                {{ $t('not_authenticated') }}
+              </v-card-title>
+              <v-divider></v-divider>
+              <v-card-text class="pt-6 pb-6 text-center">
+                  <p><v-icon x-large class="pa-6 red red--text lighten-5 rounded-circle">mdi-power-plug-off-outline</v-icon></p>
+                  <p class="small text--secondary font-italic">{{ $t('authenticated_required') }}</p>
+              </v-card-text>
+          </v-card>
+        </div>
       </v-container>
   </v-main>
 </template>
 
+<style lang="scss" scoped>
+.empty-container{
+  min-height: 100vh;
+}
+</style>
+
 <script>
 import { mapGetters } from 'vuex'
 import MyForm from '@/components/snippet/Form.vue'
diff --git a/src/pages/Show.vue b/src/pages/Show.vue
@@ -132,19 +132,19 @@
           <div class="code-btn-container">
             <v-tooltip bottom>
               <template v-slot:activator="{ on }">
-                <v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 mr-2" @click="save">
-                  <v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
+                <v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
+                  <v-icon small>mdi-menu-open</v-icon>
                 </v-btn>
               </template>
-              <span>{{ $t('add_to_collection') }}</span>
+              <span>{{ $t('use_now') }}</span>
             </v-tooltip>
             <v-tooltip bottom>
               <template v-slot:activator="{ on }">
-                <v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
-                  <v-icon small>mdi-content-copy</v-icon>
+                <v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 ml-4" @click="save">
+                  <v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
                 </v-btn>
               </template>
-              <span>{{ $t('use_now') }}</span>
+              <span>{{ $t('add_to_collection') }}</span>
             </v-tooltip>
           </div>
         </div>
@@ -259,13 +259,15 @@ export default {
             this.vscode.postMessage({
               action: "alert",
               type: "success",
+              context: 'favorite',
               message: this.$t("snippet_added_from_favorite")
             })
           })
           .catch(e => {
             this.vscode.postMessage({
               action: "alert",
               type: "error",
+              context: 'favorite',
               message: e.response.data.errors.snippet.join(", ")
             })
           })
@@ -277,13 +279,15 @@ export default {
             this.vscode.postMessage({
               action: "alert",
               type: "success",
+              context: 'favorite',
               message: this.$t("snippet_removed_from_favorite")
             })
           })
           .catch(e => {
             this.vscode.postMessage({
               action: "alert",
               type: "error",
+              context: 'favorite',
               message: e.response.data.errors.snippet.join(", ")
             })
           })
