open-source / warply_sdk_framework

Go to a project
Toggle navigation Toggle navigation pinning
Manos Chorianopoulos
2956760b 1 parent 3e98e60e

redesign MFYViewController

Inline Side-by-side
Showing 5 changed files with 153 additions and 44 deletions
......@@ -37,8 +37,8 @@ import UIKit
public override func awakeFromNib() {
super.awakeFromNib()
inboxView.layer.cornerRadius = 5.0
inboxView.clipsToBounds = true
// inboxView.layer.cornerRadius = 5.0
// inboxView.clipsToBounds = true
newBadgeImage.image = UIImage(named: "new_icon_2", in: MyEmptyClass.resourceBundle(), compatibleWith: nil)
curvedBgImage.image = UIImage(named: "curved_bg_white_2", in: MyEmptyClass.resourceBundle(), compatibleWith: nil)
......@@ -57,6 +57,26 @@ import UIKit
//set the values for top,left,bottom,right margins
let margins = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
contentView.frame = contentView.frame.inset(by: margins)
// Add different corner radius - Do it here, otherwise it won't be applied to all cells
inboxView.roundCorners(topLeft: 20, topRight: 45, bottomLeft: 20, bottomRight: 0)
// Delete extra borderLayers added
for layer in (inboxView.layer.sublayers ?? []) {
if(layer.name == "MFYItemBorderLayer"){
layer.removeFromSuperlayer()
}
}
// Add borderLayer
let borderLayer = CAShapeLayer()
borderLayer.path = (inboxView.layer.mask! as! CAShapeLayer).path! // Reuse the Bezier path
borderLayer.strokeColor = UIColor(red: 0.90, green: 0.90, blue: 0.90, alpha: 1.00).cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = 1
borderLayer.frame = inboxView.bounds
borderLayer.name = "MFYItemBorderLayer"
inboxView.layer.addSublayer(borderLayer)
}
......@@ -65,11 +85,11 @@ import UIKit
self.postImageURL = campaign.logo_url ?? ""
campaignTitleLabel.text = campaign.title ?? ""
campaignTitleLabel.font = UIFont(name: "PFSquareSansPro-BoldItalic", size: 18)
campaignTitleLabel.font = UIFont(name: "BTCosmo-Bold", size: 17)
subtitleLabel.text = campaign.subtitle ?? ""
subtitleLabel.font = UIFont(name: "PFSquareSansPro-Regular", size: 16)
subtitleLabel.font = UIFont(name: "PeridotPE-Regular", size: 15)
descriptionLabel.text = campaign.message ?? ""
descriptionLabel.font = UIFont(name: "PFSquareSansPro-Bold", size: 14)
descriptionLabel.font = UIFont(name: "PeridotPE-SBold", size: 15)
if (campaign.is_new == true) {
newBadgeImage.isHidden = false
......@@ -83,11 +103,11 @@ import UIKit
self.postImageURL = ccms._imageUrl
campaignTitleLabel.text = ccms._title
campaignTitleLabel.font = UIFont(name: "PFSquareSansPro-BoldItalic", size: 18)
campaignTitleLabel.font = UIFont(name: "BTCosmo-Bold", size: 17)
subtitleLabel.text = ccms._subtitle
subtitleLabel.font = UIFont(name: "PFSquareSansPro-Regular", size: 16)
subtitleLabel.font = UIFont(name: "PeridotPE-Regular", size: 15)
descriptionLabel.text = ccms._description
descriptionLabel.font = UIFont(name: "PFSquareSansPro-Bold", size: 14)
descriptionLabel.font = UIFont(name: "PeridotPE-SBold", size: 15)
newBadgeImage.isHidden = true
}
......
......@@ -54,30 +54,30 @@ import SwiftEventBus
// tableView.clipsToBounds = true
// tableView.layer.cornerRadius = 30
// tableView.layer.maskedCorners = [ .layerMinXMinYCorner] // Top left corner radius
tableView.contentInset.top = 50
tableView.contentInset.top = 10
// Add Top left corner radius
// mainView.clipsToBounds = true
// mainView.layer.cornerRadius = 30
// mainView.layer.maskedCorners = [ .layerMinXMinYCorner] // Top left corner radius
mainView.backgroundColor = UIColor(red: 0.22, green: 0.32, blue: 0.40, alpha: 1.00)
mainView.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
let image = UIImage(named: "top_border_shadow", in: MyEmptyClass.resourceBundle(), compatibleWith: nil)!
var aspectR: CGFloat = 0.0
aspectR = image.size.width/image.size.height
topBorderShadow.translatesAutoresizingMaskIntoConstraints = false
topBorderShadow.image = image
topBorderShadow.contentMode = .scaleAspectFill
NSLayoutConstraint.activate([
topBorderShadow.topAnchor.constraint(equalTo: mainView.topAnchor, constant: 0),
topBorderShadow.leadingAnchor.constraint(equalTo: mainView.leadingAnchor, constant: 0),
topBorderShadow.trailingAnchor.constraint(equalTo: mainView.trailingAnchor, constant: 0),
topBorderShadow.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width),
topBorderShadow.heightAnchor.constraint(equalTo: topBorderShadow.widthAnchor, multiplier: 1/aspectR)
])
// let image = UIImage(named: "top_border_shadow", in: MyEmptyClass.resourceBundle(), compatibleWith: nil)!
// var aspectR: CGFloat = 0.0
//
// aspectR = image.size.width/image.size.height
//
// topBorderShadow.translatesAutoresizingMaskIntoConstraints = false
// topBorderShadow.image = image
// topBorderShadow.contentMode = .scaleAspectFill
//
// NSLayoutConstraint.activate([
// topBorderShadow.topAnchor.constraint(equalTo: mainView.topAnchor, constant: 0),
// topBorderShadow.leadingAnchor.constraint(equalTo: mainView.leadingAnchor, constant: 0),
// topBorderShadow.trailingAnchor.constraint(equalTo: mainView.trailingAnchor, constant: 0),
// topBorderShadow.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width),
// topBorderShadow.heightAnchor.constraint(equalTo: topBorderShadow.widthAnchor, multiplier: 1/aspectR)
// ])
}
......@@ -211,8 +211,8 @@ extension MFYViewController: UITableViewDelegate, UITableViewDataSource{
view.backgroundColor = .clear
let titleLabel = UILabel(frame: CGRect(x: 20, y: 5, width: view.frame.width - 20, height: 43))
titleLabel.font = UIFont(name: "PFSquareSansPro-Bold", size: 21)
titleLabel.textColor = UIColor(rgb: 0xF4F4F4)
titleLabel.font = UIFont(name: "BTCosmo-Bold", size: 15)
titleLabel.textColor = UIColor(rgb: 0x212121)
titleLabel.text = categories[section].name
view.addSubview(titleLabel)
......
......@@ -245,30 +245,30 @@
<rect key="frame" x="20" y="0.0" width="374" height="118.5"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="rO0-9o-lPR">
<rect key="frame" x="198" y="0.0" width="176" height="118.5"/>
<rect key="frame" x="179.5" y="0.0" width="194.5" height="118.5"/>
</imageView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="wwZ-Gb-7yh" userLabel="InfoView">
<rect key="frame" x="0.0" y="0.0" width="299" height="118.5"/>
<rect key="frame" x="0.0" y="0.0" width="280.5" height="118.5"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="curved_bg_white" translatesAutoresizingMaskIntoConstraints="NO" id="VSX-eK-ySx">
<rect key="frame" x="0.0" y="0.0" width="299" height="118.5"/>
<rect key="frame" x="0.0" y="0.0" width="280.5" height="118.5"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="4" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZGH-0a-Rkp">
<rect key="frame" x="20" y="10" width="229" height="21"/>
<fontDescription key="fontDescription" name="PFSquareSansPro-BoldItalic" family="PF Square Sans Pro" pointSize="18"/>
<color key="textColor" red="0.22745098039215686" green="0.32156862745098036" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
<rect key="frame" x="20" y="10" width="210.5" height="20"/>
<fontDescription key="fontDescription" name="BTCosmo-Bold" family="BTCosmo" pointSize="17"/>
<color key="textColor" red="0.12941176470588234" green="0.12941176470588234" blue="0.12941176470588234" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="4" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lIv-wc-Oa8">
<rect key="frame" x="20" y="36" width="229" height="19"/>
<fontDescription key="fontDescription" name="PFSquareSansPro-Regular" family="PF Square Sans Pro" pointSize="16"/>
<color key="textColor" red="0.22745098039215686" green="0.32156862745098036" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
<rect key="frame" x="20" y="35" width="210.5" height="18.5"/>
<fontDescription key="fontDescription" name="PeridotPE-Regular" family="Peridot PE" pointSize="15"/>
<color key="textColor" red="0.12941176470588234" green="0.12941176470588234" blue="0.12941176470588234" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="4" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bmR-su-WJq">
<rect key="frame" x="20" y="92" width="229" height="16.5"/>
<fontDescription key="fontDescription" name="PFSquareSansPro-Bold" family="PF Square Sans Pro" pointSize="14"/>
<color key="textColor" red="0.22745098039215686" green="0.32156862745098036" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
<rect key="frame" x="20" y="90" width="210.5" height="18.5"/>
<fontDescription key="fontDescription" name="PeridotPE-SBold" family="Peridot PE" pointSize="15"/>
<color key="textColor" red="0.12941176470588234" green="0.12941176470588234" blue="0.12941176470588234" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
</subviews>
......@@ -295,10 +295,10 @@
<constraints>
<constraint firstAttribute="trailing" secondItem="rO0-9o-lPR" secondAttribute="trailing" id="1ML-M9-7re"/>
<constraint firstItem="wwZ-Gb-7yh" firstAttribute="leading" secondItem="gk0-7d-Ok4" secondAttribute="leading" id="4zX-6H-wCP"/>
<constraint firstItem="rO0-9o-lPR" firstAttribute="width" secondItem="gk0-7d-Ok4" secondAttribute="width" multiplier="0.47" id="Nx2-CC-7uS"/>
<constraint firstItem="rO0-9o-lPR" firstAttribute="width" secondItem="gk0-7d-Ok4" secondAttribute="width" multiplier="0.52" id="Nx2-CC-7uS"/>
<constraint firstAttribute="bottom" secondItem="wwZ-Gb-7yh" secondAttribute="bottom" id="R9h-bH-ljJ"/>
<constraint firstAttribute="bottom" secondItem="rO0-9o-lPR" secondAttribute="bottom" id="j9C-vp-fe1"/>
<constraint firstItem="wwZ-Gb-7yh" firstAttribute="width" secondItem="gk0-7d-Ok4" secondAttribute="width" multiplier="0.8" id="jgZ-ZW-oVV"/>
<constraint firstItem="wwZ-Gb-7yh" firstAttribute="width" secondItem="gk0-7d-Ok4" secondAttribute="width" multiplier="0.75" id="jgZ-ZW-oVV"/>
<constraint firstItem="rO0-9o-lPR" firstAttribute="top" secondItem="gk0-7d-Ok4" secondAttribute="top" id="qFk-ry-HF3"/>
<constraint firstItem="wwZ-Gb-7yh" firstAttribute="top" secondItem="gk0-7d-Ok4" secondAttribute="top" id="zzi-VV-ocs"/>
</constraints>
......@@ -339,11 +339,11 @@
<outlet property="delegate" destination="YRk-Az-LOb" id="xhM-mG-VTI"/>
</connections>
</tableView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" translatesAutoresizingMaskIntoConstraints="NO" id="8mV-zg-aKO">
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="8mV-zg-aKO">
<rect key="frame" x="0.0" y="420" width="414" height="11.5"/>
</imageView>
</subviews>
<color key="backgroundColor" red="0.21960784310000001" green="0.32156862749999998" blue="0.4039215686" alpha="1" colorSpace="calibratedRGB"/>
<color key="backgroundColor" red="0.94901960784313721" green="0.94901960784313721" blue="0.95294117647058818" alpha="1" colorSpace="calibratedRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="A8b-3b-5xc" secondAttribute="bottom" id="9LG-av-UIJ"/>
<constraint firstItem="A8b-3b-5xc" firstAttribute="top" secondItem="NSn-MS-EVn" secondAttribute="top" id="Gfl-IG-H5C"/>
......@@ -353,6 +353,11 @@
<constraint firstItem="8mV-zg-aKO" firstAttribute="top" secondItem="NSn-MS-EVn" secondAttribute="top" id="jVC-qs-cac"/>
<constraint firstAttribute="trailing" secondItem="8mV-zg-aKO" secondAttribute="trailing" id="zBg-nO-B4w"/>
</constraints>
<variation key="default">
<mask key="subviews">
<exclude reference="8mV-zg-aKO"/>
</mask>
</variation>
</view>
</subviews>
<viewLayoutGuide key="safeArea" id="THS-z4-i7u"/>
......
......@@ -523,3 +523,87 @@ class UnselectableTappableTextView: UITextView {
return false
}
}
extension UIBezierPath {
convenience init(shouldRoundRect rect: CGRect, topLeftRadius: CGSize = .zero, topRightRadius: CGSize = .zero, bottomLeftRadius: CGSize = .zero, bottomRightRadius: CGSize = .zero){
self.init()
let path = CGMutablePath()
let topLeft = rect.origin
let topRight = CGPoint(x: rect.maxX, y: rect.minY)
let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
if topLeftRadius != .zero{
path.move(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y))
} else {
path.move(to: CGPoint(x: topLeft.x, y: topLeft.y))
}
if topRightRadius != .zero{
path.addLine(to: CGPoint(x: topRight.x-topRightRadius.width, y: topRight.y))
path.addCurve(to: CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height), control1: CGPoint(x: topRight.x, y: topRight.y), control2:CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height))
} else {
path.addLine(to: CGPoint(x: topRight.x, y: topRight.y))
}
if bottomRightRadius != .zero{
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y-bottomRightRadius.height))
path.addCurve(to: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y), control1: CGPoint(x: bottomRight.x, y: bottomRight.y), control2: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y))
} else {
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y))
}
if bottomLeftRadius != .zero{
path.addLine(to: CGPoint(x: bottomLeft.x+bottomLeftRadius.width, y: bottomLeft.y))
path.addCurve(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height), control1: CGPoint(x: bottomLeft.x, y: bottomLeft.y), control2: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height))
} else {
path.addLine(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y))
}
if topLeftRadius != .zero{
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y+topLeftRadius.height))
path.addCurve(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y) , control1: CGPoint(x: topLeft.x, y: topLeft.y) , control2: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y))
} else {
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y))
}
path.closeSubpath()
cgPath = path
}
}
extension UIView{
func roundCorners(topLeft: CGFloat = 0, topRight: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0) {//(topLeft: CGFloat, topRight: CGFloat, bottomLeft: CGFloat, bottomRight: CGFloat) {
let topLeftRadius = CGSize(width: topLeft, height: topLeft)
let topRightRadius = CGSize(width: topRight, height: topRight)
let bottomLeftRadius = CGSize(width: bottomLeft, height: bottomLeft)
let bottomRightRadius = CGSize(width: bottomRight, height: bottomRight)
let maskPath = UIBezierPath(shouldRoundRect: bounds, topLeftRadius: topLeftRadius, topRightRadius: topRightRadius, bottomLeftRadius: bottomLeftRadius, bottomRightRadius: bottomRightRadius)
let shape = CAShapeLayer()
shape.path = maskPath.cgPath
layer.mask = shape
}
}
extension UIView {
func applyRadiusMaskFor(topLeft: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0, topRight: CGFloat = 0) {
let path = UIBezierPath()
path.move(to: CGPoint(x: bounds.width - topRight, y: 0))
path.addLine(to: CGPoint(x: topLeft, y: 0))
path.addQuadCurve(to: CGPoint(x: 0, y: topLeft), controlPoint: .zero)
path.addLine(to: CGPoint(x: 0, y: bounds.height - bottomLeft))
path.addQuadCurve(to: CGPoint(x: bottomLeft, y: bounds.height), controlPoint: CGPoint(x: 0, y: bounds.height))
path.addLine(to: CGPoint(x: bounds.width - bottomRight, y: bounds.height))
path.addQuadCurve(to: CGPoint(x: bounds.width, y: bounds.height - bottomRight), controlPoint: CGPoint(x: bounds.width, y: bounds.height))
path.addLine(to: CGPoint(x: bounds.width, y: topRight))
path.addQuadCurve(to: CGPoint(x: bounds.width - topRight, y: 0), controlPoint: CGPoint(x: bounds.width, y: 0))
let shape = CAShapeLayer()
shape.path = path.cgPath
layer.mask = shape
}
}
......