From fe7ce9f2e0446d3ab05fa7b61d4178bd59abf134 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 7 Jan 2020 12:21:34 +0100 Subject: [PATCH] :zap: cut components for messaging Signed-off-by: Baptiste Lemoine --- AUTHORS.md | 1 + .../features/ui/components/link_footer.js | 53 +- .../ui/components/messaging/Contact.js | 24 +- .../ui/components/messaging/contacts-list.js | 34 +- ...{conversations.js => conversationStack.js} | 11 +- .../components/messaging/instantMessaging.js | 32 +- app/javascript/mastodon/features/ui/index.js | 524 ++++++++++++------ .../features/ui/util/react_router_helpers.js | 37 +- app/javascript/mastodon/reducers/accounts.js | 1 - app/javascript/styles/bliss.scss | 3 + app/javascript/styles/bliss/components.scss | 4 +- app/javascript/styles/bliss/footer.scss | 8 +- app/javascript/styles/bliss/messaging.scss | 19 +- 13 files changed, 481 insertions(+), 270 deletions(-) rename app/javascript/mastodon/features/ui/components/messaging/{conversations.js => conversationStack.js} (64%) diff --git a/AUTHORS.md b/AUTHORS.md index 5f5985fba..a03aaf7ca 100644 --- a/AUTHORS.md +++ b/AUTHORS.md @@ -3,6 +3,7 @@ Authors Mastodon is available on [GitHub](https://github.com/tootsuite/mastodon) and provided thanks to the work of the following contributors: +* [Tykayn](https://framagit.org/tykayn) for the Bliss version * [Gargron](https://github.com/Gargron) * [ThibG](https://github.com/ThibG) diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index bd2225ed1..99131b31e 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; -import { Link } from 'react-router-dom'; +import { Link, NavLink } from 'react-router-dom'; import { invitesEnabled, repository, source_url, version } from 'mastodon/initial_state'; import { logOut } from 'mastodon/utils/log_out'; import { openModal } from 'mastodon/actions/modal'; @@ -104,17 +104,32 @@ class LinkFooter extends React.PureComponent { } render() { + const HashTagNavlinks = ['Mastoart', 'OpenStreetMaps', 'Ironèmes', 'vélo']; const { withHotkeys } = this.props; var snowClasses = this.props.enableChristmasSnow ? 'snow-button active' : 'snow-button '; + const navToTags = HashTagNavlinks.map(element => { + return ( +
  • + + + #{element} + +
    • + ); + }); return ( -
    +
    - // TODO -
      diff --git a/app/javascript/mastodon/features/ui/components/messaging/Contact.js b/app/javascript/mastodon/features/ui/components/messaging/Contact.js index 6cbc3e1c1..c04b765d8 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/Contact.js +++ b/app/javascript/mastodon/features/ui/components/messaging/Contact.js @@ -1,6 +1,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import PropTypes from 'prop-types'; import React from 'react'; +import Permalink from '../../../../components/permalink'; export default class Contact extends ImmutablePureComponent { @@ -21,6 +22,7 @@ export default class Contact extends ImmutablePureComponent { }; render() { + const account = this.props.account; return (
      -
      - avatar -
      + +
      + avatar +
      +
      diff --git a/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js b/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js index 9866747e7..046edd152 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js +++ b/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js @@ -81,36 +81,34 @@ export default class ContactsList extends ImmutablePureComponent { }); } - const classList = 'btn btn-primary toggle-list ' + (this.state.showList ? 'active' : 'inactive'); + const showListClass = (this.state.showList ? 'active' : 'inactive'); + const classListContainer = 'messaging-box ' + showListClass; + const classList = 'btn btn-primary toggle-list ' + showListClass; return (
      -
      +
      - Messaging box + {this.state.following_count} contacts +
      -

      - la liste de {this.state.following_count} contacts - -

      {this.state.showList && (
      -

      show list

        {renderedList}
      diff --git a/app/javascript/mastodon/features/ui/components/messaging/conversations.js b/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js similarity index 64% rename from app/javascript/mastodon/features/ui/components/messaging/conversations.js rename to app/javascript/mastodon/features/ui/components/messaging/conversationStack.js index 1be09cd89..bbca3d28b 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/conversations.js +++ b/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js @@ -1,10 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { mockContactList } from './mockContactList'; -const following = ['bidule', 'chose', 'truc']; +const following = mockContactList; -export default class Conversation extends React.Component { +export default class ConversationStack extends React.Component { static propTypes = { following: PropTypes.array, @@ -15,8 +16,8 @@ export default class Conversation extends React.Component { following: following, }; - openConversationWith(name) { - console.log('openConversationWith name', name); + openConversationWith(account) { + console.log('openConversationWith name', account.username); } render() { @@ -28,7 +29,7 @@ export default class Conversation extends React.Component { className='username' onClick={this.openConversationWith(elem)} > - Machin {elem} + Machin {elem.username}
      3 min
      ), diff --git a/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js b/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js index 34cf3c5d7..c0b3fa1e0 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js +++ b/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js @@ -1,5 +1,6 @@ import React from 'react'; import ContactsList from './contacts-list'; +import ConversationStack from './conversationStack'; export default class InstantMessaging extends React.PureComponent { @@ -25,39 +26,12 @@ export default class InstantMessaging extends React.PureComponent { // // }; - // constructor() { - // super(); - // - // this.props.conversations = [ - // { - // withAccount: '@machin', - // messages : [], - // opened : true, - // }, - // { - // withAccount: '@chuck', - // messages : [], - // opened : false, - // }, - // ]; - // this.props.following = [ - // { username: 'wulfila', handle: '@wulfila' }, - // { username: 'machin', handle: '@machin' }, - // { username: 'chuck norris', handle: '@chuck' }, - // ]; - // - // } - render() { return (
      -
      - messagerie todo - - -
      - {/**/} + +
      ); } diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 957e80737..d0b450074 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -10,51 +10,50 @@ import LoadingBarContainer from './containers/loading_bar_container'; import ModalContainer from './containers/modal_container'; import { isMobile } from '../../is_mobile'; import { debounce } from 'lodash'; -import { uploadCompose, resetCompose } from '../../actions/compose'; +import { resetCompose, uploadCompose } from '../../actions/compose'; import { expandHomeTimeline } from '../../actions/timelines'; import { expandNotifications } from '../../actions/notifications'; import { fetchFilters } from '../../actions/filters'; import { clearHeight } from '../../actions/height_cache'; import { focusApp, unfocusApp } from 'mastodon/actions/app'; import { submitMarkers } from 'mastodon/actions/markers'; -import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers'; +import { WrappedRoute, WrappedSwitch } from './util/react_router_helpers'; import UploadArea from './components/upload_area'; import ColumnsAreaContainer from './containers/columns_area_container'; import DocumentTitle from './components/document_title'; import { - Compose, - Status, - GettingStarted, - KeyboardShortcuts, - PublicTimeline, - CommunityTimeline, - AccountTimeline, AccountGallery, - HomeTimeline, + AccountTimeline, + Blocks, + BookmarkedStatuses, + CommunityTimeline, + Compose, + Directory, + DirectTimeline, + DomainBlocks, + FavouritedStatuses, + Favourites, Followers, Following, - Reblogs, - Favourites, - DirectTimeline, - HashtagTimeline, - Notifications, FollowRequests, GenericNotFound, - FavouritedStatuses, - BookmarkedStatuses, - ListTimeline, - Blocks, - DomainBlocks, - Mutes, - PinnedStatuses, + GettingStarted, + HashtagTimeline, + HomeTimeline, + KeyboardShortcuts, Lists, + ListTimeline, + Mutes, + Notifications, + PinnedStatuses, + PublicTimeline, + Reblogs, Search, - Directory, + Status, } from './util/async-components'; -import { me, forceSingleColumn } from '../../initial_state'; +import { forceSingleColumn, me } from '../../initial_state'; import { previewState as previewMediaState } from './components/media_modal'; import { previewState as previewVideoState } from './components/video_modal'; - // Dummy import, to make sure that ends up in the application bundle. // Without this it ends up in ~8 very commonly used bundles. import '../../components/status'; @@ -64,58 +63,64 @@ const messages = defineMessages({ }); const mapStateToProps = state => ({ - isComposing: state.getIn(['compose', 'is_composing']), - hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0, + isComposing : state.getIn(['compose', 'is_composing']), + hasComposingText : state.getIn(['compose', 'text']).trim().length !== 0, hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0, - canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4, - dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, + canUploadMore : !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4, + dropdownMenuIsOpen : state.getIn(['dropdown_menu', 'openId']) !== null, }); const keyMap = { - help: '?', - new: 'n', - search: 's', - forceNew: 'option+n', - focusColumn: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], - reply: 'r', - favourite: 'f', - boost: 'b', - mention: 'm', - open: ['enter', 'o'], - openProfile: 'p', - moveDown: ['down', 'j'], - moveUp: ['up', 'k'], - back: 'backspace', - goToHome: 'g h', + help : '?', + new : 'n', + search : 's', + forceNew : 'option+n', + focusColumn : ['1', '2', '3', '4', '5', '6', '7', '8', '9'], + reply : 'r', + favourite : 'f', + boost : 'b', + mention : 'm', + open : ['enter', 'o'], + openProfile : 'p', + moveDown : ['down', 'j'], + moveUp : ['up', 'k'], + back : 'backspace', + goToHome : 'g h', goToNotifications: 'g n', - goToLocal: 'g l', - goToFederated: 'g t', - goToDirect: 'g d', - goToStart: 'g s', - goToFavourites: 'g f', - goToPinned: 'g p', - goToProfile: 'g u', - goToBlocked: 'g b', - goToMuted: 'g m', - goToRequests: 'g r', - toggleHidden: 'x', - toggleSensitive: 'h', - openMedia: 'e', + goToLocal : 'g l', + goToFederated : 'g t', + goToDirect : 'g d', + goToStart : 'g s', + goToFavourites : 'g f', + goToPinned : 'g p', + goToProfile : 'g u', + goToBlocked : 'g b', + goToMuted : 'g m', + goToRequests : 'g r', + toggleHidden : 'x', + toggleSensitive : 'h', + openMedia : 'e', }; class SwitchingColumnsArea extends React.PureComponent { static propTypes = { - children: PropTypes.node, - location: PropTypes.object, + children : PropTypes.node, + location : PropTypes.object, onLayoutChange: PropTypes.func.isRequired, }; state = { mobile: isMobile(window.innerWidth), }; + handleLayoutChange = debounce(() => { + // The cached heights are no longer accurate, invalidate + this.props.onLayoutChange(); + }, 500, { + trailing: true, + }); - componentWillMount () { + componentWillMount() { window.addEventListener('resize', this.handleResize, { passive: true }); if (this.state.mobile || forceSingleColumn) { @@ -127,7 +132,7 @@ class SwitchingColumnsArea extends React.PureComponent { } } - componentDidUpdate (prevProps, prevState) { + componentDidUpdate(prevProps, prevState) { if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) { this.node.handleChildrenContentChange(); } @@ -138,21 +143,14 @@ class SwitchingColumnsArea extends React.PureComponent { } } - componentWillUnmount () { + componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } - shouldUpdateScroll (_, { location }) { + shouldUpdateScroll(_, { location }) { return location.state !== previewMediaState && location.state !== previewVideoState; } - handleLayoutChange = debounce(() => { - // The cached heights are no longer accurate, invalidate - this.props.onLayoutChange(); - }, 500, { - trailing: true, - }) - handleResize = () => { const mobile = isMobile(window.innerWidth); @@ -163,61 +161,219 @@ class SwitchingColumnsArea extends React.PureComponent { } else { this.handleLayoutChange(); } - } + }; setRef = c => { if (c) { this.node = c.getWrappedInstance(); } - } + }; - render () { + render() { const { children } = this.props; const { mobile } = this.state; const singleColumn = forceSingleColumn || mobile; - const redirect = singleColumn ? : ; + const redirect = singleColumn ? () : (); return ( - - + + {redirect} - - - - - - - - + + + + + + + + + - - - - + + + + - - + + - - - - + + + + - - - - - + + + + + - - - - - + + + + + - - - + + + ); } @@ -233,15 +389,15 @@ class UI extends React.PureComponent { }; static propTypes = { - dispatch: PropTypes.func.isRequired, - children: PropTypes.node, - isComposing: PropTypes.bool, - hasComposingText: PropTypes.bool, + dispatch : PropTypes.func.isRequired, + children : PropTypes.node, + isComposing : PropTypes.bool, + hasComposingText : PropTypes.bool, hasMediaAttachments: PropTypes.bool, - canUploadMore: PropTypes.bool, - location: PropTypes.object, - intl: PropTypes.object.isRequired, - dropdownMenuIsOpen: PropTypes.bool, + canUploadMore : PropTypes.bool, + location : PropTypes.object, + intl : PropTypes.object.isRequired, + dropdownMenuIsOpen : PropTypes.bool, }; state = { @@ -259,20 +415,20 @@ class UI extends React.PureComponent { // but we set user-friendly message for other browsers, e.g. Edge. e.returnValue = intl.formatMessage(messages.beforeUnload); } - } + }; handleWindowFocus = () => { this.props.dispatch(focusApp()); - } + }; handleWindowBlur = () => { this.props.dispatch(unfocusApp()); - } + }; handleLayoutChange = () => { // The cached heights are no longer accurate, invalidate this.props.dispatch(clearHeight()); - } + }; handleDragEnter = (e) => { e.preventDefault(); @@ -288,7 +444,7 @@ class UI extends React.PureComponent { if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore) { this.setState({ draggingOver: true }); } - } + }; handleDragOver = (e) => { if (this.dataTransferIsText(e.dataTransfer)) return false; @@ -303,7 +459,7 @@ class UI extends React.PureComponent { } return false; - } + }; handleDrop = (e) => { if (this.dataTransferIsText(e.dataTransfer)) return; @@ -316,7 +472,7 @@ class UI extends React.PureComponent { if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore) { this.props.dispatch(uploadCompose(e.dataTransfer.files)); } - } + }; handleDragLeave = (e) => { e.preventDefault(); @@ -329,15 +485,15 @@ class UI extends React.PureComponent { } this.setState({ draggingOver: false }); - } + }; dataTransferIsText = (dataTransfer) => { return (dataTransfer && Array.from(dataTransfer.types).filter((type) => type === 'text/plain').length === 1); - } + }; closeUploadModal = () => { this.setState({ draggingOver: false }); - } + }; handleServiceWorkerPostMessage = ({ data }) => { if (data.type === 'navigate') { @@ -345,9 +501,9 @@ class UI extends React.PureComponent { } else { console.warn('Unknown message type:', data.type); } - } + }; - componentWillMount () { + componentWillMount() { window.addEventListener('focus', this.handleWindowFocus, false); window.addEventListener('blur', this.handleWindowBlur, false); window.addEventListener('beforeunload', this.handleBeforeUnload, false); @@ -358,7 +514,7 @@ class UI extends React.PureComponent { document.addEventListener('dragleave', this.handleDragLeave, false); document.addEventListener('dragend', this.handleDragEnd, false); - if ('serviceWorker' in navigator) { + if ('serviceWorker' in navigator) { navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage); } @@ -372,13 +528,13 @@ class UI extends React.PureComponent { setTimeout(() => this.props.dispatch(fetchFilters()), 500); } - componentDidMount () { + componentDidMount() { this.hotkeys.__mousetrap__.stopCallback = (e, element) => { return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName); }; } - componentWillUnmount () { + componentWillUnmount() { window.removeEventListener('focus', this.handleWindowFocus); window.removeEventListener('blur', this.handleWindowBlur); window.removeEventListener('beforeunload', this.handleBeforeUnload); @@ -392,7 +548,7 @@ class UI extends React.PureComponent { setRef = c => { this.node = c; - } + }; handleHotkeyNew = e => { e.preventDefault(); @@ -402,7 +558,7 @@ class UI extends React.PureComponent { if (element) { element.focus(); } - } + }; handleHotkeySearch = e => { e.preventDefault(); @@ -412,15 +568,15 @@ class UI extends React.PureComponent { if (element) { element.focus(); } - } + }; handleHotkeyForceNew = e => { this.handleHotkeyNew(e); this.props.dispatch(resetCompose()); - } + }; handleHotkeyFocusColumn = e => { - const index = (e.key * 1) + 1; // First child is drawer, skip that + const index = (e.key * 1) + 1; // First child is drawer, skip that const column = this.node.querySelector(`.column:nth-child(${index})`); if (!column) return; const container = column.querySelector('.scrollable'); @@ -435,7 +591,7 @@ class UI extends React.PureComponent { status.focus(); } } - } + }; handleHotkeyBack = () => { if (window.history && window.history.length === 1) { @@ -443,11 +599,11 @@ class UI extends React.PureComponent { } else { this.context.router.history.goBack(); } - } + }; setHotkeysRef = c => { this.hotkeys = c; - } + }; handleHotkeyToggleHelp = () => { if (this.props.location.pathname === '/keyboard-shortcuts') { @@ -455,95 +611,111 @@ class UI extends React.PureComponent { } else { this.context.router.history.push('/keyboard-shortcuts'); } - } + }; handleHotkeyGoToHome = () => { this.context.router.history.push('/timelines/home'); - } + }; handleHotkeyGoToNotifications = () => { this.context.router.history.push('/notifications'); - } + }; handleHotkeyGoToLocal = () => { this.context.router.history.push('/timelines/public/local'); - } + }; handleHotkeyGoToFederated = () => { this.context.router.history.push('/timelines/public'); - } + }; handleHotkeyGoToDirect = () => { this.context.router.history.push('/timelines/direct'); - } + }; handleHotkeyGoToStart = () => { this.context.router.history.push('/getting-started'); - } + }; handleHotkeyGoToFavourites = () => { this.context.router.history.push('/favourites'); - } + }; handleHotkeyGoToPinned = () => { this.context.router.history.push('/pinned'); - } + }; handleHotkeyGoToProfile = () => { this.context.router.history.push(`/accounts/${me}`); - } + }; handleHotkeyGoToBlocked = () => { this.context.router.history.push('/blocks'); - } + }; handleHotkeyGoToMuted = () => { this.context.router.history.push('/mutes'); - } + }; handleHotkeyGoToRequests = () => { this.context.router.history.push('/follow_requests'); - } + }; - render () { + render() { const { draggingOver } = this.state; const { children, isComposing, location, dropdownMenuIsOpen } = this.props; const handlers = { - help: this.handleHotkeyToggleHelp, - new: this.handleHotkeyNew, - search: this.handleHotkeySearch, - forceNew: this.handleHotkeyForceNew, - focusColumn: this.handleHotkeyFocusColumn, - back: this.handleHotkeyBack, - goToHome: this.handleHotkeyGoToHome, + help : this.handleHotkeyToggleHelp, + new : this.handleHotkeyNew, + search : this.handleHotkeySearch, + forceNew : this.handleHotkeyForceNew, + focusColumn : this.handleHotkeyFocusColumn, + back : this.handleHotkeyBack, + goToHome : this.handleHotkeyGoToHome, goToNotifications: this.handleHotkeyGoToNotifications, - goToLocal: this.handleHotkeyGoToLocal, - goToFederated: this.handleHotkeyGoToFederated, - goToDirect: this.handleHotkeyGoToDirect, - goToStart: this.handleHotkeyGoToStart, - goToFavourites: this.handleHotkeyGoToFavourites, - goToPinned: this.handleHotkeyGoToPinned, - goToProfile: this.handleHotkeyGoToProfile, - goToBlocked: this.handleHotkeyGoToBlocked, - goToMuted: this.handleHotkeyGoToMuted, - goToRequests: this.handleHotkeyGoToRequests, + goToLocal : this.handleHotkeyGoToLocal, + goToFederated : this.handleHotkeyGoToFederated, + goToDirect : this.handleHotkeyGoToDirect, + goToStart : this.handleHotkeyGoToStart, + goToFavourites : this.handleHotkeyGoToFavourites, + goToPinned : this.handleHotkeyGoToPinned, + goToProfile : this.handleHotkeyGoToProfile, + goToBlocked : this.handleHotkeyGoToBlocked, + goToMuted : this.handleHotkeyGoToMuted, + goToRequests : this.handleHotkeyGoToRequests, }; return ( - -
      - + +
      + {children} - + - + -
      -       +
      +       ); } diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js index d452b871f..4de3c1f6a 100644 --- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js +++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Switch, Route } from 'react-router-dom'; +import { Route, Switch } from 'react-router-dom'; import ColumnLoading from '../components/column_loading'; import BundleColumnError from '../components/bundle_column_error'; @@ -9,13 +9,13 @@ import BundleContainer from '../containers/bundle_container'; // Small wrapper to pass multiColumn to the route components export class WrappedSwitch extends React.PureComponent { - render () { + render() { const { multiColumn, children } = this.props; return ( - + {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))} - + ); } @@ -23,7 +23,7 @@ export class WrappedSwitch extends React.PureComponent { WrappedSwitch.propTypes = { multiColumn: PropTypes.bool, - children: PropTypes.node, + children : PropTypes.node, }; // Small Wrapper to extract the params from the route and pass @@ -32,9 +32,9 @@ WrappedSwitch.propTypes = { export class WrappedRoute extends React.Component { static propTypes = { - component: PropTypes.func.isRequired, - content: PropTypes.node, - multiColumn: PropTypes.bool, + component : PropTypes.func.isRequired, + content : PropTypes.node, + multiColumn : PropTypes.bool, componentParams: PropTypes.object, }; @@ -46,21 +46,28 @@ export class WrappedRoute extends React.Component { const { component, content, multiColumn, componentParams } = this.props; return ( - - {Component => {content}} - + + {Component => ({content})} + ); - } + }; renderLoading = () => { return ; - } + }; renderError = (props) => { return ; - } + }; - render () { + render() { const { component: Component, content, ...rest } = this.props; return ; diff --git a/app/javascript/mastodon/reducers/accounts.js b/app/javascript/mastodon/reducers/accounts.js index cbb5b49b2..22499c964 100644 --- a/app/javascript/mastodon/reducers/accounts.js +++ b/app/javascript/mastodon/reducers/accounts.js @@ -4,7 +4,6 @@ import { fromJS, Map as ImmutableMap } from 'immutable'; const initialState = ImmutableMap(); const normalizeAccount = (state, account) => { - console.log('account', account); account = { ...account }; delete account.followers_count; diff --git a/app/javascript/styles/bliss.scss b/app/javascript/styles/bliss.scss index 2e45ff0c7..b0207b248 100644 --- a/app/javascript/styles/bliss.scss +++ b/app/javascript/styles/bliss.scss @@ -1,3 +1,6 @@ +@import '~bulma/bulma'; +@import '~bulma/sass/utilities/mixins'; + @import 'bliss/variables'; @import 'bliss/mixins'; @import 'bliss/variables'; diff --git a/app/javascript/styles/bliss/components.scss b/app/javascript/styles/bliss/components.scss index 6e6af8a4d..b45984278 100644 --- a/app/javascript/styles/bliss/components.scss +++ b/app/javascript/styles/bliss/components.scss @@ -2265,9 +2265,7 @@ a.account__display-name { .columns-area__panels__pane--compositional { display: none; } - .hide-on-smaller-screens{ - display: none; - } + } @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { diff --git a/app/javascript/styles/bliss/footer.scss b/app/javascript/styles/bliss/footer.scss index 0d5cc445b..40fec741e 100644 --- a/app/javascript/styles/bliss/footer.scss +++ b/app/javascript/styles/bliss/footer.scss @@ -136,7 +136,7 @@ } } -.getting-started__footer { +.links-started__footer { display: block; position: fixed; bottom: 0; @@ -144,6 +144,11 @@ width: 32vw; z-index: 10; text-align: right; + color: $ui-primary-color; + + hr { + border-color: $ui-primary-color; + } .fa { margin-right: 1ch; @@ -164,5 +169,6 @@ a { margin-left: 2ch; + color: $ui-primary-color; } } diff --git a/app/javascript/styles/bliss/messaging.scss b/app/javascript/styles/bliss/messaging.scss index 0d15eee8a..72726d835 100644 --- a/app/javascript/styles/bliss/messaging.scss +++ b/app/javascript/styles/bliss/messaging.scss @@ -1,5 +1,5 @@ -$messagingBoxWidth: 15em; -$messagingBoxHeight: 20em; +$messagingBoxWidth: 20em; +$messagingBoxHeight: 100%; .fixed-box { border: solid 1px white; @@ -26,8 +26,13 @@ $messagingBoxHeight: 20em; right: 1em; width: $messagingBoxWidth; background: $ui-base-color; - height: 80%; + height: 4em; color: white; + z-index: 10; + + &.active { + height: $messagingBoxHeight; + } .messager-textarea { width: 100%; @@ -38,6 +43,10 @@ $messagingBoxHeight: 20em; } } +.contact-list-container { + overflow-x: auto; +} + .contact-list { display: block; padding: 1em; @@ -45,8 +54,12 @@ $messagingBoxHeight: 20em; list-style-type: none; color: white; + .contact { + margin-bottom: 0.5rem; + } } + .toggle-list { float: right; margin-left: 1em;