mirror/vue-cli
1
0
Fork 0
mirror of https://github.com/vuejs/vue-cli.git synced 2026-02-06 06:58:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): localization of cli-ui (#987)

Browse Source
This commit is contained in:
kazuya kawaguchi
2018-03-15 19:58:14 +09:00
committed by Guillaume Chau
parent 19cc90c6e6
commit 10202e93b3
22 changed files with 588 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/@vue/cli-ui/package.json
View File

@@ -29,6 +29,7 @@
"subscriptions-transport-ws": "^0.9.5",
"vue": "^2.5.13",
"vue-apollo": "^3.0.0-beta.5",
"vue-i18n": "^7.6.0",
"vue-instantsearch": "^1.5.1",
"vue-router": "^3.0.1",
"xterm": "^3.2.0"

14
packages/@vue/cli-ui/src/components/FolderExplorer.vue
View File

@@ -9,7 +9,7 @@
<VueButton
class="icon-button"
icon-left="keyboard_arrow_up"
v-tooltip="'Open parent folder'"
v-tooltip="$t('components.folder-explorer.toolbar.tooltips.parent-folder')"
@click="openParentFolder"
/>
@@ -17,7 +17,7 @@
<VueInput
ref="pathInput"
v-model="editedPath"
placeholder="Enter the full path to a folder"
:placeholder="$t('components.folder-explorer.toolbar.placeholder')"
icon-left="edit"
@keyup.esc="editingPath = false"
@keyup.enter="submitPathEdit()"
@@ -28,7 +28,7 @@
v-else
:query="require('@/graphql/cwd.gql')"
class="current-path"
v-tooltip="'Edit path'"
v-tooltip="$t('components.folder-explorer.toolbar.tooltips.edit-path')"
@click.native="openPathEdit()"
>
<ApolloSubscribeToMore
@@ -50,7 +50,7 @@
<VueButton
class="icon-button favorite-button"
:icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
v-tooltip="'Toggle favorite'"
v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite')"
@click="toggleFavorite()"
/>
@@ -61,7 +61,7 @@
slot="trigger"
icon-left="arrow_drop_down"
class="icon-button"
v-tooltip="'Favorite folders'"
v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite-folders')"
/>
<template v-if="foldersFavorite.length">
@@ -75,14 +75,14 @@
</template>
<div v-else class="vue-ui-empty">
No favorite folders yet.
{{ $t('components.folder-explorer.toolbar.empty') }}
</div>
</VueDropdown>
<VueButton
class="icon-button"
icon-left="refresh"
v-tooltip="'Refresh'"
v-tooltip="$t('components.folder-explorer.toolbar.tooltips.refresh')"
@click="refreshFolder"
/>
</div>

2
packages/@vue/cli-ui/src/components/InstantSearchInput.vue
View File

@@ -5,7 +5,7 @@
icon-left="search"
v-model="query"
class="big"
placeholder="Search a plugin"
:placeholder="$t('components.instant-search-input.placeholder')"
>
<template slot="right">
<VueButton

2
packages/@vue/cli-ui/src/components/ListItemInfo.vue
View File

@@ -22,7 +22,7 @@
@click.stop="() => {}"
>
<VueIcon icon="open_in_new" class="medium top"/>
More info
{{ $t('components.list-item-info.more-info') }}
</a>
</div>
</div>

10
packages/@vue/cli-ui/src/components/LoggerView.vue
View File

@@ -5,12 +5,12 @@
icon="dvr"
/>
<div class="title">
Logs
{{ $t('components.logger-view.title') }}
</div>
<VueButton
class="icon-button"
icon-left="delete_forever"
v-tooltip="'Clear logs'"
v-tooltip="$t('components.logger-view.buttons.clear')"
@click="clearLogs()"
/>
<VueIcon
@@ -20,13 +20,13 @@
<VueButton
class="icon-button"
icon-left="subdirectory_arrow_left"
v-tooltip="'Scroll to bottom'"
v-tooltip="$t('components.logger-view.buttons.scroll')"
@click="scrollToBottom()"
/>
<VueButton
class="icon-button"
icon-left="close"
v-tooltip="'Close'"
v-tooltip="$t('components.logger-view.buttons.close')"
@click="close()"
/>
</div>
@@ -56,7 +56,7 @@
class="vue-ui-empty"
>
<VueIcon icon="wifi" class="large"/>
<div>No logs yet</div>
<div>{{ $t('components.logger-view.empty') }}</div>
</div>
</template>
</template>

2
packages/@vue/cli-ui/src/components/ProgressScreen.vue
View File

