github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): update styles

pull/2716/head
Braks 3 years ago committed by Pranav C
parent
8e1ce46f42
commit
c6267b3bb0
4 changed files with 110 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      packages/nc-gui-v2/assets/style.css
  2. 155
      packages/nc-gui-v2/pages/projects/create-external.vue
  3. 52
      packages/nc-gui-v2/pages/projects/create.vue
  4. 2
      packages/nc-gui-v2/pages/projects/index.vue

7
packages/nc-gui-v2/assets/style.css
Unescape View File

@ -1,3 +1,10 @@
html,
body,
#__nuxt {
margin: 0;
height: 100%;
}
html, body {
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
}

155
packages/nc-gui-v2/pages/projects/create-external.vue
Unescape View File

@ -2,9 +2,10 @@
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification'
import { useNuxtApp, useRouter } from '#app'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/utils/projectCreateUtils'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
const name = ref('')
const loading = ref(false)
@ -16,10 +17,9 @@ const inflection = reactive({
columnName: 'camelize',
})
const $router = useRouter()
const { $api, $e } = useNuxtApp()
const toast = useToast()
const { t: $t } = useI18n()
const { t } = useI18n()
const titleValidationRule = [
(v: string) => !!v || 'Title is required',
@ -42,7 +42,7 @@ const createProject = async () => {
external: true,
})
await $router.push(`/nc/${result.id}`)
await navigateTo(`/nc/${result.id}`)
} catch (e: any) {
// todo: toast
toast.error(await extractSdkResponseErrorMsg(e))
@ -72,7 +72,7 @@ const testConnection = async () => {
testSuccess.value = true
} else {
testSuccess.value = false
toast.error($t('msg.error.dbConnectionFailed') + result.message)
toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
}
}
} catch (e: any) {
@ -84,90 +84,95 @@ const testConnection = async () => {
<template>
<NuxtLayout>
<div class="main justify-center d-flex mx-auto" style="min-height: 600px; overflow: auto">
<v-container fluid class="d-flex justify-center align-center h-75">
<v-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card style="width: 530px; margin-top: 100px" class="mx-auto">
<v-card max-width="600">
<!-- Create Project -->
<v-container class="pb-10 px-12" style="padding-top: 43px !important">
<h1 class="mt-4 mb-4 text-center">
<!-- {{ $t('activity.createProject') }} -->
Create Project
<v-container class="pb-10 px-12">
<h1 class="mb-4 text-center">
{{ $t('activity.createProject') }}
</h1>
<div class="mx-auto" style="width: 350px">
<!-- label="Enter Project Name" -->
<!-- rule text: Required -->
<v-text-field v-model="name" :rules="titleValidationRule" class="nc-metadb-project-name" label="Project name" />
<!-- :rules="titleValidationRule" -->
</div>
<v-container fluid>
<v-row>
<v-col cols="6">
<v-select
v-model="projectDatasource.client"
density="compact"
:items="clientTypes"
item-title="text"
item-value="value"
class="nc-metadb-project-name"
label="Database client"
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.host" density="compact" label="Host" />
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.port" density="compact" label="Port" type="number" />
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.user" density="compact" label="Username" />
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.password"
density="compact"
type="password"
label="Password"
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
</v-col>
<!-- <v-col cols="6">
<v-text-field
v-model="inflection.tableName"
density="compact"
type="password"
label="Password"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="inflection.columnName"
density="compact"
label="Database name"
/>
</v-col> -->
</v-row>
</v-container>
<v-row>
<v-col offset="2" cols="8">
<v-text-field
v-model="name"
:rules="titleValidationRule"
class="nc-metadb-project-name"
:label="$t('labels.projName')"
/>
</v-col>
<v-col cols="6">
<v-select
v-model="projectDatasource.client"
density="compact"
:items="clientTypes"
item-title="text"
item-value="value"
class="nc-metadb-project-name"
label="Database client"
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.host" density="compact" :label="$t('labels.hostAddress')" />
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.port"
density="compact"
:label="$t('labels.port')"
type="number"
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.user" density="compact" :label="$t('labels.username')" />
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.password"
density="compact"
type="password"
:label="$t('labels.password')"
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
</v-col>
<!-- todo: reimplement?
<v-col cols="6">
<v-text-field
v-model="inflection.tableName"
density="compact"
type="password"
label="Password"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="inflection.columnName"
density="compact"
label="Database name"
/>
</v-col>
-->
</v-row>
<div class="d-flex justify-center" style="gap: 4px">
<v-btn :disabled="!testSuccess" class="" large :loading="loading" color="primary" @click="createProject">
<v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline</v-icon>
<!-- Create -->
<span class="mr-1">{{ $t('general.create') }} </span>
<v-btn :disabled="!testSuccess" large :loading="loading" color="primary" @click="createProject">
<MaterialSymbolsRocketLaunchOutline class="mr-1" />
<span> {{ $t('general.create') }} </span>
</v-btn>
<v-btn size="sm" class="text-sm text-capitalize">
<!-- Test Database Connection -->
<v-btn small class="px-2">
{{ $t('activity.testDbConn') }}
</v-btn>
</div>
</v-container>
</v-card>
</v-form>
</div>
</v-container>
</NuxtLayout>
</template>

52
packages/nc-gui-v2/pages/projects/create.vue
Unescape View File

@ -1,14 +1,14 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { useNuxtApp, useRouter } from '#app'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
const name = ref('')
const loading = ref(false)
const valid = ref(false)
const { $api, $toast } = useNuxtApp()
const $router = useRouter()
const titleValidationRule = [
(v: string) => !!v || 'Title is required',
@ -22,9 +22,8 @@ const createProject = async () => {
title: name.value,
})
await $router.push(`/nc/${result.id}`)
await navigateTo(`/nc/${result.id}`)
} catch (e: any) {
// todo: toast
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
}
loading.value = false
@ -32,33 +31,26 @@ const createProject = async () => {
</script>
<template>
<div class="main justify-center d-flex mx-auto" style="min-height: 600px; overflow: auto">
<v-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card style="width: 530px; margin-top: 100px" class="mx-auto">
<!-- Create Project -->
<v-container class="pb-10 px-12" style="padding-top: 43px !important">
<h1 class="mt-4 mb-4 text-center">
<!-- {{ $t('activity.createProject') }} -->
Create Project
</h1>
<div class="mx-auto" style="width: 350px">
<!-- label="Enter Project Name" -->
<!-- rule text: Required -->
<v-text-field v-model="name" class="nc-metadb-project-name" label="Project name" />
<!-- :rules="titleValidationRule" -->
</div>
<div class="text-center">
<v-btn class="mt-3 mx-auto" large :loading="loading" color="primary" @click="createProject">
<v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline </v-icon>
<!-- Create -->
<!-- <span class="mr-1">{{ // $t("general.create") }}</span> -->
<span class="mr-1"> Create project </span>
<NuxtLayout>
<v-container fluid class="d-flex justify-center align-center h-75">
<v-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card max-width="500">
<v-container class="pb-10 px-12">
<h1 class="mt-4 mb-4 text-center">
{{ $t('activity.createProject') }}
</h1>
<div class="mx-auto" style="width: 350px">
<v-text-field v-model="name" class="nc-metadb-project-name" :label="$t('labels.projName')" />
</div>
<v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject">
<MaterialSymbolsRocketLaunchOutline class="mr-1" />
<span> {{ $t('general.create') }} </span>
</v-btn>
</div>
</v-container>
</v-card>
</v-form>
</div>
</v-container>
</v-card>
</v-form>
</v-container>
</NuxtLayout>
</template>
<style scoped>

2
packages/nc-gui-v2/pages/projects/index.vue
Unescape View File

@ -19,7 +19,7 @@ const projects = ref(response.list)
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
{{ $t('activity.createProject') }}
</v-btn>
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create-external')">
{{ $t('activity.createProjectExtended.extDB') }}
</v-btn>
</div>

Write Preview
Loading…
Cancel
Save