diff --git a/frontend/src/assets/drivers/mysql.svg b/frontend/src/assets/drivers/mysql.svg new file mode 100644 index 0000000..207170c --- /dev/null +++ b/frontend/src/assets/drivers/mysql.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/drivers/postgres.svg b/frontend/src/assets/drivers/postgres.svg new file mode 100644 index 0000000..4656cb7 --- /dev/null +++ b/frontend/src/assets/drivers/postgres.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/DriverIcon.vue b/frontend/src/components/DriverIcon.vue new file mode 100644 index 0000000..29f4e9e --- /dev/null +++ b/frontend/src/components/DriverIcon.vue @@ -0,0 +1,17 @@ + + + + diff --git a/frontend/src/utils/drivers.js b/frontend/src/utils/drivers.js index fd1ae0b..b34a1d0 100644 --- a/frontend/src/utils/drivers.js +++ b/frontend/src/utils/drivers.js @@ -1,3 +1,7 @@ +// The engines' original logos, from devicon (MIT): devicon.dev. +import mysqlIcon from '../assets/drivers/mysql.svg' +import postgresIcon from '../assets/drivers/postgres.svg' + const NAMES = { postgres: 'PostgreSQL', mysql: 'MySQL' } /** A driver id as people say it. */ @@ -5,6 +9,13 @@ export function driverName(id) { return NAMES[id] || id || '' } +const ICONS = { postgres: postgresIcon, mysql: mysqlIcon } + +/** The URL of a driver's logo, or '' when it has none. */ +export function driverIcon(id) { + return ICONS[id] || '' +} + /** Used when GET /drivers fails, so the form still renders. */ export const FALLBACK_DRIVERS = [ { id: 'postgres', name: 'PostgreSQL', available: true }, diff --git a/frontend/src/views/DatabaseDetailView.vue b/frontend/src/views/DatabaseDetailView.vue index 6af60e1..864d68f 100644 --- a/frontend/src/views/DatabaseDetailView.vue +++ b/frontend/src/views/DatabaseDetailView.vue @@ -10,8 +10,8 @@
-
- +
+
@@ -55,7 +55,7 @@ import { computed, onMounted, ref } from 'vue' import { useRoute, useRouter } from 'vue-router' import ActivityPanel from '../components/ActivityPanel.vue' -import AppLogo from '../components/AppLogo.vue' +import DriverIcon from '../components/DriverIcon.vue' import ConnectPanel from '../components/ConnectPanel.vue' import LoadingState from '../components/LoadingState.vue' import PiiEditor from '../components/PiiEditor.vue' diff --git a/frontend/src/views/DatabaseFormView.vue b/frontend/src/views/DatabaseFormView.vue index 7829d2e..9a43f3f 100644 --- a/frontend/src/views/DatabaseFormView.vue +++ b/frontend/src/views/DatabaseFormView.vue @@ -37,9 +37,8 @@ form.driver === d.id ? 'border-gray-900 dark:border-white bg-gray-50 dark:bg-zinc-800/60' : 'border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700', !d.available ? 'opacity-50' : '' ]"> -
- +
+
{{ d.name }}
@@ -96,8 +95,8 @@