usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

MkStickyContainer化

This commit is contained in:
samunohito 2024-03-29 09:35:16 +09:00
parent 0bc2401894
commit 4025845e54
6 changed files with 144 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/frontend/src/components/global/MkStickyContainer.vue
View File

@ -18,10 +18,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef } from 'vue';
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef, toRefs } from 'vue';
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const.js';
const props = withDefaults(defineProps<{
headerZIndex?: number;
footerZIndex?: number;
}>(), {
headerZIndex: 1000,
footerZIndex: 1000,
});
// non-reactive
const { headerZIndex, footerZIndex } = props;
const rootEl = shallowRef<HTMLElement>();
const headerEl = shallowRef<HTMLElement>();
const footerEl = shallowRef<HTMLElement>();
@ -79,14 +90,14 @@ onMounted(() => {
if (headerEl.value != null) {
headerEl.value.style.position = 'sticky';
headerEl.value.style.top = 'var(--stickyTop, 0)';
headerEl.value.style.zIndex = '1000';
headerEl.value.style.zIndex = `${headerZIndex}`;
observer.observe(headerEl.value);
}
if (footerEl.value != null) {
footerEl.value.style.position = 'sticky';
footerEl.value.style.bottom = 'var(--stickyBottom, 0)';
footerEl.value.style.zIndex = '1000';
footerEl.value.style.zIndex = `${footerZIndex}`;
observer.observe(footerEl.value);
}
});

257
packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
View File

