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

Give modals some padding, replace manually placed close buttons

Browse Source
This commit is contained in:
Nassim Jahnke 2022-06-24 20:54:05 +02:00
parent 429f963ea2
commit aa07243b4c
No known key found for this signature in database
GPG Key ID: 6BE3B555EBC5982B
17 changed files with 59 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/modals/AvatarChangeModal.vue
View File

@ -44,12 +44,9 @@ async function changeOrgAvatar() {
<template>
<Modal :title="i18n.t('author.org.editAvatar')">
<template #default="{ on }">
<InputFile v-model="file"></InputFile>
<InputFile v-model="file"></InputFile>
<Button button-type="secondary" class="mt-2" @click="on.click">{{ i18n.t("general.close") }}</Button>
<Button button-type="primary" class="mt-2 ml-2" @click="changeOrgAvatar()">{{ i18n.t("general.submit") }}</Button>
</template>
<Button class="mt-3" @click="changeOrgAvatar()">{{ i18n.t("general.submit") }}</Button>
<template #activator="{ on }">
<Tooltip class="absolute -bottom-3 -right-3">
<template #content>

8
frontend/src/components/modals/ChannelModal.vue
View File

@ -107,14 +107,12 @@ reset();
:label="i18n.t('channel.modal.color')"
:rules="[required(), validChannelColor()(props.projectId, props.channel?.color)]"
readonly
disabled
/>
<br />
<div class="mb-4" />
<InputCheckbox v-for="f in possibleFlags" :key="f" v-model="flags" :label="i18n.t(`channel.modal.flags.${f.toLowerCase()}`)" :value="f" />
<Button button-type="primary" class="mt-2" :disabled="v.$invalid" @click="create(on.click)">{{
edit ? i18n.t("general.save") : i18n.t("general.create")
}}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
<Button class="mt-3" :disabled="v.$invalid" @click="create(on.click)">{{ edit ? i18n.t("general.save") : i18n.t("general.create") }}</Button>
</template>
<template #activator="{ on }">
<slot name="activator" :on="open(on)"></slot>

7
frontend/src/components/modals/DeletePageModal.vue
View File

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

7
frontend/src/components/modals/DependencyEditModal.vue
View File

@ -78,12 +78,9 @@ onMounted(() =>
<template>
<Modal ref="modal" :title="i18n.t('version.edit.platformVersions', [platform?.name])" :small="false">
<template #default="{ on }">
<DependencyTable ref="depTable" :platform="platform?.name?.toUpperCase()" :version="formVersion" />
<DependencyTable ref="depTable" :platform="platform?.name?.toUpperCase()" :version="formVersion" />
<Button button-type="primary" class="mt-2" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template>
<Button button-type="primary" class="mt-3" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
<template #activator="{ on }">
<Button v-if="hasPerms(NamedPermission.EDIT_VERSION)" class="text-sm" v-on="on"><IconMdiPencil /></Button>
</template>

4
frontend/src/components/modals/DiffModal.vue
View File

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

3
frontend/src/components/modals/FlagModal.vue
View File

@ -52,8 +52,7 @@ async function submit(close: () => void) {
<div class="py-2"></div>
<InputTextarea v-model.trim="flagComment" rows="3" :rules="[required()]" :label="i18n.t('general.comment')" />
<Button button-type="primary" class="mt-4" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<Button button-type="secondary" class="mt-4 ml-2" @click="on.click">{{ i18n.t("general.close") }}</Button>
<Button class="mt-3" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
</template>
<template #activator="{ on }">
<Tooltip>

3
frontend/src/components/modals/LockUserModal.vue
View File

@ -43,8 +43,7 @@ async function confirm(close: () => void) {
<template #default="{ on }">
<InputTextarea v-model="comment" />
<Button button-type="secondary" class="mt-2" @click="on.click">{{ i18n.t("general.close") }}</Button>
<Button button-type="primary" class="mt-2 ml-2" @click="confirm(on.click)">{{ i18n.t("general.confirm") }}</Button>
<Button button-type="primary" class="mt-3" @click="confirm(on.click)">{{ i18n.t("general.confirm") }}</Button>
</template>
<template #activator="{ on }">
<Tooltip>

4
frontend/src/components/modals/MarkdownModal.vue
View File

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

7
frontend/src/components/modals/Modal.vue
View File

@ -36,10 +36,13 @@ defineExpose({
<client-only>
<Dialog :open="isOpen" class="fixed inset-0 z-10 overflow-y-auto" @close="close">
<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-60" />
<div class="relative mx-auto background-default rounded p-4" :class="big ? 'max-w-80vw' : small ? 'max-w-sm' : 'max-w-lg'">
<h2 class="font-bold text-xl mb-2">{{ props.title }}</h2>
<div class="inline-flex items-center w-full pb-4 pr-1 text-xl">
<IconMdiClose class="cursor-pointer mr-1" @click="close" />
<h2 class="font-bold">{{ props.title }}</h2>
</div>
<slot :on="{ click: close }"></slot>
</div>
</div>

31
frontend/src/components/modals/NewPageModal.vue
View File

@ -79,23 +79,20 @@ async function createPage() {
<template>
<Modal :title="i18n.t('page.new.title')">
<template #default="{ on }">
<div class="flex flex-col">
<InputText
v-model.trim="name"
:label="i18n.t('page.new.name')"
:error-messages="nameErrorMessages"
counter
:maxlength="backendData.validations.project.pageName.max"
:minlength="backendData.validations.project.pageName.min"
/>
<InputSelect v-model="parent" :values="pageRoots" :label="i18n.t('page.new.parent')" class="pt-2 pb-1" />
</div>
<div>
<Button class="mt-2" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</div>
</template>
<div class="flex flex-col">
<InputText
v-model.trim="name"
:label="i18n.t('page.new.name')"
:error-messages="nameErrorMessages"
counter
:maxlength="backendData.validations.project.pageName.max"
:minlength="backendData.validations.project.pageName.min"
/>
<InputSelect v-model="parent" :values="pageRoots" :label="i18n.t('page.new.parent')" class="pt-2 pb-1" />
</div>
<div>
<Button class="mt-3" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button>
</div>
<template #activator="{ on }">
<Button v-bind="$attrs" class="mr-1 h-[32px]" size="small" v-on="on">
<IconMdiPlus />

17
frontend/src/components/modals/OrgVisibilityModal.vue
View File

@ -36,19 +36,16 @@ async function changeOrgVisibility(org: string) {
}
</script>
<!-- todo: save on save button, not immediately when ticking -->
<template>
<Modal :title="i18n.t('author.editOrgVisibility')">
<template #default="{ on }">
<p>{{ i18n.t("author.orgVisibilityModal") }}</p>
<p>{{ i18n.t("author.orgVisibilityModal") }}</p>
<ul>
<li v-for="(hidden, org) in internalVisibility" :key="org">
<InputCheckbox v-model="internalVisibility[org]" :label="org" :disabled="loading" @change="changeOrgVisibility(org)"></InputCheckbox>
</li>
</ul>
<Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template>
<ul class="p-2">
<li v-for="(hidden, org) in internalVisibility" :key="org">
<InputCheckbox v-model="internalVisibility[org]" :label="org" :disabled="loading" @change="changeOrgVisibility(org)"></InputCheckbox>
</li>
</ul>
<template #activator="{ on }">
<Button class="text-sm" v-on="on"><IconMdiPencil /></Button>
</template>

7
frontend/src/components/modals/PlatformVersionEditModal.vue
View File

@ -52,12 +52,9 @@ async function save() {
<template>
<Modal :title="i18n.t('version.edit.platformVersions', [platform?.name])">
<template #default="{ on }">
<InputTag v-model="selectedVersions" :options="platform?.possibleVersions" />
<InputTag v-model="selectedVersions" :options="platform?.possibleVersions" />
<Button button-type="primary" class="mt-2" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template>
<Button class="mt-3" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
<template #activator="{ on }">
<Button class="text-sm" v-on="on"><IconMdiPencil /></Button>
</template>

9
frontend/src/components/modals/TaglineModal.vue
View File

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

7
frontend/src/components/modals/TextAreaModal.vue
View File

@ -26,12 +26,9 @@ async function _submit(close: () => void) {
<template>
<Modal :title="props.title">
<template #default="{ on }">
<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" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
</template>
<Button class="mt-3" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<template #activator="{ on }">
<slot name="activator" :on="on"></slot>
</template>

18
frontend/src/components/modals/VisibilityChangerModal.vue
View File

@ -26,17 +26,18 @@ const notification = useNotificationStore();
const visibility = ref<Visibility>();
const reason = ref<string>("");
const showTextarea = computed(() => currentIVis.value?.showModal && props.propVisibility !== visibility.value);
const currentIVis = computed(() => backendData.visibilities.find((v) => v.name === visibility.value));
const showTextarea = computed(() => setVisibility.value?.showModal && props.propVisibility !== visibility.value);
const setVisibility = computed(() => backendData.visibilities.find((v) => v.name === visibility.value));
const currentVisibility = computed(() => backendData.visibilities.find((v) => v.name === props.propVisibility));
async function submit(closeModal: () => void): Promise<void> {
const result = await useInternalApi(props.postUrl, true, "post", {
visibility: visibility.value,
comment: currentIVis.value?.showModal ? reason.value : null,
comment: setVisibility.value?.showModal ? reason.value : null,
}).catch((e) => handleRequestError(e, ctx, i18n));
reason.value = "";
if (currentIVis.value && result) {
notification.success(i18n.t("visibility.modal.success", [props.type, i18n.t(currentIVis.value?.title)]));
if (setVisibility.value && result) {
notification.success(i18n.t("visibility.modal.success", [props.type, i18n.t(setVisibility.value?.title)]));
}
closeModal();
}
@ -45,13 +46,12 @@ async function submit(closeModal: () => void): Promise<void> {
<template>
<Modal :title="i18n.t('visibility.modal.title', [type])">
<template #default="{ on }">
Currently {{ propVisibility }}
Currently: {{ i18n.t(currentVisibility.title) }}
<InputRadio v-for="vis in backendData.visibilities" :key="vis.name" v-model="visibility" :value="vis.name" :label="i18n.t(vis.title)" class="block" />
<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')" class="pt-3" />
<Button class="mt-2" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
<Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
<Button class="mt-3" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
</template>
<template #activator="{ on }">
<Button v-bind="$attrs" class="mr-1" v-on="on">

6
frontend/src/pages/[user]/[project]/index.vue
View File

@ -104,12 +104,12 @@ useHead(useSeo(props.project.name, props.project.description, route, projectIcon
{{ version.name }}
<br />
<div class="inline-flex items-center">
<Tag :name="version.channel.name" :color="{ background: version.channel.color }"></Tag>
<PlatformLogo v-for="(platform, idx) in version.platforms" :key="`${idx}-${platform}`" :platform="platform" :size="24" class="mr-1" />
<Tag :name="version.channel.name" :color="{ background: version.channel.color }" />
<PlatformLogo v-for="(platform, idx) in version.platforms" :key="`${idx}-${platform}`" :platform="platform" :size="24" class="ml-1" />
</div>
</router-link>
</div>
<div class="items-center inline-flex">
<div class="items-center inline-flex ml-1">
<DownloadButton :project="project" :pinned-version="version" small></DownloadButton>
</div>
</li>

6
frontend/src/pages/[user]/[project]/versions/[version]/[platform]/index.vue
View File

@ -162,7 +162,7 @@ async function restoreVersion() {
<section class="basis-full md:basis-9/12 flex-grow">
<div class="flex flex-wrap gap-2 justify-between">
<div>
<h1 class="text-3xl inline-flex items-center">
<h1 class="text-3xl sm:inline-flex items-center">
<TagComponent class="mr-1" :tag="channel" :short-form="true" />
{{ projectVersion.name }}
<Tooltip v-if="projectVersion.recommended.includes(platform?.enumName)" :content="i18n.t('version.page.recommended')" class="text-base">
@ -173,9 +173,9 @@ async function restoreVersion() {
</Tooltip>
</h1>
<h2>
<span class="inline-flex ml-1">
<span class="inline-flex <sm:flex-wrap ml-1">
{{ i18n.t("version.page.subheader", [projectVersion.author, lastUpdated(new Date(projectVersion.createdAt))]) }}
<span v-if="projectVersion.fileInfo?.sizeBytes" class="inline-flex items-center ml-3">
<span v-if="projectVersion.fileInfo?.sizeBytes" class="inline-flex items-center sm:ml-3">
<IconMdiFile class="mr-1" />
{{ filesize(projectVersion.fileInfo.sizeBytes) }}
</span>