diff --git a/src/App.js b/src/App.js index b6234a08b1..96954e72f9 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,8 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan import ChatPanel from './components/chat_panel/chat_panel.vue' import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' -import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils' +import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' +import MobileNav from './components/mobile_nav/mobile_nav.vue' export default { name: 'app', @@ -22,11 +23,12 @@ export default { WhoToFollowPanel, ChatPanel, MediaModal, - SideDrawer + SideDrawer, + MobilePostStatusModal, + MobileNav }, data: () => ({ mobileActivePanel: 'timeline', - notificationsOpen: false, finderHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || @@ -85,12 +87,6 @@ export default { chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }, - unseenNotifications () { - return unseenNotificationsFromStore(this.$store) - }, - unseenNotificationsCount () { - return this.unseenNotifications.length - }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, isMobileLayout () { return this.$store.state.interface.mobileLayout } }, @@ -105,12 +101,6 @@ export default { onFinderToggled (hidden) { this.finderHidden = hidden }, - toggleMobileSidebar () { - this.$refs.sideDrawer.toggleDrawer() - }, - toggleMobileNotifications () { - this.notificationsOpen = !this.notificationsOpen - }, updateMobileState () { const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth const changed = width <= 800 !== this.isMobileLayout diff --git a/src/App.scss b/src/App.scss index 775bc1c878..8f727cf87e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -628,6 +628,16 @@ nav { color: $fallback--faint; color: var(--faint, $fallback--faint); } + +.faint-link { + color: $fallback--faint; + color: var(--faint, $fallback--faint); + + &:hover { + text-decoration: underline; + } +} + @media all and (min-width: 800px) { .logo { opacity: 1 !important; @@ -665,17 +675,35 @@ nav { position: fixed; width: 100vw; height: 100vh; - top: 50px; + top: calc(50px - 28px - 1.2em); left: 0; - z-index: 9; + z-index: 999; overflow-x: hidden; overflow-y: scroll; transition-property: transform; - transition-duration: 0.35s; + transition-duration: 0.25s; transform: translate(0); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + .notifications { + margin: 0; padding: 0; + border-radius: 0; + box-shadow: none; + .panel { + border-radius: 0; + margin: 0; + box-shadow: none; + } + .panel:after { + border-radius: 0; + } + .panel .panel-heading { + border-radius: 0; + box-shadow: none; + } } &.closed { @@ -683,6 +711,35 @@ nav { } } +@keyframes modal-background-fadein { + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: rgba(0, 0, 0, 0.5); + } +} + +.modal-view { + z-index: 1000; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + animation-duration: 0.2s; + background-color: rgba(0, 0, 0, 0.5); + animation-name: modal-background-fadein; +} + +.button-icon { + font-size: 1.2em; +} + @keyframes shakeError { 0% { transform: translateX(0); @@ -727,16 +784,6 @@ nav { margin: 0.5em 0 0.5em 0; } - .button-icon { - font-size: 1.2em; - } - - .status .status-actions { - div { - max-width: 4em; - } - } - .menu-button { display: block; margin-right: 0.8em; diff --git a/src/App.vue b/src/App.vue index d83d5dbeae..541558312c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,36 +1,24 @@ diff --git a/src/boot/after_store.js b/src/boot/after_store.js index ad72ce0449..0165ee13c0 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -92,10 +92,8 @@ const afterStoreSetup = ({ store, i18n }) => { copyInstanceOption('noAttachmentLinks') copyInstanceOption('showFeaturesPanel') - if ((config.chatDisabled)) { + if (config.chatDisabled) { store.dispatch('disableChat') - } else { - store.dispatch('initializeSocket') } return store.dispatch('setTheme', config['theme']) @@ -172,6 +170,8 @@ const afterStoreSetup = ({ store, i18n }) => { store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') }) store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) + store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats }) + store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames }) const suggestions = metadata.suggestions diff --git a/src/boot/routes.js b/src/boot/routes.js index cfbcb1feac..7e54a98bcb 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -13,7 +13,6 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue' import OAuthCallback from 'components/oauth_callback/oauth_callback.vue' import UserSearch from 'components/user_search/user_search.vue' import Notifications from 'components/notifications/notifications.vue' -import UserPanel from 'components/user_panel/user_panel.vue' import LoginForm from 'components/login_form/login_form.vue' import ChatPanel from 'components/chat_panel/chat_panel.vue' import WhoToFollow from 'components/who_to_follow/who_to_follow.vue' @@ -43,7 +42,6 @@ export default (store) => { { name: 'friend-requests', path: '/friend-requests', component: FollowRequests }, { name: 'user-settings', path: '/user-settings', component: UserSettings }, { name: 'notifications', path: '/:username/notifications', component: Notifications }, - { name: 'new-status', path: '/:username/new-status', component: UserPanel }, { name: 'login', path: '/login', component: LoginForm }, { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) }, { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 7e972026e7..c58bebd331 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -88,7 +88,7 @@ .attachment { position: relative; - margin: 0.5em 0.5em 0em 0em; + margin-top: 0.5em; align-self: flex-start; line-height: 0; @@ -160,6 +160,7 @@ .hider { position: absolute; + right: 0; white-space: nowrap; margin: 10px; padding: 5px; diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index a844144691..87085a2824 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -1,4 +1,4 @@ -import UserCardContent from '../user_card_content/user_card_content.vue' +import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -12,7 +12,7 @@ const BasicUserCard = { } }, components: { - UserCardContent, + UserCard, UserAvatar }, methods: { diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 77fb0aa0f7..9b80c72b81 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -1,18 +1,18 @@