natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2022-12-28 18:22:46 +09:00
parent 229d185354
commit 6e6d9f3029
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<button <button
v-if="!link" v-if="!link"
ref="el" class="bghgjjyj _button" ref="el" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full, small }"
:type="type" :type="type"
@click="emit('click', $event)" @click="emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -14,7 +14,7 @@
</button> </button>
<MkA <MkA
v-else class="bghgjjyj _button" v-else class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full, small }"
:to="to" :to="to"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
@ -40,6 +40,7 @@ const props = defineProps<{
wait?: boolean; wait?: boolean;
danger?: boolean; danger?: boolean;
full?: boolean; full?: boolean;
small?: boolean;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -125,6 +126,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);
} }
&.small {
font-size: 90%;
padding: 6px 12px;
}
&.full { &.full {
width: 100%; width: 100%;
} }

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

@ -10,7 +10,6 @@
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <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"> <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}')`"> <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
</div> </div>
<article> <article>
<header> <header>
@ -24,10 +23,18 @@
</article> </article>
</component> </component>
</transition> </transition>
<div v-if="tweetId" class="expandTweet"> <div v-if="tweetId" class="action">
<a @click="tweetExpanded = true"> <MkButton :small="true" inline @click="tweetExpanded = true">
<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }} <i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
</a> </MkButton>
</div>
<div v-if="!playerEnabled && player.url" class="action">
<MkButton :small="true" inline @click="playerEnabled = true">
<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
</MkButton>
<MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()">
<i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }}
</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -38,6 +45,7 @@ import { url as local, lang } from '@/config';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import * as os from '@/os'; import * as os from '@/os';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import MkButton from '@/components/MkButton.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
url: string; url: string;
@ -181,16 +189,6 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> button {
font-size: 3.5em;
opacity: 0.7;
&:hover {
font-size: 4em;
opacity: 0.9;
}
}
& + article { & + article {
left: 100px; left: 100px;
width: calc(100% - 100px); width: calc(100% - 100px);
@ -249,6 +247,13 @@ onUnmounted(() => {
} }
} }
} }
> .action {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
} }
@container (max-width: 400px) { @container (max-width: 400px) {