Skip to content

Commit

Permalink
- Applied hover effect on button tap
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayazrafai90
ayazrafai90 committed Jun 27, 2024
1 parent e83c841 commit d75da20
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 24 deletions.
4 changes: 2 additions & 2 deletions SnapElite.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,9 @@
D7ED31112C2D221900672607 /* ViewControllers */ = {
isa = PBXGroup;
children = (
D7EA118B2C2D3B4D00CA5AA5 /* ConfirmationAlertVC */,
D7EA11872C2D360400CA5AA5 /* SimpleAlertVC */,
D7EA11862C2D360000CA5AA5 /* ViewController */,
D7EA11872C2D360400CA5AA5 /* SimpleAlertVC */,
D7EA118B2C2D3B4D00CA5AA5 /* ConfirmationAlertVC */,
);
path = ViewControllers;
sourceTree = "<group>";
Expand Down
40 changes: 19 additions & 21 deletions SnapElite/StoryBoards/Base.lproj/Main.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,15 @@
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<customFonts key="customFonts">
<array key="Inter-Bold.ttf">
<string>Inter-Bold</string>
</array>
<array key="Inter-Medium.ttf">
<string>Inter-Medium</string>
</array>
<array key="Inter-Regular.ttf">
<string>Inter-Regular</string>
</array>
<array key="Inter-SemiBold.ttf">
<string>Inter-SemiBold</string>
</array>
Expand Down Expand Up @@ -208,6 +214,12 @@
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" name="primaryLight"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="hoverColor">
<color key="value" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="defaultBackgroundColor">
<color key="value" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
<connections>
<action selector="colorPickerButtonTapped:" destination="BYZ-38-t0r" eventType="touchUpInside" id="NWV-ud-a5n"/>
Expand Down Expand Up @@ -451,22 +463,14 @@
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="JAe-Db-8qz">
<rect key="frame" x="16" y="622" width="382" height="94"/>
<subviews>
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="TPz-df-UUa" customClass="SE_FilledButton">
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="TPz-df-UUa" customClass="SE_BorderButton">
<rect key="frame" x="0.0" y="0.0" width="382" height="51"/>
<fontDescription key="fontDescription" name="Inter-Medium" family="Inter" pointSize="15"/>
<color key="tintColor" name="primaryLight"/>
<inset key="contentEdgeInsets" minX="0.0" minY="16" maxX="0.0" maxY="16"/>
<state key="normal" title="Subscribe Now">
<color key="titleColor" systemColor="linkColor"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="color" keyPath="backColor">
<color key="value" name="primaryLight"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="textColor">
<color key="value" name="primaryDark"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
<connections>
<action selector="subscribeNowButtonTapped:" destination="BYZ-38-t0r" eventType="touchUpInside" id="aRG-ia-AlU"/>
</connections>
Expand Down Expand Up @@ -574,7 +578,7 @@
</label>
</subviews>
</stackView>
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="chC-hs-yPD" customClass="SE_FilledButton">
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="chC-hs-yPD" customClass="SE_BorderButton">
<rect key="frame" x="0.0" y="92" width="334" height="51"/>
<fontDescription key="fontDescription" name="Inter-SemiBold" family="Inter" pointSize="15"/>
<color key="tintColor" name="primaryLight"/>
Expand All @@ -586,12 +590,9 @@
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="8"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="backColor">
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" name="primaryLight"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="textColor">
<color key="value" name="primaryDark"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
<connections>
<action selector="actionButtonTapped:" destination="wIr-Ds-qjO" eventType="touchUpInside" id="gak-mb-Pjl"/>
Expand Down Expand Up @@ -732,7 +733,7 @@
<action selector="cancelButtonTapped:" destination="2oa-yr-7gD" eventType="touchUpInside" id="jT8-dw-B3w"/>
</connections>
</button>
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="z5z-iG-8qZ" customClass="SE_FilledButton">
<button opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="z5z-iG-8qZ" customClass="SE_BorderButton">
<rect key="frame" x="171" y="0.0" width="163" height="51"/>
<fontDescription key="fontDescription" name="Inter-SemiBold" family="Inter" pointSize="15"/>
<color key="tintColor" name="primaryLight"/>
Expand All @@ -744,12 +745,9 @@
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="8"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="backColor">
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" name="primaryLight"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="textColor">
<color key="value" name="primaryDark"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
<connections>
<action selector="actionButtonTapped:" destination="2oa-yr-7gD" eventType="touchUpInside" id="mpc-h9-4Xg"/>
Expand Down Expand Up @@ -847,10 +845,10 @@
<color red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
<systemColor name="linkColor">
<color red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<color red="0.0" green="0.47843137254901963" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
<systemColor name="systemMintColor">
<color red="0.0" green="0.78039215689999997" blue="0.74509803919999995" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<color red="0.0" green="0.7803921568627451" blue="0.74509803921568629" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
3 changes: 3 additions & 0 deletions SnapElite/Utilities/SE_BorderButton/SE_BorderButton.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ IB_DESIGNABLE
@property (nonatomic, assign) IBInspectable CGFloat borderWidth;
@property (nonatomic, strong) IBInspectable UIColor *borderColor;
@property (nonatomic, strong) IBInspectable UIColor *textColor;
@property (nonatomic, strong) IBInspectable UIColor *hoverTextColor;
@property (nonatomic, strong) IBInspectable UIColor *defaultBackgroundColor;
@property (nonatomic, strong) IBInspectable UIColor *hoverColor;

@end

Expand Down
45 changes: 44 additions & 1 deletion SnapElite/Utilities/SE_BorderButton/SE_BorderButton.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,16 @@ - (void)commonInit {
if (_cornerRadius == 0) { _cornerRadius = 12.0; }
if (_borderWidth == 0) { _borderWidth = 1.5; }
if (!_borderColor) { _borderColor = [UIColor colorNamed:@"primaryLight"]; }

if (!_textColor) { _textColor = [UIColor colorNamed:@"primaryLight"]; }
if (!_hoverTextColor) { _hoverTextColor = [UIColor colorNamed:@"primaryDark"]; }

if (!_defaultBackgroundColor) {
_defaultBackgroundColor = [UIColor clearColor];
}
if (!_hoverColor) {
_hoverColor = [UIColor colorNamed:@"primaryLight"];
}

[self updateView];
}
Expand All @@ -43,8 +52,13 @@ - (void)updateView {
self.layer.borderColor = self.borderColor.CGColor;
self.layer.cornerRadius = self.cornerRadius;
self.layer.masksToBounds = self.cornerRadius > 0;
[self setTitleColor:_textColor forState:UIControlStateNormal];

[self setButtonThemeAsHovered:NO];
}

- (void)setButtonThemeAsHovered:(BOOL)hovered {
[self setTitleColor:hovered ? _hoverTextColor : _textColor forState:UIControlStateNormal];
[self setBackgroundColor:hovered ? _hoverColor : _defaultBackgroundColor];
}

// Override setters to update the view when properties change
Expand Down Expand Up @@ -74,4 +88,33 @@ - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[self updateView];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[super touchesBegan:touches withEvent:event];
[self setButtonThemeAsHovered:YES];
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[super touchesMoved:touches withEvent:event];

UITouch *touch = [touches anyObject];
CGPoint currentLocation = [touch locationInView:self];

// Check if the touch is inside the button's bounds
if (CGRectContainsPoint(self.bounds, currentLocation)) {
[self setButtonThemeAsHovered:YES];
} else {
[self setButtonThemeAsHovered:NO];
}
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[super touchesEnded:touches withEvent:event];
[self setButtonThemeAsHovered:NO];
}

- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[super touchesCancelled:touches withEvent:event];
[self setButtonThemeAsHovered:NO];
}

@end

0 comments on commit d75da20

Please sign in to comment.