+
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