@@ -20,7 +20,7 @@
<div class="actions">
<VueButton
icon-left="close"
label="Close"
:label="$t('components.progress-screen.close')"
@click="close()"
/>
</div>

14
packages/@vue/cli-ui/src/components/ProjectNav.vue
View File

@@ -12,7 +12,7 @@
class="flat big icon-button"
:value="route.name"
:icon-left="route.icon"
v-tooltip.right="route.tooltip"
v-tooltip.right="renderTooltip(route.tooltip)"
/>
</VueGroup>
</div>
@@ -24,17 +24,17 @@ const BUILTIN_ROUTES = [
{
name: 'project-plugins',
icon: 'widgets',
tooltip: 'Plugins'
tooltip: 'plugins'
},
{
name: 'project-configuration',
icon: 'settings_applications',
tooltip: 'Configuration'
tooltip: 'configuration'
},
{
name: 'project-tasks',
icon: 'assignment',
tooltip: 'Tasks'
tooltip: 'tasks'
}
]
@@ -65,6 +65,12 @@ export default {
}
}
},
methods: {
renderTooltip (target) {
return this.$t(`components.project-nav.tooltips.${target}`)
}
}
}
</script>

8
packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
View File

@@ -9,12 +9,12 @@
>
<span slot="description" class="plugin-description">
<span class="info version">
<span class="label">version</span>
<span class="label">{{ $t('components.project-plugin-item.version') }}</span>
<span class="value">{{ plugin.version.current }}</span>
</span>
<span class="info latest">
<span class="label">latest</span>
<span class="label">{{ $t('components.project-plugin-item.latest') }}</span>
<VueIcon
v-if="plugin.version.current !== plugin.version.latest"
icon="warning"
@@ -28,7 +28,7 @@
icon="star"
class="top medium"
/>
Official
{{ $t('components.project-plugin-item.official') }}
</span>
<span v-if="plugin.installed" class="info">
@@ -36,7 +36,7 @@
icon="check_circle"
class="top medium"
/>
Installed
{{ $t('components.project-plugin-item.installed') }}
</span>
<span v-if="plugin.description" class="package-description">

2
packages/@vue/cli-ui/src/components/ProjectSelectList.vue
View File

@@ -18,7 +18,7 @@
</div>
<div v-else class="vue-ui-empty">
<VueIcon icon="attach_file" class="empty-icon"/>
<div>No existing projects</div>
<div>{{ $t('components.project-select-list.empty') }}</div>
</div>
</template>
</template>

4
packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
View File

@@ -5,7 +5,7 @@
<VueButton
class="icon-button"
:icon-left="project.favorite ? 'star' : 'star_border'"
v-tooltip="'Toggle favorite'"
v-tooltip="$t('components.project-select-list-item.tooltips.favorite')"
@click.stop="$emit('favorite')"
/>
</div>
@@ -19,7 +19,7 @@
<VueButton
class="icon-button"
icon-left="delete"
v-tooltip="'Delete'"
v-tooltip="$t('components.project-select-list-item.tooltips.delete')"
@click.stop="$emit('remove')"
/>
</div>

10
packages/@vue/cli-ui/src/components/StatusBar.vue
View File

@@ -8,18 +8,18 @@
<div class="content">
<div
class="section action current-project"
v-tooltip="'Current project<br><i>Click to toggle Project Manager</i>'"
v-tooltip="$t('components.status-bar.project.tooltip')"
@click="onProjectClick()"
>
<VueIcon icon="work"/>
<span v-if="projectCurrent">{{ projectCurrent.name }}</span>
<span v-else class="label">No project</span>
<span v-else class="label">{{ $t('components.status-bar.project.empty') }}</span>
</div>
<ApolloQuery
:query="require('@/graphql/cwd.gql')"
class="section current-path"
v-tooltip="'Current Working Directory'"
v-tooltip="$t('components.status-bar.path.tooltip')"
@click.native="onCwdClick()"
>
<ApolloSubscribeToMore
@@ -37,7 +37,7 @@
<div
class="section action console-log"
v-tooltip="'Logs<br><i>Click to toggle vue-cli logs</i>'"
v-tooltip="$t('components.status-bar.log.tooltip')"
@click="onConsoleClick()"
>
<VueIcon icon="dvr"/>
@@ -45,7 +45,7 @@
v-if="consoleLogLast"
:message="consoleLogLast"
/>
<div v-else class="last-message">No logs yet</div>
<div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
<!-- <TerminalView
:cols="100"
:rows="1"

33
packages/@vue/cli-ui/src/i18n.js Normal file
View File

