summaryrefslogtreecommitdiff
path: root/src/web/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/app')
-rw-r--r--src/web/app/desktop/views/components/drive.file.vue (renamed from src/web/app/desktop/views/components/drive-file.vue)6
-rw-r--r--src/web/app/desktop/views/components/drive.folder.vue (renamed from src/web/app/desktop/views/components/drive-folder.vue)6
-rw-r--r--src/web/app/desktop/views/components/drive.nav-folder.vue (renamed from src/web/app/desktop/views/components/drive-nav-folder.vue)4
-rw-r--r--src/web/app/desktop/views/components/drive.vue16
-rw-r--r--src/web/app/desktop/views/components/index.ts6
-rw-r--r--src/web/app/init.ts34
-rw-r--r--src/web/app/mobile/views/components/index.ts2
-rw-r--r--src/web/app/mobile/views/components/timeline.vue24
-rw-r--r--src/web/app/mobile/views/components/user-timeline.vue40
-rw-r--r--src/web/app/mobile/views/pages/user.vue8
-rw-r--r--src/web/app/mobile/views/pages/user/home.vue2
11 files changed, 96 insertions, 52 deletions
diff --git a/src/web/app/desktop/views/components/drive-file.vue b/src/web/app/desktop/views/components/drive.file.vue
index ffdf7ef57e..cc423477e9 100644
--- a/src/web/app/desktop/views/components/drive-file.vue
+++ b/src/web/app/desktop/views/components/drive.file.vue
@@ -1,5 +1,5 @@
<template>
-<div class="mk-drive-file"
+<div class="root file"
:data-is-selected="isSelected"
:data-is-contextmenu-showing="isContextmenuShowing"
@click="onClick"
@@ -51,7 +51,7 @@ export default Vue.extend({
},
background(): string {
return this.file.properties.average_color
- ? `rgb(${this.file.properties.average_color.join(',')})'`
+ ? `rgb(${this.file.properties.average_color.join(',')})`
: 'transparent';
}
},
@@ -188,7 +188,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-.mk-drive-file
+.root.file
padding 8px 0 0 0
height 180px
border-radius 4px
diff --git a/src/web/app/desktop/views/components/drive-folder.vue b/src/web/app/desktop/views/components/drive.folder.vue
index efb9df30f8..4e57d1ca66 100644
--- a/src/web/app/desktop/views/components/drive-folder.vue
+++ b/src/web/app/desktop/views/components/drive.folder.vue
@@ -1,5 +1,5 @@
<template>
-<div class="mk-drive-folder"
+<div class="root folder"
:data-is-contextmenu-showing="isContextmenuShowing"
:data-draghover="draghover"
@click="onClick"
@@ -124,7 +124,7 @@ export default Vue.extend({
this.browser.upload(file, this.folder);
});
return false;
- };
+ }
// データ取得
const data = e.dataTransfer.getData('text');
@@ -220,7 +220,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-.mk-drive-folder
+.root.folder
padding 8px
height 64px
background lighten($theme-color, 95%)
diff --git a/src/web/app/desktop/views/components/drive-nav-folder.vue b/src/web/app/desktop/views/components/drive.nav-folder.vue
index 44821087af..4c51285881 100644
--- a/src/web/app/desktop/views/components/drive-nav-folder.vue
+++ b/src/web/app/desktop/views/components/drive.nav-folder.vue
@@ -1,5 +1,5 @@
<template>
-<div class="mk-drive-nav-folder"
+<div class="root nav-folder"
:data-draghover="draghover"
@click="onClick"
@dragover.prevent.stop="onDragover"
@@ -101,7 +101,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-.mk-drive-nav-folder
+.root.nav-folder
&[data-draghover]
background #eee
diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue
index 0dcf077017..ffe0c68dec 100644
--- a/src/web/app/desktop/views/components/drive.vue
+++ b/src/web/app/desktop/views/components/drive.vue
@@ -2,10 +2,10 @@
<div class="mk-drive">
<nav>
<div class="path" @contextmenu.prevent.stop="() => {}">
- <mk-drive-nav-folder :class="{ current: folder == null }"/>
+ <x-nav-folder :class="{ current: folder == null }"/>
<template v-for="folder in hierarchyFolders">
<span class="separator">%fa:angle-right%</span>
- <mk-drive-nav-folder :folder="folder" :key="folder.id"/>
+ <x-nav-folder :folder="folder" :key="folder.id"/>
</template>
<span class="separator" v-if="folder != null">%fa:angle-right%</span>
<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
@@ -24,13 +24,13 @@
<div class="selection" ref="selection"></div>
<div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
- <mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
+ <x-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16"></div>
<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
</div>
<div class="files" ref="filesContainer" v-if="files.length > 0">
- <mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/>
+ <x-file v-for="file in files" :key="file.id" class="file" :file="file"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16"></div>
<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
@@ -57,10 +57,18 @@
<script lang="ts">
import Vue from 'vue';
import MkDriveWindow from './drive-window.vue';
+import XNavFolder from './drive.nav-folder.vue';
+import XFolder from './drive.folder.vue';
+import XFile from './drive.file.vue';
import contains from '../../../common/scripts/contains';
import contextmenu from '../../api/contextmenu';
export default Vue.extend({
+ components: {
+ XNavFolder,
+ XFolder,
+ XFile
+ },
props: {
initFolder: {
type: Object,
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index fc30bb729e..da59d9219e 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -19,9 +19,6 @@ import repostForm from './repost-form.vue';
import followButton from './follow-button.vue';
import postPreview from './post-preview.vue';
import drive from './drive.vue';
-import driveFile from './drive-file.vue';
-import driveFolder from './drive-folder.vue';
-import driveNavFolder from './drive-nav-folder.vue';
import postDetail from './post-detail.vue';
import settings from './settings.vue';
import calendar from './calendar.vue';
@@ -71,9 +68,6 @@ Vue.component('mk-repost-form', repostForm);
Vue.component('mk-follow-button', followButton);
Vue.component('mk-post-preview', postPreview);
Vue.component('mk-drive', drive);
-Vue.component('mk-drive-file', driveFile);
-Vue.component('mk-drive-folder', driveFolder);
-Vue.component('mk-drive-nav-folder', driveNavFolder);
Vue.component('mk-post-detail', postDetail);
Vue.component('mk-settings', settings);
Vue.component('mk-calendar', calendar);
diff --git a/src/web/app/init.ts b/src/web/app/init.ts
index ac567c5023..aa2ec25c96 100644
--- a/src/web/app/init.ts
+++ b/src/web/app/init.ts
@@ -87,23 +87,6 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
// アプリ基底要素マウント
document.body.innerHTML = '<div id="app"></div>';
- const app = new Vue({
- router: new VueRouter({
- mode: 'history'
- }),
- created() {
- this.$watch('os.i', i => {
- // キャッシュ更新
- localStorage.setItem('me', JSON.stringify(i));
- }, {
- deep: true
- });
- },
- render: createEl => createEl(App)
- });
-
- os.app = app;
-
const launch = (api: (os: MiOS) => API) => {
os.apis = api(os);
@@ -117,6 +100,23 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v
}
});
+ const app = new Vue({
+ router: new VueRouter({
+ mode: 'history'
+ }),
+ created() {
+ this.$watch('os.i', i => {
+ // キャッシュ更新
+ localStorage.setItem('me', JSON.stringify(i));
+ }, {
+ deep: true
+ });
+ },
+ render: createEl => createEl(App)
+ });
+
+ os.app = app;
+
// マウント
app.$mount('#app');
diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts
index 73cc1f9f3a..905baaf20d 100644
--- a/src/web/app/mobile/views/components/index.ts
+++ b/src/web/app/mobile/views/components/index.ts
@@ -18,6 +18,7 @@ import notifications from './notifications.vue';
import notificationPreview from './notification-preview.vue';
import usersList from './users-list.vue';
import userPreview from './user-preview.vue';
+import userTimeline from './user-timeline.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-home', home);
@@ -37,3 +38,4 @@ Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview);
Vue.component('mk-users-list', usersList);
Vue.component('mk-user-preview', userPreview);
+Vue.component('mk-user-timeline', userTimeline);
diff --git a/src/web/app/mobile/views/components/timeline.vue b/src/web/app/mobile/views/components/timeline.vue
index e7a9f2df1a..c0e766523f 100644
--- a/src/web/app/mobile/views/components/timeline.vue
+++ b/src/web/app/mobile/views/components/timeline.vue
@@ -9,9 +9,9 @@
%fa:R comments%
%i18n:mobile.tags.mk-home-timeline.empty-timeline%
</div>
- <button v-if="!fetching && posts.length != 0" @click="more" :disabled="fetching" slot="tail">
- <span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
- <span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
+ <button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
+ <span v-if="!moreFetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
+ <span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-posts>
</div>
@@ -19,6 +19,9 @@
<script lang="ts">
import Vue from 'vue';
+
+const limit = 10;
+
export default Vue.extend({
props: {
date: {
@@ -31,6 +34,7 @@ export default Vue.extend({
fetching: true,
moreFetching: false,
posts: [],
+ existMore: false,
connection: null,
connectionId: null
};
@@ -59,10 +63,14 @@ export default Vue.extend({
methods: {
fetch(cb?) {
this.fetching = true;
-
(this as any).api('posts/timeline', {
+ limit: limit + 1,
until_date: this.date ? (this.date as any).getTime() : undefined
}).then(posts => {
+ if (posts.length == limit + 1) {
+ posts.pop();
+ this.existMore = true;
+ }
this.posts = posts;
this.fetching = false;
this.$emit('loaded');
@@ -70,11 +78,17 @@ export default Vue.extend({
});
},
more() {
- if (this.moreFetching || this.fetching || this.posts.length == 0) return;
this.moreFetching = true;
(this as any).api('posts/timeline', {
+ limit: limit + 1,
until_id: this.posts[this.posts.length - 1].id
}).then(posts => {
+ if (posts.length == limit + 1) {
+ posts.pop();
+ this.existMore = true;
+ } else {
+ this.existMore = false;
+ }
this.posts = this.posts.concat(posts);
this.moreFetching = false;
});
diff --git a/src/web/app/mobile/views/components/user-timeline.vue b/src/web/app/mobile/views/components/user-timeline.vue
index ffd6288381..39f959187c 100644
--- a/src/web/app/mobile/views/components/user-timeline.vue
+++ b/src/web/app/mobile/views/components/user-timeline.vue
@@ -8,9 +8,9 @@
%fa:R comments%
{{ withMedia ? '%i18n:mobile.tags.mk-user-timeline.no-posts-with-media%' : '%i18n:mobile.tags.mk-user-timeline.no-posts%' }}
</div>
- <button v-if="canFetchMore" @click="more" :disabled="fetching" slot="tail">
- <span v-if="!fetching">%i18n:mobile.tags.mk-user-timeline.load-more%</span>
- <span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
+ <button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
+ <span v-if="!moreFetching">%i18n:mobile.tags.mk-user-timeline.load-more%</span>
+ <span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-posts>
</div>
@@ -18,23 +18,53 @@
<script lang="ts">
import Vue from 'vue';
+
+const limit = 10;
+
export default Vue.extend({
props: ['user', 'withMedia'],
data() {
return {
fetching: true,
- posts: []
+ posts: [],
+ existMore: false,
+ moreFetching: false
};
},
mounted() {
(this as any).api('users/posts', {
user_id: this.user.id,
- with_media: this.withMedia
+ with_media: this.withMedia,
+ limit: limit + 1
}).then(posts => {
+ if (posts.length == limit + 1) {
+ posts.pop();
+ this.existMore = true;
+ }
this.posts = posts;
this.fetching = false;
this.$emit('loaded');
});
+ },
+ methods: {
+ more() {
+ this.moreFetching = true;
+ (this as any).api('users/posts', {
+ user_id: this.user.id,
+ with_media: this.withMedia,
+ limit: limit + 1,
+ until_id: this.posts[this.posts.length - 1].id
+ }).then(posts => {
+ if (posts.length == limit + 1) {
+ posts.pop();
+ this.existMore = true;
+ } else {
+ this.existMore = false;
+ }
+ this.posts = this.posts.concat(posts);
+ this.moreFetching = false;
+ });
+ }
}
});
</script>
diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue
index c9c1c6bfbd..27f65e623d 100644
--- a/src/web/app/mobile/views/pages/user.vue
+++ b/src/web/app/mobile/views/pages/user.vue
@@ -66,15 +66,11 @@ export default Vue.extend({
components: {
XHome
},
- props: {
- page: {
- default: 'home'
- }
- },
data() {
return {
fetching: true,
- user: null
+ user: null,
+ page: 'home'
};
},
computed: {
diff --git a/src/web/app/mobile/views/pages/user/home.vue b/src/web/app/mobile/views/pages/user/home.vue
index 040b916ca2..4c68317879 100644
--- a/src/web/app/mobile/views/pages/user/home.vue
+++ b/src/web/app/mobile/views/pages/user/home.vue
@@ -1,6 +1,6 @@
<template>
<div class="root home">
- <mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
+ <mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" :compact="true"/>
<section class="recent-posts">
<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
<div>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-29 14:29:17 +0000