mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-02-17 15:01:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

more refactoring, fixes and buttons

Browse Source
This commit is contained in:
fabianmakila 2022-05-24 17:42:50 +03:00
parent 36f96a2394
commit 339115ca85
20 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend-new/src/components/design/Button.vue
View File

@ -10,7 +10,7 @@ const props = withDefaults(
defineProps<{ defineProps<{
disabled?: boolean; disabled?: boolean;
size?: "small" | "medium" | "large"; size?: "small" | "medium" | "large";
buttonType?: "primary" | "gray" | "red" | "transparent"; buttonType?: "primary" | "secondary" | "red" | "transparent";
loading?: boolean; loading?: boolean;
to?: string | RouteLocationRaw | object; to?: string | RouteLocationRaw | object;
}>(), }>(),
@ -42,7 +42,11 @@ const paddingClass = computed(() => {
<component <component
:is="to ? 'router-link' : 'button'" :is="to ? 'router-link' : 'button'"
:class=" :class="
'rounded-md font-semibold h-min inline-flex items-center justify-center ' + paddingClass + ' button-' + buttonType + (loading ? ' !cursor-wait' : '') 'rounded-md font-semibold h-min inline-flex items-center justify-center text-white disabled:(bg-gray-300 cursor-not-allowed) disabled:dark:(text-gray-500 bg-gray-700) ' +
paddingClass +
' button-' +
buttonType +
(loading ? ' !cursor-wait' : '')
" "
:disabled="disabled || loading" :disabled="disabled || loading"
:to="to" :to="to"

2
frontend-new/src/components/modals/ChannelModal.vue
View File

@ -94,7 +94,7 @@ reset();
<Button button-type="primary" class="mt-2" :disabled="v.$invalid" @click="create(on.click)">{{ <Button button-type="primary" class="mt-2" :disabled="v.$invalid" @click="create(on.click)">{{
edit ? i18n.t("general.save") : i18n.t("general.create") edit ? i18n.t("general.save") : i18n.t("general.create")
}}</Button> }}</Button>
<Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<slot name="activator" :on="on"></slot> <slot name="activator" :on="on"></slot>

2
frontend-new/src/components/modals/DeletePageModal.vue
View File

@ -15,7 +15,7 @@ const i18n = useI18n();
<template #default="{ on }"> <template #default="{ on }">
<p>{{ i18n.t("page.delete.text") }}</p> <p>{{ i18n.t("page.delete.text") }}</p>
<Button class="mt-2" @click="emit('delete')">{{ i18n.t("general.delete") }}</Button> <Button class="mt-2" @click="emit('delete')">{{ i18n.t("general.delete") }}</Button>
<Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<slot name="activator" :on="on"></slot> <slot name="activator" :on="on"></slot>

2
frontend-new/src/components/modals/DiffModal.vue
View File

@ -54,7 +54,7 @@ const prettyDiff = computed(() => {
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="prettyDiff"></div> <div v-html="prettyDiff"></div>
<Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<slot name="activator" :on="on"></slot> <slot name="activator" :on="on"></slot>

2
frontend-new/src/components/modals/MarkdownModal.vue
View File

@ -17,7 +17,7 @@ const i18n = useI18n();
<template #default="{ on }"> <template #default="{ on }">
<Markdown :raw="markdown"></Markdown> <Markdown :raw="markdown"></Markdown>
<Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<slot name="activator" :on="on"></slot> <slot name="activator" :on="on"></slot>

2
frontend-new/src/components/modals/Modal.vue
View File

@ -24,7 +24,7 @@ function close() {
<div class="flex items-center justify-center min-h-screen"> <div class="flex items-center justify-center min-h-screen">
<DialogOverlay class="fixed inset-0 bg-black opacity-30" /> <DialogOverlay class="fixed inset-0 bg-black opacity-30" />
<div class="relative max-w-sm mx-auto bg-white rounded p-4" dark="bg-background-dark-80"> <div class="relative max-w-sm mx-auto background-default rounded p-4">
<h2 class="font-bold text-xl mb-2">{{ props.title }}</h2> <h2 class="font-bold text-xl mb-2">{{ props.title }}</h2>
<slot :on="{ click: close }"></slot> <slot :on="{ click: close }"></slot>
</div> </div>

2
frontend-new/src/components/modals/NewPageModal.vue
View File

@ -93,7 +93,7 @@ async function createPage() {
</div> </div>
<div> <div>
<Button class="mt-2" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button> <Button class="mt-2" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button>
<Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</div> </div>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">

2
frontend-new/src/components/modals/OrgVisibilityModal.vue
View File

@ -47,7 +47,7 @@ async function changeOrgVisibility(org: string) {
</li> </li>
</ul> </ul>
<Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<Button v-on="on"><IconMdiPencil /></Button> <Button v-on="on"><IconMdiPencil /></Button>

2
frontend-new/src/components/modals/PlatformVersionEditModal.vue
View File

@ -58,7 +58,7 @@ async function save() {
</li> </li>
</ul> </ul>
<Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
<Button button-type="primary" class="mt-2 ml-2" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button> <Button button-type="primary" class="mt-2 ml-2" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">

2
frontend-new/src/components/modals/TaglineModal.vue
View File

@ -42,7 +42,7 @@ async function save() {
<InputText v-model.trim="newTagline" :label="i18n.t('author.taglineLabel')" counter :maxlength="backendData.validations.userTagline.max" /> <InputText v-model.trim="newTagline" :label="i18n.t('author.taglineLabel')" counter :maxlength="backendData.validations.userTagline.max" />
<br /> <br />
<Button size="medium" class="mt-2" @click="save">{{ i18n.t("general.change") }}</Button> <Button size="medium" class="mt-2" @click="save">{{ i18n.t("general.change") }}</Button>
<Button button-type="gray" size="medium" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" size="medium" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<Button size="small" class="ml-2 inline-flex" v-on="on"> <Button size="small" class="ml-2 inline-flex" v-on="on">

2
frontend-new/src/components/modals/TextAreaModal.vue
View File

@ -30,7 +30,7 @@ async function _submit(close: () => void) {
<InputTextarea v-model.trim="message" :label="label" :rows="2" @keydown.enter.prevent="" /> <InputTextarea v-model.trim="message" :label="label" :rows="2" @keydown.enter.prevent="" />
<Button class="mt-2 ml-2" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button> <Button class="mt-2 ml-2" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<slot name="activator" :on="on"></slot> <slot name="activator" :on="on"></slot>

2
frontend-new/src/components/modals/VisibilityChangerModal.vue
View File

@ -51,7 +51,7 @@ async function submit(closeModal: () => void): Promise<void> {
<InputTextarea v-if="showTextarea" v-model.trim="reason" rows="2" :label="i18n.t('visibility.modal.reason')" /> <InputTextarea v-if="showTextarea" v-model.trim="reason" rows="2" :label="i18n.t('visibility.modal.reason')" />
<Button class="mt-2" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button> <Button class="mt-2" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button> <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template> </template>
<template #activator="{ on }"> <template #activator="{ on }">
<Button v-bind="$attrs" class="mr-1" v-on="on"> <Button v-bind="$attrs" class="mr-1" v-on="on">

2
frontend-new/src/components/projects/MemberList.vue
View File

@ -125,7 +125,7 @@ interface EditableMember {
<div <div
v-for="member in modelValue" v-for="member in modelValue"
:key="member.user.name" :key="member.user.name"
class="p-2 w-full border border-neutral-100 dark:border-neutral-800 rounded inline-flex flex-row space-x-4" class="p-2 w-full border border-gray-100 dark:border-gray-800 rounded inline-flex flex-row space-x-4"
> >
<UserAvatar :username="member.user.name" :avatar-url="avatarUrl(member.user.name)" size="sm" /> <UserAvatar :username="member.user.name" :avatar-url="avatarUrl(member.user.name)" size="sm" />
<div class="flex-grow"> <div class="flex-grow">

4
frontend-new/src/components/projects/ProjectHeader.vue
View File

@ -80,7 +80,7 @@ function toggleWatch() {
<span v-else-if="starred">{{ i18n.t("project.actions.unstar") }}</span> <span v-else-if="starred">{{ i18n.t("project.actions.unstar") }}</span>
<span v-else>{{ i18n.t("project.actions.star") }}</span> <span v-else>{{ i18n.t("project.actions.star") }}</span>
</template> </template>
<Button button-type="gray" size="small" :disabled="canStarOrWatch" @click="toggleStar"> <Button button-type="secondary" size="small" :disabled="canStarOrWatch" @click="toggleStar">
<IconMdiStar v-if="starred" /> <IconMdiStar v-if="starred" />
<IconMdiStarOutline v-else /> <IconMdiStarOutline v-else />
<span class="ml-2">{{ project.stats.stars }}</span> <span class="ml-2">{{ project.stats.stars }}</span>
@ -94,7 +94,7 @@ function toggleWatch() {
<span v-else-if="starred">{{ i18n.t("project.actions.unwatch") }}</span> <span v-else-if="starred">{{ i18n.t("project.actions.unwatch") }}</span>
<span v-else>{{ i18n.t("project.actions.watch") }}</span> <span v-else>{{ i18n.t("project.actions.watch") }}</span>
</template> </template>
<Button button-type="gray" size="small" :disabled="canStarOrWatch" @click="toggleWatch"> <Button button-type="secondary" size="small" :disabled="canStarOrWatch" @click="toggleWatch">
<IconMdiBell v-if="watching" /> <IconMdiBell v-if="watching" />
<IconMdiBellOutline v-else /> <IconMdiBellOutline v-else />
<span class="ml-2">{{ project.stats.watchers }}</span> <span class="ml-2">{{ project.stats.watchers }}</span>

2
frontend-new/src/components/projects/ProjectNav.vue
View File

@ -23,7 +23,7 @@ function childRoute(route = ""): string {
</script> </script>
<template> <template>
<nav class="mt-3 mb-4 flex flex-wrap border-b-2 border-neutral-200 dark:border-neutral-800"> <nav class="mt-3 mb-4 flex flex-wrap border-b-2 border-gray-200 dark:border-gray-800">
<ProjectNavItem :to="childRoute()"> <ProjectNavItem :to="childRoute()">
{{ i18n.t("project.tabs.docs") }} {{ i18n.t("project.tabs.docs") }}
</ProjectNavItem> </ProjectNavItem>

8
frontend-new/src/components/ui/InputWrapper.vue
View File

@ -17,10 +17,10 @@ const props = defineProps<{
<ErrorTooltip :error-messages="errors" class="w-full" :class="{ filled: value, error: hasError }"> <ErrorTooltip :error-messages="errors" class="w-full" :class="{ filled: value, error: hasError }">
<label <label
:class="[ :class="[
'relative flex w-full outline-none p-2 border-bottom-1px rounded', 'relative flex w-full outline-none p-2 border-1px rounded',
'bg-primary-light-200 border-gray-400 dark:(bg-primary-300/8 border-gray-500)', 'border-gray-500',
'focus:(bg-primary-200/5 dark:bg-primary-200/10 border-primary-400)', 'focus:border-primary-400',
'error:(border-red-400) disabled:(bg-black-15 text-black-50)', 'error:border-red-400',
'transition duration-200 ease', 'transition duration-200 ease',
]" ]"
> >

2
frontend-new/src/pages/[user]/[project]/versions/[version]/[platform]/reviews.vue
View File

@ -370,7 +370,7 @@ useHead(
</Button> </Button>
</div> </div>
<div v-else-if="currentUserReview === review" class="text-right"> <div v-else-if="currentUserReview === review" class="text-right">
<Button v-if="currentReviewLastAction === 'STOP'" size="small" button-type="gray" :loading="loadingValues.reopen" @click="reopenReview"> <Button v-if="currentReviewLastAction === 'STOP'" size="small" button-type="secondary" :loading="loadingValues.reopen" @click="reopenReview">
<IconMdiRefresh /> <IconMdiRefresh />
{{ t("reviews.reopenReview") }} {{ t("reviews.reopenReview") }}
</Button> </Button>

4
frontend-new/src/pages/index.vue
View File

@ -117,7 +117,7 @@ useHead(meta);
/> />
<!-- Sorting Button --> <!-- Sorting Button -->
<Menu> <Menu>
<MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-gray-50 p-2"> <MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2">
<span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span> <span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
<icon-mdi-sort-variant class="text-xl pointer-events-none" /> <icon-mdi-sort-variant class="text-xl pointer-events-none" />
</MenuButton> </MenuButton>
@ -131,7 +131,7 @@ useHead(meta);
> >
<MenuItems class="absolute right-0 top-16 flex flex-col z-10 background-header drop-shadow-md rounded-md border-top-primary"> <MenuItems class="absolute right-0 top-16 flex flex-col z-10 background-header drop-shadow-md rounded-md border-top-primary">
<MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }"> <MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
<button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-gray-50': active }" class="p-2 text-left"> <button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': active }" class="p-2 text-left">
{{ sorter.label }} {{ sorter.label }}
</button> </button>
</MenuItem> </MenuItem>

2
frontend-new/src/pages/linkout.vue
View File

@ -23,7 +23,7 @@ useHead(useSeo(i18n.t("linkout.title"), null, route, null));
<Link :href="remoteUrl" target="_self" rel="noopener noreferrer"> <Link :href="remoteUrl" target="_self" rel="noopener noreferrer">
<Button size="medium">{{ i18n.t("linkout.continue") }}</Button> <Button size="medium">{{ i18n.t("linkout.continue") }}</Button>
</Link> </Link>
<Button button-type="gray" size="medium" class="ml-2" @click="$router.back()">{{ i18n.t("linkout.abort") }}</Button> <Button button-type="secondary" size="medium" class="ml-2" @click="$router.back()">{{ i18n.t("linkout.abort") }}</Button>
</template> </template>
</Card> </Card>
</template> </template>

20
frontend-new/windi.config.ts
View File

@ -5,7 +5,7 @@ import plugin from "windicss/plugin";
export default defineConfig({ export default defineConfig({
darkMode: "class", darkMode: "class",
safelist: "order-last button-primary button-gray button-red button-transparent", safelist: "order-last button-primary button-secondary button-red button-transparent",
attributify: true, attributify: true,
plugins: [ plugins: [
typography(), typography(),
@ -46,6 +46,7 @@ export default defineConfig({
}, },
red: colors.red, red: colors.red,
gray: colors.zinc, gray: colors.zinc,
secondary: colors.slate,
white: colors.zinc[50], white: colors.zinc[50],
black: colors.zinc[900], black: colors.zinc[900],
}, },
@ -101,16 +102,13 @@ export default defineConfig({
}, },
}, },
shortcuts: { shortcuts: {
"background-body": "bg-gray-100 dark:bg-gray-800", "background-body": "bg-gray-100 dark:bg-gray-900",
"background-default": "bg-gray-50 dark:bg-gray-900", "background-default": "bg-gray-50 dark:bg-gray-800",
"color-primary": "text-primary-400 dark:text-primary-200", "color-primary": "text-primary-400",
"border-top-primary": "border-solid border-t-4 border-t-primary-400", "border-top-primary": "border-solid border-t-4 border-t-primary-400",
"button-primary": "text-white bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-gray-500) cursor-not-allowed) enabled:hover:bg-primary-300", "button-primary": "bg-primary-400 enabled:hover:bg-primary-300",
"button-transparent": "button-secondary": "bg-secondary-500 enabled:hover:(bg-secondary-400 dark:bg-secondary-600)",
"bg-transparent disabled:(text-gray-900 dark:text-white cursor-not-allowed) enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)", "button-transparent": "bg-transparent enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
"button-red": "button-red": "bg-red-500 dark:bg-red-600 enabled:hover:(bg-red-400 dark:bg-red-500)",
"text-white bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-gray-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)",
"button-gray":
"text-white bg-gray-500 dark:bg-slate-700 disabled:(bg-gray-300 text-gray-500 dark:bg-gray-800 cursor-not-allowed) enabled:hover:(bg-gray-400 dark:bg-slate-600)",
}, },
}); });