Merge pull request #853 from vincentbavitz/clearnet

More animations

js/views/conversation_view.js

@@ -297,7 +297,7 @@
             this.setDisappearingMessages(seconds),
 
           onGoBack: () => {
-            this.$('.conversation-content-right').hide();
+            this.hideConversationRight();
           },
 
           onUpdateGroupName: () => {
@@ -340,6 +340,17 @@
         onClicked: this.selectMember.bind(this),
       });
 
+      this.hideConversationRight = () => {
+        this.$('.conversation-content-right').css({
+          'margin-right': '-22vw',
+        });
+      };
+      this.showConversationRight = () => {
+        this.$('.conversation-content-right').css({
+          'margin-right': '0vw',
+        });
+      };
+
       this.showGroupSettings = () => {
         if (!this.groupSettings) {
           this.groupSettings = new Whisper.ReactWrapperView({
@@ -354,11 +365,12 @@
         } else {
           this.groupSettings.update(getGroupSettingsProps(this.model));
         }
-        this.$('.conversation-content-right').show();
+
+        this.showConversationRight();
       };
 
       this.hideGroupSettings = () => {
-        this.$('.conversation-content-right').hide();
+        this.showConversationRight();
       };
 
       this.memberView.render();

stylesheets/_conversation.scss

@@ -433,7 +433,7 @@
     flex-direction: row;
     align-items: center;
     margin-bottom: 8px;
-    padding-left: 0px 15px;
+    padding: 0px 15px;
 
     .send-message {
       flex-grow: 1;

stylesheets/_session.scss

@@ -587,10 +587,10 @@ label {
   position: absolute;
   left: 0px;
   right: 0px;
-  margin: 0px $session-margin-sm;
+  margin: 0px $session-margin-lg;
   align-items: center;
   justify-content: space-between;
-  height: 48px;
+  height: $main-view-header-height;
 
   .close-button {
     float: left;

stylesheets/_session_group_panel.scss

@@ -1,3 +1,9 @@
+.conversation-content-right {
+  transition: $session-transition-duration;
+  width: 22vw;
+  margin-right: -22vw;
+}
+
 .group-settings {
   display: flex;
   flex-direction: column;