enhance(client): ボタンをヘッダーに移動

This commit is contained in:
NoriDev 2023-06-04 15:32:11 +09:00
parent 66f0aafef9
commit f24a749d4a
5 changed files with 26 additions and 15 deletions

View file

@ -63,6 +63,7 @@
- 리노트 문구를 노트 최상단으로 배치 - 리노트 문구를 노트 최상단으로 배치
- 특정 MFM 구문이 포함된 노트를 간략화 할지 선택할 수 있음(enhance: [aba0755](https://github.com/kokonect-link/cherrypick/commit/aba0755880d6797f49d34c8b7fe2c602d153e367)) - 특정 MFM 구문이 포함된 노트를 간략화 할지 선택할 수 있음(enhance: [aba0755](https://github.com/kokonect-link/cherrypick/commit/aba0755880d6797f49d34c8b7fe2c602d153e367))
- 노트 사이를 띄우는 옵션 활성화 시 알림 페이지의 노트도 띄우도록 - 노트 사이를 띄우는 옵션 활성화 시 알림 페이지의 노트도 띄우도록
- 안테나, 그룹, 리스트, 클립 페이지의 생성 버튼을 헤더로 이동
- Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
- Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

View file

@ -3,8 +3,6 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<div class="ieepwinx"> <div class="ieepwinx">
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<div class=""> <div class="">
<MkPagination v-slot="{items}" ref="list" :pagination="pagination"> <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`"> <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
@ -20,9 +18,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { useRouter } from '@/router';
const router = useRouter();
const pagination = { const pagination = {
endpoint: 'antennas/list' as const, endpoint: 'antennas/list' as const,
@ -30,7 +30,13 @@ const pagination = {
limit: 10, limit: 10,
}; };
const headerActions = $computed(() => []); const headerActions = $computed(() => [{
icon: 'ti ti-plus',
text: i18n.ts.add,
handler: () => {
router.push('/my/antennas/create');
},
}]);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);

View file

@ -3,8 +3,6 @@
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<div v-if="tab === 'my'" class="_gaps"> <div v-if="tab === 'my'" class="_gaps">
<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`"> <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`">
<MkClipPreview :clip="item"/> <MkClipPreview :clip="item"/>
@ -23,7 +21,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { watch } from 'vue'; import { watch } from 'vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import MkClipPreview from '@/components/MkClipPreview.vue'; import MkClipPreview from '@/components/MkClipPreview.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -80,7 +77,11 @@ function onClipDeleted() {
pagingComponent.reload(); pagingComponent.reload();
} }
const headerActions = $computed(() => []); const headerActions = $computed(() => [{
icon: 'ti ti-plus',
text: i18n.ts.add,
handler: create,
}]);
const headerTabs = $computed(() => [{ const headerTabs = $computed(() => [{
key: 'my', key: 'my',

View file

@ -3,8 +3,6 @@
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div v-if="tab === 'owned'" class="_content"> <div v-if="tab === 'owned'" class="_content">
<MkButton primary class="add" style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createGroup }}</MkButton>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination" class="groups"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination" class="groups">
<MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`"> <MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`">
<div class="name">{{ group.name }}</div> <div class="name">{{ group.name }}</div>
@ -108,7 +106,11 @@ async function leave(group) {
}); });
} }
const headerActions = $computed(() => []); const headerActions = $computed(() => [{
icon: 'ti ti-plus',
text: i18n.ts.createGroup,
handler: create,
}]);
const headerTabs = $computed(() => [{ const headerTabs = $computed(() => [{
key: 'owned', key: 'owned',

View file

@ -3,8 +3,6 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<div class="_gaps"> <div class="_gaps">
<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination">
<div class="_gaps"> <div class="_gaps">
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`"> <MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
@ -21,7 +19,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import MkAvatars from '@/components/MkAvatars.vue'; import MkAvatars from '@/components/MkAvatars.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -46,7 +43,11 @@ async function create() {
pagingComponent.reload(); pagingComponent.reload();
} }
const headerActions = $computed(() => []); const headerActions = $computed(() => [{
icon: 'ti ti-plus',
text: i18n.ts.createList,
handler: create,
}]);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);