Merge branch 'develop'

This commit is contained in:
syuilo 2021-08-09 21:47:23 +09:00
commit df530bb66d
16 changed files with 82 additions and 162 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> <MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
<MkEmojiPicker class="_shadow" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/> <MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
</MkPopup> </MkPopup>
</template> </template>
@ -56,145 +56,20 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.omfetrab { .ryghynhb {
$pad: 8px; &.pointer {
--eachSize: 40px; &:before {
--size: 8px;
display: flex; content: '';
flex-direction: column; display: block;
contain: content; position: absolute;
top: calc(0px - (var(--size) * 2));
&.big { left: 0;
--eachSize: 44px; right: 0;
} width: 0;
margin: auto;
&.w1 { border: solid var(--size) transparent;
width: calc((var(--eachSize) * 5) + (#{$pad} * 2)); border-bottom-color: var(--popup);
}
&.w2 {
width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.w3 {
width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
}
&.h1 {
--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
}
&.h2 {
--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.h3 {
--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
}
> .search {
width: 100%;
padding: 12px;
box-sizing: border-box;
font-size: 1em;
outline: none;
border: none;
background: transparent;
color: var(--fg);
&:not(.filled) {
order: 1;
z-index: 2;
box-shadow: 0px -1px 0 0px var(--divider);
}
}
> .emojis {
height: var(--height);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
> .index {
min-height: var(--height);
position: relative;
border-bottom: solid 0.5px var(--divider);
> .arrow {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px 0;
text-align: center;
opacity: 0.5;
pointer-events: none;
}
}
section {
> header {
position: sticky;
top: 0;
left: 0;
z-index: 1;
padding: 8px;
font-size: 12px;
}
> div {
padding: $pad;
> button {
position: relative;
padding: 0;
width: var(--eachSize);
height: var(--eachSize);
border-radius: 4px;
&:focus {
outline: solid 2px var(--focus);
z-index: 1;
}
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&:active {
background: var(--accent);
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}
> * {
font-size: 24px;
height: 1.25em;
vertical-align: -.25em;
pointer-events: none;
}
}
}
&.result {
border-bottom: solid 0.5px var(--divider);
&:empty {
display: none;
}
}
&.unicode {
min-height: 384px;
}
&.custom {
min-height: 64px;
}
} }
} }
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]"> <div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()"> <input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
<div class="emojis" ref="emojis"> <div class="emojis" ref="emojis">
<section class="result"> <section class="result">
@ -346,7 +346,6 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content;
&.big { &.big {
--eachSize: 44px; --eachSize: 44px;

View File

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }"> <div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu"> <div class="header" @contextmenu="onContextmenu">
<span class="title"> <span class="title">
<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/> <XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>

View File

@ -5,8 +5,7 @@
</p> </p>
<ul ref="choices"> <ul ref="choices">
<li v-for="(choice, i) in choices" :key="i"> <li v-for="(choice, i) in choices" :key="i">
<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)"> <MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
<template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template>
</MkInput> </MkInput>
<button @click="remove(i)" class="_button"> <button @click="remove(i)" class="_button">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>

View File

@ -170,7 +170,7 @@ export default defineComponent({
} }
> span { > span {
color: #fff; color: var(--fgOnAccent);
} }
} }

View File

@ -127,6 +127,7 @@ export default defineComponent({
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
transition: background 0.1s ease;
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="rrevdjwt" :class="{ left: align === 'left' }" <div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
ref="items" ref="items"
@contextmenu.self="e => e.preventDefault()" @contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap" v-hotkey="keymap"
@ -58,7 +58,11 @@ export default defineComponent({
align: { align: {
type: String, type: String,
requried: false requried: false
} },
point: {
type: String,
requried: false
},
}, },
emits: ['close'], emits: ['close'],
data() { data() {
@ -137,6 +141,22 @@ export default defineComponent({
.rrevdjwt { .rrevdjwt {
padding: 8px 0; padding: 8px 0;
&.pointer {
&:before {
--size: 8px;
content: '';
display: block;
position: absolute;
top: calc(0px - (var(--size) * 2));
left: 0;
right: 0;
width: 0;
margin: auto;
border: solid var(--size) transparent;
border-bottom-color: var(--popup);
}
}
&.left { &.left {
> .item { > .item {
text-align: left; text-align: left;

View File

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }"> <div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header"> <div class="header">
<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button> <button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
<span class="title"> <span class="title">

View File

@ -1,6 +1,6 @@
<template> <template>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')"> <MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/> <MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
</MkPopup> </MkPopup>
</template> </template>

View File

@ -1,7 +1,7 @@
<template> <template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> <transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<slot></slot> <slot :point="point"></slot>
</div> </div>
</transition> </transition>
</template> </template>
@ -52,6 +52,7 @@ export default defineComponent({
fixed: false, fixed: false,
transformOrigin: 'center', transformOrigin: 'center',
contentClicking: false, contentClicking: false,
point: null,
}; };
}, },
@ -135,8 +136,10 @@ export default defineComponent({
} }
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) { if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
this.point = 'top';
this.transformOrigin = 'center top'; this.transformOrigin = 'center top';
} else { } else {
this.point = null;
this.transformOrigin = 'center'; this.transformOrigin = 'center';
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<div class="ebkgocck" :class="{ front }" v-if="showing"> <div class="ebkgocck" :class="{ front }" v-if="showing">
<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown"> <div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu"> <div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button> <button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
@ -416,6 +416,7 @@ export default defineComponent({
flex-shrink: 0; flex-shrink: 0;
user-select: none; user-select: none;
height: var(--height); height: var(--height);
border-bottom: solid 1px var(--divider);
> ::v-deep(button) { > ::v-deep(button) {
height: var(--height); height: var(--height);

View File

@ -115,7 +115,7 @@ export default defineComponent({
line-height: 1.5; line-height: 1.5;
&.max-width_500px { &.max-width_500px {
padding: 16px; padding: 24px;
} }
> .main { > .main {

View File

@ -228,6 +228,7 @@ export default defineComponent({
> .footer { > .footer {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.9em;
> .status { > .status {
&.suspended { &.suspended {
@ -249,7 +250,6 @@ export default defineComponent({
> .right { > .right {
margin-left: auto; margin-left: auto;
font-size: 0.9em;
> .latestStatus { > .latestStatus {
border: solid 1px var(--divider); border: solid 1px var(--divider);

View File

@ -14,6 +14,8 @@
</FormKeyValueView> </FormKeyValueView>
</FormGroup> </FormGroup>
<FormButton v-if="$i.isAdmin || $i.isModerator" @click="info" primary>{{ $ts.settings }}</FormButton>
<FormTextarea readonly :value="instance.description"> <FormTextarea readonly :value="instance.description">
<span>{{ $ts.description }}</span> <span>{{ $ts.description }}</span>
</FormTextarea> </FormTextarea>
@ -147,6 +149,7 @@ import * as os from '@client/os';
import number from '@client/filters/number'; import number from '@client/filters/number';
import bytes from '@client/filters/bytes'; import bytes from '@client/filters/bytes';
import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols';
import MkInstanceInfo from '@client/pages/instance/instance.vue';
const chartLimit = 90; const chartLimit = 90;
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@ -440,6 +443,12 @@ export default defineComponent({
}] }]
}; };
}, },
info() {
os.popup(MkInstanceInfo, {
instance: this.instance
}, {}, 'closed');
}
} }
}); });
</script> </script>

View File

@ -1,11 +1,9 @@
<template> <template>
<div class="qkcjvfiv _section"> <div class="qkcjvfiv">
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list"> <MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
<div class="list _panel" v-for="(list, i) in items" :key="list.id"> <MkA v-for="(list, i) in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
<MkA :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
</div>
</MkPagination> </MkPagination>
</div> </div>
</template> </template>
@ -57,6 +55,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.qkcjvfiv { .qkcjvfiv {
padding: 16px;
> .add { > .add {
margin: 0 auto var(--margin) auto; margin: 0 auto var(--margin) auto;
} }
@ -65,6 +65,13 @@ export default defineComponent({
> .list { > .list {
display: flex; display: flex;
padding: 16px; padding: 16px;
border: solid 1px var(--divider);
border-radius: 6px;
&:hover {
border: solid 1px var(--accent);
text-decoration: none;
}
} }
} }
} }

View File

@ -189,7 +189,7 @@ hr {
._buttonPrimary { ._buttonPrimary {
@extend ._button; @extend ._button;
color: #fff; color: var(--fgOnAccent);
background: var(--accent); background: var(--accent);
&:not(:disabled):hover { &:not(:disabled):hover {
@ -318,10 +318,16 @@ hr {
} }
} }
._window {
background: var(--panel);
border-radius: var(--radius);
contain: content;
}
._popup { ._popup {
background: var(--popup); background: var(--popup);
border-radius: var(--radius); border-radius: var(--radius);
contain: content; contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint contain することができない
} }
._root { ._root {