diff --git a/src/App.js b/src/App.js index c455c18c..be6548f3 100644 --- a/src/App.js +++ b/src/App.js @@ -2,8 +2,9 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' import UserFinder from './components/user_finder/user_finder.vue' -import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' +import FeaturesPanel from './components/features_panel/features_panel.vue' +import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' export default { @@ -13,8 +14,9 @@ export default { NavPanel, Notifications, UserFinder, - WhoToFollowPanel, InstanceSpecificPanel, + FeaturesPanel, + WhoToFollowPanel, ChatPanel }, data: () => ({ diff --git a/src/App.scss b/src/App.scss index dd43c5ca..056a235e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -248,6 +248,7 @@ nav { justify-content: center; flex: 0 0 auto; z-index: -1; + .mask { mask-repeat: no-repeat; mask-position: center; @@ -260,7 +261,10 @@ nav { left: 0; right: 0; } + img { + height: 100%; + object-fit: contain; display: block; flex: 0; } @@ -325,18 +329,35 @@ main-router { background-size: cover; padding: .6em .6em; text-align: left; - font-size: 1.3em; - line-height: 24px; + line-height: 28px; background-color: $fallback--btn; background-color: var(--btn, $fallback--btn); align-items: baseline; .title { flex: 1 0 auto; + font-size: 1.3em; + } + + .alert { + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; } button { - height: 100%; + flex-shrink: 0; + } + + button, .alert { + // height: 100%; + line-height: 21px; + min-height: 0; + box-sizing: border-box; + margin: 0; + margin-left: .25em; + min-width: 1px; + align-self: stretch; } } diff --git a/src/App.vue b/src/App.vue index fc446c57..059460f9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,6 +28,7 @@ + diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index e41929fd..5528fef6 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -3,7 +3,7 @@
{{ $t('timeline.conversation') }} - {{ $t('timeline.collapse') }} + {{ $t('timeline.collapse') }}
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js new file mode 100644 index 00000000..80f5c966 --- /dev/null +++ b/src/components/features_panel/features_panel.js @@ -0,0 +1,14 @@ +const FeaturesPanel = { + computed: { + chat: function () { + return this.$store.state.config.chatAvailable && (!this.$store.state.chatDisabled) + }, + gopher: function () { return this.$store.state.config.gopherAvailable }, + whoToFollow: function () { return this.$store.state.config.suggestionsEnabled }, + mediaProxy: function () { return this.$store.state.config.mediaProxyAvailable }, + scopeOptions: function () { return this.$store.state.config.scopeOptionsEnabled }, + textlimit: function () { return this.$store.state.config.textlimit } + } +} + +export default FeaturesPanel diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue new file mode 100644 index 00000000..445143e9 --- /dev/null +++ b/src/components/features_panel/features_panel.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 4dbceede..a137ccd5 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -22,10 +22,6 @@ } .loadmore-error { - min-width: 6em; - text-align: center; - padding: 0 0.25em 0 0.25em; - margin: 0; color: $fallback--fg; color: var(--fg, $fallback--fg); } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 559ad016..42e9c65c 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -90,8 +90,7 @@
- - +
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index de12894b..8ef84b2a 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -6,21 +6,25 @@ import { filter, trim } from 'lodash' const settings = { data () { + const config = this.$store.state.config + return { - hideAttachmentsLocal: this.$store.state.config.hideAttachments, - hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, - hideNsfwLocal: this.$store.state.config.hideNsfw, - notificationVisibilityLocal: this.$store.state.config.notificationVisibility, - replyVisibilityLocal: this.$store.state.config.replyVisibility, - loopVideoLocal: this.$store.state.config.loopVideo, - loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly, - muteWordsString: this.$store.state.config.muteWords.join('\n'), - autoLoadLocal: this.$store.state.config.autoLoad, - streamingLocal: this.$store.state.config.streaming, - pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, - hoverPreviewLocal: this.$store.state.config.hoverPreview, - collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject, - stopGifs: this.$store.state.config.stopGifs, + hideAttachmentsLocal: config.hideAttachments, + hideAttachmentsInConvLocal: config.hideAttachmentsInConv, + hideNsfwLocal: config.hideNsfw, + notificationVisibilityLocal: config.notificationVisibility, + replyVisibilityLocal: config.replyVisibility, + loopVideoLocal: config.loopVideo, + loopVideoSilentOnlyLocal: config.loopVideoSilentOnly, + muteWordsString: config.muteWords.join('\n'), + autoLoadLocal: config.autoLoad, + streamingLocal: config.streaming, + pauseOnUnfocusedLocal: config.pauseOnUnfocused, + hoverPreviewLocal: config.hoverPreview, + collapseMessageWithSubjectLocal: typeof config.collapseMessageWithSubject === 'undefined' + ? config.defaultCollapseMessageWithSubject + : config.collapseMessageWithSubject, + stopGifs: config.stopGifs, loopSilentAvailable: // Firefox Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index e23f8bc1..1dcb7ce6 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -23,6 +23,7 @@ img { width: 100%; height: 100%; + object-fit: contain; } &.animated { diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index e42c0c4b..2dd4376a 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -4,12 +4,12 @@
{{title}}
-
{{$t('timeline.error_fetching')}}
+
{{$t('timeline.up_to_date')}}
@@ -58,7 +58,6 @@ .timeline { .loadmore-text { - font-size: 14px; opacity: 0.8; background-color: transparent; color: $fallback--faint; @@ -66,11 +65,6 @@ } .loadmore-error { - font-size: 14px; - min-width: 6em; - text-align: center; - padding: 0 0.25em 0 0.25em; - margin: 0; color: $fallback--fg; color: var(--fg, $fallback--fg); } diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 3d4f873d..2d5cb500 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -14,8 +14,10 @@ diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js index 6766e561..ce60308f 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.js +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -3,9 +3,10 @@ import apiService from '../../services/api/api.service.js' function showWhoToFollow (panel, reply) { var users = reply var cn - var index = 0 - var random = Math.floor(Math.random() * 10) - for (cn = random; cn < users.length; cn = cn + 10) { + var index + var step = 7 + cn = Math.floor(Math.random() * step) + for (index = 0; index < 3; index++) { var user user = users[cn] var img @@ -46,11 +47,8 @@ function showWhoToFollow (panel, reply) { } }) } - index = index + 1 - if (index > 2) { - break - } } + cn = (cn + step) % users.length } function getWhoToFollow (panel) { diff --git a/src/i18n/en.json b/src/i18n/en.json index 3cdff280..90850b34 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -2,6 +2,15 @@ "chat": { "title": "Chat" }, + "features_panel": { + "chat": "Chat", + "gopher": "Gopher", + "media_proxy": "Media proxy", + "scope_options": "Scope options", + "text_limit": "Text limit", + "title": "Features", + "who_to_follow": "Who to follow" + }, "finder": { "error_fetching_user": "Error fetching user", "find_user": "Find user" @@ -38,8 +47,7 @@ "post_status": { "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.", "account_not_locked_warning_link": "locked", - "attachments_not_sensitive": "Attachments not marked sensitive", - "attachments_sensitive": "Attachments marked sensitive", + "attachments_sensitive": "Mark attachments as sensitive", "content_type": { "plain_text": "Plain text" }, diff --git a/src/i18n/ja.json b/src/i18n/ja.json index 442bce16..facef5f2 100644 --- a/src/i18n/ja.json +++ b/src/i18n/ja.json @@ -2,6 +2,15 @@ "chat": { "title": "チャット" }, + "features_panel": { + "chat": "チャット", + "gopher": "Gopher", + "media_proxy": "メディアプロクシ", + "scope_options": "こうかいはんい", + "text_limit": "もじのかず", + "title": "ゆうこうなきのう", + "who_to_follow": "おすすめユーザー" + }, "finder": { "error_fetching_user": "ユーザーけんさくがエラーになりました。", "find_user": "ユーザーをさがす" diff --git a/src/main.js b/src/main.js index debd8703..75c2bab2 100644 --- a/src/main.js +++ b/src/main.js @@ -114,26 +114,20 @@ window.fetch('/api/statusnet/config.json') var redirectRootNoLogin = (config.redirectRootNoLogin) var redirectRootLogin = (config.redirectRootLogin) var chatDisabled = (config.chatDisabled) - var showWhoToFollowPanel = (config.showWhoToFollowPanel) - var whoToFollowProvider = (config.whoToFollowProvider) - var whoToFollowLink = (config.whoToFollowLink) var showInstanceSpecificPanel = (config.showInstanceSpecificPanel) var scopeOptionsEnabled = (config.scopeOptionsEnabled) var formattingOptionsEnabled = (config.formattingOptionsEnabled) - var collapseMessageWithSubject = (config.collapseMessageWithSubject) + var defaultCollapseMessageWithSubject = (config.collapseMessageWithSubject) 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: 'logoMask', value: logoMask }) store.dispatch('setOption', { name: 'logoMargin', value: logoMargin }) - store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel }) - store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider }) - store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled }) store.dispatch('setOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled }) - store.dispatch('setOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject }) + store.dispatch('setOption', { name: 'defaultCollapseMessageWithSubject', value: defaultCollapseMessageWithSubject }) if (chatDisabled) { store.dispatch('disableChat') } @@ -222,7 +216,12 @@ window.fetch('/instance/panel.html') window.fetch('/nodeinfo/2.0.json') .then((res) => res.json()) .then((data) => { - const suggestions = data.metadata.suggestions + const metadata = data.metadata + store.dispatch('setOption', { name: 'mediaProxyAvailable', value: data.metadata.mediaProxy }) + store.dispatch('setOption', { name: 'chatAvailable', value: data.metadata.chat }) + store.dispatch('setOption', { name: 'gopherAvailable', value: data.metadata.gopher }) + + const suggestions = metadata.suggestions store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled }) store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web }) })