diff --git a/Pollo/Views/Cards/MCResultCell.swift b/Pollo/Views/Cards/MCResultCell.swift index 283d3508..be34880d 100644 --- a/Pollo/Views/Cards/MCResultCell.swift +++ b/Pollo/Views/Cards/MCResultCell.swift @@ -17,13 +17,13 @@ class MCResultCell: UICollectionViewCell { private let highlightView = UIView() private let numSelectedLabel = UILabel() private let optionLabel = UILabel() + private let percentSelectedLabel = UILabel() private let selectedDotView = UIView() private let selectedImageView = UIImageView() // MARK: - Data vars var correctAnswer: String? var didLayoutConstraints = false - var highlightViewWidthConstraint: Constraint! var index: Int! var percentSelected: Float! var showCorrectAnswer = false @@ -34,7 +34,6 @@ class MCResultCell: UICollectionViewCell { let containerViewBorderWidth: CGFloat = 0.3 let containerViewCornerRadius: CGFloat = 3 let containerViewHeight: CGFloat = 46 - let containerViewTopPadding: CGFloat = 8 let correctImageName = "correct" let dotViewBorderWidth: CGFloat = 2 let dotViewLength: CGFloat = 23 @@ -42,11 +41,11 @@ class MCResultCell: UICollectionViewCell { let highlightViewCornerRadius: CGFloat = 8 let horizontalPadding: CGFloat = 12 let incorrectImageName = "incorrect" - let labelFontSize: CGFloat = 13 - let numSelectedLabelTrailingPadding: CGFloat = 16 - let numSelectedLabelWidth: CGFloat = 40 - let selectedImageViewLength: CGFloat = 17 + let numPercentSelectedTrailingPadding: CGFloat = 58 + let numSelectedLabelTopPadding: CGFloat = 23 + let percentSelectedLabelTopPadding: CGFloat = 38 let selectedDotViewLength: CGFloat = 15 + let selectedImageViewLength: CGFloat = 17 override init(frame: CGRect) { super.init(frame: frame) @@ -57,10 +56,24 @@ class MCResultCell: UICollectionViewCell { // MARK: - Layout func setupViews() { + + dotView.clipsToBounds = true + dotView.layer.cornerRadius = dotViewLength / 2 + dotView.backgroundColor = .white + dotView.layer.borderColor = UIColor.blueGrey.cgColor + dotView.layer.borderWidth = dotViewBorderWidth + contentView.addSubview(dotView) + + selectedDotView.clipsToBounds = true + selectedDotView.layer.cornerRadius = selectedDotViewLength / 2 + contentView.addSubview(selectedDotView) + + contentView.addSubview(selectedImageView) + containerView.clipsToBounds = true containerView.layer.borderColor = UIColor.mediumGrey2.cgColor contentView.addSubview(containerView) - + highlightView.layer.cornerRadius = highlightViewCornerRadius highlightView.clipsToBounds = true highlightView.layer.borderWidth = highlightViewBorderWidth @@ -73,67 +86,37 @@ class MCResultCell: UICollectionViewCell { containerView.addSubview(optionLabel) numSelectedLabel.font = ._14MediumFont - numSelectedLabel.backgroundColor = .clear - numSelectedLabel.textAlignment = .right + numSelectedLabel.textAlignment = .center numSelectedLabel.textColor = .black - containerView.addSubview(numSelectedLabel) - - dotView.clipsToBounds = true - dotView.layer.cornerRadius = dotViewLength / 2 - dotView.backgroundColor = .white - dotView.layer.borderColor = UIColor.blueGrey.cgColor - dotView.layer.borderWidth = dotViewBorderWidth - contentView.addSubview(dotView) - - selectedDotView.clipsToBounds = true - selectedDotView.layer.cornerRadius = selectedDotViewLength / 2 - contentView.addSubview(selectedDotView) + contentView.addSubview(numSelectedLabel) - contentView.addSubview(selectedImageView) + percentSelectedLabel.font = ._12SemiboldFont + percentSelectedLabel.textAlignment = .center + percentSelectedLabel.textColor = .blueGrey + contentView.addSubview(percentSelectedLabel) } override func updateConstraints() { guard let optionLabelText = optionLabel.text else { return } let optionLabelWidth = optionLabelText.width(withConstrainedHeight: bounds.height, font: optionLabel.font) - let maxWidth = bounds.width - numSelectedLabelWidth - horizontalPadding * 4 + let maxWidth = bounds.width - horizontalPadding - numPercentSelectedTrailingPadding - // If we already layed out constraints before, we should only update the + // If we already laid out constraints before, we should only update the // highlightView width constraint if didLayoutConstraints { let useMaxWidth = optionLabelWidth >= maxWidth || !showCorrectAnswer optionLabel.snp.updateConstraints { make in make.width.equalTo(useMaxWidth ? maxWidth : optionLabelWidth) } - let highlightViewMaxWidth = Float(self.contentView.bounds.width - horizontalPadding * 2) - self.highlightViewWidthConstraint?.update(offset: highlightViewMaxWidth * self.percentSelected) + highlightView.snp.remakeConstraints { make in + make.leading.top.bottom.equalToSuperview() + make.width.equalToSuperview().multipliedBy(self.percentSelected) + } super.updateConstraints() return } didLayoutConstraints = true - containerView.snp.makeConstraints { make in - make.leading.equalToSuperview().offset(horizontalPadding + (userRole == .admin ? 0 : horizontalPadding + dotViewLength)) - make.trailing.equalToSuperview().inset(horizontalPadding) - make.height.equalTo(containerViewHeight) - make.bottom.equalToSuperview() - } - - numSelectedLabel.snp.makeConstraints { make in - make.centerY.equalToSuperview() - make.trailing.equalToSuperview().inset(numSelectedLabelTrailingPadding) - make.width.equalTo(numSelectedLabelWidth) - } - - optionLabel.snp.makeConstraints { make in - make.leading.equalToSuperview().offset(horizontalPadding) - make.trailing.equalToSuperview().inset(horizontalPadding) - make.centerY.equalToSuperview() - if showCorrectAnswer { - make.width.equalTo(optionLabelWidth >= maxWidth ? maxWidth : optionLabelWidth) - } else { - make.width.equalTo(maxWidth) - } - } dotView.snp.makeConstraints { make in make.width.height.equalTo(dotViewLength) @@ -150,75 +133,105 @@ class MCResultCell: UICollectionViewCell { make.width.height.equalTo(selectedImageViewLength) make.center.equalTo(dotView) } + + containerView.snp.makeConstraints { make in + make.leading.equalToSuperview().offset(horizontalPadding + (userRole == .admin ? 0 : horizontalPadding + dotViewLength)) + make.trailing.equalToSuperview().inset(numPercentSelectedTrailingPadding) + make.height.equalTo(containerViewHeight) + make.bottom.equalToSuperview() + } + + optionLabel.snp.makeConstraints { make in + make.leading.equalToSuperview().offset(horizontalPadding) + make.trailing.equalToSuperview().inset(horizontalPadding) + make.centerY.equalToSuperview() + if showCorrectAnswer { + make.width.equalTo(optionLabelWidth >= maxWidth ? maxWidth : optionLabelWidth) + } else { + make.width.equalTo(maxWidth) + } + } highlightView.snp.makeConstraints { make in make.leading.top.bottom.equalToSuperview() make.width.equalToSuperview().multipliedBy(percentSelected) } + + numSelectedLabel.snp.makeConstraints { make in + make.top.equalToSuperview().inset(numSelectedLabelTopPadding) + make.leading.equalTo(containerView.snp.trailing).inset(horizontalPadding/3) + make.trailing.equalToSuperview().inset(horizontalPadding/3) + } + percentSelectedLabel.snp.makeConstraints { make in + make.top.equalToSuperview().inset(percentSelectedLabelTopPadding) + make.leading.equalTo(containerView.snp.trailing).offset(horizontalPadding/3) + make.trailing.equalToSuperview().inset(horizontalPadding/3) + } super.updateConstraints() } // MARK: - Configure func configure(for resultModel: MCResultModel, userRole: UserRole, correctAnswer: String?) { - optionLabel.text = resultModel.option - percentSelected = resultModel.percentSelected - numSelectedLabel.text = "\(Int(percentSelected * 100))%" self.correctAnswer = correctAnswer self.userRole = userRole - let answer = intToMCOption(resultModel.choiceIndex) - switch userRole { - case .admin: - containerView.backgroundColor = correctAnswer == answer ? .lightGreen : .lightGrey - containerView.layer.borderWidth = containerViewBorderWidth - containerView.layer.cornerRadius = containerViewCornerRadius - highlightView.isHidden = true - numSelectedLabel.isHidden = false - dotView.isHidden = true - optionLabel.textColor = .black - case .member: - containerView.backgroundColor = .clear - containerView.layer.borderWidth = highlightViewBorderWidth - containerView.layer.cornerRadius = highlightViewCornerRadius - optionLabel.textColor = .mediumGrey - numSelectedLabel.isHidden = true - dotView.isHidden = false - let isSelected = resultModel.isSelected - selectedDotView.isHidden = !isSelected - selectedImageView.isHidden = selectedDotView.isHidden - if let correctAnswer = correctAnswer, !correctAnswer.isEmpty { - if answer == correctAnswer { - if isSelected { - selectedDotView.backgroundColor = .clear - selectedImageView.image = UIImage(named: correctImageName) - } - showCorrectAnswer = true - highlightView.backgroundColor = .lightGreen - highlightView.layer.borderColor = UIColor.polloGreen.cgColor - } else { - if isSelected { - selectedDotView.backgroundColor = .clear - selectedImageView.image = UIImage(named: incorrectImageName) - } - highlightView.backgroundColor = .lightGrey - highlightView.layer.borderColor = UIColor.coolGrey.cgColor - } - } else { - if isSelected { - selectedDotView.backgroundColor = .coolGrey - selectedImageView.image = nil - } - highlightView.backgroundColor = .lightGrey - highlightView.layer.borderColor = UIColor.coolGrey.cgColor + + numSelectedLabel.text = "\(resultModel.numSelected)" + + optionLabel.text = resultModel.option + optionLabel.textColor = userRole == .admin ? .black : .mediumGrey + + percentSelected = resultModel.percentSelected + percentSelectedLabel.text = "(\(Int(percentSelected * 100))%)" + + dotView.isHidden = userRole == .admin + + containerView.backgroundColor = .clear + containerView.layer.borderWidth = highlightViewBorderWidth + containerView.layer.cornerRadius = highlightViewCornerRadius + + // Setup default MC visuals + let isSelected = resultModel.isSelected + selectedDotView.isHidden = !isSelected + selectedDotView.backgroundColor = .coolGrey + + selectedImageView.isHidden = selectedDotView.isHidden + selectedImageView.image = nil + + highlightView.backgroundColor = .lightGrey + highlightView.layer.borderColor = UIColor.coolGrey.cgColor + + // Override default visuals when there is correct answer + if let correctAnswer = correctAnswer, !correctAnswer.isEmpty { + let answer = intToMCOption(resultModel.choiceIndex) + let selectedCorrectAnswer = answer == correctAnswer + if selectedCorrectAnswer { + showCorrectAnswer = true + + containerView.layer.borderColor = UIColor.polloGreen.cgColor + containerView.layer.borderWidth = 1.5 + + highlightView.backgroundColor = .lightGreen + highlightView.layer.borderColor = UIColor.polloGreen.cgColor + highlightView.layer.borderWidth = 1.5 + } + if isSelected { + selectedDotView.backgroundColor = .clear + selectedImageView.image = UIImage(named: selectedCorrectAnswer ? correctImageName : incorrectImageName) } } } // MARK: - Updates func update(with resultModel: MCResultModel, correctAnswer: String?) { + numSelectedLabel.text = "\(resultModel.numSelected)" + optionLabel.text = resultModel.option + percentSelected = resultModel.percentSelected - numSelectedLabel.text = "\(Int(percentSelected * 100))%" + percentSelectedLabel.text = "(\(Int(percentSelected * 100))%)" + + updateConstraints() } override func prepareForReuse() { diff --git a/Pollo/Views/Cards/PollMiscellaneousCell.swift b/Pollo/Views/Cards/PollMiscellaneousCell.swift index 5e82edf6..4f1e5f35 100644 --- a/Pollo/Views/Cards/PollMiscellaneousCell.swift +++ b/Pollo/Views/Cards/PollMiscellaneousCell.swift @@ -22,7 +22,6 @@ class PollMiscellaneousCell: UICollectionViewCell { let descriptionLabelXPadding: CGFloat = 10 let endedTextMember = "Poll Closed" let iconImageViewLength: CGFloat = 15 - let labelFontSize: CGFloat = 12 let liveEndedDescriptionTextAdmin = "Only you can see results" let liveOpenTextMember = "Open for responses" let liveSubmittedTextMember = "Submitted! Tap other answers to change" @@ -47,12 +46,12 @@ class PollMiscellaneousCell: UICollectionViewCell { descriptionLabel = UILabel() descriptionLabel.textColor = .blueGrey - descriptionLabel.font = UIFont.systemFont(ofSize: labelFontSize, weight: .semibold) + descriptionLabel.font = ._12SemiboldFont contentView.addSubview(descriptionLabel) totalResponsesLabel = UILabel() totalResponsesLabel.textColor = .blueGrey - totalResponsesLabel.font = UIFont.systemFont(ofSize: labelFontSize, weight: .semibold) + totalResponsesLabel.font = ._12SemiboldFont contentView.addSubview(totalResponsesLabel) }