Skip to content

Commit 270cd01

Browse files
committed
Improved components, pages and translation
1 parent a1b1656 commit 270cd01

File tree

10 files changed

+122
-49
lines changed

10 files changed

+122
-49
lines changed

public/index.html

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,51 @@
1313
<noscript>
1414
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1515
</noscript>
16-
<div id="app"></div>
16+
<div id="app">
17+
<style>
18+
.container {
19+
display: flex;
20+
min-height: 100vh;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
.lds-ripple {
25+
display: inline-block;
26+
position: relative;
27+
width: 80px;
28+
height: 80px;
29+
}
30+
.lds-ripple div {
31+
position: absolute;
32+
border: 4px solid #fff;
33+
opacity: 1;
34+
border-radius: 50%;
35+
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
36+
}
37+
.lds-ripple div:nth-child(2) {
38+
animation-delay: -0.5s;
39+
}
40+
@keyframes lds-ripple {
41+
0% {
42+
top: 36px;
43+
left: 36px;
44+
width: 0;
45+
height: 0;
46+
opacity: 1;
47+
}
48+
100% {
49+
top: 0px;
50+
left: 0px;
51+
width: 72px;
52+
height: 72px;
53+
opacity: 0;
54+
}
55+
}
56+
</style>
57+
<div class="container">
58+
<div class="lds-ripple"><div></div><div></div></div>
59+
</div>
60+
</div>
1761
<!-- built files will be auto injected -->
1862
</body>
1963
</html>

src/components/editor/MarkdownEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export default {
6666
return {
6767
hasState: false,
6868
options: {
69-
usageStatistics: true,
7069
hideModeSwitch: false,
70+
usageStatistics: false,
7171
minHeight: this.minHeight,
7272
placeholder: this.placeholder
7373
}

src/components/snippet/Form.vue

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
solo
2626
outlined
2727
flat
28+
autofocus="on"
2829
autocomplete="off"
2930
hide-details="auto"
3031
:persistent-hint="false"
@@ -92,7 +93,7 @@
9293
</v-card-text>
9394
<v-card-text v-else class="pt-6 pb-6 text-center">
9495
<p>
95-
<v-icon x-large class="pa-6 green green--text lighten-5 rounded">
96+
<v-icon x-large class="pa-6 green green--text lighten-5 rounded-circle">
9697
mdi-check-circle-outline
9798
</v-icon>
9899
</p>
@@ -141,6 +142,9 @@ import MyTagInputWidget from '@/components/tag/MyTagInputWidget.vue'
141142
import CodeMirrorEditor from '@/components/editor/CodeMirrorEditor.vue'
142143
import { required } from 'vee-validate/dist/rules'
143144
import { extend } from 'vee-validate'
145+
import {
146+
SET_ONE
147+
} from '@/store/mutations.type'
144148
import {
145149
SAVE
146150
} from '@/store/actions.type'
@@ -201,12 +205,19 @@ export default {
201205
this.$store
202206
.dispatch(`snippet/${SAVE}`, this.getPayload())
203207
.then(() => {
204-
this.done = true
208+
// this.done = true
209+
this.$store.commit(`snippet/${SET_ONE}`, {})
205210
this.$refs.form.reset()
206-
this._.delay(() => {
207-
this.done = false
208-
this.close()
209-
}, 2000)
211+
// this._.delay(() => {
212+
// this.done = false
213+
// // this.close()
214+
// }, 2000)
215+
this.vscode.postMessage({
216+
action: "alert",
217+
type: "success",
218+
context: 'saved',
219+
message: this.$t("snippet_saved_")
220+
})
210221
})
211222
.catch((e) => {
212223
this.errors = e.response.data.errors || {}

src/components/snippet/ListItem.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,19 +98,19 @@
9898
<div class="code-btn-container">
9999
<v-tooltip bottom>
100100
<template v-slot:activator="{ on }">
101-
<v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 mr-2" @click="save">
102-
<v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
101+
<v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
102+
<v-icon small>mdi-menu-open</v-icon>
103103
</v-btn>
104104
</template>
105-
<span>{{ $t('add_to_collection') }}</span>
105+
<span>{{ $t('use_now') }}</span>
106106
</v-tooltip>
107107
<v-tooltip bottom>
108108
<template v-slot:activator="{ on }">
109-
<v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
110-
<v-icon small>mdi-content-copy</v-icon>
109+
<v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 ml-4" @click="save">
110+
<v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
111111
</v-btn>
112112
</template>
113-
<span>{{ $t('use_now') }}</span>
113+
<span>{{ $t('add_to_collection') }}</span>
114114
</v-tooltip>
115115
</div>
116116
</div>

src/components/tag/MyTagInputWidget.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
</v-icon>
7373
<span v-else class="caption font-weight-bold">{{ (data.item.name || '').charAt(0).toUpperCase() }}</span>
7474
</v-avatar>
75-
<span v-text="data.item.name" />
75+
<span class="text-capitalize" v-text="data.item.name" />
7676
<v-icon v-if="data.item.trusted" x-small color="white" class="ml-2">
7777
mdi-shield-check
7878
</v-icon>

src/components/tag/MyTagListItemWidget.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
mdi-pound
1313
</v-icon>
1414
</v-avatar>
15-
{{ item.name }}
15+
<span class="text-capitalize">{{ item.name }}</span>
1616
<v-icon v-if="item.trusted" small color="green" class="ml-2">
1717
mdi-shield-check
1818
</v-icon>

src/locales/en.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,13 @@ export default {
187187
acknowledgement: 'Acknowledgement',
188188
launch_challenge: 'Launch Challenge',
189189
search_hint: 'Enter some keywords and press enter to find your snippets',
190-
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',
190+
search_hint_more: `<b>Tips</b> <br> Use the keywords below for advanced searches:
191+
<br> @me search in your repo
192+
<br> @username search in user repo
193+
<br> #tag search for specific tag
194+
<br> :trusted positive boolean
195+
<br> :!deprecated negative boolean
196+
<br> :type[wiki, personal] specific type`,
191197
by: 'by',
192198
link: 'Link',
193199
menu: 'Menu',
@@ -296,7 +302,7 @@ export default {
296302
snippet_added_from_favorite: 'Snippet added to favorites!',
297303
snippet_removed_from_favorite: 'Snippet removed from favorites!',
298304
sorry_anything_found: 'Sorry! We couldn\'t find anything for',
299-
try_different_keyword: 'try different or less specific keywords',
305+
try_different_keyword: 'Try different or less specific keywords',
300306
dont_show_in_profile: 'Don\'t show in my profile',
301307
save_informations: 'Save information',
302308
save_snippet_: 'Save snippet',
@@ -703,6 +709,7 @@ export default {
703709
see_synonyms: 'See synonyms',
704710
snippet_saved: 'Snippet saved',
705711
item_saved: '{item} saved successfully!',
712+
snippet_saved_: 'Snippet saved successfully!',
706713
item_updated: '{item} updated successfully!',
707714
item_changed: '{item} changed successfully!',
708715
item_added: '{item} added successfully!',

src/pages/Index.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
full-width
1717
large
1818
outlined
19+
autofocus="on"
20+
autocomplete="off"
1921
flat
2022
rounded
2123
solo
@@ -67,7 +69,9 @@
6769
<template v-if="dirty">
6870
{{ $t('try_different_keyword') }}
6971
</template>
70-
<template v-else>{{ $t('search_hint_more') }}</template>
72+
<template v-else>
73+
<span v-html="$t('search_hint_more')" />
74+
</template>
7175
</p>
7276
</div>
7377
</div>

src/pages/New.vue

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,37 @@
22
<v-main>
33
<v-container>
44
<my-form v-if="authenticated" />
5-
<v-card v-else>
6-
<v-card-title primary-title class="headline text-left text-capitalize">
7-
<v-avatar size="32" class="mr-3">
8-
<v-img class=" deep-orange" src="https://snippetify.com/apple-touch-icon.png" alt="Snippetify logo">
9-
<template v-slot:placeholder>
10-
<v-row class="fill-height ma-0" align="center" justify="center">
11-
<span style="color:#fff" class="body-1 font-weight-bold text-uppercase">{S}</span>
12-
</v-row>
13-
</template>
14-
</v-img>
15-
</v-avatar>
16-
{{ $t('not_authenticated') }}
17-
</v-card-title>
18-
<v-divider></v-divider>
19-
<v-card-text class="pt-6 pb-6 text-center">
20-
<p><v-icon x-large class="pa-6 red red--text lighten-5 rounded-circle">mdi-power-plug-off-outline</v-icon></p>
21-
<p class="small text--secondary font-italic">{{ $t('authenticated_required') }}</p>
22-
</v-card-text>
23-
<v-divider></v-divider>
24-
<v-card-actions>
25-
<v-spacer></v-spacer>
26-
<v-btn @click="close" color="error" text depressed large>{{ $t('close') }}</v-btn>
27-
</v-card-actions>
28-
</v-card>
5+
<div v-else class="empty-container d-flex justify-center align-center">
6+
<v-card>
7+
<v-card-title primary-title class="headline text-left text-capitalize">
8+
<v-avatar size="32" class="mr-3">
9+
<v-img class=" deep-orange" src="https://snippetify.com/apple-touch-icon.png" alt="Snippetify logo">
10+
<template v-slot:placeholder>
11+
<v-row class="fill-height ma-0" align="center" justify="center">
12+
<span style="color:#fff" class="body-1 font-weight-bold text-uppercase">{S}</span>
13+
</v-row>
14+
</template>
15+
</v-img>
16+
</v-avatar>
17+
{{ $t('not_authenticated') }}
18+
</v-card-title>
19+
<v-divider></v-divider>
20+
<v-card-text class="pt-6 pb-6 text-center">
21+
<p><v-icon x-large class="pa-6 red red--text lighten-5 rounded-circle">mdi-power-plug-off-outline</v-icon></p>
22+
<p class="small text--secondary font-italic">{{ $t('authenticated_required') }}</p>
23+
</v-card-text>
24+
</v-card>
25+
</div>
2926
</v-container>
3027
</v-main>
3128
</template>
3229

30+
<style lang="scss" scoped>
31+
.empty-container{
32+
min-height: 100vh;
33+
}
34+
</style>
35+
3336
<script>
3437
import { mapGetters } from 'vuex'
3538
import MyForm from '@/components/snippet/Form.vue'

src/pages/Show.vue

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,19 +132,19 @@
132132
<div class="code-btn-container">
133133
<v-tooltip bottom>
134134
<template v-slot:activator="{ on }">
135-
<v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 mr-2" @click="save">
136-
<v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
135+
<v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
136+
<v-icon small>mdi-menu-open</v-icon>
137137
</v-btn>
138138
</template>
139-
<span>{{ $t('add_to_collection') }}</span>
139+
<span>{{ $t('use_now') }}</span>
140140
</v-tooltip>
141141
<v-tooltip bottom>
142142
<template v-slot:activator="{ on }">
143-
<v-btn v-on="on" fab small color="deep-orange lighten-5 deep-orange--text" @click="copy">
144-
<v-icon small>mdi-content-copy</v-icon>
143+
<v-btn v-on="on" fab small class="deep-orange deep-orange--text lighten-5 ml-4" @click="save">
144+
<v-icon small>mdi-checkbox-marked-circle-outline</v-icon>
145145
</v-btn>
146146
</template>
147-
<span>{{ $t('use_now') }}</span>
147+
<span>{{ $t('add_to_collection') }}</span>
148148
</v-tooltip>
149149
</div>
150150
</div>
@@ -259,13 +259,15 @@ export default {
259259
this.vscode.postMessage({
260260
action: "alert",
261261
type: "success",
262+
context: 'favorite',
262263
message: this.$t("snippet_added_from_favorite")
263264
})
264265
})
265266
.catch(e => {
266267
this.vscode.postMessage({
267268
action: "alert",
268269
type: "error",
270+
context: 'favorite',
269271
message: e.response.data.errors.snippet.join(", ")
270272
})
271273
})
@@ -277,13 +279,15 @@ export default {
277279
this.vscode.postMessage({
278280
action: "alert",
279281
type: "success",
282+
context: 'favorite',
280283
message: this.$t("snippet_removed_from_favorite")
281284
})
282285
})
283286
.catch(e => {
284287
this.vscode.postMessage({
285288
action: "alert",
286289
type: "error",
290+
context: 'favorite',
287291
message: e.response.data.errors.snippet.join(", ")
288292
})
289293
})

0 commit comments

Comments
 (0)