@@ -0,0 +1,33 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const locale = key.match(/([a-z0-9]+)\./i)[1]
messages[locale] = locales(key)
})
return messages
}
function detectLanguage () {
try {
const lang = (window.navigator.languages && window.navigator.languages[0]) ||
window.navigator.language ||
window.navigator.userLanguage
return lang.substr(0, 2)
} catch (e) {
return undefined
}
}
const i18n = new VueI18n({
locale: detectLanguage() || 'en',
fallbackLocale: 'en',
messages: loadLocaleMessages()
})
export default i18n

220
packages/@vue/cli-ui/src/locales/en.json Normal file
View File

@@ -0,0 +1,220 @@
{
"components": {
"folder-explorer": {
"toolbar": {
"tooltips": {
"parent-folder": "Open parent folder",
"edit-path": "Edit path",
"favorite": "Toggle favorite",
"favorite-folders": "Favorite folders",
"refresh": "Refresh"
},
"placeholder": "Enter the full path to a folder",
"empty": "No favorite folders yet."
}
},
"instant-search-input": {
"placeholder": "Search a plugin"
},
"list-item-info": {
"more-info": "More Info"
},
"logger-view": {
"title": "Logs",
"empty": "Not logs yet",
"buttons": {
"clear": "Clear logs",
"scroll": "Scroll to bottom",
"close": "Close"
}
},
"progress-screen": {
"close": "Close"
},
"project-nav": {
"tooltips": {
"plugins": "Plugins",
"configuration": "Configuration",
"tasks": "Tasks"
}
},
"project-select-list": {
"empty": "No existing projects"
},
"project-select-list-item": {
"tooltips": {
"favorite": "Toggle favorite",
"delete": "Delete"
}
},
"project-plugin-item": {
"version": "version",
"latest": "latest",
"official": "Official",
"installed": "Installed"
},
"status-bar": {
"project": {
"tooltip": "Current project<br><i>Click to toggle Project Manager</i>",
"empty": "No project"
},
"path": {
"tooltip": "Current Working Folder"
},
"log": {
"tooltip": "Logs<br><i>Click to toggle Vue CLI logs</i>",
"empty": "No logs yet"
}
}
},
"mixins": {
"progress": {
"creating": "Creating project...",
"git-init": "Initializing git repository...",
"plugins-install": "Installing Vue CLI plugins. This might take a while...",
"invoking-generators": "Invoking generators...",
"deps-install": "Installing additional dependencies...",
"completion-hooks": "Running completion hooks...",
"fetch-remote-preset": "Fetching remote preset...",
"done": "Successfully created project",
"plugin-install": "Installing {arg0}",
"plugin-uninstall": "Uninstalling {arg0}",
"plugin-invoke": "Invoking {arg0}"
}
},
"views": {
"project-select": {
"title": "Vue Project Manager",
"tabs": {
"projects": "Projects",
"create": "Create",
"import": "Import"
},
"buttons": {
"create": "Create a new project here",
"import": "Import this folder"
}
},
"project-create": {
"title": "Create a new project",
"tabs": {
"details": {
"title": "Details",
"form": {
"folder": {
"label": "Project folder",
"placeholder": "my-app",
"tooltip": "Change base folder",
"action": "Select this folder"
},
"manager": {
"label": "Project manager",
"default": "Default"
},
"options": {
"label": "Additional options",
"description": "Overwrite target folder if it exists"
}
},
"buttons": {
"cancel": "Cancel",
"next": "Next"
},
"modal": {
"title": "Cancel and reset project creation",
"body": "Are you sure you want to reset the project creation?",
"buttons": {
"back": "Go back",
"clear": "Clear project"
}
}
},
"presets": {
"title": "Presets",
"description": "A preset is an association of plugins and configurations. After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.",
"select": "Select a preset",
"buttons": {
"previous": "Previous",
"next": "Next",
"create": "Create Project"
},
"modal": {
"title": "Configure Remote preset",
"body": "Available soon..."
}
},
"features": {
"title": "Features",
"description": "You will be able to add features after the project is created.",
"enable": "Enable features",
"buttons": {
"previous": "Previous",
"next": "Next",
"create": "Create Project"
}
},
"configuration": {
"title": "Configuration",
"buttons": {
"previous": "Previous",
"create": "Create Project"
},
"modal": {
"title": "Save as a new preset",
"body": {
"title": "Preset name",
"subtitle": "Save the features and configuration into a new preset"
},
"buttons": {
"cancel": "Cancel",
"continue": "Continue without saving",
"create": "Create a new preset"
}
}
}
}
},
"project-plugins": {
"title": "Project plugins",
"button": "Add plugin",
"heading": "Installed plugins"
},
"project-plugins-add": {
"title": "Add a plugin",
"plugin": "plugin",
"tabs": {
"search": {
"label": "Search",
"not-found": "Not results found",
"buttons": {
"cancel": "Cancel",
"install": "Install {target}"
}
},
"configuration": {
"label": "Configuration",
"heading": "Installation of {target}",
"buttons": {
"cancel": "Cancel",
"finish": "Finish installation"
}
}
},
"modal": {
"title": "Uninstall {target}?",
"body": "Do you want to uninstall the {target} plugin?",
"buttons": {
"back": "Go back",
"cancel": "Cancel without uninstalling",
"uninstall": "Uninstall"
}
}
},
"project-configuration": {
"title": "Project configuration"
},
"project-tasks": {
"title": "Project tasks"
}
}
}