@ -4,139 +4,140 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps">
<MkFolder>
<template #icon><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts._customEmojisManager._gridCommon.searchSettings }}</template>
<template #caption>
{{ i18n.ts._customEmojisManager._gridCommon.searchSettingCaption }}
</template>
<div v-if="gridItems.length === 0" style="text-align: center">
{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
</div>
<MkStickyContainer v-else>
<template #default>
<div class="_gaps">
<div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
<MkInput
v-model="queryName"
type="search"
autocapitalize="off"
:class="[$style.col1, $style.row1]"
@enter="onSearchRequest"
>
<template #label>name</template>
</MkInput>
<MkInput
v-model="queryCategory"
type="search"
autocapitalize="off"
:class="[$style.col2, $style.row1]"
@enter="onSearchRequest"
>
<template #label>category</template>
</MkInput>
<MkInput
v-model="queryAliases"
type="search"
autocapitalize="off"
:class="[$style.col3, $style.row1]"
@enter="onSearchRequest"
>
<template #label>aliases</template>
</MkInput>
<MkFolder>
<template #icon><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts._customEmojisManager._gridCommon.searchSettings }}</template>
<template #caption>
{{ i18n.ts._customEmojisManager._gridCommon.searchSettingCaption }}
</template>
<MkInput
v-model="queryType"
type="search"
autocapitalize="off"
:class="[$style.col1, $style.row2]"
@enter="onSearchRequest"
>
<template #label>type</template>
</MkInput>
<MkInput
v-model="queryLicense"
type="search"
autocapitalize="off"
:class="[$style.col2, $style.row2]"
@enter="onSearchRequest"
>
<template #label>license</template>
</MkInput>
<MkSelect
v-model="querySensitive"
:class="[$style.col3, $style.row2]"
>
<template #label>sensitive</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<div class="_gaps">
<div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
<MkInput
v-model="queryName"
type="search"
autocapitalize="off"
:class="[$style.col1, $style.row1]"
@enter="onSearchRequest"
>
<template #label>name</template>
</MkInput>
<MkInput
v-model="queryCategory"
type="search"
autocapitalize="off"
:class="[$style.col2, $style.row1]"
@enter="onSearchRequest"
>
<template #label>category</template>
</MkInput>
<MkInput
v-model="queryAliases"
type="search"
autocapitalize="off"
:class="[$style.col3, $style.row1]"
@enter="onSearchRequest"
>
<template #label>aliases</template>
</MkInput>
<MkSelect
v-model="queryLocalOnly"
:class="[$style.col1, $style.row3]"
>
<template #label>localOnly</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<MkInput
v-model="queryUpdatedAtFrom"
type="date"
autocapitalize="off"
:class="[$style.col2, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(from)</template>
</MkInput>
<MkInput
v-model="queryUpdatedAtTo"
type="date"
autocapitalize="off"
:class="[$style.col3, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(to)</template>
</MkInput>
<MkInput
v-model="queryType"
type="search"
autocapitalize="off"
:class="[$style.col1, $style.row2]"
@enter="onSearchRequest"
>
<template #label>type</template>
</MkInput>
<MkInput
v-model="queryLicense"
type="search"
autocapitalize="off"
:class="[$style.col2, $style.row2]"
@enter="onSearchRequest"
>
<template #label>license</template>
</MkInput>
<MkSelect
v-model="querySensitive"
:class="[$style.col3, $style.row2]"
>
<template #label>sensitive</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<MkInput
v-model="queryRolesText"
type="text"
readonly
autocapitalize="off"
:class="[$style.col1, $style.row4]"
@click="onQueryRolesEditClicked"
>
<template #label>role</template>
<template #suffix><span class="ti ti-pencil"/></template>
</MkInput>
<MkSelect
v-model="queryLocalOnly"
:class="[$style.col1, $style.row3]"
>
<template #label>localOnly</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<MkInput
v-model="queryUpdatedAtFrom"
type="date"
autocapitalize="off"
:class="[$style.col2, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(from)</template>
</MkInput>
<MkInput
v-model="queryUpdatedAtTo"
type="date"
autocapitalize="off"
:class="[$style.col3, $style.row3]"
@enter="onSearchRequest"
>
<template #label>updatedAt(to)</template>
</MkInput>
<MkInput
v-model="queryRolesText"
type="text"
readonly
autocapitalize="off"
:class="[$style.col1, $style.row4]"
@click="onQueryRolesEditClicked"
>
<template #label>role</template>
<template #suffix><span class="ti ti-pencil"/></template>
</MkInput>
</div>
<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
<MkButton primary @click="onSearchRequest">
{{ i18n.ts.search }}
</MkButton>
<MkButton @click="onQueryResetButtonClicked">
{{ i18n.ts.reset }}
</MkButton>
</div>
</div>
</MkFolder>
<XRegisterLogsFolder :logs="requestLogs"/>
<div :class="$style.gridArea">
<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
</div>
<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
<MkButton primary @click="onSearchRequest">
{{ i18n.ts.search }}
</MkButton>
<MkButton @click="onQueryResetButtonClicked">
{{ i18n.ts.reset }}
</MkButton>
</div>
</div>
</MkFolder>
<XRegisterLogsFolder :logs="requestLogs"/>
<div v-if="gridItems.length === 0" style="text-align: center">
{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
</div>
<template v-else>
<div :class="$style.gridArea">
<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
</div>
<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
<div class="_gaps">
<div :class="$style.buttons">
<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
@ -148,7 +149,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</template>
</div>
</MkStickyContainer>
</template>
<script setup lang="ts">
@ -680,11 +681,8 @@ onMounted(async () => {
}
.gridArea {
overflow-x: auto;
overflow-y: hidden;
padding-top: 8px;
padding-bottom: 8px;
resize: vertical;
}
.buttons {
@ -699,4 +697,5 @@ onMounted(async () => {
margin: 8px 0;
border-top: solid 0.5px var(--divider);
}
</style>

3
packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
View File

@ -452,11 +452,8 @@ onMounted(async () => {
}
.gridArea {
overflow-x: auto;
overflow-y: hidden;
padding-top: 8px;
padding-bottom: 8px;
resize: vertical;
}
.buttons {

1
packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
View File

@ -32,6 +32,5 @@ const modeTab = ref<PageMode>('list');
<style module lang="scss">
.root {
padding: 16px;
overflow: scroll;
}
</style>

3
packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
View File

@ -344,11 +344,8 @@ onMounted(async () => {
}
.gridArea {
overflow-x: auto;
overflow-y: hidden;
padding-top: 8px;
padding-bottom: 8px;
resize: vertical;
}
.pages {

3
packages/frontend/src/pages/admin/custom-emojis-manager2.vue
View File

@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<MkStickyContainer>
<!-- コンテナが入れ子になるのでz-indexが被らないよう大きめの数値を設定する-->
<MkStickyContainer :headerZIndex="2000">
<template #header>
<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs"/>
</template>