⚡ save stuff

app/javascript/mastodon/features/direct_timeline/components/conversation.js

@@ -236,7 +236,7 @@ class Conversation extends ImmutablePureComponent {
                 className='status__action-bar-button conversation_reply'
                 title={intl.formatMessage(messages.reply)}
                 icon='reply'
-                size='15em'
+                size={40}
                 onClick={this.handleReply}
               />
             </div >

app/javascript/mastodon/features/following/index.js

@@ -72,13 +72,13 @@ class Following extends ImmutablePureComponent {
       );
     }
 
-    const emptyMessage = blockedBy ? <FormattedMessage
+    const emptyMessage = blockedBy ? (<FormattedMessage
       id='empty_column.account_unavailable'
       defaultMessage='Profile unavailable'
-    /> : <FormattedMessage
+    />) : (<FormattedMessage
       id='account.follows.empty'
       defaultMessage="This user doesn't follow anyone yet."
-    />;
+    />);
 
     return (
       <Column >
@@ -98,11 +98,11 @@ class Following extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {blockedBy ? [] : accountIds.map(id =>
-            <AccountContainer
+            (<AccountContainer
               key={id}
               id={id}
               withNote={false}
-            />,
+            />),
           )}
         </ScrollableList >
       </Column >

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -240,7 +240,10 @@ class ColumnsArea extends ImmutablePureComponent {
           </div >
           <LinkFooter withHotkeys />
           {floatingActionButton}
-          <InstantMessaging />
+          <div className='hidden_nope'>
+
+            <InstantMessaging />
+          </div >
         </div >
       );
     }

app/javascript/mastodon/features/ui/components/link_footer.js