220
packages/@vue/cli-ui/src/locales/ja.json Normal file
View File

@@ -0,0 +1,220 @@
{
"components": {
"folder-explorer": {
"toolbar": {
"tooltips": {
"parent-folder": "親フォルダを開く",
"edit-path": "パスを編集する",
"favorite": "お気に入りをトグル",
"favorite-folders": "お気に入りフォルダ",
"refresh": "リフレッシュ"
},
"placeholder": "フォルダへのフルパスを入力する",
"empty": "まだお気に入りフォルダがありません。"
}
},
"instant-search-input": {
"placeholder": "プラグインを検索する"
},
"list-item-info": {
"more-info": "詳細情報"
},
"logger-view": {
"title": "ログ",
"empty": "まだログはありません",
"buttons": {
"clear": "ログをクリアする",
"scroll": "一番下にスクロールする",
"close": "閉じる"
}
},
"progress-screen": {
"close": "閉じる"
},
"project-nav": {
"tooltips": {
"plugins": "プラグイン",
"configuration": "設定",
"tasks": "タスク"
}
},
"project-select-list": {
"empty": "プロジェクトが存在しません"
},
"project-select-list-item": {
"tooltips": {
"favorite": "お気に入りをトグル",
"delete": "削除する"
}
},
"project-plugin-item": {
"version": "バージョン",
"latest": "最新",
"official": "公式",
"installed": "インストール済み"
},
"status-bar": {
"project": {
"tooltip": "現在のプロジェクト<br><i>プロジェクトマネージャにトグルするにはクリック</i>",
"empty": "プロジェクトなし"
},
"path": {
"tooltip": "現在の作業フォルダ"
},
"log": {
"tooltip": "ログ<br><i>Vue CLI のログをトグルするにはクリック</i>",
"empty": "まだログはありません"
}
}
},
"mixins": {
"progress": {
"creating": "プロジェクトを作成中...",
"git-init": "Git リポジトリを初期化中...",
"plugins-install": "Vue CLI プラグインをインストール中。これは時間がかかるかもしれません...",
"invoking-generators": "ジェネレータを起動中...",
"deps-install": "追加依存関係をインストール中...",
"completion-hooks": "完了フックを実行中...",
"fetch-remote-preset": "リモートプリセットのフェッチング...",
"done": "プロジェクトを作成しました",
"plugin-install": "{arg0} をインストール中",
"plugin-uninstall": "{arg0} をアンインストール中",
"plugin-invoke": "{arg0} を起動中"
}
},
"views": {
"project-select": {
"title": "Vue プロジェクトマネージャ",
"tabs": {
"projects": "プロジェクト",
"create": "作成",
"import": "インポート"
},
"buttons": {
"create": "ここに新しいプロジェクトを作成する",
"import": "このフォルダをインポートする"
}
},
"project-create": {
"title": "新しいプロジェクトを作成する",
"tabs": {
"details": {
"title": "詳細",
"form": {
"folder": {
"label": "プロジェクトフォルダ",
"placeholder": "my-app",
"tooltip": "ベースフォルダを変更する",
"action": "このフォルダを選択する"
},
"manager": {
"label": "プロジェクトマネージャ",
"default": "デフォルト"
},
"options": {
"label": "追加オプション",
"description": "存在する場合はターゲットフォルダを上書きする"
}
},
"buttons": {
"cancel": "キャンセル",
"next": "次へ"
},
"modal": {
"title": "プロジェクト作成のキャンセルとリセット",
"body": "プロジェクト作成をリセットしますか?",
"buttons": {
"back": "戻る",
"clear": "プロジェクトをクリア"
}
}
},
"presets": {
"title": "プリセット",
"description": "プリセットはプラグインと設定の関連付けです。機能を選択した後に、必要に応じてプリセットとして保存することができます。これにより、すべてを再設定することなく、次のプロジェクトに再利用できるようになります。",
"select": "プリセットを選択する",
"buttons": {
"previous": "前へ",
"next": "次へ",
"create": "プロジェクトを作成する"
},
"modal": {
"title": "リモートプリセットを設定する",
"body": "間もなく利用できます..."
}
},
"features": {
"title": "機能",
"description": "プロジェクトが作成された後に機能を追加することができます。",
"enable": "機能の有効化",
"buttons": {
"previous": "前へ",
"next": "次へ",
"create": "プロジェクトを作成する"
}
},
"configuration": {
"title": "設定",
"buttons": {
"previous": "前へ",
"create": "プロジェクトを作成する"
},
"modal": {
"title": "新しいプロジェクトを保存する",
"body": {
"title": "プリセット名",
"subtitle": "新しいプリセットに機能と設定を保存する"
},
"buttons": {
"cancel": "キャンセル",
"continue": "保存なしで続ける",
"create": "プロジェクトを作成する"
}
}
}
}
},
"project-plugins": {
"title": "プロジェクトプラグイン",
"button": "プラグインを追加する",
"heading": "インストールされたプラグイン"
},
"project-plugins-add": {
"title": "プラグインを追加する",
"plugin": "プラグイン",
"tabs": {
"search": {
"label": "検索",
"not-found": "結果が見つかりません",
"buttons": {
"cancel": "キャンセル",
"install": "{target} をインストール"
}
},
"configuration": {
"label": "設定",
"heading": "{target} の設定",
"buttons": {
"cancel": "キャンセル",
"finish": "インストールを終了する"
}
}
},
"modal": {
"title": "{target} をアンインストールしますか?",
"body": "{target} プラグインをアンインストールしたいですか?",
"buttons": {
"back": "戻る",
"cancel": "アンインストールなしでキャンセル",
"uninstall": "アンインストール"
}
}
},
"project-configuration": {
"title": "プロジェクト設定"
},
"project-tasks": {
"title": "プロジェクトタスク"
}
}
}

