mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
add icons desc + enhance table
This commit is contained in:
Jordan Blasenhauer
parent
e61e40b245
commit
7b65f94f2c
30 changed files with 26068 additions and 1026 deletions
|
|
@ -1278,15 +1278,15 @@ body {
|
|||
/* TABLE */
|
||||
|
||||
.table-container {
|
||||
@apply col-span-12 overflow-x-auto overflow-y-hidden;
|
||||
@apply appearance-none block col-span-12 overflow-x-auto overflow-y-hidden;
|
||||
}
|
||||
|
||||
.table-container-wrap {
|
||||
@apply col-span-12 overflow-x-auto grid grid-cols-12;
|
||||
@apply appearance-none block col-span-12 overflow-x-auto grid grid-cols-12;
|
||||
}
|
||||
|
||||
.table {
|
||||
@apply w-full grid grid-cols-12 block;
|
||||
@apply appearance-none w-full grid grid-cols-12 block;
|
||||
}
|
||||
|
||||
.sm.table {
|
||||
|
|
@ -1310,26 +1310,25 @@ body {
|
|||
}
|
||||
|
||||
.table-header {
|
||||
@apply block w-full col-span-12 grid grid-cols-12 pl-2;
|
||||
@apply appearance-none block w-full col-span-12 grid grid-cols-12;
|
||||
}
|
||||
|
||||
.table-header-item {
|
||||
@apply block dark:text-gray-300 pb-1 text-sm font-bold m-0 border-b border-gray-400;
|
||||
@apply appearance-none block dark:text-gray-300 pb-1 text-sm font-bold m-0 border-b border-gray-400;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
@apply dark:text-gray-400 block w-full rounded col-span-12 overflow-x-hidden overflow-y-auto max-h-[300px];
|
||||
@apply appearance-none dark:text-gray-400 block w-full rounded col-span-12 overflow-x-hidden overflow-y-auto max-h-[300px];
|
||||
}
|
||||
|
||||
.table-content-item {
|
||||
@apply text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 py-2.5 px-1;
|
||||
@apply appearance-none text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 py-2.5;
|
||||
}
|
||||
|
||||
.table-content-item-wrap {
|
||||
@apply py-2.5 px-1;
|
||||
@apply appearance-none py-2.5 pl-1;
|
||||
}
|
||||
|
||||
|
||||
/** MISC **/
|
||||
|
||||
.line-separator {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
41
vuejs/client/src/components/Icons/Check.vue
Normal file
41
vuejs/client/src/components/Icons/Check.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
/**
|
||||
@name Icons/Check.vue
|
||||
@description This component is a svg icon representing a check mark.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-description="$t('icons_check_desc')"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -11,28 +11,28 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
<svg
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-description="$t('icons_core_desc')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512"
|
||||
>
|
||||
>
|
||||
<path
|
||||
d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"
|
||||
d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"
|
||||
/>
|
||||
</svg>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
41
vuejs/client/src/components/Icons/Cross.vue
Normal file
41
vuejs/client/src/components/Icons/Cross.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
/**
|
||||
@name Icons/Cross.vue
|
||||
@description This component is a svg icon representing a cross mark.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconColor="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-description="$t('icons_cross_desc')"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -11,31 +11,32 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg role="img"
|
||||
aria-hidden="true"
|
||||
<svg
|
||||
role="img"
|
||||
:aria-description="$t('icons_crown_desc')"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
>
|
||||
<path
|
||||
d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z"
|
||||
d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z"
|
||||
/>
|
||||
<path
|
||||
d="M21.2803 45.5H26.7198C33.8098 45.5 37.3545 45.5 39.7198 43.383C40.7523 42.4588 41.4057 40.793 41.8775 38.625H6.1224C6.59413 40.793 7.24783 42.4588 8.2802 43.383C10.6454 45.5 14.1903 45.5 21.2803 45.5Z"
|
||||
d="M21.2803 45.5H26.7198C33.8098 45.5 37.3545 45.5 39.7198 43.383C40.7523 42.4588 41.4057 40.793 41.8775 38.625H6.1224C6.59413 40.793 7.24783 42.4588 8.2802 43.383C10.6454 45.5 14.1903 45.5 21.2803 45.5Z"
|
||||
/>
|
||||
</svg>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,24 +11,24 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "discord",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "discord",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-description="$t('icons_discord_desc')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,24 +11,24 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "github",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "github",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-description="$t('icons_github_desc')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,27 +11,27 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "linkedin",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "linkedin",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
class="hover:opacity-80 dark:brightness-110"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
:aria-description="$t('icons_linkedin_desc')"
|
||||
>
|
||||
<path
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
||||
|
|
|
|||
|
|
@ -11,22 +11,32 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg role="img"
|
||||
aria-hidden="true" :class="[props.iconClass, props.iconColor]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
<svg
|
||||
role="img"
|
||||
:aria-description="$t('icons_plus_desc')"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,21 +11,32 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "info",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg role="img"
|
||||
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="[props.iconClass, props.iconColor]">
|
||||
<path fill-rule="evenodd" d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg
|
||||
role="img"
|
||||
:aria-description="$t('icons_trespass_desc')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,22 @@
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass : {
|
||||
type: String,
|
||||
required: false,
|
||||
default : "default-svg"
|
||||
},
|
||||
iconColor : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "twitter",
|
||||
}
|
||||
})
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "twitter",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:aria-description="$t('icons_twitter_desc')"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ import Puzzle from "@components/Icons/Puzzle.vue";
|
|||
import Settings from "@components/Icons/Settings.vue";
|
||||
import Task from "@components/Icons/Task.vue";
|
||||
import Trespass from "@components/Icons/Trespass.vue";
|
||||
import Check from "@components/Icons/Check.vue";
|
||||
import Cross from "@components/Icons/Cross.vue";
|
||||
import Twitter from "@components/Icons/Twitter.vue";
|
||||
import Wire from "@components/Icons/Wire.vue";
|
||||
import Funnel from "@components/Icons/Funnel.vue";
|
||||
|
|
@ -192,6 +194,16 @@ const iconClass = computed(() => {
|
|||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
/>
|
||||
<Check
|
||||
v-if="props.iconName === 'check'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
/>
|
||||
<Cross
|
||||
v-if="props.iconName === 'cross'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
/>
|
||||
<Twitter
|
||||
v-if="props.iconName === 'twitter'"
|
||||
:iconClass="iconClass"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<script setup>
|
||||
import { reactive, computed, ref, onMounted, onUpdated } from "vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Container from "@components/Widget/Container.vue";
|
||||
import Text from "@components/Widget/Text.vue";
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import Fields from "@components/Form/Fields.vue";
|
||||
import Button from "@components/Widget/Button.vue";
|
||||
import { reactive, computed, resolveComponent } from "vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
/**
|
||||
@name Widget/Table.vue
|
||||
|
|
@ -25,7 +25,7 @@ import { v4 as uuidv4 } from "uuid";
|
|||
"type": "Text",
|
||||
"data": {
|
||||
"text": "whitelist-download"
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
...
|
||||
|
|
@ -33,11 +33,11 @@ import { v4 as uuidv4 } from "uuid";
|
|||
...
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
@param {string} title - Determine the title of the table.
|
||||
@param {array} header - Determine the header of the table.
|
||||
@param {array} positions - Determine the position of each item in the table in a list of number based on 12 columns grid.
|
||||
@param {array} items - items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
|
||||
@param {array} items - items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
|
||||
@param {string} [minWidth="base"] - Determine the minimum size of the table. Can be "base", "sm", "md", "lg", "xl".
|
||||
@param {string} [containerClass=""] - Container additional class.
|
||||
@param {string} [containerWrapClass=""] - Container wrap additional class.
|
||||
|
|
@ -83,7 +83,11 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const tableBody = ref(null);
|
||||
const tableHeader = ref(null);
|
||||
|
||||
const table = reactive({
|
||||
id: uuidv4(),
|
||||
length: computed(() => {
|
||||
return props.header.length;
|
||||
}),
|
||||
|
|
@ -93,7 +97,26 @@ const table = reactive({
|
|||
title: computed(() => {
|
||||
return props.title ? props.title : "dashboard_table";
|
||||
}),
|
||||
id: uuidv4(),
|
||||
});
|
||||
|
||||
function getOverflow() {
|
||||
const overflow =
|
||||
tableBody.value.getBoundingClientRect().width - tableBody.value.clientWidth;
|
||||
|
||||
if (overflow > 0) {
|
||||
return (tableHeader.value.style.paddingRight = `${overflow}px`);
|
||||
}
|
||||
|
||||
// remove style
|
||||
return tableHeader.value.removeAttribute("style");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getOverflow();
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
getOverflow();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -103,6 +126,7 @@ const table = reactive({
|
|||
:containerClass="`${props.containerWrapClass} table-container-wrap`"
|
||||
>
|
||||
<table
|
||||
:aria-labelledby="table.id"
|
||||
:aria-colcount="table.length"
|
||||
:aria-rowcount="table.rowLength"
|
||||
:class="['table', props.minWidth, props.tableClass]"
|
||||
|
|
@ -111,7 +135,11 @@ const table = reactive({
|
|||
<span class="sr-only" :id="table.id">
|
||||
{{ $t(table.title, table.title) }}
|
||||
</span>
|
||||
<thead class="table-header">
|
||||
<thead
|
||||
ref="tableHeader"
|
||||
class="table-header"
|
||||
:style="{ paddingRight: table.overflow }"
|
||||
>
|
||||
<tr
|
||||
v-for="(head, id) in props.header"
|
||||
:class="['table-header-item', `col-span-${props.positions[id]}`]"
|
||||
|
|
@ -121,14 +149,14 @@ const table = reactive({
|
|||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-content">
|
||||
<tbody ref="tableBody" class="table-content">
|
||||
<tr
|
||||
v-for="rowId in table.rowLength"
|
||||
role="row"
|
||||
:aria-rowindex="rowId"
|
||||
class="table-content-item"
|
||||
>
|
||||
<template v-for="(col, id) in props.items[rowId - 1]">
|
||||
<template v-for="(col, id) in props.items[rowId]">
|
||||
<td
|
||||
:class="[
|
||||
'table-content-item-wrap',
|
||||
|
|
|
|||
|
|
@ -122,6 +122,16 @@
|
|||
"inp_editor_desc" : "Editor input behaving like a code editor.",
|
||||
"inp_input_clipboard_copied": "copied to clipboard",
|
||||
"inp_input_clipboard_desc": "Copy to clipboard on click.",
|
||||
"icons_cross_desc": "Cross icon representing a close, delete, error or cancel state.",
|
||||
"icons_check_desc": "Check icon representing a success, valid or active state.",
|
||||
"icons_core_desc": "Core icon representing a core setting or plugin.",
|
||||
"icons_crown_desc": "Crown icon representing premium feature like a pro plugin.",
|
||||
"icons_plus_desc": "Plus icon representing an add, create or new state.",
|
||||
"icons_trespass_desc": "Trespass icon representing a ban, disable, lock or negative state.",
|
||||
"icons_discord_desc": "Discord icon representing a link to a Discord server.",
|
||||
"icons_github_desc": "Github icon representing a link to a Github repository.",
|
||||
"icons_linkedin_desc": "Linkedin icon representing a link to a Linkedin profile.",
|
||||
"icons_twitter_desc": "Twitter icon representing a link to a Twitter account.",
|
||||
"action_send": "send {name}",
|
||||
"action_start": "start {name}",
|
||||
"action_disable": "disable {name}",
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Builder)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp"]))
|
||||
.mount("#app");
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp", "icons"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Dashboard)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp"]))
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp", "icons"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(GlobalConfig)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "action", "inp", "global_config"]))
|
||||
.use(getI18n(["dashboard", "action", "inp", "icons", "global_config"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useForm } from "@utils/form.js";
|
|||
/**
|
||||
@name Page/GlobalConfig.vue
|
||||
@description This component is the global config page.
|
||||
This page displays an overview of multiple stats related to BunkerWeb.
|
||||
This page displays the global configuration of the server and allow to manage it.
|
||||
*/
|
||||
|
||||
const globalConfig = reactive({
|
||||
|
|
@ -31,29 +31,6 @@ onMounted(() => {
|
|||
useForm();
|
||||
});
|
||||
|
||||
// const data = [
|
||||
// {
|
||||
// type: "Instance",
|
||||
// data: {
|
||||
// details: [
|
||||
// { key: <instances_hostname="hostname">, value: "www.example.com" },
|
||||
// { key: <instances_method="method">, value: <dashboard_ui> or <dashboard_scheduler>...},
|
||||
// { key: <instances_port="port">, value: "1084" },
|
||||
// { key: <instances_status="status">, value: <instances_active="active"> or <instances_inactive="inactive"> },
|
||||
// ],
|
||||
// status: "success",
|
||||
// title: "www.example.com",
|
||||
// buttons: [
|
||||
// {
|
||||
// text: <action_*>,
|
||||
// color: "edit",
|
||||
// size: "normal",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
|
||||
const data = {
|
||||
advanced: {
|
||||
default: [
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Home)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "action", "inp", "home"]))
|
||||
.use(getI18n(["dashboard", "action", "inp", "icons", "home"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Instances)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "action", "inp", "instances"]))
|
||||
.use(getI18n(["dashboard", "action", "inp", "icons", "instances"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
24166
vuejs/client/src/pages/jobs/Jobs.vue
Normal file
24166
vuejs/client/src/pages/jobs/Jobs.vue
Normal file
File diff suppressed because it is too large
Load diff
22
vuejs/client/src/pages/jobs/index.html
Normal file
22
vuejs/client/src/pages/jobs/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<link rel="stylesheet" href="/css/flag-icons.min.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BunkerWeb | Jobs</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hidden" data-server-global='{"username" : "admin"}'></div>
|
||||
<div class="hidden"
|
||||
data-server-flash='[{"type" : "success", "title" : "title", "message" : "Success feedback"}, {"type" : "error", "title" : "title", "message" : "Error feedback"}, {"type" : "warning", "title" : "title", "message" : "Warning feedback"}, {"type" : "info", "title" : "title", "message" : "Info feedback"}]'>
|
||||
</div>
|
||||
<div class="hidden"
|
||||
data-server-builder='[{"type":"card","containerColumns":{"pc":6,"tablet":6,"mobile":12},"widgets":[{"type":"Instance","data":{"details":[{"key":"instances_hostname","value":"bunkerweb"},{"key":"instances_type","value":"manual"},{"key":"instances_status","value":"instances_active"}],"status":"success","title":"bunkerweb","buttons":[{"attrs":{"data-form-INSTANCE_ID":"bunkerweb","data-form-operation":"reload","data-submit-form":"true"},"text":"action_reload","color":"warning","size":"normal"},{"attrs":{"data-form-INSTANCE_ID":"bunkerweb","data-form-operation":"stop","data-submit-form":"true"},"text":"action_stop","color":"error","size":"normal"}]}}]}]'>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="jobs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
vuejs/client/src/pages/jobs/jobs.js
Normal file
11
vuejs/client/src/pages/jobs/jobs.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import { getI18n } from "@utils/lang.js";
|
||||
import Jobs from "./jobs.vue";
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
createApp(Jobs)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "action", "inp", "icons", "jobs"]))
|
||||
.mount("#app");
|
||||
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Services)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "action", "inp", "services"]))
|
||||
.use(getI18n(["dashboard", "action", "inp", "icons", "services"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useForm } from "@utils/form.js";
|
|||
/**
|
||||
@name Page/Services.vue
|
||||
@description This component is the services page.
|
||||
This page displays an overview of multiple stats related to BunkerWeb.
|
||||
This page displays services and forms to manage them.
|
||||
*/
|
||||
|
||||
const services = reactive({
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,5 +7,5 @@ const pinia = createPinia();
|
|||
|
||||
createApp(Test)
|
||||
.use(pinia)
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp"]))
|
||||
.mount("#app");
|
||||
.use(getI18n(["dashboard", "api", "action", "bans", "inp", "icons"]))
|
||||
.mount("#app");
|
||||
|
|
|
|||
1414
vuejs/jobs.json
1414
vuejs/jobs.json
File diff suppressed because it is too large
Load diff
|
|
@ -9,18 +9,23 @@ def jobs_to_list(jobs):
|
|||
# loop on each dict
|
||||
for key, value in jobs.items():
|
||||
item = []
|
||||
item.append({'name': { 'type': 'Text', 'data': {'text' : key } }})
|
||||
item.append({ 'type': 'Text', 'data': {'text' : key } })
|
||||
# loop on each value
|
||||
for k, v in value.items():
|
||||
# override widget type for some keys
|
||||
if k in ('reload', 'success'):
|
||||
item.append({k : { 'type': 'Icons', 'data': {"iconColor": "success" if v else "error", "iconName": "check" if v else "cross" } }})
|
||||
item.append({ 'type': 'Icons', 'data': {"iconColor": "success" if v else "error", "iconName": "check" if v else "cross" } })
|
||||
continue
|
||||
|
||||
if k in ("plugin_id", "every", "last_run"):
|
||||
item.append({k : { 'type': 'Text', 'data': {'text' : v } }})
|
||||
item.append({ 'type': 'Text', 'data': {'text' : v } })
|
||||
continue
|
||||
|
||||
|
||||
if k in ("cache") and len(v) <= 0:
|
||||
item.append({k : { 'type': 'Text', 'data': {'text' : "No cache" } }})
|
||||
item.append({ 'type': 'Text', 'data': {'text' : "No cache" } })
|
||||
continue
|
||||
|
||||
|
||||
if k in ("cache") and len(v) > 0:
|
||||
files = ["none"]
|
||||
|
|
@ -29,7 +34,7 @@ def jobs_to_list(jobs):
|
|||
file_name = f"{cache['service_id']}/{cache['file_name']}" if cache['service_id'] else cache['file_name']
|
||||
files.append(file_name)
|
||||
|
||||
item.append({k : { 'type': 'select', 'data': {
|
||||
item.append({ 'type': 'select', 'data': {
|
||||
"id": f"{key}_cache",
|
||||
"label": f"{key}_cache",
|
||||
"hideLabel": True,
|
||||
|
|
@ -50,7 +55,9 @@ def jobs_to_list(jobs):
|
|||
},
|
||||
],
|
||||
},
|
||||
}})
|
||||
})
|
||||
continue
|
||||
|
||||
|
||||
|
||||
data.append(item)
|
||||
|
|
|
|||
Loading…
Reference in a new issue