Scrolling button updated and animations to modals

_locales/en/messages.json

@@ -2670,8 +2670,7 @@
     "message": "https://myopengroup.lokinet.org"
   },
   "addChannelDescription": {
-    "message":
-      "Enter an open group URL."
+    "message": "Enter an open group URL."
   },
   "joinChannel": {
     "message": "Join Open Group"

js/models/conversations.js

@@ -258,7 +258,7 @@
 
       if (messageSelected) {
         // Hide ellipses icon
-        $('.title-wrapper .session-icon.ellipses').css({opacity:0});
+        $('.title-wrapper .session-icon.ellipses').css({ opacity: 0 });
 
         $('.messages li, .messages > div').addClass('shadowed');
         $('.message-selection-overlay').addClass('overlay');
@@ -272,7 +272,7 @@
         }
       } else {
         // Hide ellipses icon
-        $('.title-wrapper .session-icon.ellipses').css({opacity:1});
+        $('.title-wrapper .session-icon.ellipses').css({ opacity: 1 });
 
         $('.messages li, .messages > div').removeClass('shadowed');
         $('.message-selection-overlay').removeClass('overlay');

js/modules/signal.js

@@ -82,6 +82,9 @@ const {
 const {
   SessionDropdown,
 } = require('../../ts/components/session/SessionDropdown');
+const {
+  SessionScrollButton,
+} = require('../../ts/components/session/SessionScrollButton');
 const {
   SessionRegistrationView,
 } = require('../../ts/components/session/SessionRegistrationView');
@@ -291,6 +294,7 @@ exports.setup = (options = {}) => {
     SessionSeedModal,
     SessionPasswordModal,
     SessionDropdown,
+    SessionScrollButton,
     MediaGallery,
     Message,
     MessageBody,

js/views/scroll_down_button_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, i18n */
+/* global Whisper */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -7,9 +7,6 @@
   window.Whisper = window.Whisper || {};
 
   Whisper.ScrollDownButtonView = Whisper.View.extend({
-    className: 'module-scroll-down',
-    templateName: 'scroll-down-button-view',
-
     initialize(options = {}) {
       this.count = options.count || 0;
     },
@@ -18,22 +15,19 @@
       this.count += count;
       this.render();
     },
-
-    render_attributes() {
-      const buttonClass =
-        this.count > 0 ? 'module-scroll-down__button--new-messages' : '';
-
-      let moreBelow = i18n('scrollDown');
-      if (this.count > 1) {
-        moreBelow = i18n('messagesBelow');
-      } else if (this.count === 1) {
-        moreBelow = i18n('messageBelow');
-      }
-
-      return {
-        buttonClass,
-        moreBelow,
-      };
+    
+    render() {
+      this.scrollButtonView = new Whisper.ReactWrapperView({
+        className: 'module-scroll-down',
+        Component: window.Signal.Components.SessionScrollButton,
+        props: {
+          count: this.count,
+        },
+      });
+
+      this.$el.append(this.scrollButtonView.el);
+      return this;
     },
   });
+
 })();

stylesheets/_session.scss

@@ -31,6 +31,11 @@
   src: url('../fonts/SFProText-Regular.ttf') format('truetype');
 }
 
+@keyframes fadein {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
 // Session Colors
 $session-font-family: 'Wasa';
 
@@ -149,6 +154,7 @@ div.spacer-lg {
 }
 
 $session-transition-duration: 0.25s;
+$session-fadein-duration: 0.10s;
 
 $session-icon-size-sm: 15px;
 $session-icon-size-md: 20px;
@@ -628,6 +634,7 @@ label {
 }
 
 .session-modal {
+  animation: fadein $session-transition-duration;
   z-index: 150;
   position: absolute;
   left: 50%;
@@ -1364,20 +1371,28 @@ input {
   }
 }
 
-button.module-scroll-down {
-  &__button {
-    background-color: $session-shade-6;
-  }
+.module-scroll-down {
+  animation: fadein $session-fadein-duration;
+  bottom: 15px;
+
+  .session-icon-button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    opacity: 1;
+    background-color: $session-shade-8;
 
-  &__button:hover {
-    &__icon {
+    svg path {
       transition: $session-transition-duration;
-      @include color-svg('../images/down.svg', $session-color-white);
+      opacity: 0.6;
     }
-  }
 
-  &__icon {
-    @include color-svg('../images/down.svg', rgba($session-color-white, 0.6));
+    &:hover svg path {
+      opacity: 1;
+    }
   }
 }
 

ts/components/conversation/ConversationHeader.tsx

@@ -378,7 +378,7 @@ export class ConversationHeader extends React.Component<Props> {
     }
   }
 
-  public highlightMessageSearch(){
+  public highlightMessageSearch() {
     // This is a temporary fix. In future we want to search
     // messages in the current conversation
     $('.session-search-input input').focus();
@@ -489,5 +489,4 @@ export class ConversationHeader extends React.Component<Props> {
       </React.Fragment>
     );
   }
-  
 }

ts/components/session/SessionScrollButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
+
+interface Props {
+  count: number,
+}
+
+export class SessionScrollButton extends React.PureComponent<Props> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  public render() {
+    console.log(`My count is: ${this.props.count}`);
+
+    return (
+        <SessionIconButton
+            iconType={SessionIconType.Chevron}
+            iconSize={SessionIconSize.Huge}
+            iconColor={"#FFFFFF"}
+        />
+    );
+  }
+}