2
packages/@vue/cli-ui/src/main.js
View File

@@ -1,6 +1,7 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
import { apolloProvider } from './vue-apollo'
import VueUi from '@vue/ui'
import InstantSearch from 'vue-instantsearch'
@@ -19,6 +20,7 @@ Vue.config.productionTip = false
const app = new Vue({
provide: apolloProvider.provide(),
router,
i18n,
...App
})

25
packages/@vue/cli-ui/src/mixins/Progress.js
View File

@@ -2,20 +2,6 @@ import PROGRESS from '../graphql/progress.gql'
import PROGRESS_CHANGED from '../graphql/progressChanged.gql'
import PROGRESS_REMOVED from '../graphql/progressRemoved.gql'
const messages = {
'creating': 'Creating project...',
'git-init': 'Initializing git repository...',
'plugins-install': 'Installing CLI plugins. This might take a while...',
'invoking-generators': 'Invoking generators...',
'deps-install': 'Installing additional dependencies...',
'completion-hooks': 'Running completion hooks...',
'fetch-remote-preset': `Fetching remote preset...`,
'done': 'Successfully created project',
'plugin-install': 'Installing {{arg0}}',
'plugin-uninstall': 'Uninstalling {{arg0}}',
'plugin-invoke': 'Invoking {{arg0}}'
}
// @vue/component
export default {
props: {
@@ -80,16 +66,13 @@ export default {
if (!this.progress) return null
const { status } = this.progress
let message = messages[status]
if (message && this.progress.args) {
const values = {}
if (this.progress.args) {
for (let i = 0, l = this.progress.args.length; i < l; i++) {
message = message.replace(
new RegExp(`{{arg${i}}}`, 'g'),
this.progress.args[i]
)
values[`arg${i}`] = this.progress.args[i]
}
}
return message || status || ''
return this.$t(`mixins.progress.${status}`, values) || status || ''
}
}
}

2
packages/@vue/cli-ui/src/views/ProjectConfiguration.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="project-configuration page">
<ContentView
title="Project configuration"
:title="$t('views.project-configuration.title')"
>
WIP
</ContentView>

86
packages/@vue/cli-ui/src/views/ProjectCreate.vue
View File

@@ -2,23 +2,23 @@
<div class="project-create page">
<div class="content">
<StepWizard
title="Create a new project"
:title="$t('views.project-create.title')"
class="frame"
>
<template slot-scope="{ next, previous }">
<VueTab
id="details"
label="Details"
:label="$t('views.project-create.tabs.details.title')"
icon="subject"
>
<div class="content vue-ui-disable-scroll">
<div class="project-details vue-ui-grid col-1 big-gap">
<VueFormField
title="Project folder"
:title="$t('views.project-create.tabs.details.form.folder.label')"
>
<VueInput
v-model="formData.folder"
placeholder="my-app"
:placeholder="$t('views.project-create.tabs.details.form.folder.placeholder')"
icon-left="folder"
class="big"
/>
@@ -38,14 +38,14 @@
<VueButton
icon-left="edit"
class="icon-button"
v-tooltip="'Change base directory'"
v-tooltip="$t('views.project-create.tabs.details.form.folder.tooltip')"
:to="{
name: 'project-select',
query: {
title: 'Create a new project',
title: $t('views.project-create.title'),
tab: 'create',
hideTabs: true,
action: 'Select this folder'
action: $t('views.project-create.tabs.details.form.folder.action')
}
}"
/>
@@ -54,14 +54,14 @@
</VueFormField>
<VueFormField
title="Package manager"
:title="$t('views.project-create.tabs.details.form.manager.label')"
>
<VueSelect
v-model="formData.packageManager"
>
<VueSelectButton
:value="undefined"
label="Default"
:label="$t('views.project-create.tabs.details.form.manager.default')"
/>
<VueSelectButton
value="npm"
@@ -75,13 +75,13 @@
</VueFormField>
<VueFormField
title="Additional options"
:title="$t('views.project-create.tabs.details.form.options.label')"
>
<VueSwitch
v-model="formData.force"
class="extend-left"
>
Overwrite target directory if it exists
{{ $t('views.project-create.tabs.details.form.options.description') }}
</VueSwitch>
</VueFormField>
</div>
@@ -90,14 +90,14 @@
<div class="actions-bar">
<VueButton
icon-left="close"
label="Cancel"
:label="$t('views.project-create.tabs.details.buttons.cancel')"
class="big"
@click="showCancel = true"
/>
<VueButton
icon-right="arrow_forward"
label="Next"
:label="$t('views.project-create.tabs.details.buttons.next')"
class="big primary"
:disabled="!detailsValid"
@click="next()"
@@ -107,7 +107,7 @@
<VueTab
id="presets"
label="Presets"
:label="$t('views.project-create.tabs.presets.title')"
icon="check_circle"
:disabled="!detailsValid"
lazy
@@ -115,10 +115,12 @@
<div class="content vue-ui-disable-scroll">
<div class="vue-ui-text info banner">
<VueIcon icon="info" class="big"/>
<span>A preset is an association of plugins and configurations. After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.</span>
<span>{{ $t('views.project-create.tabs.presets.description') }}</span>
</div>
<div class="cta-text">Select a preset</div>
<div class="cta-text">
{{ $t('views.project-create.tabs.presets.select') }}
</div>
<template v-if="projectCreation">
<ProjectPresetItem
@@ -140,7 +142,7 @@
<div class="actions-bar">
<VueButton
icon-left="arrow_back"
label="Previous"
:label="$t('views.project-create.tabs.presets.buttons.previous')"
class="big"
@click="previous()"
/>
@@ -148,7 +150,7 @@
<VueButton
v-if="manual"
icon-right="arrow_forward"
label="Next"
:label="$t('views.project-create.tabs.presets.buttons.next')"
class="big primary"
:disabled="!presetValid"
@click="next()"
@@ -156,7 +158,7 @@
<VueButton
v-else
icon-left="done"
label="Create project"
:label="$t('views.project-create.tabs.presets.buttons.create')"
class="big primary"
@click="createWithoutSaving()"
/>
@@ -165,7 +167,7 @@
<VueTab
id="features"
label="Features"
:label="$t('views.project-create.tabs.features.title')"
icon="device_hub"
:disabled="!detailsValid || !presetValid || !manual"
lazy
@@ -173,10 +175,12 @@
<div class="content vue-ui-disable-scroll">
<div class="vue-ui-text info banner">
<VueIcon icon="info" class="big"/>
<span>You will be able to add features after the project is created.</span>
<span>{{ $t('views.project-create.tabs.features.description') }}</span>
</div>
<div class="cta-text">Enable features</div>
<div class="cta-text">
{{ $t('views.project-create.tabs.features.enable') }}
</div>
<template v-if="projectCreation">
<ProjectFeatureItem
@@ -191,7 +195,7 @@
<div class="actions-bar">
<VueButton
icon-left="arrow_back"
label="Previous"
:label="$t('views.project-create.tabs.features.buttons.previous')"
class="big"
@click="previous()"
/>
@@ -199,14 +203,14 @@
<VueButton
v-if="enabledPrompts.length"
icon-right="arrow_forward"
label="Next"
:label="$t('views.project-create.tabs.features.buttons.next')"
class="big primary"
@click="next()"
/>
<VueButton
v-else
icon-left="done"
label="Create project"
:label="$t('views.project-create.tabs.features.buttons.create')"
class="big primary"
@click="showSavePreset = true"
/>
@@ -243,7 +247,7 @@
<VueTab
id="config"
label="Configuration"
:label="$t('views.project-create.tabs.configuration.title')"
icon="settings_applications"
:disabled="!detailsValid || !presetValid || !manual || !enabledPrompts.length"
lazy
@@ -258,14 +262,14 @@
<div class="actions-bar">
<VueButton
icon-left="arrow_back"
label="Previous"
:label="$t('views.project-create.tabs.configuration.buttons.previous')"
class="big"
@click="previous()"
/>
<VueButton
icon-left="done"
label="Create project"
:label="$t('views.project-create.tabs.configuration.buttons.create')"
class="big primary"
:disabled="!configurationValid"
@click="showSavePreset = true"
@@ -278,38 +282,40 @@
<VueModal
v-if="showRemotePreset"
title="Configure Remote preset"
:title="$t('views.project-create.tabs.presets.modal.title')"
class="medium"
@close="showRemotePreset = false"
>
<div class="default-body">
<div class="vue-ui-empty">
<VueIcon icon="cake" class="large"/>
<div>Available soon...</div>
<div>
{{ $t('views.project-create.tabs.presets.modal.body') }}
</div>
</div>
</div>
</VueModal>
<VueModal
v-if="showCancel"
title="Cancel and reset project creation"
:title="$t('views.project-create.tabs.details.modal.title')"
class="small"
@close="showCancel = false"
>
<div class="default-body">
Are you sure you want to reset the project creation?
{{ $t('views.project-create.tabs.details.modal.body') }}
</div>
<div slot="footer" class="actions space-between">
<VueButton
label="Go back"
:label="$t('views.project-create.tabs.details.modal.buttons.back')"
class="flat"
@click="showCancel = false"
/>
<VueButton
:to="{ name: 'project-select' }"
label="Clear project"
:label="$t('views.project-create.tabs.details.modal.buttons.clear')"
icon-left="delete_forever"
class="danger"
@click="reset()"
@@ -319,14 +325,14 @@
<VueModal
v-if="showSavePreset"
title="Save as a new preset"
:title="$t('views.project-create.tabs.configuration.modal.title')"
class="small"
@close="showSavePreset = false"
>
<div class="default-body">
<VueFormField
title="Preset name"
subtitle="Save the features and configuration into a new preset"
:title="$t('views.project-create.tabs.configuration.modal.body.title')"
:subtitle="$t('views.project-create.tabs.configuration.modal.body.subtitle')"
>
<VueInput
v-model="formData.save"
@@ -337,19 +343,19 @@
<div slot="footer" class="actions end">
<VueButton
label="Cancel"
:label="$t('views.project-create.tabs.configuration.modal.buttons.cancel')"
class="flat"
@click="showSavePreset = false"
/>
<VueButton
label="Continue without saving"
:label="$t('views.project-create.tabs.configuration.modal.buttons.continue')"
class="flat"
@click="createWithoutSaving()"
/>
<VueButton
label="Create a new preset"
:label="$t('views.project-create.tabs.configuration.modal.buttons.create')"
icon-left="save"
class="primary"
:disabled="!formData.save"

