mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-29 07:42:40 +00:00
Create BubbleReactionViewCell
This commit is contained in:
parent
2d118853a7
commit
e5d8910a92
3 changed files with 199 additions and 0 deletions
107
Riot/Modules/Room/BubbleReactions/BubbleReactionViewCell.swift
Normal file
107
Riot/Modules/Room/BubbleReactions/BubbleReactionViewCell.swift
Normal file
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
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 BubbleReactionViewCell: UICollectionViewCell, NibReusable, Themable {
|
||||
|
||||
// MARK: - Constants
|
||||
|
||||
private enum Constants {
|
||||
static let selectedBorderWidth: CGFloat = 1.0
|
||||
}
|
||||
|
||||
// MARK: - Properties
|
||||
|
||||
// MARK: Outlets
|
||||
|
||||
@IBOutlet private weak var reactionBackgroundView: UIView!
|
||||
@IBOutlet private weak var emojiLabel: UILabel!
|
||||
@IBOutlet private weak var countLabel: UILabel!
|
||||
|
||||
// MARK: Private
|
||||
|
||||
private var theme: Theme?
|
||||
|
||||
// MARK: Public
|
||||
|
||||
private var isReactionSelected: Bool = false
|
||||
|
||||
// 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.size.height/2.0
|
||||
}
|
||||
|
||||
override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
|
||||
if #available(iOS 12.0, *) {
|
||||
/*
|
||||
On iOS 12, there are issues with self-sizing cells as described in Apple release notes (https://developer.apple.com/documentation/ios_release_notes/ios_12_release_notes) :
|
||||
"You might encounter issues with systemLayoutSizeFitting(_:) when using a UICollectionViewCell subclass that requires updateConstraints().
|
||||
(42138227) — Workaround: Don't call the cell's setNeedsUpdateConstraints() method unless you need to support live constraint changes.
|
||||
If you need to support live constraint changes, call updateConstraintsIfNeeded() before calling systemLayoutSizeFitting(_:)."
|
||||
*/
|
||||
self.updateConstraintsIfNeeded()
|
||||
}
|
||||
return super.preferredLayoutAttributesFitting(layoutAttributes)
|
||||
}
|
||||
|
||||
// MARK: - Public
|
||||
|
||||
func fill(viewData: BubbleReactionViewData) {
|
||||
self.emojiLabel.text = viewData.emoji
|
||||
self.countLabel.text = viewData.countString
|
||||
self.isReactionSelected = viewData.isCurrentUserReacted
|
||||
|
||||
self.updateViews()
|
||||
}
|
||||
|
||||
func update(theme: Theme) {
|
||||
self.theme = theme
|
||||
self.reactionBackgroundView.layer.borderColor = self.theme?.reactionButtonSelectedBorderColor.cgColor
|
||||
self.countLabel.textColor = self.theme?.textPrimaryColor
|
||||
self.updateViews()
|
||||
}
|
||||
|
||||
// MARK: - Private
|
||||
|
||||
private func updateViews() {
|
||||
|
||||
let reactionBackgroundColor: UIColor?
|
||||
let reactionBackgroundBorderWidth: CGFloat
|
||||
|
||||
if self.isReactionSelected {
|
||||
reactionBackgroundColor = self.theme?.reactionButtonSelectedBackgroundColor
|
||||
reactionBackgroundBorderWidth = Constants.selectedBorderWidth
|
||||
} else {
|
||||
reactionBackgroundColor = self.theme?.headerBackgroundColor
|
||||
reactionBackgroundBorderWidth = 0.0
|
||||
}
|
||||
|
||||
self.reactionBackgroundView.layer.borderWidth = reactionBackgroundBorderWidth
|
||||
self.reactionBackgroundView.backgroundColor = reactionBackgroundColor
|
||||
}
|
||||
}
|
69
Riot/Modules/Room/BubbleReactions/BubbleReactionViewCell.xib
Normal file
69
Riot/Modules/Room/BubbleReactions/BubbleReactionViewCell.xib
Normal file
|
@ -0,0 +1,69 @@
|
|||
<?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="BubbleReactionViewCell" customModule="Riot" customModuleProvider="target">
|
||||
<rect key="frame" x="0.0" y="0.0" width="66" height="22"/>
|
||||
<autoresizingMask key="autoresizingMask"/>
|
||||
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
|
||||
<rect key="frame" x="0.0" y="0.0" width="66" height="22"/>
|
||||
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
|
||||
<subviews>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jjn-uq-kYN">
|
||||
<rect key="frame" x="0.0" y="0.0" width="66" height="22"/>
|
||||
<subviews>
|
||||
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" text="👍" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="gyn-ux-gmi">
|
||||
<rect key="frame" x="6" y="4" width="26" height="14"/>
|
||||
<fontDescription key="fontDescription" type="system" pointSize="11"/>
|
||||
<nil key="textColor"/>
|
||||
<nil key="highlightedColor"/>
|
||||
</label>
|
||||
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="230" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="DQc-oh-Wus">
|
||||
<rect key="frame" x="34" y="4" width="26" height="14"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" relation="lessThanOrEqual" constant="26" id="qaD-Xb-kVP"/>
|
||||
</constraints>
|
||||
<fontDescription key="fontDescription" type="system" pointSize="12"/>
|
||||
<nil key="textColor"/>
|
||||
<nil key="highlightedColor"/>
|
||||
</label>
|
||||
</subviews>
|
||||
<color key="backgroundColor" red="0.95294117647058818" green="0.97254901960784312" blue="0.99215686274509807" alpha="1" colorSpace="calibratedRGB"/>
|
||||
<constraints>
|
||||
<constraint firstItem="DQc-oh-Wus" firstAttribute="centerY" secondItem="gyn-ux-gmi" secondAttribute="centerY" id="E1I-l3-qql"/>
|
||||
<constraint firstItem="gyn-ux-gmi" firstAttribute="leading" secondItem="jjn-uq-kYN" secondAttribute="leading" constant="6" id="OZ2-Xd-9f3"/>
|
||||
<constraint firstItem="gyn-ux-gmi" firstAttribute="top" secondItem="jjn-uq-kYN" secondAttribute="top" constant="4" id="et3-mn-8dh"/>
|
||||
<constraint firstAttribute="trailing" secondItem="DQc-oh-Wus" secondAttribute="trailing" constant="6" id="oJE-06-g5e"/>
|
||||
<constraint firstAttribute="bottom" secondItem="gyn-ux-gmi" secondAttribute="bottom" constant="4" id="thv-mo-0kv"/>
|
||||
<constraint firstItem="DQc-oh-Wus" firstAttribute="leading" secondItem="gyn-ux-gmi" secondAttribute="trailing" constant="2" id="y7s-iU-ycf"/>
|
||||
</constraints>
|
||||
</view>
|
||||
</subviews>
|
||||
</view>
|
||||
<constraints>
|
||||
<constraint firstItem="jjn-uq-kYN" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" id="E5H-9a-us9"/>
|
||||
<constraint firstAttribute="bottom" secondItem="jjn-uq-kYN" secondAttribute="bottom" id="Ggm-1f-3EB"/>
|
||||
<constraint firstItem="jjn-uq-kYN" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" id="iT6-rk-qd6"/>
|
||||
<constraint firstAttribute="trailing" secondItem="jjn-uq-kYN" secondAttribute="trailing" id="ztM-7J-Dnf"/>
|
||||
</constraints>
|
||||
<viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
|
||||
<size key="customSize" width="443" height="170"/>
|
||||
<connections>
|
||||
<outlet property="countLabel" destination="DQc-oh-Wus" id="GZt-aS-umB"/>
|
||||
<outlet property="emojiLabel" destination="gyn-ux-gmi" id="qme-DX-UAc"/>
|
||||
<outlet property="reactionBackgroundView" destination="jjn-uq-kYN" id="Q0x-Np-wEa"/>
|
||||
</connections>
|
||||
<point key="canvasLocation" x="-459.4202898550725" y="-207.58928571428569"/>
|
||||
</collectionViewCell>
|
||||
</objects>
|
||||
</document>
|
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
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 Foundation
|
||||
|
||||
struct BubbleReactionViewData {
|
||||
let emoji: String
|
||||
let countString: String
|
||||
let isCurrentUserReacted: Bool
|
||||
}
|
Loading…
Reference in a new issue