mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 00:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ui): replaced naive ui cards with custom ones

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-20 20:49:28 +02:00 • committed by Corentin THOMASSET
parent bb32513bd3
commit f080933d2a
40 changed files with 351 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ColoredCard.vue
View file

@ -1,5 +1,5 @@
<template>
<n-card class="colored-card">
<c-card class="colored-card">
<n-space justify="space-between" align="center">
<n-icon class="icon" size="40" :component="icon" />
</n-space>
@ -12,7 +12,7 @@
<slot />
</n-ellipsis>
</div>
</n-card>
</c-card>
</template>
<script setup lang="ts">

4
src/components/TextareaCopyable.vue
View file

@ -1,6 +1,6 @@
<template>
<div style="overflow-x: hidden; width: 100%">
<n-card class="result-card">
<c-card class="result-card">
<n-scrollbar
x-scrollable
trigger="none"
@ -20,7 +20,7 @@
</template>
<span>{{ tooltipText }}</span>
</n-tooltip>
</n-card>
</c-card>
<n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
<c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
</n-space>

12
src/components/ToolCard.vue
View file

@ -1,6 +1,6 @@
<template>
<router-link :to="tool.path">
<n-card class="tool-card">
<c-card class="tool-card">
<n-space justify="space-between" align="center">
<n-icon class="icon" size="40" :component="tool.icon" />
<n-space align="center">
@ -29,7 +29,7 @@
<br />&nbsp;
</n-ellipsis>
</div>
</n-card>
</c-card>
</router-link>
</template>
@ -37,11 +37,14 @@
import type { Tool } from '@/tools/tools.types';
import { useThemeVars } from 'naive-ui';
import { toRefs } from 'vue';
import { useAppTheme } from '@/ui/theme/themes';
import FavoriteButton from './FavoriteButton.vue';
const props = defineProps<{ tool: Tool & { category: string } }>();
const { tool } = toRefs(props);
const theme = useThemeVars();
const appTheme = useAppTheme();
</script>
<style lang="less" scoped>
@ -50,8 +53,11 @@ a {
}
.tool-card {
transition: border-color ease 0.5s;
border-width: 2px !important;
&:hover {
border-color: var(--n-color-target);
border-color: v-bind('appTheme.primary.colorHover');
}
.icon {