public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): remove n-text (#506)

Browse Source
This commit is contained in:
Corentin THOMASSET 2023-06-25 15:49:43 +02:00 committed by GitHub
parent 05ea545475
commit 72c98a3c5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 52 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@ -60,8 +60,10 @@ declare module '@vue/runtime-core' {
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
IconMdiCamera: typeof import('~icons/mdi/camera')['default']
IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
IconMdiClose: typeof import('~icons/mdi/close')['default']
IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
@ -75,6 +77,7 @@ declare module '@vue/runtime-core' {
IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
IconMdiSearch: typeof import('~icons/mdi/search')['default']
IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default']
IconMdiTea: typeof import('~icons/mdi/tea')['default']
IconMdiVideo: typeof import('~icons/mdi/video')['default']
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']

31
src/components/CollapsibleToolMenu.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { ChevronRight } from '@vicons/tabler';
import { useStorage } from '@vueuse/core';
import { useThemeVars } from 'naive-ui';
import { RouterLink, useRoute } from 'vue-router';
@ -47,13 +46,15 @@ const themeVars = useThemeVars();
<template>
<div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
<n-text tag="div" depth="3" class="category-name" @click="toggleCategoryCollapse({ name })">
<n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
<div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
<span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
<icon-mdi-chevron-right />
</span>
<span>
<span ml-8px text-13px>
{{ name }}
</span>
</n-text>
</div>
<n-collapse-transition :show="!isCollapsed">
<div class="menu-wrapper">
@ -74,26 +75,6 @@ const themeVars = useThemeVars();
</template>
<style scoped lang="less">
.category-name {
font-size: 0.93em;
padding: 12px 0 0px 0;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
.n-icon {
transition: transform ease 0.5s;
transform: rotate(90deg);
margin: 0 10px 0 7px;
opacity: 0.5;
&.rotated {
transform: rotate(0deg);
}
}
}
.menu-wrapper {
display: flex;
flex-direction: row;

17
src/pages/404.page.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { Coffee } from '@vicons/tabler';
import { useHead } from '@vueuse/head';
useHead({ title: 'Page not found - IT Tools' });
@ -7,17 +6,19 @@ useHead({ title: 'Page not found - IT Tools' });
<template>
<div mt-20 flex flex-col items-center>
<n-icon :component="Coffee" size="100" depth="3" />
<span text-90px lh-1 op-50>
<icon-mdi:kettle-steam-outline />
</span>
<n-h1 m-0 mt-3>
<h1 m-0 mt-3>
404 Not Found
</n-h1>
<n-text mt-4 block depth="3">
</h1>
<div mt-4 op-60>
Sorry, this page does not seem to exist
</n-text>
<n-text mb-8 block depth="3">
</div>
<div mb-8 op-60>
Maybe the cache is doing tricky things, try force-refreshing?
</n-text>
</div>
<c-button to="/">
Back home

4
src/tools/base64-file-converter/base64-file-converter.vue
View File

@ -70,9 +70,9 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
<div mb-2>
<n-icon size="35" :depth="3" :component="Upload" />
</div>
<n-text style="font-size: 14px">
<div op-60>
Click or drag a file to this area to upload
</n-text>
</div>
</n-upload-dragger>
</n-upload>

7
src/tools/eta-calculator/eta-calculator.vue
View File

@ -25,11 +25,10 @@ const endAt = computed(() =>
<template>
<div>
<n-text depth="3" style="text-align: justify; width: 100%; display: inline-block">
<div text-justify op-70>
With a concrete example, if you wash 3 plates in 5 minutes and you have 500 plates to wash, it will take you 5
hours and 10 minutes to wash them all, and if you start now, you'll end
{{ endAt }}.
</n-text>
hours and 10 minutes to wash them all.
</div>
<n-divider />
<div flex gap-2>
<n-form-item label="Amount of element to consume" flex-1>

4
src/tools/ipv4-range-expander/ipv4-range-expander.vue
View File

@ -105,10 +105,10 @@ function onSwitchStartEndClicked() {
title="Invalid combination of start and end IPv4 address"
type="error"
>
<n-text depth="3" my-3 block>
<div my-3 op-70>
The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated.
In the most cases the solution to solve this problem is to change start and end address.
</n-text>
</div>
<c-button @click="onSwitchStartEndClicked">
<n-icon mr-2 :component="Exchange" depth="3" size="22" />

4
src/tools/ipv4-range-expander/result-row.vue
View File

@ -14,10 +14,8 @@ const testId = computed(() => _.kebabCase(label.value));
<template>
<tr>
<td>
<n-text strong>
<td font-bold>
{{ label }}
</n-text>
</td>
<td :data-test-id="`${testId}.old`">
<SpanCopyable :value="oldValue" class="monospace" />

8
src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
View File

@ -96,16 +96,14 @@ function switchToBlock({ count = 1 }: { count?: number }) {
<n-table>
<tbody>
<tr v-for="{ getValue, label, undefinedFallback } in sections" :key="label">
<td>
<n-text strong>
<td font-bold>
{{ label }}
</n-text>
</td>
<td>
<SpanCopyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)" />
<n-text v-else depth="3">
<span v-else op-70>
{{ undefinedFallback }}
</n-text>
</span>
</td>
</tr>
</tbody>

4
src/tools/json-diff/diff-viewer/diff-viewer.vue
View File

@ -26,9 +26,9 @@ const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefi
</div>
<c-card data-test-id="diff-result">
<n-text v-if="jsonAreTheSame" depth="3" block text-center italic>
<div v-if="jsonAreTheSame" text-center op-70>
The provided JSONs are the same
</n-text>
</div>
<DiffRootViewer v-else :diff="result" />
</c-card>
</div>

14
src/tools/jwt-parser/jwt-parser.vue
View File

@ -40,18 +40,18 @@ const validation = useValidation({
</th>
<tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
<td class="claims">
<n-text strong>
<span font-bold>
{{ claim }}
</n-text>
<n-text v-if="claimDescription" depth="3" ml-2>
</span>
<span v-if="claimDescription" ml-2 op-70>
({{ claimDescription }})
</n-text>
</span>
</td>
<td>
<n-text>{{ value }}</n-text>
<n-text v-if="friendlyValue" ml-2 depth="3">
<span>{{ value }}</span>
<span v-if="friendlyValue" ml-2 op-70>
({{ friendlyValue }})
</n-text>
</span>
</td>
</tr>
</template>

10
src/tools/keycode-info/keycode-info.vue
View File

@ -54,13 +54,13 @@ const fields = computed(() => {
<template>
<div>
<c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
<n-h2 v-if="event">
<c-card mb-5 text-center important:py-12>
<div v-if="event" mb-2 text-3xl>
{{ event.key }}
</n-h2>
<n-text strong depth="3">
</div>
<span lh-1 op-70>
Press the key on your keyboard you want to get info about this key
</n-text>
</span>
</c-card>
<n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">

8
src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
View File

@ -100,16 +100,14 @@ const countriesOptions = getCountries().map(code => ({
<n-table v-if="parsedDetails">
<tbody>
<tr v-for="{ label, value } in parsedDetails" :key="label">
<td>
<n-text strong>
<td font-bold>
{{ label }}
</n-text>
</td>
<td>
<span-copyable v-if="value" :value="value" />
<n-text v-else depth="3" italic>
<span v-else op-70>
Unknown
</n-text>
</span>
</td>
</tr>
</tbody>

4
src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
View File

@ -18,9 +18,9 @@ const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.
/>
<div v-if="natoText">
<n-text mb-1 block>
<div mb-2>
Your text in NATO phonetic alphabet
</n-text>
</div>
<c-card>
{{ natoText }}
</c-card>

2
src/tools/user-agent-parser/user-agent-result-cards.vue
View File

@ -37,7 +37,7 @@ const { userAgentInfo, sections } = toRefs(props);
</div>
<div flex flex-col>
<span v-for="{ label, getValue, undefinedFallback } in content" :key="label">
<n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
<span v-if="getValue(userAgentInfo) === undefined" op-70>{{ undefinedFallback }}</span>
</span>
</div>
</c-card>