6
packages/@vue/cli-ui/src/views/ProjectPlugins.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="project-plugins page">
<ContentView
title="Project plugins"
:title="$t('views.project-plugins.title')"
>
<template slot="header">
<VueButton
icon-left="add"
label="Add plugin"
:label="$t('views.project-plugins.button')"
class="primary"
:to="{ name: 'project-plugins-add' }"
/>
@@ -17,7 +17,7 @@
fetch-policy="cache-and-network"
>
<template slot-scope="{ result: { data, loading } }">
<div class="cta-text">Installed plugins</div>
<div class="cta-text">{{ $t('views.project-plugins.heading') }}</div>
<VueLoadingIndicator
v-if="loading"

29
packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
View File

@@ -2,14 +2,14 @@
<div class="project-plugins-add page">
<div class="content">
<StepWizard
title="Add a plugin"
:title="$t('views.project-plugins-add.title')"
class="frame"
:tab-id.sync="tabId"
>
<template slot-scope="{ next, previous }">
<VueTab
id="search"
label="Search"
:label="$t('views.project-plugins-add.tabs.search.label')"
icon="search"
disabled
>
@@ -48,7 +48,7 @@
<ais-no-results>
<div class="vue-ui-empty">
<VueIcon icon="search" class="huge"/>
<div>No results found</div>
<div>{{ $t('views.project-plugins-add.tabs.search.not-found') }}</div>
</div>
</ais-no-results>
<InstantSearchPagination/>
@@ -58,7 +58,7 @@
<div class="actions-bar no-padding-x">
<VueButton
icon-left="close"
label="Cancel"
:label="$t('views.project-plugins-add.tabs.search.buttons.cancel')"
class="big"
@click="close()"
/>
@@ -69,7 +69,7 @@
<VueButton
icon-left="file_download"
:label="`Install ${selectedId || 'plugin'}`"
:label="$t('views.project-plugins-add.tabs.search.buttons.install', { target: selectedId || $t('views.project-plugins-add.plugin') })"
class="big primary"
:disabled="!selectedId"
@click="installPlugin()"
@@ -79,14 +79,13 @@
<VueTab
id="config"
label="Configuration"
:label="$t('views.project-plugins-add.tabs.configuration.label')"
icon="settings_applications"
disabled
lazy
>
<div class="content vue-ui-disable-scroll">
<div class="cta-text">Installation of {{ pluginId }}</div>
<div class="cta-text">{{ $t('views.project-plugins-add.tabs.configuration.heading', { target: pluginId }) }}</div>
<PromptsList
:prompts="enabledPrompts"
@answer="answerPrompt"
@@ -96,14 +95,14 @@
<div class="actions-bar no-padding-x">
<VueButton
icon-left="arrow_back"
label="Cancel"
:label="$t('views.project-plugins-add.tabs.configuration.buttons.cancel')"
class="big"
@click="showCancelInstall = true"
/>
<VueButton
icon-left="done"
label="Finish installation"
:label="$t('views.project-plugins-add.tabs.configuration.buttons.finish')"
class="big primary"
:disabled="!configurationValid"
@click="invokePlugin()"
@@ -116,29 +115,29 @@
<VueModal
v-if="showCancelInstall"
:title="`Uninstall ${pluginId}?`"
:title="$t('views.project-plugins-add.modal.title', { target: pluginId })"
class="small"
@close="showCancelInstall = false"
>
<div class="default-body">
Do you want to uninstall the {{ pluginId }} plugin?
{{ $t('views.project-plugins-add.modal.body', { target: pluginId }) }}
</div>
<div slot="footer" class="actions space-between">
<VueButton
label="Go back"
:label="$t('views.project-plugins-add.modal.buttons.back')"
class="flat"
@click="showCancelInstall = false"
/>
<VueButton
label="Cancel without uninstalling"
:label="$t('views.project-plugins-add.modal.buttons.cancel')"
class="flat"
@click="cancelInstall()"
/>
<VueButton
label="Uninstall"
:label="$t('views.project-plugins-add.modal.buttons.uninstall')"
icon-left="delete_forever"
class="danger"
@click="uninstallPlugin()"

