From 9bef612c359f172897080adee9e9468b334ff471 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Wed, 8 Jan 2020 10:12:38 +0100 Subject: [PATCH] :zap: split of css Signed-off-by: Baptiste Lemoine --- .../ui/components/messaging/contacts-list.js | 6 +- .../components/messaging/conversation-item.js | 55 ++++-- .../messaging/conversation-stream.js | 7 +- .../components/messaging/conversationStack.js | 38 ++-- .../components/messaging/instantMessaging.js | 5 +- .../messaging/{ => mocks}/mockContactList.js | 0 .../messaging/{ => mocks}/mockConversation.js | 2 +- app/javascript/styles/bliss/messaging.scss | 178 +----------------- .../styles/mastodon/messaging/config.scss | 3 + .../styles/mastodon/messaging/contacts.scss | 16 ++ .../styles/mastodon/messaging/helpers.scss | 16 ++ .../styles/mastodon/messaging/main.scss | 6 + .../messaging/messaging-conversation.scss | 84 +++++++++ .../mastodon/messaging/messaging-stream.scss | 55 ++++++ .../styles/mastodon/messaging/messaging.scss | 54 ++++++ docs/instant-messaging.md | 21 ++- 16 files changed, 325 insertions(+), 221 deletions(-) rename app/javascript/mastodon/features/ui/components/messaging/{ => mocks}/mockContactList.js (100%) rename app/javascript/mastodon/features/ui/components/messaging/{ => mocks}/mockConversation.js (95%) create mode 100644 app/javascript/styles/mastodon/messaging/config.scss create mode 100644 app/javascript/styles/mastodon/messaging/contacts.scss create mode 100644 app/javascript/styles/mastodon/messaging/helpers.scss create mode 100644 app/javascript/styles/mastodon/messaging/main.scss create mode 100644 app/javascript/styles/mastodon/messaging/messaging-conversation.scss create mode 100644 app/javascript/styles/mastodon/messaging/messaging-stream.scss create mode 100644 app/javascript/styles/mastodon/messaging/messaging.scss 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 38e09b30d..a02ddb7a8 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js +++ b/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import accounts, { me } from '../../../../initial_state'; import api from '../../../../api'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { mockContactList } from './mockContactList'; +import { mockContactList } from './mocks/mockContactList'; import Contact from './Contact'; export default class ContactsList extends ImmutablePureComponent { @@ -84,10 +84,10 @@ export default class ContactsList extends ImmutablePureComponent { return (
-
+
{this.state.following_count} contacts
); - return list; + return ( +
    + {list} +
+ ); } diff --git a/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js b/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js index 9fa8e39d0..aa59c7063 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js +++ b/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; export default class ConversationStream extends React.PureComponent { + static propTypes = { messages: PropTypes.array, }; @@ -17,7 +18,7 @@ export default class ConversationStream extends React.PureComponent { messagesLists = this.props.messages.map(message => { return ( -
  • +

  • {message.text}

    • @@ -27,9 +28,9 @@ export default class ConversationStream extends React.PureComponent { } return (
    -
      +
      {messagesLists} -
    +
    ); } diff --git a/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js b/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js index 05b34d5e8..e8f9f53a5 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js +++ b/app/javascript/mastodon/features/ui/components/messaging/conversationStack.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ConversationItem from './conversation-item'; -import { mockRecipient, mockRecipient2 } from './mockConversation'; +import { mockRecipient, mockRecipient2 } from './mocks/mockConversation'; export default class ConversationStack extends React.Component { @@ -19,21 +19,27 @@ export default class ConversationStack extends React.Component { } render() { - let list = this.props.conversations.map(conversations => - ( -
  • - -
    • - ), - ); + let list = this.props.conversations.map(recipient => { + + console.log('recipient', recipient); + recipient = recipient[0]; + return ( +
  • + +
    • + ); + + }, + ) + ; return (
      {list} diff --git a/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js b/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js index c0b3fa1e0..4d2709c50 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js +++ b/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js @@ -2,6 +2,9 @@ import React from 'react'; import ContactsList from './contacts-list'; import ConversationStack from './conversationStack'; +/** + * main component for IM, gathers contact list and list of conversations + */ export default class InstantMessaging extends React.PureComponent { // static propTypes = { @@ -28,7 +31,7 @@ export default class InstantMessaging extends React.PureComponent { render() { return ( -
      +
      diff --git a/app/javascript/mastodon/features/ui/components/messaging/mockContactList.js b/app/javascript/mastodon/features/ui/components/messaging/mocks/mockContactList.js similarity index 100% rename from app/javascript/mastodon/features/ui/components/messaging/mockContactList.js rename to app/javascript/mastodon/features/ui/components/messaging/mocks/mockContactList.js diff --git a/app/javascript/mastodon/features/ui/components/messaging/mockConversation.js b/app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js similarity index 95% rename from app/javascript/mastodon/features/ui/components/messaging/mockConversation.js rename to app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js index de3d64339..bf4fab9ce 100644 --- a/app/javascript/mastodon/features/ui/components/messaging/mockConversation.js +++ b/app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js @@ -25,7 +25,7 @@ export const mockRecipient = [ export const mockRecipient2 = [ { id : 4, - username : 'the Bo botte', + username : 'the Bo Botte', newMessages: 0, messages : mockMessages2, }, diff --git a/app/javascript/styles/bliss/messaging.scss b/app/javascript/styles/bliss/messaging.scss index 2cac1772a..2331eb447 100644 --- a/app/javascript/styles/bliss/messaging.scss +++ b/app/javascript/styles/bliss/messaging.scss @@ -1,177 +1 @@ -$messagingBoxWidth: 20em; -$messagingBoxHeight: 100%; -$conversationBoxHeight: 20em; - -.fixed-box { - border: solid 1px white; - padding: 1em; - position: fixed; - bottom: 0; -} - -.airmail-border { - border: 0.25em solid transparent; - border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em, - #58a 0, #58a 3em, white 0, white 4em); - -} - -.status-direct, -.item-list .conversation { - @extend .airmail-border; -} - -.messaging-box { - @extend .fixed-box; - - right: 1em; - width: $messagingBoxWidth; - background: $ui-base-color; - height: 4em; - color: white; - z-index: 10; - - &.active { - height: $messagingBoxHeight; - } - - .messager-textarea { - width: 100%; - } - - .title { - color: white; - } -} - -.contact-list-container { - overflow-x: auto; -} - -.contact-list { - display: block; - padding: 1em; - min-height: 5em; - list-style-type: none; - color: white; - - .contact { - margin-bottom: 0.5rem; - } -} - - -.toggle-list { - float: right; - margin-left: 1em; - background: $ui-primary-color; - border: 0; - padding: .5em; - - &.active { - background: $highlight-text-color; - } -} - -.conversation { - - - .conversation__content { - padding-right: 0; - } - - .conversation_reply, - .icon-button { - &:hover { - color: $ui-highlight-color; - background: mix($ui-base-color, $ui-secondary-color); - } - } - - .conversation_reply, - .icon-button, - .status__action-bar-dropdown { - display: inline-block; - float: right; - width: 18em; - height: 3.2em; - text-align: center; - } -} - -.conversations_list { - @extend .fixed-box; - right: $messagingBoxWidth + 2em; - bottom: 0; - width: 100%; - padding: 0.5em; - - overflow-x: auto; -} - -.conversation-item { - float: right; - width: 20em; - margin-left: 2em; - padding: 1em; - border-radius: 15px; - background: $classic-base-color; - - &.has-new-message { - background: $ui-highlight-color; - color: $classic-primary-color; - } -} - -.conversation_created-at { - margin-right: 1em; -} - -.conversation_stream { - padding-top: 1em; - height: $conversationBoxHeight; - overflow: auto; - background: $ui-secondary-color; - - .message { - -webkit-border-radius: 0.5rem; - -moz-border-radius: 0.5rem; - border-radius: 0.5rem; - margin-bottom: 0.5em; - padding: 0.5em 1em; - width: 80%; - } - - .mine { - text-align: right; - background: $classic-primary-color; - float: right; - - .arrow-down { - border-top-color: $classic-primary-color; - left: 1em; - } - } - - .theirs { - text-align: left; - background: $ui-highlight-color; - float: left; - - .arrow-down { - border-top-color: $ui-highlight-color; - right: 1em; - } - } - - .arrow-down { - width: 0; - height: 0; - border-left: 10px solid transparent; - border-right: 20px solid transparent; - border-top: 20px solid $classic-primary-color; - position: relative; - bottom: -1em; - - } -} +@import "../mastodon/messaging/main"; diff --git a/app/javascript/styles/mastodon/messaging/config.scss b/app/javascript/styles/mastodon/messaging/config.scss new file mode 100644 index 000000000..c98db0115 --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/config.scss @@ -0,0 +1,3 @@ +$messagingBoxWidth: 20em; +$messagingBoxHeight: 100%; +$conversationBoxHeight: 20em; diff --git a/app/javascript/styles/mastodon/messaging/contacts.scss b/app/javascript/styles/mastodon/messaging/contacts.scss new file mode 100644 index 000000000..0146e7666 --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/contacts.scss @@ -0,0 +1,16 @@ + +.contact-list-container { + overflow-x: auto; +} + +.contact-list { + display: block; + padding: 1em; + min-height: 5em; + list-style-type: none; + color: white; + + .contact { + margin-bottom: 0.5rem; + } +} diff --git a/app/javascript/styles/mastodon/messaging/helpers.scss b/app/javascript/styles/mastodon/messaging/helpers.scss new file mode 100644 index 000000000..556b7529c --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/helpers.scss @@ -0,0 +1,16 @@ +.fixed-box { + border: solid 1px white; + padding: 1em; + position: fixed; + bottom: 0; +} + +.airmail-border { + border: 0.25em solid transparent; + border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em, + #58a 0, #58a 3em, white 0, white 4em); + border-right-width: 0; + border-bottom-width: 0; + border-top-width: 0; + +} diff --git a/app/javascript/styles/mastodon/messaging/main.scss b/app/javascript/styles/mastodon/messaging/main.scss new file mode 100644 index 000000000..b5b81fc6b --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/main.scss @@ -0,0 +1,6 @@ +@import "config"; +@import "helpers"; +@import "messaging"; +@import "contacts"; +@import "messaging-conversation"; +@import "messaging-stream"; diff --git a/app/javascript/styles/mastodon/messaging/messaging-conversation.scss b/app/javascript/styles/mastodon/messaging/messaging-conversation.scss new file mode 100644 index 000000000..48de6d11d --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/messaging-conversation.scss @@ -0,0 +1,84 @@ + +.conversation { + + + .conversation__content { + padding-right: 0; + } + + .conversation_reply, + .icon-button { + &:hover { + color: $ui-highlight-color; + background: mix($ui-base-color, $ui-secondary-color); + } + } + + .conversation_reply, + .icon-button, + .status__action-bar-dropdown { + display: inline-block; + float: right; + width: 18em; + height: 3.2em; + text-align: center; + } +} + +.conversations_list { + @extend .fixed-box; + right: $messagingBoxWidth + 2em; + bottom: 0; + width: 100%; + padding: 0.5em; + overflow-x: auto; + border: 0; +} + +.conversation-item { + float: right; + width: 20em; + margin-left: 2em; + padding: 1em; + border-radius: 15px; + border: 3px solid $classic-primary-color; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-bottomright: 0; + background: $classic-base-color; + + + &.has-new-message { + background: $ui-highlight-color; + color: $classic-primary-color; + } + + &.is-focused { + border-color: $ui-base-color; + } + + .username { + font-weight: bold; + } + + .conversation-stream, + .conversation_input { + height: 100%; + display: block; + } + + &.hidden { + .conversation-stream, + .conversation_input { + display: none; + } + } + + .btn { + background: $classic-base-color; + color: $ui-base-color; + float: right; + padding: 0 1em; + margin-left: 1em; + border: 0; + } +} diff --git a/app/javascript/styles/mastodon/messaging/messaging-stream.scss b/app/javascript/styles/mastodon/messaging/messaging-stream.scss new file mode 100644 index 000000000..4d7051e24 --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/messaging-stream.scss @@ -0,0 +1,55 @@ + +.conversation-stream { + padding-top: 1em; + height: 5em; + overflow: auto; + width: 100%; + + + .message { + clear: both; + } + + .messages > + .message { + -webkit-border-radius: 0.5rem; + -moz-border-radius: 0.5rem; + border-radius: 0.5rem; + margin-bottom: 0.5em; + padding: 0.5em 1em; + display: block; + } + + .ours { + text-align: right; + background: $light-text-color; + float: right; + + .arrow-down { + border-top-color: $light-text-color; + left: 100%; + } + } + + .theirs { + text-align: left; + background: $ui-highlight-color; + float: left; + + .arrow-down { + border-top-color: $ui-highlight-color; + right: 1em; + } + } + + .arrow-down { + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid $classic-primary-color; + position: relative; + bottom: -1em; + + } +} diff --git a/app/javascript/styles/mastodon/messaging/messaging.scss b/app/javascript/styles/mastodon/messaging/messaging.scss new file mode 100644 index 000000000..4c4e47657 --- /dev/null +++ b/app/javascript/styles/mastodon/messaging/messaging.scss @@ -0,0 +1,54 @@ + +.status-direct, +.item-list .conversation { + @extend .airmail-border; +} + +.main-instant-messaging { + + .column-header__icon { + color: white; + } +} + +.messaging-box { + @extend .fixed-box; + + right: 1em; + width: $messagingBoxWidth; + background: $ui-base-color; + height: 4em; + color: white; + z-index: 10; + + &.active { + height: $messagingBoxHeight; + } + + .messager-textarea { + width: 100%; + } + + .title { + color: white; + } + +} + + +.toggle-list { + float: right; + margin-left: 1em; + background: $ui-primary-color; + border: 0; + padding: .5em; + width: 2em; + + &.active { + background: $highlight-text-color; + } +} + +.conversation_created-at { + margin-right: 1em; +} diff --git a/docs/instant-messaging.md b/docs/instant-messaging.md index 6c1ab8afa..85b6425a3 100644 --- a/docs/instant-messaging.md +++ b/docs/instant-messaging.md @@ -1,7 +1,12 @@ # Instant messaging documentation - by Tykayn ========= here is detailed the progress and the state of wondering. -By now, the IM (Instant messaging) aims to be a simple frontend over the direct message structure. +By now, **the IM (Instant messaging) aims to be a simple frontend over the direct message structure**. + +Come discuss here: +[@tykayn](https://mastodon.cipherbliss.com/@tykayn) +or here +[contact@cipherbliss.com](mailto:contact@cipherbliss.com) ## what is done The IM is able to @@ -9,15 +14,23 @@ The IM is able to * retrieving contacts from the DB * talk one to one with an account * the input is a simplified compose form, it has predefined settings to have only one recipient. It uses the same mecanism than the compose form to send a private / direct message to somebody. other mentions of persons are not yet recognised. - +* components used by the IM are listed under the folder `app/javascript/mastodon/features/ui/components/messaging` + +* the addition of bulma CSS enables a reliable set of css classes to have a cool layout and tooling. +* style dedicated to the IM is added in the mastodon style folder +`app/javascript/styles/mastodon/messaging/main.scss` + # TODO ## Work in progress +* retrieve contacts, just like in http://localhost:3000/web/accounts/1/following * open a new conversation when we click on an account in the contact list + ## Research find how it is already done to: -* retrieve contacts -* retrieve a conversation + + +* retrieve a conversation like http://localhost:3000/web/statuses/103356660630283894 * subscribe to the new messages of a conversation * send a direct message * display a page with the routing system