Emoji picker: Implement cell and header view.

2026-04-21 09:02:44 +02:00 · 2019-07-25 16:39:29 +02:00
parent cb57c5a832
commit 5763988d66
4 changed files with 231 additions and 0 deletions
@@ -0,0 +1,36 @@
+/*
+ Copyright 2019 New Vector Ltd
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import UIKit
+import Reusable
+
+final class EmojiPickerHeaderView: UICollectionReusableView, NibReusable {
+    
+    // MARK: - Properties
+    
+    @IBOutlet private weak var titleLabel: UILabel!
+    
+    // MARK: - Public
+    
+    func update(theme: Theme) {
+        self.backgroundColor = theme.backgroundColor
+        self.titleLabel.textColor = theme.headerTextPrimaryColor
+    }
+    
+    func fill(with title: String) {
+        titleLabel.text = title
+    }
+}
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina6_1" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <collectionReusableView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="EmojiPickerHeaderView" id="U6b-Vx-4bR" customClass="EmojiPickerHeaderView" customModule="Riot" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="320" height="50"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <subviews>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wrW-Gv-YJV">
+                    <rect key="frame" x="20" y="8" width="280" height="34"/>
+                    <fontDescription key="fontDescription" type="system" weight="medium" pointSize="15"/>
+                    <nil key="textColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <constraints>
+                <constraint firstAttribute="bottom" secondItem="wrW-Gv-YJV" secondAttribute="bottom" constant="8" id="D7a-Br-Vlz"/>
+                <constraint firstItem="wrW-Gv-YJV" firstAttribute="top" secondItem="U6b-Vx-4bR" secondAttribute="top" constant="8" id="IGK-ta-CnU"/>
+                <constraint firstItem="wrW-Gv-YJV" firstAttribute="leading" secondItem="VXr-Tz-HHm" secondAttribute="leading" constant="20" id="T3V-4C-3Qu"/>
+                <constraint firstItem="VXr-Tz-HHm" firstAttribute="trailing" secondItem="wrW-Gv-YJV" secondAttribute="trailing" constant="20" id="wSZ-15-Co2"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="VXr-Tz-HHm"/>
+            <connections>
+                <outlet property="titleLabel" destination="wrW-Gv-YJV" id="wYw-xg-hha"/>
+            </connections>
+            <point key="canvasLocation" x="-404" y="-81"/>
+        </collectionReusableView>
+    </objects>
+</document>
@@ -0,0 +1,101 @@
+/*
+ Copyright 2019 New Vector Ltd
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import UIKit
+import Reusable
+
+final class EmojiPickerViewCell: UICollectionViewCell, NibReusable, Themable {
+
+    // MARK: - Constants
+    
+    private enum Constants {
+        static let selectedBorderWidth: CGFloat = 1.0
+        static let selectedBackgroundRadius: CGFloat = 5.0
+        static let emojiHighlightedAlpha: CGFloat = 0.3
+    }
+    
+    // MARK: - Properties
+    
+    // MARK: Outlets
+    
+    @IBOutlet private weak var reactionBackgroundView: UIView!
+    @IBOutlet private weak var emojiLabel: UILabel!
+    
+    // MARK: Private
+    
+    private var theme: Theme?
+    
+    // MARK: Public
+    
+    private var isReactionSelected: Bool = false
+    
+    override var isHighlighted: Bool {
+        didSet {
+            self.emojiLabel.alpha = isHighlighted ? Constants.emojiHighlightedAlpha : 1.0
+        }
+    }
+    
+    // MARK: - Life cycle
+    
+    override func awakeFromNib() {
+        super.awakeFromNib()
+        // Initialization code
+        
+        self.reactionBackgroundView.layer.masksToBounds = true
+    }
+    
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        
+        self.reactionBackgroundView.layer.cornerRadius = self.reactionBackgroundView.frame.width/4.0
+    }
+    
+    // MARK: - Public
+    
+    func fill(viewData: EmojiPickerItemViewData) {
+        self.emojiLabel.text = viewData.emoji
+        self.isReactionSelected = viewData.isSelected
+        
+        self.updateViews()
+    }
+    
+    func update(theme: Theme) {
+        self.theme = theme
+        self.reactionBackgroundView.layer.borderColor = theme.tintColor.cgColor
+        self.emojiLabel.textColor = theme.textPrimaryColor
+        self.updateViews()
+    }
+    
+    // MARK: - Private
+    
+    private func updateViews() {
+        
+        let reactionBackgroundColor: UIColor?
+        let reactionBackgroundBorderWidth: CGFloat
+        
+        if self.isReactionSelected {
+            reactionBackgroundColor = self.theme?.tintBackgroundColor
+            reactionBackgroundBorderWidth = Constants.selectedBorderWidth
+        } else {
+            reactionBackgroundColor = self.theme?.headerBackgroundColor
+            reactionBackgroundBorderWidth = 0.0
+        }
+        
+        self.reactionBackgroundView.layer.borderWidth = reactionBackgroundBorderWidth
+        self.reactionBackgroundView.backgroundColor = reactionBackgroundColor
+    }
+
+}
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina6_1" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <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="gTV-IL-0wX" customClass="EmojiPickerViewCell" customModule="Riot" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
+                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Sam-a3-I0s">
+                        <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                        <subviews>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="👍" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9GU-d6-Cnv">
+                                <rect key="frame" x="6" y="4" width="38" height="42"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="30"/>
+                                <nil key="textColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" red="0.95294117649999999" green="0.97254901959999995" blue="0.99215686270000003" alpha="1" colorSpace="calibratedRGB"/>
+                        <constraints>
+                            <constraint firstItem="9GU-d6-Cnv" firstAttribute="top" secondItem="Sam-a3-I0s" secondAttribute="top" constant="4" id="T08-V8-wu1"/>
+                            <constraint firstAttribute="bottom" secondItem="9GU-d6-Cnv" secondAttribute="bottom" constant="4" id="dgR-Un-bnz"/>
+                            <constraint firstAttribute="trailing" secondItem="9GU-d6-Cnv" secondAttribute="trailing" constant="6" id="gnQ-6e-N8Y"/>
+                            <constraint firstItem="9GU-d6-Cnv" firstAttribute="leading" secondItem="Sam-a3-I0s" secondAttribute="leading" constant="6" id="wHy-AN-9GI"/>
+                        </constraints>
+                    </view>
+                </subviews>
+            </view>
+            <constraints>
+                <constraint firstAttribute="trailing" secondItem="Sam-a3-I0s" secondAttribute="trailing" id="5FI-St-rx2"/>
+                <constraint firstItem="Sam-a3-I0s" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="Oge-ZF-LX9"/>
+                <constraint firstAttribute="bottom" secondItem="Sam-a3-I0s" secondAttribute="bottom" id="f0f-GW-KI4"/>
+                <constraint firstItem="Sam-a3-I0s" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="vze-ak-cqC"/>
+            </constraints>
+            <viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
+            <connections>
+                <outlet property="emojiLabel" destination="9GU-d6-Cnv" id="5kc-lg-TpL"/>
+                <outlet property="reactionBackgroundView" destination="Sam-a3-I0s" id="x8I-E5-BRG"/>
+            </connections>
+        </collectionViewCell>
+    </objects>
+</document>