UX Rework: Add home page

- reduce room avatar size - improve badge display element-hq/riot-meta#75
element-hq · May 11, 2017 · e95776b · e95776b
1 parent ff57836
commit e95776b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/Riot/Model/RoomList/RecentCellData.m b/Riot/Model/RoomList/RecentCellData.m
@@ -24,6 +24,24 @@ @implementation RecentCellData
 // self.roomDisplayname returns this value instead of the mother class.
 @synthesize roomDisplayname;
 
+- (NSString*)notificationCountStringValue
+{
+    NSString *stringValue;
+    NSUInteger notificationCount = self.notificationCount;
+
+    if (notificationCount > 1000)
+    {
+        CGFloat value = notificationCount / 1000.0;
+        stringValue = [NSString stringWithFormat:NSLocalizedStringFromTable(@"large_badge_value_k_format", @"Vector", nil), value];
+    }
+    else
+    {
+        stringValue = [NSString stringWithFormat:@"%tu", notificationCount];
+    }
+
+    return stringValue;
+}
+
 - (NSUInteger)notificationCount
 {
     // Ignore the regular notification count if the room is in 'mentions only" mode at the Riot level.

diff --git a/Riot/Views/RoomList/RecentTableViewCell.m b/Riot/Views/RoomList/RecentTableViewCell.m
@@ -91,7 +91,7 @@ - (void)render:(MXKCellData *)cellData
                 self.missedNotifAndUnreadBadgeBgView.hidden = NO;
                 self.missedNotifAndUnreadBadgeBgView.backgroundColor = self.missedNotifAndUnreadIndicator.backgroundColor;
 
-                self.missedNotifAndUnreadBadgeLabel.text = [NSString stringWithFormat:@"%tu", roomCellData.notificationCount];
+                self.missedNotifAndUnreadBadgeLabel.text = roomCellData.notificationCountStringValue;
                 [self.missedNotifAndUnreadBadgeLabel sizeToFit];
 
                 self.missedNotifAndUnreadBadgeBgViewWidthConstraint.constant = self.missedNotifAndUnreadBadgeLabel.frame.size.width + 18;

diff --git a/Riot/Views/RoomList/RoomCollectionViewCell.m b/Riot/Views/RoomList/RoomCollectionViewCell.m
@@ -30,17 +30,22 @@ - (void)awakeFromNib
 {
     [super awakeFromNib];
 
+    // Round room image view
+    [_roomAvatar.layer setCornerRadius:_roomAvatar.frame.size.width / 2];
+    _roomAvatar.clipsToBounds = YES;
+
     // Initialize unread count badge
     [_missedNotifAndUnreadBadgeBgView.layer setCornerRadius:10];
     _missedNotifAndUnreadBadgeBgViewWidthConstraint.constant = 0;
 
     self.roomTitle.textColor = kRiotTextColorBlack;
     self.missedNotifAndUnreadBadgeLabel.textColor = [UIColor whiteColor];
 
-    self.directRoomBorderView.backgroundColor = kRiotColorGreen;
-    self.directRoomBorderView.alpha = 0.75;
+    // Prepare direct room border
     [self.directRoomBorderView.layer setCornerRadius:self.directRoomBorderView.frame.size.width / 2];
     self.directRoomBorderView.clipsToBounds = YES;
+    self.directRoomBorderView.layer.borderColor = CGColorCreateCopyWithAlpha(kRiotColorGreen.CGColor, 0.75);
+    self.directRoomBorderView.layer.borderWidth = 5;
 
     // Disable the user interaction on the room avatar.
     self.roomAvatar.userInteractionEnabled = NO;
@@ -50,9 +55,7 @@ - (void)layoutSubviews
 {
     [super layoutSubviews];
 
-    // Round image view
-    [_roomAvatar.layer setCornerRadius:_roomAvatar.frame.size.width / 2];
-    _roomAvatar.clipsToBounds = YES;
+
 }
 
 - (void)render:(MXKCellData *)cellData
@@ -75,7 +78,7 @@ - (void)render:(MXKCellData *)cellData
                 self.missedNotifAndUnreadBadgeBgView.hidden = NO;
                 self.missedNotifAndUnreadBadgeBgView.backgroundColor = roomCellData.highlightCount ? kRiotColorPinkRed : kRiotColorGreen;
 
-                self.missedNotifAndUnreadBadgeLabel.text = [NSString stringWithFormat:@"%tu", roomCellData.notificationCount];
+                self.missedNotifAndUnreadBadgeLabel.text = roomCellData.notificationCountStringValue;
                 [self.missedNotifAndUnreadBadgeLabel sizeToFit];
 
                 self.missedNotifAndUnreadBadgeBgViewWidthConstraint.constant = self.missedNotifAndUnreadBadgeLabel.frame.size.width + 18;
@@ -117,12 +120,12 @@ - (void)render:(MXKCellData *)cellData
 + (CGFloat)heightForCellData:(MXKCellData *)cellData withMaximumWidth:(CGFloat)maxWidth
 {
     // The height is fixed
-    return 110;
+    return 100;
 }
 
 + (CGSize)defaultCellSize
 {
-    return CGSizeMake(90, 110);
+    return CGSizeMake(80, 100);
 }
 
 - (void)prepareForReuse

diff --git a/Riot/Views/RoomList/RoomCollectionViewCell.xib b/Riot/Views/RoomList/RoomCollectionViewCell.xib
@@ -13,30 +13,30 @@
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
         <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="eCk-zY-LXq" customClass="RoomCollectionViewCell">
-            <rect key="frame" x="0.0" y="0.0" width="90" height="110"/>
+            <rect key="frame" x="0.0" y="0.0" width="80" height="100"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
             <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
-                <rect key="frame" x="0.0" y="0.0" width="90" height="110"/>
+                <rect key="frame" x="0.0" y="0.0" width="80" height="100"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="xws-BR-H47">
-                        <rect key="frame" x="10" y="5" width="70" height="70"/>
-                        <color key="backgroundColor" red="0.6886889638" green="1" blue="0.74383144840000004" alpha="1" colorSpace="calibratedRGB"/>
-                        <constraints>
-                            <constraint firstAttribute="width" constant="70" id="3OW-3y-Rg7"/>
-                            <constraint firstAttribute="width" secondItem="xws-BR-H47" secondAttribute="height" multiplier="1:1" id="bEP-hL-5lg"/>
-                        </constraints>
-                    </view>
                     <view contentMode="scaleAspectFit" translatesAutoresizingMaskIntoConstraints="NO" id="T1Q-RS-8o6" customClass="MXKImageView">
-                        <rect key="frame" x="15" y="10" width="60" height="60"/>
+                        <rect key="frame" x="10" y="10" width="60" height="60"/>
                         <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstAttribute="width" constant="60" id="Raw-38-dXN"/>
                             <constraint firstAttribute="width" secondItem="T1Q-RS-8o6" secondAttribute="height" multiplier="1:1" id="zmb-Nw-TEX"/>
                         </constraints>
                     </view>
+                    <view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="xws-BR-H47">
+                        <rect key="frame" x="10" y="10" width="60" height="60"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+                        <constraints>
+                            <constraint firstAttribute="width" constant="60" id="3OW-3y-Rg7"/>
+                            <constraint firstAttribute="width" secondItem="xws-BR-H47" secondAttribute="height" multiplier="1:1" id="bEP-hL-5lg"/>
+                        </constraints>
+                    </view>
                     <view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Q6g-b0-3sZ">
-                        <rect key="frame" x="90" y="5" width="0.0" height="20"/>
+                        <rect key="frame" x="80" y="5" width="0.0" height="20"/>
                         <subviews>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="2" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZUZ-tv-dVV">
                                 <rect key="frame" x="-4" y="2" width="9" height="17"/>
@@ -55,27 +55,27 @@
                         </constraints>
                     </view>
                     <imageView hidden="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="e2e_verified.png" translatesAutoresizingMaskIntoConstraints="NO" id="5Yd-df-HbB">
-                        <rect key="frame" x="63" y="55" width="15" height="18"/>
+                        <rect key="frame" x="53" y="55" width="15" height="18"/>
                         <constraints>
                             <constraint firstAttribute="height" constant="18" id="UEZ-5S-KMf"/>
                             <constraint firstAttribute="width" constant="15" id="bbS-D2-SZi"/>
                         </constraints>
                     </imageView>
                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="251" text="RoomTitle" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="oxX-IL-dG4">
-                        <rect key="frame" x="4" y="80" width="82" height="21"/>
+                        <rect key="frame" x="4" y="74" width="72" height="21"/>
                         <accessibility key="accessibilityConfiguration" identifier="TitleLabel"/>
                         <constraints>
                             <constraint firstAttribute="height" constant="21" id="WA1-mL-sFU"/>
                         </constraints>
-                        <fontDescription key="fontDescription" type="system" weight="medium" pointSize="15"/>
+                        <fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
                         <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <nil key="highlightedColor"/>
                     </label>
                 </subviews>
             </view>
             <constraints>
                 <constraint firstAttribute="trailing" secondItem="5Yd-df-HbB" secondAttribute="trailing" constant="12" id="0gr-xn-dfD"/>
-                <constraint firstAttribute="bottom" secondItem="oxX-IL-dG4" secondAttribute="bottom" constant="9" id="1JB-d1-zb9"/>
+                <constraint firstAttribute="bottom" secondItem="oxX-IL-dG4" secondAttribute="bottom" constant="5" id="1JB-d1-zb9"/>
                 <constraint firstItem="oxX-IL-dG4" firstAttribute="leading" secondItem="eCk-zY-LXq" secondAttribute="leading" constant="4" id="6gu-JD-Gb1"/>
                 <constraint firstItem="xws-BR-H47" firstAttribute="centerX" secondItem="T1Q-RS-8o6" secondAttribute="centerX" id="Lo3-Ov-Bw8"/>
                 <constraint firstAttribute="trailing" secondItem="Q6g-b0-3sZ" secondAttribute="trailing" id="Mf1-H6-oH4"/>