#4090 - New voice recording toolbar ui and swipe to cancel interaction.

Riot/Assets/Images.xcassets/Room/VoiceMessages/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_cancel_fade.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "voice_message_cancel_fade.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "voice_message_cancel_fade@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "voice_message_cancel_fade@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Riot/Assets/Images.xcassets/Room/VoiceMessages/voice_message_record_button_recording.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "voice_message_record_button_recording.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "voice_message_record_button_recording@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "voice_message_record_button_recording@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Riot/Generated/Images.swift

@@ -103,7 +103,6 @@ internal enum Asset {
     internal static let actionFile = ImageAsset(name: "action_file")
     internal static let actionMediaLibrary = ImageAsset(name: "action_media_library")
     internal static let actionSticker = ImageAsset(name: "action_sticker")
-    internal static let actionVoiceMessage = ImageAsset(name: "action_voice_message")
     internal static let error = ImageAsset(name: "error")
     internal static let errorMessageTick = ImageAsset(name: "error_message_tick")
     internal static let newClose = ImageAsset(name: "new_close")
@@ -131,6 +130,9 @@ internal enum Asset {
     internal static let videoCall = ImageAsset(name: "video_call")
     internal static let voiceCallHangonIcon = ImageAsset(name: "voice_call_hangon_icon")
     internal static let voiceCallHangupIcon = ImageAsset(name: "voice_call_hangup_icon")
+    internal static let voiceMessageCancelFade = ImageAsset(name: "voice_message_cancel_fade")
+    internal static let voiceMessageRecordButtonDefault = ImageAsset(name: "voice_message_record_button_default")
+    internal static let voiceMessageRecordButtonRecording = ImageAsset(name: "voice_message_record_button_recording")
     internal static let addMemberFloatingAction = ImageAsset(name: "add_member_floating_action")
     internal static let addParticipant = ImageAsset(name: "add_participant")
     internal static let addParticipants = ImageAsset(name: "add_participants")

Riot/Modules/Room/Views/InputToolbar/RoomInputToolbarView.h

@@ -68,9 +68,6 @@ typedef enum : NSUInteger
 @property (weak, nonatomic) IBOutlet UIButton *inputContextButton;
 @property (weak, nonatomic) IBOutlet RoomActionsBar *actionsBar;
 
-@property (weak, nonatomic) IBOutlet UIView *voiceRecorderContainerView;
-@property (weak, nonatomic) IBOutlet NSLayoutConstraint *voiceRecorderContainerWidthConstraint;
-
 /**
  Tell whether the filled data will be sent encrypted. NO by default.
  */

Riot/Modules/Room/Views/InputToolbar/RoomInputToolbarView.m

@@ -35,14 +35,15 @@
 const NSTimeInterval kActionMenuContentAlphaAnimationDuration = .2;
 const NSTimeInterval kActionMenuComposerHeightAnimationDuration = .3;
 
-@interface RoomInputToolbarView() <VoiceRecordViewDelegate>
+@interface RoomInputToolbarView()
 {
     // The intermediate action sheet
     UIAlertController *actionSheet;
-
-    VoiceRecordView *voiceRecordView;
 }
 
+@property (nonatomic, weak) IBOutlet UIView *voiceMessageToolbarContainerView;
+@property (nonatomic, strong) VoiceMessageToolbarView *voiceMessageToolbarView;
+
 @end
 
 @implementation RoomInputToolbarView
@@ -78,12 +79,12 @@ - (void)awakeFromNib
 
     self.isEncryptionEnabled = _isEncryptionEnabled;
 
-    voiceRecordView = [VoiceRecordView instanceFromNib];
-    voiceRecordView.delegate = self;
+    self.voiceMessageToolbarView = [VoiceMessageToolbarView instanceFromNib];
+    self.voiceMessageToolbarView.frame = self.voiceMessageToolbarContainerView.bounds;
+    self.voiceMessageToolbarView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    [self.voiceMessageToolbarContainerView addSubview:self.voiceMessageToolbarView];
 
-    voiceRecordView.frame = self.voiceRecorderContainerView.bounds;
-    voiceRecordView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-    [self.voiceRecorderContainerView addSubview:voiceRecordView];
+    [self _updateUIWithTextMessage:nil animated:NO];
 }
 
 #pragma mark - Override MXKView
@@ -137,15 +138,14 @@ -(void)customizeViewRendering
     self.inputContextButton.tintColor = ThemeService.shared.theme.textSecondaryColor;
     [self.actionsBar updateWithTheme:ThemeService.shared.theme];
 
-    self.voiceRecorderContainerView.backgroundColor = ThemeService.shared.theme.backgroundColor;
-    [voiceRecordView updateWithTheme:ThemeService.shared.theme];
+    [self.voiceMessageToolbarView updateWithTheme:ThemeService.shared.theme];
 }
 
 #pragma mark -
 
 - (void)setTextMessage:(NSString *)textMessage
 {
-    [self updateSendButtonWithMessage:textMessage];
+    [self _updateUIWithTextMessage:textMessage animated:YES];
     [super setTextMessage:textMessage];
 }
 
