aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.scss20
-rw-r--r--src/components/delete_button/delete_button.vue2
-rw-r--r--src/components/favorite_button/favorite_button.vue4
-rw-r--r--src/components/media_upload/media_upload.vue4
-rw-r--r--src/components/notifications/notifications.scss4
-rw-r--r--src/components/notifications/notifications.vue2
-rw-r--r--src/components/retweet_button/retweet_button.vue4
-rw-r--r--src/components/status/status.vue16
-rw-r--r--src/components/timeline/timeline.js17
-rw-r--r--src/components/timeline/timeline.vue2
-rw-r--r--src/components/user_settings/user_settings.vue6
-rw-r--r--src/main.js71
-rw-r--r--src/modules/statuses.js27
-rw-r--r--src/services/api/api.service.js2
-rw-r--r--src/services/style_setter/style_setter.js11
-rw-r--r--src/services/timeline_fetcher/timeline_fetcher.service.js13
16 files changed, 123 insertions, 82 deletions
diff --git a/src/App.scss b/src/App.scss
index 9aa3ee98..95a653ce 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -16,7 +16,13 @@ h4 {
}
#content {
- padding-top: 60px;
+ box-sizing: border-box;
+ padding-top: 60px;
+ margin: auto;
+ min-height: 100vh;
+ max-width: 980px;
+ background-color: rgba(0,0,0,0.15);
+ align-content: flex-start;
}
.text-center {
@@ -157,15 +163,6 @@ main-router {
margin: 0;
}
-
-#content {
- margin: auto;
- min-height: 100vh;
- max-width: 980px;
- padding-bottom: 1em;
- background-color: rgba(0,0,0,0.1);
-}
-
.container > * {
min-width: 0px;
}
@@ -210,10 +207,11 @@ nav {
.panel-switcher {
display: none;
width: 100%;
-
+ height: 46px;
button {
display: block;
flex: 1;
+ max-height: 32px;
margin: 0.5em;
padding: 0.5em;
}
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
index 304f8a63..845ac777 100644
--- a/src/components/delete_button/delete_button.vue
+++ b/src/components/delete_button/delete_button.vue
@@ -1,7 +1,7 @@
<template>
<div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus()">
- <i class='fa icon-cancel delete-status'></i>
+ <i class='base09 icon-cancel delete-status'></i>
</a>
</div>
</template>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 0abece31..dcf28e35 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
+ <i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/>
<span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
</div>
</template>
@@ -15,7 +15,7 @@
color: orange;
}
}
- .icon-star {
+ .favorite-button.icon-star {
color: orange;
}
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index b839067b..9e6ad608 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,8 @@
<template>
<div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
<label class="btn btn-default">
- <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
- <i class="fa icon-upload" v-if="!uploading"></i>
+ <i class="base09 icon-spin4 animate-spin" v-if="uploading"></i>
+ <i class="base09 icon-upload" v-if="!uploading"></i>
<input type=file style="position: fixed; top: -100em"></input>
</label>
</div>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index db7b0843..241f10b4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -59,6 +59,10 @@
color: $blue;
}
+ .icon-star.lit {
+ color: orange;
+ }
+
.status-content {
margin: 0;
max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 64624873..176695b1 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,7 +17,7 @@
<div v-if="notification.type === 'favorite'">
<h1>
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
- <i class="fa icon-star"></i>
+ <i class="fa icon-star lit"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1>
<div class="notification-gradient" :style="hiderStyle"></div>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index d923c5c4..edbfef32 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
+ <i :class='classes' class='icon-retweet base09' v-on:click.prevent='retweet()'></i>
<span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
</div>
</template>
@@ -16,7 +16,7 @@
color: $green;
}
}
- .retweeted {
+ .icon-retweet.retweeted {
color: $green;
}
</style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5e3df8ba..d6c8cdb3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -5,7 +5,7 @@
<div class='status-actions'>
<div>
<a href="#" v-on:click.prevent="toggleReplying">
- <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+ <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
</a>
</div>
<retweet-button :status=status></retweet-button>
@@ -19,7 +19,7 @@
<div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
- <a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a>
+ <a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a>
</div>
</template>
<template v-if="!muted">
@@ -75,10 +75,10 @@
</h4>
</div>
<div class="heading-icons">
- <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
- <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
+ <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a>
+ <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a>
<template v-if="expandable">
- <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
+ <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a>
</template>
</div>
</div>
@@ -94,7 +94,7 @@
</div>
</div>
<div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
- <i class="fa icon-spin4 animate-spin"></i>
+ <i class="base09 icon-spin4 animate-spin"></i>
</div>
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
@@ -109,7 +109,7 @@
<div class='status-actions'>
<div>
<a href="#" v-on:click.prevent="toggleReplying">
- <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+ <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
</a>
</div>
<retweet-button :status=status></retweet-button>
@@ -324,7 +324,7 @@
color: $blue;
}
- .icon-reply-active {
+ .icon-reply.icon-reply-active {
color: $blue;
}
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index be0aefc1..660a8752 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -29,6 +29,13 @@ const Timeline = {
},
newStatusCount () {
return this.timeline.newStatusCount
+ },
+ newStatusCountStr () {
+ if (this.timeline.flushMarker !== 0) {
+ return ''
+ } else {
+ return ` (${this.newStatusCount})`
+ }
}
},
components: {
@@ -64,8 +71,14 @@ const Timeline = {
},
methods: {
showNewStatuses () {
- this.$store.commit('showNewStatuses', { timeline: this.timelineName })
- this.paused = false
+ if (this.timeline.flushMarker !== 0) {
+ this.$store.commit('clearTimeline', { timeline: this.timelineName })
+ this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+ this.fetchOlderStatuses()
+ } else {
+ this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+ this.paused = false
+ }
},
fetchOlderStatuses () {
const store = this.$store
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 0e2ed92c..9d2e1ea1 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,7 +5,7 @@
{{title}}
</div>
<button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
- {{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
+ {{$t('timeline.show_new')}}{{newStatusCountStr}}
</button>
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
{{$t('timeline.error_fetching')}}
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 74b0ff2a..515fd253 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -22,7 +22,7 @@
<div>
<input type="file" @change="uploadFile(0, $event)" ></input>
</div>
- <i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
+ <i class="base09 icon-spin4 animate-spin" v-if="uploading[0]"></i>
<button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
@@ -35,7 +35,7 @@
<div>
<input type="file" @change="uploadFile(1, $event)" ></input>
</div>
- <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
+ <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
<button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
@@ -46,7 +46,7 @@
<div>
<input type="file" @change="uploadFile(2, $event)" ></input>
</div>
- <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
+ <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
<button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
</div>
</div>
diff --git a/src/main.js b/src/main.js
index b6544a5a..6c5bf83e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,54 +63,55 @@ const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production'
})
-const routes = [
- { name: 'root', path: '/', redirect: '/main/all' },
- { path: '/main/all', component: PublicAndExternalTimeline },
- { path: '/main/public', component: PublicTimeline },
- { path: '/main/friends', component: FriendsTimeline },
- { path: '/tag/:tag', component: TagTimeline },
- { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
- { name: 'user-profile', path: '/users/:id', component: UserProfile },
- { name: 'mentions', path: '/:username/mentions', component: Mentions },
- { name: 'settings', path: '/settings', component: Settings },
- { name: 'registration', path: '/registration', component: Registration },
- { name: 'user-settings', path: '/user-settings', component: UserSettings }
-]
-
-const router = new VueRouter({
- mode: 'history',
- routes,
- scrollBehavior: (to, from, savedPosition) => {
- if (to.matched.some(m => m.meta.dontScroll)) {
- return false
- }
- return savedPosition || { x: 0, y: 0 }
- }
-})
-
const i18n = new VueI18n({
locale: currentLocale,
fallbackLocale: 'en',
messages
})
-/* eslint-disable no-new */
-new Vue({
- router,
- store,
- i18n,
- el: '#app',
- render: h => h(App)
-})
-
window.fetch('/static/config.json')
.then((res) => res.json())
- .then(({name, theme, background, logo, registrationOpen}) => {
+ .then((data) => {
+ const {name, theme, background, logo, registrationOpen} = data
store.dispatch('setOption', { name: 'name', value: name })
store.dispatch('setOption', { name: 'theme', value: theme })
store.dispatch('setOption', { name: 'background', value: background })
store.dispatch('setOption', { name: 'logo', value: logo })
store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
+
+ const routes = [
+ { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' },
+ { path: '/main/all', component: PublicAndExternalTimeline },
+ { path: '/main/public', component: PublicTimeline },
+ { path: '/main/friends', component: FriendsTimeline },
+ { path: '/tag/:tag', component: TagTimeline },
+ { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+ { name: 'user-profile', path: '/users/:id', component: UserProfile },
+ { name: 'mentions', path: '/:username/mentions', component: Mentions },
+ { name: 'settings', path: '/settings', component: Settings },
+ { name: 'registration', path: '/registration', component: Registration },
+ { name: 'user-settings', path: '/user-settings', component: UserSettings }
+ ]
+
+ const router = new VueRouter({
+ mode: 'history',
+ routes,
+ scrollBehavior: (to, from, savedPosition) => {
+ if (to.matched.some(m => m.meta.dontScroll)) {
+ return false
+ }
+ return savedPosition || { x: 0, y: 0 }
+ }
+ })
+
+ /* eslint-disable no-new */
+ new Vue({
+ router,
+ store,
+ i18n,
+ el: '#app',
+ render: h => h(App)
+ })
})
window.fetch('/static/terms-of-service.html')
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index d954b023..18191424 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -22,7 +22,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
},
public: {
statuses: [],
@@ -36,7 +37,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
},
user: {
statuses: [],
@@ -50,7 +52,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
},
publicAndExternal: {
statuses: [],
@@ -64,7 +67,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
},
friends: {
statuses: [],
@@ -78,7 +82,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
},
tag: {
statuses: [],
@@ -92,7 +97,8 @@ export const defaultState = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
}
}
}
@@ -381,7 +387,8 @@ export const mutations = {
loading: false,
followers: [],
friends: [],
- viewing: 'statuses'
+ viewing: 'statuses',
+ flushMarker: 0
}
state.timelines[timeline] = emptyTimeline
@@ -422,6 +429,9 @@ export const mutations = {
each(notifications, (notification) => {
notification.seen = true
})
+ },
+ queueFlush (state, { timeline, id }) {
+ state.timelines[timeline].flushMarker = id
}
}
@@ -458,6 +468,9 @@ const statuses = {
// Optimistic retweeting...
commit('setRetweeted', { status, value: true })
apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
+ },
+ queueFlush ({ rootState, commit }, { timeline, id }) {
+ commit('queueFlush', { timeline, id })
}
},
mutations
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 5de0a457..fa95b870 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -281,6 +281,8 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
url += `/${tag}.json`
}
+ params.push(['count', 20])
+
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}`
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 8e0258e8..6863bd0a 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -73,6 +73,7 @@ const setColors = (col, commit) => {
if (isDark) {
mod = mod * -1
}
+
colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
@@ -82,11 +83,13 @@ const setColors = (col, commit) => {
colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
+ colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
- times(9, (n) => {
- const color = colors[`base0${8 - n}`]
- styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
- styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
+ const num = 10
+ times(num, (n) => {
+ const color = colors[`base0${num - 1 - n}`]
+ styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max')
+ styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max')
})
styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 6b76eb54..a4a80df0 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -29,12 +29,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
args['tag'] = tag
return apiService.fetchTimeline(args)
- .then((statuses) => update({store, statuses, timeline, showImmediately}),
- () => store.dispatch('setError', { value: true }))
+ .then((statuses) => {
+ if (!older && statuses.length >= 20) {
+ store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
+ }
+ update({store, statuses, timeline, showImmediately})
+ }, () => store.dispatch('setError', { value: true }))
}
const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
- fetchAndUpdate({timeline, credentials, store, showImmediately: true, userId, tag})
+ const rootState = store.rootState || store.state
+ const timelineData = rootState.statuses.timelines[camelCase(timeline)]
+ const showImmediately = timelineData.visibleStatuses.length === 0
+ fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
return setInterval(boundFetchAndUpdate, 10000)
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 13:02:52 +0000