@@ -165,8 +165,15 @@ class LinkFooter extends React.PureComponent {
             </div >
           )}
           {isStaff && (
-            <span >
+            <span className='staff-actions'>
-
+              <NavLink
+                exact
+                activeClassName='active'
+                to={'/tk-example/'}
+                title='tk example link'
+              >
+                example link
+              </NavLink >
               <a
                 className='btn-warning'
                 href='/admin/tags?pending_review=1'

app/javascript/mastodon/features/ui/components/messaging/contacts-list.js

@@ -5,6 +5,7 @@ import api from '../../../../api';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { mockContactList } from './mocks/mockContactList';
 import Contact from './Contact';
+import classNames from 'classnames';
 
 export default class ContactsList extends ImmutablePureComponent {
 
@@ -79,11 +80,15 @@ export default class ContactsList extends ImmutablePureComponent {
     }
 
     const showListClass = (this.state.showList ? 'active' : 'inactive');
-    const classListContainer = 'messaging-box ' + showListClass;
     const classList = 'btn btn-primary toggle-list ' + showListClass;
     return (
       <div className='messaging-container'>
-        <div className={classListContainer}>
+        <div
+          className={classNames('messaging-box ', {
+            'active'  : this.state.showList,
+            'inactive': !this.state.showList,
+          })}
+        >
           <div className='card-title '>
             <i
               role='img'

app/javascript/mastodon/features/ui/components/messaging/conversation-item.js

@@ -13,12 +13,11 @@ export default class ConversationItem extends React.PureComponent {
     newMessages: PropTypes.number,
     displayed  : PropTypes.bool,
   };
-  following = [];
-
   static defaultProps = {
     newMessages: 0,
     displayed  : true,
   };
+  following = [];
 
   constructor(props) {
     super(props);

app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js

@@ -18,7 +18,10 @@ export default class ConversationStream extends React.PureComponent {
 
       messagesLists = this.props.messages.map(message => {
         return (
-          <li className={'message ' + message.who}>
+          <li
+            className={'message ' + message.who}
+            key={message.id}
+          >
             <p >{message.text}</p >
             <div className='arrow-down' />
           </li >

app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js

@@ -1,16 +1,33 @@
 import React from 'react';
+
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import ContactsList from './contacts-list';
 import ConversationStack from './conversationStack';
 
+const mapStateToProps = (state, props) => ({
+  isAccount : !!state.getIn(['accounts', props.params.accountId]),
+  accountIds: state.getIn(['user_lists', 'following', props.params.accountId, 'items']),
+  hasMore   : !!state.getIn(['user_lists', 'following', props.params.accountId, 'next']),
+  blockedBy : state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
+});
+// @connect(mapStateToProps)
 /**
  * main component for IM, gathers contact list and list of conversations
  */
-export default class InstantMessaging extends React.PureComponent {
+export default class InstantMessaging extends ImmutablePureComponent {
 
-  // static propTypes = {
+  static propTypes = {
-  // following    : PropTypes.array,
+    // params            : PropTypes.object.isRequired,
-  // conversations: PropTypes.array,
+    dispatch          : PropTypes.func.isRequired,
-  // };
+    shouldUpdateScroll: PropTypes.func,
+    accountIds        : ImmutablePropTypes.list,
+    hasMore           : PropTypes.bool,
+    blockedBy         : PropTypes.bool,
+    isAccount         : PropTypes.bool,
+    multiColumn       : PropTypes.bool,
+  };
   // static defaultProps = {
   // threadsCompile: true,
   // };
@@ -30,6 +47,7 @@ export default class InstantMessaging extends React.PureComponent {
   // };
 
   render() {
+     
     return (
       <div className='main-instant-messaging'>
 

app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js

@@ -1,14 +1,14 @@
 export const mockMessages = [
-    { text: 'oh hello there! 😋 ', who: 'theirs' },
+    { id: 0, text: 'oh hello there! 😋 ', who: 'theirs' },
-    { text: 'General Emoji', who: 'ours' },
+    { id: 1, text: 'General Emoji', who: 'ours' },
-    { text: 'we just achieved comedy', who: 'theirs' },
+    { id: 2, text: 'we just achieved comedy', who: 'theirs' },
   ]
 ;
 export const mockMessages2 = [
-    { text: 'oh oh oh ', who: 'theirs' },
+    { id: 0, text: 'oh oh oh ', who: 'theirs' },
-    { text: 'General Emoji', who: 'ours' },
+    { id: 1, text: 'General Emoji', who: 'ours' },
-    { text: 'DANGER!!', who: 'theirs' },
+    { id: 2, text: 'DANGER!!', who: 'theirs' },
-    { text: 'JUST KIDDING WILL ROBINSON.', who: 'theirs' },
+    { id: 3, text: 'JUST KIDDING WILL ROBINSON.', who: 'theirs' },
   ]
 ;
 

app/javascript/mastodon/features/ui/index.js

@@ -57,6 +57,7 @@ import { previewState as previewVideoState } from './components/video_modal';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
+import InstantMessaging from './components/messaging/instantMessaging';
 
 const messages = defineMessages({
   beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
@@ -192,7 +193,7 @@ class SwitchingColumnsArea extends React.PureComponent {
           {redirect}
           <WrappedRoute
             path='/tk-example'
-            component={GettingStarted}
+            component={InstantMessaging}
             content={children}
           />
           <WrappedRoute

app/javascript/styles/bliss/_mixins.scss

@@ -72,3 +72,13 @@
     color: $inverted-text-color;
   }
 }
+
+.hidden {
+  display: none;
+
+  &:before {
+    content: "hidden div here";
+    background: yellow;
+    padding: 1em;
+  }
+}

app/javascript/styles/mastodon/messaging/messaging-conversation.scss

@@ -1,84 +1,87 @@
+.main-instant-messaging {
 
-.conversation {
+  .conversation {
 
 
-  .conversation__content {
+    .conversation__content {
-    padding-right: 0;
+      padding-right: 0;
-  }
+    }
 
-  .conversation_reply,
+    .conversation_reply,
-  .icon-button {
+    .icon-button {
-    &:hover {
+      &:hover {
-      color: $ui-highlight-color;
+        color: $ui-highlight-color;
-      background: mix($ui-base-color, $ui-secondary-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;
     }
   }
 
-  .conversation_reply,
+  .conversations_list {
-  .icon-button,
+    @extend .fixed-box;
-  .status__action-bar-dropdown {
+    right: $messagingBoxWidth + 2em;
-    display: inline-block;
+    bottom: 0;
-    float: right;
+    width: 100%;
-    width: 18em;
+    padding: 0.5em;
-    height: 3.2em;
+    overflow-x: auto;
-    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;
   }
+
+  .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;
+    }
+  }
+
 }

app/views/auth/passwords/new.html.haml

@@ -5,7 +5,7 @@
   = render 'shared/error_messages', object: resource
 
   .fields-group
-    = f.not-a-real-input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false
+    = f.input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false
 
   .actions
     = f.button :button, t('auth.reset_password'), type: :submit

app/views/auth/sessions/new.html.haml

@@ -7,11 +7,11 @@
 = simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
   .fields-group
     - if use_seamless_external_login?
-      = f.not-a-real-input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.username_or_email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.username_or_email') }, hint: false
+      = f.input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.username_or_email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.username_or_email') }, hint: false
     - else
-      = f.not-a-real-input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false
+      = f.input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false
   .fields-group
-    = f.not-a-real-input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false
+    = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false
 
   .actions
     = f.button :button, t('auth.login'), type: :submit