@@ -302,7 +302,7 @@ - (IBAction)cancelAction:(id)sender
 - (BOOL)growingTextView:(HPGrowingTextView *)growingTextView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text
 {
     NSString *newText = [growingTextView.text stringByReplacingCharactersInRange:range withString:text];
-    [self updateSendButtonWithMessage:newText];
+    [self _updateUIWithTextMessage:newText animated:YES];
 
     return YES;
 }
@@ -366,16 +366,6 @@ - (void)destroy
     [super destroy];
 }
 
-- (void)updateSendButtonWithMessage:(NSString *)textMessage
-{
-    self.actionMenuOpened = NO;
-
-    [UIView animateWithDuration:.15 animations:^{
-        self.rightInputToolbarButton.alpha = textMessage.length ? 1 : 0;
-        self.voiceRecorderContainerView.alpha = textMessage.length ? 0 : 1;
-    }];
-}
-
 #pragma mark - properties
 
 - (void)setActionMenuOpened:(BOOL)actionMenuOpened
@@ -436,12 +426,15 @@ - (void)paste:(id)sender
     [super paste:sender];
 }
 
-#pragma mark - VoiceRecordViewDelegate
+#pragma mark - Private
 
-- (void)voiceRecordViewExpandedStateDidChange:(VoiceRecordView * _Nonnull)voiceRecordView {
-    [UIView animateWithDuration:voiceRecordView.expandAnimationDuration animations:^{
-        self.voiceRecorderContainerWidthConstraint.constant = voiceRecordView.isExpanded ? self.bounds.size.width : 48;
-        [self layoutIfNeeded];
+- (void)_updateUIWithTextMessage:(NSString *)textMessage animated:(BOOL)animated
+{
+    self.actionMenuOpened = NO;
+
+    [UIView animateWithDuration:(animated ? 0.15f : 0.0f) animations:^{
+        self.rightInputToolbarButton.alpha = textMessage.length ? 1.0f : 0.0f;
+        self.voiceMessageToolbarContainerView.alpha = textMessage.length ? 0.0f : 1.0;
     }];
 }
 

Riot/Modules/Room/Views/InputToolbar/RoomInputToolbarView.xib

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
-        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -17,7 +16,7 @@
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="a84-Vc-6ud" userLabel="MainToolBar View">
                     <rect key="frame" x="0.0" y="2" width="600" height="58"/>
                     <subviews>
-                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Hga-l8-Wua" userLabel="attach Button">
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Hga-l8-Wua">
                             <rect key="frame" x="12" y="10" width="36" height="36"/>
                             <accessibility key="accessibilityConfiguration" identifier="AttachButton"/>
                             <constraints>
@@ -36,7 +35,7 @@
                             <viewLayoutGuide key="contentLayoutGuide" id="F6O-76-cZl"/>
                             <viewLayoutGuide key="frameLayoutGuide" id="rZR-Bv-AqG"/>
                         </scrollView>
-                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="QWp-NV-uh5" userLabel="Message Composer Container">
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="QWp-NV-uh5">
                             <rect key="frame" x="60" y="9" width="484" height="36"/>
                             <subviews>
                                 <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="input_text_background" translatesAutoresizingMaskIntoConstraints="NO" id="uH7-Q7-hpZ">
@@ -99,20 +98,17 @@
                                 <constraint firstAttribute="trailing" secondItem="uH7-Q7-hpZ" secondAttribute="trailing" id="wS9-oU-alv"/>
                             </constraints>
                         </view>
-                        <button opaque="NO" alpha="0.0" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="G8Z-CM-tGs" userLabel="send Button">
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="G8Z-CM-tGs">
                             <rect key="frame" x="552" y="10" width="36" height="36"/>
                             <accessibility key="accessibilityConfiguration" identifier="SendButton"/>
                             <state key="normal" image="send_icon"/>
                             <connections>
                                 <action selector="onTouchUpInside:" destination="iN0-l3-epB" eventType="touchUpInside" id="Y9g-uz-rAz"/>
                             </connections>
                         </button>
-                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zp9-EN-PLT">
-                            <rect key="frame" x="552" y="0.0" width="48" height="58"/>
-                            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                            <constraints>
-                                <constraint firstAttribute="width" constant="48" id="paQ-xM-7ko"/>
-                            </constraints>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zp9-EN-PLT" customClass="PassthroughView" customModule="Riot" customModuleProvider="target">
+                            <rect key="frame" x="0.0" y="0.0" width="600" height="58"/>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                         </view>
                     </subviews>
                     <constraints>
@@ -128,6 +124,7 @@
                         <constraint firstAttribute="height" constant="58" id="Yjj-ua-rbe"/>
                         <constraint firstAttribute="bottom" secondItem="Hga-l8-Wua" secondAttribute="bottom" constant="12" id="b0G-CY-AmP"/>
                         <constraint firstAttribute="trailing" secondItem="QWp-NV-uh5" secondAttribute="trailing" constant="56" id="hXO-cY-Jgz"/>
+                        <constraint firstItem="zp9-EN-PLT" firstAttribute="leading" secondItem="a84-Vc-6ud" secondAttribute="leading" id="iDd-At-1f7"/>
                         <constraint firstAttribute="trailing" secondItem="ESv-9w-KJF" secondAttribute="trailing" id="jCS-Tf-vxr"/>
                         <constraint firstAttribute="bottom" secondItem="zp9-EN-PLT" secondAttribute="bottom" id="o7N-Dj-dCH"/>
                         <constraint firstAttribute="bottom" secondItem="ESv-9w-KJF" secondAttribute="bottom" constant="12" id="v8r-ac-MKn"/>
@@ -162,8 +159,7 @@
                 <outlet property="messageComposerContainerBottomConstraint" destination="NGr-2o-sOP" id="oez-6D-IKA"/>
                 <outlet property="messageComposerContainerTopConstraint" destination="WyZ-3i-OHi" id="OcO-1f-bNA"/>
                 <outlet property="rightInputToolbarButton" destination="G8Z-CM-tGs" id="NCk-5m-aNF"/>
-                <outlet property="voiceRecorderContainerView" destination="zp9-EN-PLT" id="ybB-DB-qA4"/>
-                <outlet property="voiceRecorderContainerWidthConstraint" destination="paQ-xM-7ko" id="17V-6a-ddW"/>
+                <outlet property="voiceMessageToolbarContainerView" destination="zp9-EN-PLT" id="St9-oc-beM"/>
             </connections>
             <point key="canvasLocation" x="137.59999999999999" y="151.12443778110946"/>
         </view>
@@ -174,8 +170,5 @@
         <image name="input_text_background" width="30" height="20"/>
         <image name="send_icon" width="36" height="36"/>
         <image name="upload_icon" width="36" height="36"/>
-        <systemColor name="systemBackgroundColor">
-            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-        </systemColor>
     </resources>
 </document>