Improve UI

This commit is contained in:
syuilo 2021-04-10 13:38:24 +09:00
parent 45e5d89353
commit fb8ed718ce
6 changed files with 57 additions and 21 deletions

View file

@ -56,6 +56,7 @@ export default defineComponent({
includeLocalRenotes: this.$store.state.showLocalRenotes includeLocalRenotes: this.$store.state.showLocalRenotes
}, },
query: {}, query: {},
date: null
}; };
}, },
@ -157,7 +158,7 @@ export default defineComponent({
endpoint: endpoint, endpoint: endpoint,
limit: 10, limit: 10,
params: init => ({ params: init => ({
untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined), untilDate: this.date?.getTime(),
...this.baseQuery, ...this.query ...this.baseQuery, ...this.query
}) })
}; };
@ -171,6 +172,11 @@ export default defineComponent({
methods: { methods: {
focus() { focus() {
this.$refs.tl.focus(); this.$refs.tl.focus();
},
timetravel(date?: Date) {
this.date = date;
this.$refs.tl.reload();
} }
} }
}); });

View file

@ -45,6 +45,7 @@ import MkRemoteCaution from '@client/components/remote-caution.vue';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import * as os from '@client/os'; import * as os from '@client/os';
import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols';
import { url } from '@client/config';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -65,6 +66,11 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.note ? { [symbols.PAGE_INFO]: computed(() => this.note ? {
title: this.$ts.note, title: this.$ts.note,
avatar: this.note.user, avatar: this.note.user,
share: {
title: this.$t('noteOf', { user: this.note.user.name }),
text: this.note.text,
url: `${url}/notes/${this.note.id}`
},
} : null), } : null),
note: null, note: null,
clips: null, clips: null,

View file

@ -6,7 +6,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faBell } from '@fortawesome/free-solid-svg-icons'; import { faBell, faCheck } from '@fortawesome/free-solid-svg-icons';
import Progress from '@client/scripts/loading'; import Progress from '@client/scripts/loading';
import XNotifications from '@client/components/notifications.vue'; import XNotifications from '@client/components/notifications.vue';
import * as os from '@client/os'; import * as os from '@client/os';
@ -21,7 +21,14 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.notifications, title: this.$ts.notifications,
icon: faBell icon: faBell,
actions: [{
text: this.$ts.markAllAsRead,
icon: faCheck,
handler: () => {
os.apiWithDialog('notifications/mark-all-as-read');
}
}]
}, },
}; };
}, },

View file

@ -38,7 +38,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, defineAsyncComponent, computed } from 'vue'; import { defineComponent, defineAsyncComponent, computed } from 'vue';
import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt, faAt } from '@fortawesome/free-solid-svg-icons'; import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt, faAt } from '@fortawesome/free-solid-svg-icons';
import { faComments, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import { faComments, faEnvelope, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
import Progress from '@client/scripts/loading'; import Progress from '@client/scripts/loading';
import XTimeline from '@client/components/timeline.vue'; import XTimeline from '@client/components/timeline.vue';
import XPostForm from '@client/components/post-form.vue'; import XPostForm from '@client/components/post-form.vue';
@ -67,10 +67,11 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => ({ [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.timeline, title: this.$ts.timeline,
icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome, icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome,
action: { actions: [{
icon: faPencilAlt, icon: faCalendarAlt,
handler: () => os.post() text: this.$ts.jumpToSpecifiedDate,
} handler: this.timetravel
}]
})), })),
faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faAt, faEnvelope, faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faAt, faEnvelope,
}; };

View file

@ -276,10 +276,6 @@ export default defineComponent({
title: this.user.name, title: this.user.name,
url: `${url}/@${this.user.username}` url: `${url}/@${this.user.username}`
}, },
action: {
icon: faEllipsisH,
handler: this.menu
}
} : null), } : null),
user: null, user: null,
error: null, error: null,

View file

@ -12,8 +12,12 @@
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div> </div>
</div> </div>
<button class="_button menu" @click.stop="menu"><Fa :icon="faEllipsisH"/></button> <div class="buttons">
<!--<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>--> <template v-if="info.actions && showActions">
<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><Fa :icon="action.icon"/></button>
</template>
<button v-if="showMenu" class="_button button" @click.stop="menu"><Fa :icon="faEllipsisH"/></button>
</div>
</template> </template>
</div> </div>
</template> </template>
@ -43,11 +47,21 @@ export default defineComponent({
data() { data() {
return { return {
canBack: false, canBack: false,
showActions: false,
height: 0, height: 0,
faChevronLeft, faCircle, faShareAlt, faEllipsisH, faChevronLeft, faCircle, faShareAlt, faEllipsisH,
}; };
}, },
computed: {
showMenu() {
if (this.info.actions != null && !this.showActions) return true;
if (this.info.menu != null) return true;
if (this.info.share != null) return true;
return false;
}
},
watch: { watch: {
$route: { $route: {
handler(to, from) { handler(to, from) {
@ -59,8 +73,10 @@ export default defineComponent({
mounted() { mounted() {
this.height = this.$el.parentElement.offsetHeight + 'px'; this.height = this.$el.parentElement.offsetHeight + 'px';
this.showActions = this.$el.parentElement.offsetWidth >= 500;
new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
this.height = this.$el.parentElement.offsetHeight + 'px'; this.height = this.$el.parentElement.offsetHeight + 'px';
this.showActions = this.$el.parentElement.offsetWidth >= 500;
}).observe(this.$el); }).observe(this.$el);
}, },
@ -99,21 +115,25 @@ export default defineComponent({
} }
} }
> .back, > .back {
> .menu {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0;
height: var(--height); height: var(--height);
width: var(--height); width: var(--height);
} }
> .back { > .buttons {
left: 0; position: absolute;
} z-index: 1;
top: 0;
> .menu {
right: 0; right: 0;
> .button {
height: var(--height);
width: var(--height);
}
} }
> .titleContainer { > .titleContainer {