Skip to content

Commit

Permalink
feat: improve the styles of the data list filter area on the mobile d…
Browse files Browse the repository at this point in the history 
…evices (#4587)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.10.x

#### What this PR does / why we need it:

改进移动设备上数据列表过滤器区域的样式。

before:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/c0341b19-0ef5-4e26-94b7-71c52def6578">

after:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/b2d0f07b-d94d-48d4-86b9-fd2953d141fa">


#### Which issue(s) this PR fixes:

Ref #2699

#### Does this PR introduce a user-facing change?

```release-note
改进 Console 端在移动设备上数据列表过滤器区域的样式。
```
  • Loading branch information
@ruibaby
ruibaby authored Sep 14, 2023
1 parent e13563b commit 83cb088
Show file tree
Hide file tree
Showing 9 changed files with 480 additions and 512 deletions.
2 changes: 1 addition & 1 deletion console/src/components/input/SearchInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function onKeywordChange() {
<template>
<FormKit
:id="id"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
:placeholder="placeholder || $t('core.common.placeholder.search')"
type="text"
name="keyword"
Expand Down
172 changes: 83 additions & 89 deletions console/src/modules/contents/attachments/AttachmentList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,11 +293,11 @@ onMounted(() => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
>
<div
v-permission="['system:attachments:manage']"
class="mr-4 hidden items-center sm:flex"
class="hidden items-center sm:flex"
>
<input
v-model="checkedAll"
Expand Down Expand Up @@ -336,95 +336,89 @@ onMounted(() => {
</VDropdown>
</VSpace>
</div>
<div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg">
<FilterCleanButton
v-if="hasFilters"
@click="handleClearFilters"
/>
<FilterDropdown
v-model="selectedPolicy"
:label="
$t('core.attachment.filters.storage_policy.label')
"
:items="[
{
label: t('core.common.filters.item_labels.all'),
},
...(policies?.map((policy) => {
return {
label: policy.spec.displayName,
value: policy.metadata.name,
};
}) || []),
]"
/>
<UserFilterDropdown
v-model="selectedUser"
:label="$t('core.attachment.filters.owner.label')"
/>
<FilterDropdown
v-model="selectedSort"
:label="$t('core.common.filters.labels.sort')"
:items="[
{
label: t('core.common.filters.item_labels.default'),
},
{
label: t(
'core.attachment.filters.sort.items.create_time_desc'
),
value: 'creationTimestamp,desc',
},
{
label: t(
'core.attachment.filters.sort.items.create_time_asc'
),
value: 'creationTimestamp,asc',
},
{
label: t(
'core.attachment.filters.sort.items.size_desc'
),
value: 'size,desc',
},
{
label: t(
'core.attachment.filters.sort.items.size_asc'
),
value: 'size,asc',
},
]"
/>
<div class="flex flex-row gap-2">
<div
v-for="(item, index) in viewTypes"
:key="index"
v-tooltip="`${item.tooltip}`"
:class="{
'bg-gray-200 font-bold text-black':
viewType === item.name,
}"
class="cursor-pointer rounded p-1 hover:bg-gray-200"
@click="viewType = item.name"
>
<component :is="item.icon" class="h-4 w-4" />
</div>
<VSpace spacing="lg" class="flex-wrap">
<FilterCleanButton
v-if="hasFilters"
@click="handleClearFilters"
/>
<FilterDropdown
v-model="selectedPolicy"
:label="$t('core.attachment.filters.storage_policy.label')"
:items="[
{
label: t('core.common.filters.item_labels.all'),
},
...(policies?.map((policy) => {
return {
label: policy.spec.displayName,
value: policy.metadata.name,
};
}) || []),
]"
/>
<UserFilterDropdown
v-model="selectedUser"
:label="$t('core.attachment.filters.owner.label')"
/>
<FilterDropdown
v-model="selectedSort"
:label="$t('core.common.filters.labels.sort')"
:items="[
{
label: t('core.common.filters.item_labels.default'),
},
{
label: t(
'core.attachment.filters.sort.items.create_time_desc'
),
value: 'creationTimestamp,desc',
},
{
label: t(
'core.attachment.filters.sort.items.create_time_asc'
),
value: 'creationTimestamp,asc',
},
{
label: t(
'core.attachment.filters.sort.items.size_desc'
),
value: 'size,desc',
},
{
label: t('core.attachment.filters.sort.items.size_asc'),
value: 'size,asc',
},
]"
/>
<div class="flex flex-row gap-2">
<div
v-for="(item, index) in viewTypes"
:key="index"
v-tooltip="`${item.tooltip}`"
:class="{
'bg-gray-200 font-bold text-black':
viewType === item.name,
}"
class="cursor-pointer rounded p-1 hover:bg-gray-200"
@click="viewType = item.name"
>
<component :is="item.icon" class="h-4 w-4" />
</div>
<div class="flex flex-row gap-2">
<div
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@click="handleFetchAttachments()"
>
<IconRefreshLine
v-tooltip="$t('core.common.buttons.refresh')"
:class="{ 'animate-spin text-gray-900': isFetching }"
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
/>
</div>
</div>
<div class="flex flex-row gap-2">
<div
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@click="handleFetchAttachments()"
>
<IconRefreshLine
v-tooltip="$t('core.common.buttons.refresh')"
:class="{ 'animate-spin text-gray-900': isFetching }"
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
/>
</div>
</VSpace>
</div>
</div>
</VSpace>
</div>
</div>
</template>
Expand Down
172 changes: 83 additions & 89 deletions console/src/modules/contents/comments/CommentList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,11 +228,11 @@ const handleApproveInBatch = async () => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
>
<div
v-permission="['system:comments:manage']"
class="mr-4 hidden items-center sm:flex"
class="hidden items-center sm:flex"
>
<input
v-model="checkAll"
Expand All @@ -259,94 +259,88 @@ const handleApproveInBatch = async () => {
</VButton>
</VSpace>
</div>
<div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg">
<FilterCleanButton
v-if="hasFilters"
@click="handleClearFilters"
/>
<FilterDropdown
v-model="selectedApprovedStatus"
:label="$t('core.common.filters.labels.status')"
:items="[
{
label: t('core.common.filters.item_labels.all'),
},
{
label: t('core.comment.filters.status.items.approved'),
value: 'true',
},
{
label: t(
'core.comment.filters.status.items.pending_review'
),
value: 'false',
},
]"
/>
<UserFilterDropdown
v-model="selectedUser"
:label="$t('core.comment.filters.owner.label')"
/>
<FilterDropdown
v-model="selectedSort"
:label="$t('core.common.filters.labels.sort')"
:items="[
{
label: t('core.common.filters.item_labels.default'),
},
{
label: t(
'core.comment.filters.sort.items.last_reply_time_desc'
),
value: 'lastReplyTime,desc',
},
{
label: t(
'core.comment.filters.sort.items.last_reply_time_asc'
),
value: 'lastReplyTime,asc',
},
{
label: t(
'core.comment.filters.sort.items.reply_count_desc'
),
value: 'replyCount,desc',
},
{
label: t(
'core.comment.filters.sort.items.reply_count_asc'
),
value: 'replyCount,asc',
},
{
label: t(
'core.comment.filters.sort.items.create_time_desc'
),
value: 'creationTimestamp,desc',
},
{
label: t(
'core.comment.filters.sort.items.create_time_asc'
),
value: 'creationTimestamp,asc',
},
]"
/>
<div class="flex flex-row gap-2">
<div
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@click="refetch()"
>
<IconRefreshLine
v-tooltip="$t('core.common.buttons.refresh')"
:class="{ 'animate-spin text-gray-900': isFetching }"
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
/>
</div>
<VSpace spacing="lg" class="flex-wrap">
<FilterCleanButton
v-if="hasFilters"
@click="handleClearFilters"
/>
<FilterDropdown
v-model="selectedApprovedStatus"
:label="$t('core.common.filters.labels.status')"
:items="[
{
label: t('core.common.filters.item_labels.all'),
},
{
label: t('core.comment.filters.status.items.approved'),
value: 'true',
},
{
label: t(
'core.comment.filters.status.items.pending_review'
),
value: 'false',
},
]"
/>
<UserFilterDropdown
v-model="selectedUser"
:label="$t('core.comment.filters.owner.label')"
/>
<FilterDropdown
v-model="selectedSort"
:label="$t('core.common.filters.labels.sort')"
:items="[
{
label: t('core.common.filters.item_labels.default'),
},
{
label: t(
'core.comment.filters.sort.items.last_reply_time_desc'
),
value: 'lastReplyTime,desc',
},
{
label: t(
'core.comment.filters.sort.items.last_reply_time_asc'
),
value: 'lastReplyTime,asc',
},
{
label: t(
'core.comment.filters.sort.items.reply_count_desc'
),
value: 'replyCount,desc',
},
{
label: t('core.comment.filters.sort.items.reply_count_asc'),
value: 'replyCount,asc',
},
{
label: t(
'core.comment.filters.sort.items.create_time_desc'
),
value: 'creationTimestamp,desc',
},
{
label: t('core.comment.filters.sort.items.create_time_asc'),
value: 'creationTimestamp,asc',
},
]"
/>
<div class="flex flex-row gap-2">
<div
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@click="refetch()"
>
<IconRefreshLine
v-tooltip="$t('core.common.buttons.refresh')"
:class="{ 'animate-spin text-gray-900': isFetching }"
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
/>
</div>
</VSpace>
</div>
</div>
</VSpace>
</div>
</div>
</template>
Expand Down
Loading

0 comments on commit 83cb088

Please sign in to comment.