moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

remove v-size directive

Browse Source
This commit is contained in:
syuilo 2022-12-28 09:32:22 +09:00
parent 9b595b93f8
commit 13677ff2b0
18 changed files with 19 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkContainer.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
@ -233,7 +233,7 @@ export default defineComponent({
}
}
&.max-width_380px, &.thin {
&.thin {
> header {
> .title {
padding: 8px 10px;

10
packages/frontend/src/components/MkFolder.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [500] }" class="ssazuxis">
<div class="ssazuxis">
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
@ -147,14 +147,6 @@ export default defineComponent({
padding: 12px 0 12px 16px;
}
}
&.max-width_500px {
> header {
> .title {
padding: 8px 10px 8px 0;
}
}
}
}
@container (max-width: 500px) {

1
packages/frontend/src/components/MkNote.vue
View File

@ -4,7 +4,6 @@
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"

59
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -4,7 +4,6 @@
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="lxwezrsl _block"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
@ -543,64 +542,6 @@ if (appearNote.replyId) {
> .reply {
border-top: solid 0.5px var(--divider);
}
&.max-width_500px {
font-size: 0.9em;
}
&.max-width_450px {
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 16px;
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
}
}
&.max-width_350px {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
}
}
&.max-width_300px {
font-size: 0.825em;
> .article {
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
@container (max-width: 500px) {

18
packages/frontend/src/components/MkNotePreview.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ min: [350, 500] }" class="fefdfafb">
<div class="fefdfafb">
<MkAvatar class="avatar" :user="$i"/>
<div class="main">
<div class="header">
@ -30,22 +30,6 @@ const props = defineProps<{
overflow: clip;
font-size: 0.95em;
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
> .avatar {
flex-shrink: 0;
display: block;

18
packages/frontend/src/components/MkNoteSimple.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ min: [350, 500] }" class="yohlumlk">
<div class="yohlumlk">
<MkAvatar class="avatar" :user="note.user"/>
<div class="main">
<XNoteHeader class="header" :note="note" :mini="true"/>
@ -39,22 +39,6 @@ const showContent = $ref(false);
overflow: clip;
font-size: 0.95em;
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
> .avatar {
flex-shrink: 0;
display: block;

10
packages/frontend/src/components/MkNoteSub.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="main">
<MkAvatar class="avatar" :user="note.user"/>
<div class="body">
@ -62,17 +62,9 @@ if (props.detail) {
padding: 16px 32px;
font-size: 0.9em;
&.max-width_450px {
padding: 14px 16px;
}
&.children {
padding: 10px 0 0 16px;
font-size: 1em;
&.max-width_450px {
padding: 10px 0 0 8px;
}
}
> .main {

12
packages/frontend/src/components/MkNotification.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
<div ref="elRef" class="qglefbjs" :class="notification.type">
<div class="head">
<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
@ -170,16 +170,6 @@ useTooltip(reactionRef, (showing) => {
display: flex;
contain: content;
&.max-width_600px {
padding: 16px;
font-size: 0.9em;
}
&.max-width_500px {
padding: 12px;
font-size: 0.85em;
}
> .head {
position: sticky;
top: 0;

55
packages/frontend/src/components/MkPostForm.vue
View File

@ -1,6 +1,6 @@
<template>
<div
v-size="{ max: [310, 500] }" class="gafaadew"
class="gafaadew"
:class="{ modal, _popup: modal }"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@ -936,59 +936,6 @@ onMounted(() => {
}
}
}
&.max-width_500px {
> header {
height: 50px;
> .cancel {
width: 50px;
line-height: 50px;
}
> .right {
> .text-count {
line-height: 50px;
}
> .submit {
margin: 8px;
}
}
}
> .form {
> .to-specified {
padding: 6px 16px;
}
> .cw,
> .hashtags,
> .text {
padding: 0 16px;
}
> .text {
min-height: 80px;
}
> footer {
padding: 0 8px 8px 8px;
}
}
}
&.max-width_310px {
> .form {
> footer {
> button {
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
}
}
@container (max-width: 500px) {

10
packages/frontend/src/components/MkTab.vue
View File

@ -10,7 +10,7 @@ export default defineComponent({
render() {
const options = this.$slots.default();
return withDirectives(h('div', {
return h('div', {
class: 'pxhvhrfw',
}, options.map(option => withDirectives(h('button', {
class: ['_button', { active: this.modelValue === option.props.value }],
@ -21,9 +21,7 @@ export default defineComponent({
},
}, option.children), [
[resolveDirective('click-anime')],
]))), [
[resolveDirective('size'), { max: [500] }],
]);
])));
},
});
</script>
@ -61,8 +59,10 @@ export default defineComponent({
margin-right: 6px;
}
}
}
&.max-width_500px {
@container (max-width: 500px) {
.pxhvhrfw {
font-size: 80%;
> button {

65
packages/frontend/src/components/MkUrlPreview.vue
View File

@ -6,7 +6,7 @@
<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div>
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<div v-else class="mk-url-preview">
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
@ -154,69 +154,6 @@ onUnmounted(() => {
}
.mk-url-preview {
&.max-width_400px {
> .link {
font-size: 12px;
> .thumbnail {
height: 80px;
}
> article {
padding: 12px;
}
}
}
&.max-width_350px {
> .link {
font-size: 10px;
> .thumbnail {
height: 70px;
}
> article {
padding: 8px;
> header {
margin-bottom: 4px;
}
> footer {
margin-top: 4px;
> img {
width: 12px;
height: 12px;
}
}
}
&.compact {
> .thumbnail {
position: absolute;
width: 56px;
height: 100%;
}
> article {
left: 56px;
width: calc(100% - 56px);
padding: 4px;
> header {
margin-bottom: 2px;
}
> footer {
margin-top: 2px;
}
}
}
}
}
> .link {
position: relative;
display: block;

2
packages/frontend/src/directives/index.ts
View File

@ -1,7 +1,6 @@
import { App } from 'vue';
import userPreview from './user-preview';
import size from './size';
import getSize from './get-size';
import ripple from './ripple';
import tooltip from './tooltip';
@ -15,7 +14,6 @@ import adaptiveBorder from './adaptive-border';
export default function(app: App) {
app.directive('userPreview', userPreview);
app.directive('user-preview', userPreview);
app.directive('size', size);
app.directive('get-size', getSize);
app.directive('ripple', ripple);
app.directive('tooltip', tooltip);

123
packages/frontend/src/directives/size.ts
View File

@ -1,123 +0,0 @@
import { Directive } from 'vue';
type Value = { max?: number[]; min?: number[]; };
//const observers = new Map<Element, ResizeObserver>();
const mountings = new Map<Element, {
value: Value;
resize: ResizeObserver;
intersection?: IntersectionObserver;
previousWidth: number;
twoPreviousWidth: number;
}>();
type ClassOrder = {
add: string[];
remove: string[];
};
const isContainerQueriesSupported = ('container' in document.documentElement.style);
const cache = new Map<string, ClassOrder>();
function getClassOrder(width: number, queue: Value): ClassOrder {
const getMaxClass = (v: number) => `max-width_${v}px`;
const getMinClass = (v: number) => `min-width_${v}px`;
return {
add: [
...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []),
...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
],
remove: [
...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
],
};
}
function applyClassOrder(el: Element, order: ClassOrder) {
el.classList.add(...order.add);
el.classList.remove(...order.remove);
}
function getOrderName(width: number, queue: Value): string {
return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
}
function calc(el: Element) {
const info = mountings.get(el);
const width = el.clientWidth;
if (!info || info.previousWidth === width) return;
// アクティベート前などでsrcが描画されていない場合
if (!width) {
// IntersectionObserverで表示検出する
if (!info.intersection) {
info.intersection = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting)) calc(el);
});
}
info.intersection.observe(el);
return;
}
if (info.intersection) {
info.intersection.disconnect();
delete info.intersection;
}
mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
// Prevent infinite resizing
// https://github.com/misskey-dev/misskey/issues/9076
if (info.twoPreviousWidth === width) {
return;
}
const cached = cache.get(getOrderName(width, info.value));
if (cached) {
applyClassOrder(el, cached);
} else {
const order = getClassOrder(width, info.value);
cache.set(getOrderName(width, info.value), order);
applyClassOrder(el, order);
}
}
export default {
mounted(src, binding, vn) {
if (isContainerQueriesSupported) return;
const resize = new ResizeObserver((entries, observer) => {
calc(src);
});
mountings.set(src, {
value: binding.value,
resize,
previousWidth: 0,
twoPreviousWidth: 0,
});
calc(src);
resize.observe(src);
},
updated(src, binding, vn) {
if (isContainerQueriesSupported) return;
mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
calc(src);
},
unmounted(src, binding, vn) {
if (isContainerQueriesSupported) return;
const info = mountings.get(src);
if (!info) return;
info.resize.disconnect();
if (info.intersection) info.intersection.disconnect();
mountings.delete(src);
},
} as Directive<Element, Value>;

7
packages/frontend/src/pages/antenna-timeline.vue
View File

@ -1,7 +1,7 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline
@ -112,11 +112,6 @@ definePageMetadata(computed(() => antenna ? {
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
@container (min-width: 800px) {

24
packages/frontend/src/pages/messaging/index.vue
View File

@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div v-size="{ max: [400] }" class="yweeujhr">
<div class="yweeujhr">
<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
<div v-if="messages.length > 0" class="history">
@ -277,28 +277,6 @@ definePageMetadata({
}
}
}
&.max-width_400px {
> .history {
> .message {
&:not(.isMe):not(.isRead) {
> div {
background-image: none;
border-left: solid 4px #3aa2dc;
}
}
> div {
padding: 16px;
font-size: 0.9em;
> .avatar {
margin: 0 12px 0 0;
}
}
}
}
}
}
@container (max-width: 400px) {

31
packages/frontend/src/pages/messaging/messaging-room.message.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
<div class="thvuemwp" :class="{ isMe }">
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content">
<div class="balloon" :class="{ noText: message.text == null }">
@ -301,35 +301,6 @@ function del(): void {
}
}
}
&.max-width_400px {
> .avatar {
width: 48px;
height: 48px;
}
> .content {
> .balloon {
> .content {
> .text {
font-size: 0.9em;
}
}
}
}
}
&.max-width_500px {
> .content {
> .balloon {
> .content {
> .text {
padding: 8px 16px;
}
}
}
}
}
}
@container (max-width: 400px) {

7
packages/frontend/src/pages/user-list-timeline.vue
View File

@ -1,7 +1,7 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
<div ref="rootEl" class="eqqrhokj">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline
@ -105,11 +105,6 @@ definePageMetadata(computed(() => list ? {
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
@container (min-width: 800px) {

52
packages/frontend/src/pages/user/home.vue
View File

@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="narrow ? 800 : 1100">
<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }">
<div class="main">
<!-- TODO -->
<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
@ -409,56 +409,6 @@ onUnmounted(() => {
}
}
&.max-width_500px {
> .main {
> .profile > .main {
> .banner-container {
height: 140px;
> .fade {
display: none;
}
> .title {
display: none;
}
}
> .title {
display: block;
}
> .avatar {
top: 90px;
left: 0;
right: 0;
width: 92px;
height: 92px;
margin: auto;
}
> .description {
padding: 16px;
text-align: center;
}
> .fields {
padding: 16px;
}
> .status {
padding: 16px;
}
}
> .contents {
> .nav {
font-size: 80%;
}
}
}
}
&.wide {
display: flex;
width: 100%;