12
packages/@vue/cli-ui/src/views/ProjectSelect.vue
View File

@@ -2,13 +2,13 @@
<div class="project-select page">
<StepWizard
:tab-id.sync="tab"
:title="$route.query.title || 'Vue Project Manager'"
:title="$route.query.title || $t('views.project-select.title')"
:hide-tabs="!!hideTabs"
class="frame"
>
<VueTab
id="existing"
label="Projects"
:label="$t('views.project-select.tabs.projects')"
icon="storage"
>
<ProjectSelectList/>
@@ -16,7 +16,7 @@
<VueTab
id="create"
label="Create"
:label="$t('views.project-select.tabs.create')"
icon="add_box"
>
<div class="content">
@@ -26,7 +26,7 @@
<div class="actions-bar center">
<VueButton
icon-left="add"
:label="$route.query.action || 'Create a new project here'"
:label="$route.query.action || $t('views.project-select.buttons.create')"
class="big primary"
:to="{ name: 'project-create' }"
/>
@@ -35,7 +35,7 @@
<VueTab
id="import"
label="Import"
:label="$t('views.project-select.tabs.import')"
icon="unarchive"
>
<div class="content">
@@ -45,7 +45,7 @@
<div class="actions-bar center">
<VueButton
icon-left="unarchive"
:label="$route.query.action || 'Import this folder'"
:label="$route.query.action || $t('views.project-select.buttons.import')"
class="big primary"
:disabled="!folderCurrent.isVueProject"
@click="importProject()"

2
packages/@vue/cli-ui/src/views/ProjectTasks.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="project-tasks page">
<ContentView
title="Project tasks"
:title="$t('views.project-tasks.title')"
>
WIP
</ContentView>