github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: improve modal component style

pull/609/head^2
Ryan Wang 2022-09-11 17:10:25 +08:00
parent 8e3578f445
commit e4bbc68c23
11 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/components/src/components/modal/Modal.story.vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import { IconArrowLeft, IconArrowRight } from "@/icons/icons";
import { VButton } from "../../components/button";
import { VModal } from "../../components/modal";
import { VSpace } from "../../components/space";
@ -13,7 +14,7 @@ function initState() {
}
</script>
<template>
<Story :init-state="initState" title="Modal">
<Story :init-state="initState" title="Modal" class="h-full">
<template #default="{ state }">
<VButton type="secondary" @click="state.visible = true">打开</VButton>
<VModal
@ -21,7 +22,17 @@ function initState() {
:fullscreen="state.fullscreen"
:title="state.title"
:width="state.width"
:mount-to-body="true"
>
<template #actions>
<span>
<IconArrowLeft role="button" />
</span>
<span>
<IconArrowRight role="button" />
</span>
</template>
<div class="flex flex-col">
<img class="w-full" src="https://ryanc.cc/avatar" />
<img class="w-full" src="https://ryanc.cc/avatar" />
@ -38,11 +49,5 @@ function initState() {
</template>
</VModal>
</template>
<template #controls="{ state }">
<HstCheckbox v-model="state.visible" title="Visible" />
<HstText v-model="state.title" title="Title" />
<HstNumber v-model="state.width" title="Width" />
<HstCheckbox v-model="state.fullscreen" title="Fullscreen" />
</template>
</Story>
</template>

44
packages/components/src/components/modal/Modal.vue
View File

@ -97,14 +97,14 @@ watch(
:style="contentStyles"
class="modal-content transform transition-all"
>
<div v-if="$slots.header || title" class="modal-header">
<div v-if="$slots.header || title" class="modal-header group">
<slot name="header">
<div class="modal-header-title">{{ title }}</div>
<div class="modal-header-actions flex flex-row">
<div class="modal-header-actions">
<slot name="actions"></slot>
<div class="modal-header-action" @click="handleClose()">
<span class="bg-gray-50" @click="handleClose()">
<IconClose />
</div>
</span>
</div>
</slot>
</div>
@ -159,25 +159,33 @@ watch(
.modal-header {
@apply flex
justify-between
border-b;
border-b
items-center
select-none;
padding: 10px 16px;
.modal-header-title {
@apply self-center
text-base
font-bold;
padding: 12px 16px;
@apply text-base
font-medium;
}
.modal-header-actions {
@apply self-center
h-full;
.modal-header-action {
@apply cursor-pointer;
padding: 12px 16px;
&:hover {
@apply bg-gray-100;
}
@apply flex
flex-row
gap-2;
span {
@apply cursor-pointer
rounded-full
w-7
h-7
inline-flex
items-center
justify-center
hover:bg-gray-100
select-none
text-gray-600
hover:text-gray-900
group-hover:hidden;
}
}
}

8
src/modules/contents/attachments/AttachmentList.vue
View File

@ -182,12 +182,12 @@ onMounted(() => {
@close="onDetailModalClose"
>
<template #actions>
<div class="modal-header-action" @click="handleSelectPrevious">
<span @click="handleSelectPrevious">
<IconArrowLeft />
</div>
<div class="modal-header-action" @click="handleSelectNext">
</span>
<span @click="handleSelectNext">
<IconArrowRight />
</div>
</span>
</template>
</AttachmentDetailModal>
<AttachmentUploadModal

4
src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
View File

@ -103,9 +103,9 @@ watch(
>
<template #actions>
<FloatingDropdown>
<div v-tooltip="`添加存储策略`" class="modal-header-action">
<span v-tooltip="`添加存储策略`">
<IconAddCircle />
</div>
</span>
<template #popper>
<div class="w-72 p-4">
<ul class="space-y-1">

4
src/modules/contents/attachments/components/AttachmentUploadModal.vue
View File

@ -82,11 +82,11 @@ watch(
>
<template #actions>
<FloatingDropdown>
<div v-tooltip="`选择存储策略`" class="modal-header-action">
<span v-tooltip="`选择存储策略`">
<span class="text-sm">
{{ selectedPolicy?.spec.displayName || "无存储策略" }}
</span>
</div>
</span>
<template #popper>
<div class="w-72 p-4">
<ul class="space-y-1">

21
src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
View File

@ -179,27 +179,22 @@ await handleFetchAttachments();
@close="selectedAttachment = undefined"
>
<template #actions>
<div
<span
v-if="selectedAttachment && selectedAttachments.has(selectedAttachment)"
class="modal-header-action"
@click="handleSelect(selectedAttachment)"
>
<IconCheckboxFill />
</div>
<div
v-else
class="modal-header-action"
@click="handleSelect(selectedAttachment)"
>
</span>
<span v-else @click="handleSelect(selectedAttachment)">
<IconCheckboxCircle />
</div>
</span>
<div class="modal-header-action" @click="handleSelectPrevious">
<span @click="handleSelectPrevious">
<IconArrowLeft />
</div>
<div class="modal-header-action" @click="handleSelectNext">
</span>
<span @click="handleSelectNext">
<IconArrowRight />
</div>
</span>
</template>
</AttachmentDetailModal>
</template>

8
src/modules/contents/pages/SinglePageList.vue
View File

@ -201,12 +201,12 @@ const handleSelectUser = (user?: User) => {
@close="onSettingModalClose"
>
<template #actions>
<div class="modal-header-action" @click="handleSelectPrevious">
<span @click="handleSelectPrevious">
<IconArrowLeft />
</div>
<div class="modal-header-action" @click="handleSelectNext">
</span>
<span @click="handleSelectNext">
<IconArrowRight />
</div>
</span>
</template>
</SinglePageSettingModal>
<VCard :body-class="['!p-0']" class="rounded-none border-none shadow-none">

8
src/modules/contents/posts/PostList.vue
View File

@ -330,12 +330,12 @@ function handleContributorFilterItemChange(user?: User) {
@close="onSettingModalClose"
>
<template #actions>
<div class="modal-header-action" @click="handleSelectPrevious">
<span @click="handleSelectPrevious">
<IconArrowLeft />
</div>
<div class="modal-header-action" @click="handleSelectNext">
</span>
<span @click="handleSelectNext">
<IconArrowRight />
</div>
</span>
</template>
</PostSettingModal>
<VPageHeader title="文章">

15
src/modules/contents/posts/components/PostPreviewModal.vue
View File

@ -34,13 +34,14 @@ const onVisibleChange = (visible: boolean) => {
@update:visible="onVisibleChange"
>
<template #actions>
<a
class="modal-header-action"
href="https://halo.run/archives/halo-154-released.html"
target="_blank"
>
<IconLink />
</a>
<span>
<a
href="https://halo.run/archives/halo-154-released.html"
target="_blank"
>
<IconLink />
</a>
</span>
</template>
<div class="flex h-full items-center justify-center">
<iframe

8
src/modules/contents/posts/tags/components/TagEditingModal.vue
View File

@ -137,12 +137,12 @@ watch(
@update:visible="onVisibleChange"
>
<template #actions>
<div class="modal-header-action" @click="emit('previous')">
<span @click="emit('previous')">
<IconArrowLeft />
</div>
<div class="modal-header-action" @click="emit('next')">
</span>
<span @click="emit('next')">
<IconArrowRight />
</div>
</span>
</template>
<FormKit
id="tag-form"

4
src/modules/system/users/components/UserEditingModal.vue
View File

@ -187,10 +187,10 @@ const handleRawModeChange = () => {
@update:visible="onVisibleChange"
>
<template #actions>
<div class="modal-header-action" @click="handleRawModeChange">
<span @click="handleRawModeChange">
<IconCodeBoxLine v-if="!rawMode" />
<IconEye v-else />
</div>
</span>
</template>
<VCodemirror v-show="rawMode" v-model="raw" height="50vh" language="yaml" />