⚡ save stuff

2020-01-16 17:10:18 +01:00 · 2020-01-16 17:10:18 +01:00 · 6a616a0c33
parent 9bef612c35
commit 6a616a0c33
14 changed files with 154 additions and 105 deletions
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js
+++ b/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 >
--- a/app/javascript/mastodon/features/following/index.js
+++ b/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 >
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/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 >
      );
    }
--- a/app/javascript/mastodon/features/ui/components/link_footer.js
+++ b/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'
--- a/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js
+++ b/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'
--- a/app/javascript/mastodon/features/ui/components/messaging/conversation-item.js
+++ b/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);
--- a/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js
+++ b/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 >
--- a/app/javascript/mastodon/features/ui/components/messaging/instantMessaging.js
+++ b/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 = {
-  // following    : PropTypes.array,
-  // conversations: PropTypes.array,
-  // };
+  static propTypes = {
+    // params            : PropTypes.object.isRequired,
+    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'>

--- a/app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js
+++ b/app/javascript/mastodon/features/ui/components/messaging/mocks/mockConversation.js
@ -1,14 +1,14 @@
 export const mockMessages = [
-    { text: 'oh hello there! 😋 ', who: 'theirs' },
-    { text: 'General Emoji', who: 'ours' },
-    { text: 'we just achieved comedy', who: 'theirs' },
+    { id: 0, text: 'oh hello there! 😋 ', who: 'theirs' },
+    { id: 1, text: 'General Emoji', who: 'ours' },
+    { id: 2, text: 'we just achieved comedy', who: 'theirs' },
  ]
 ;
 export const mockMessages2 = [
-    { text: 'oh oh oh ', who: 'theirs' },
-    { text: 'General Emoji', who: 'ours' },
-    { text: 'DANGER!!', who: 'theirs' },
-    { text: 'JUST KIDDING WILL ROBINSON.', who: 'theirs' },
+    { id: 0, text: 'oh oh oh ', who: 'theirs' },
+    { id: 1, text: 'General Emoji', who: 'ours' },
+    { id: 2, text: 'DANGER!!', who: 'theirs' },
+    { id: 3, text: 'JUST KIDDING WILL ROBINSON.', who: 'theirs' },
  ]
 ;

--- a/app/javascript/mastodon/features/ui/index.js
+++ b/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
--- a/app/javascript/styles/bliss/_mixins.scss
+++ b/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;
+  }
+}
--- a/app/javascript/styles/mastodon/messaging/messaging-conversation.scss
+++ b/app/javascript/styles/mastodon/messaging/messaging-conversation.scss
@ -1,84 +1,87 @@
+.main-instant-messaging {

-.conversation {
+  .conversation {


-  .conversation__content {
-    padding-right: 0;
-  }
+    .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 {
+      &: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;
    }
  }

-  .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;
+  .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;
+    }
+  }
+
 }
--- a/app/views/auth/passwords/new.html.haml
+++ b/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
--- a/app/views/auth/sessions/new.html.haml
+++ b/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