Redesign navigation bar on iOS

2026-04-03 06:26:09 +00:00 · 2019-08-30 21:15:11 -07:00
parent 97681f3a0d
commit 7e21b131ac
12 changed files with 174 additions and 88 deletions
--- a/Limelight/Images.xcassets/Logo.imageset/logo.png
+++ b/Limelight/Images.xcassets/Logo.imageset/logo.png
--- a/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-14x31@1x.png
+++ b/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-14x31@1x.png
--- a/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-28x61@2x.png
+++ b/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-28x61@2x.png
--- a/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-42x92@3x.png
+++ b/Limelight/Images.xcassets/PullArrow.imageset/pull-arrow-light-42x92@3x.png
--- a/Limelight/Images.xcassets/SettingsButton.imageset/Contents.json
+++ b/Limelight/Images.xcassets/SettingsButton.imageset/Contents.json
@@ -2,11 +2,11 @@
  "images" : [
    {
      "idiom" : "universal",
+      "filename" : "settings.pdf",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
-      "filename" : "logo.png",
      "scale" : "2x"
    },
    {
--- a/Limelight/Images.xcassets/SettingsButton.imageset/settings.pdf
+++ b/Limelight/Images.xcassets/SettingsButton.imageset/settings.pdf
@@ -0,0 +1,70 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>eTI<EFBFBD><EFBFBD>0<0C><><15>@<14>Z,=#O<0C><>A}H<> ,.==	<1A><>d<EFBFBD>Ţj*<2A><>V<EFBFBD>q<EFBFBD>t?<3F>Մ<><D584><EFBFBD><EFBFBD><EFBFBD>gI<67><EFBFBD>]y<>V3<56><33>H<EFBFBD><48>2١?<3F><1C><>v<EFBFBD>K<EFBFBD>m<EFBFBD><01><><EFBFBD><EFBFBD><16><><0B><>|=<3D>p,E<>τ<EFBFBD><CF84>N4vnbj<62>G<EFBFBD>#OxR<78>\<5C>L<EFBFBD>68Z+<2B><>߉<0C>p<EFBFBD><70><EFBFBD><EFBFBD>*G<>i<EFBFBD><69>3<EFBFBD><33>}<1C>Q<EFBFBD><51><EFBFBD> ^ʑ<><CA91><EFBFBD><EFBFBD><O<>ER<45><52>R\<5C>J<EFBFBD>-<2D>2<EFBFBD><32>G
+<EFBFBD>2<EFBFBD>
+OA<4F>n<18>;J^CXFR<02>V<1E>!P<>J<EFBFBD> 8	<09><EFBFBD>v8
+<EFBFBD>,G<><47>
+<Q<><51>.<2E>ץVې|<7C>X<EFBFBD><58>a\2z<32>37)qT+f<><66>䌗iGJ<47><4A><EFBFBD><EFBFBD>lyV<79><56><EFBFBD><01>K<>iZ<69><5A>W<EFBFBD><57><EFBFBD><EFBFBD>Ζ+<2B>L<EFBFBD><4C>5jX<6A>~<7E>P<EFBFBD>J<EFBFBD><4A>H<EFBFBD>)<29>~6x<12><>
+^<5E><>@i<05><><02>E_wb<77><62>.e<><65>%V^Ps<50>g.<2E><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>^<5E>rw<72>J0<4A><11><><EFBFBD>$<24>!@<1D>ti^[<5B><><EFBFBD>iZ<08>ŀ<EFBFBD><C580><EFBFBD>PADt?<3F>T<EFBFBD><54>q<EFBFBD>"z<><7A><02><>B<EFBFBD>횕Ԕ	<09>z[<5B><15>na<><61><EFBFBD>*<2A> <20>	"<04><><EFBFBD>+<2B>$<24><>;H<><48>*<2A><01>2<EFBFBD><32>@ql<71><6C><EFBFBD><EFBFBD><EFBFBD>w<15>
+W<EFBFBD><19>ωѣV9vY<76>2<EFBFBD>h<EFBFBD>W<EFBFBD><57><EFBFBD>0<EFBFBD>1s7pAz(<28>+<12>\<5C><>Á<EFBFBD>U=<3D>D<EFBFBD>
+l<0B>k"
+<EFBFBD>}<7D>Ę<EFBFBD>-_<><10>m<EFBFBD>}%<25>O0뛮<30><14><><EFBFBD>-X<><58><EFBFBD><EFBFBD><EFBFBD><06><><EFBFBD>y<EFBFBD>
+<EFBFBD><EFBFBD><EFBFBD>Z<>y^)&<26><>nL(<28>W<EFBFBD><57>W<EFBFBD><1B><><EFBFBD><0C>?1
+endstream
+endobj
+5 0 obj
+   608
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 75 75 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830202122-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000001010 00000 n 
+0000000794 00000 n 
+0000000722 00000 n 
+0000000015 00000 n 
+0000000700 00000 n 
+0000001075 00000 n 
+0000001191 00000 n 
+trailer
--- a/Limelight/Images.xcassets/PullArrow.imageset/Contents.json
+++ b/Limelight/Images.xcassets/PullArrow.imageset/Contents.json
@@ -2,17 +2,15 @@
  "images" : [
    {
      "idiom" : "universal",
-      "filename" : "pull-arrow-light-14x31@1x.png",
+      "filename" : "up_arrow.pdf",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
-      "filename" : "pull-arrow-light-28x61@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
-      "filename" : "pull-arrow-light-42x92@3x.png",
      "scale" : "3x"
    }
  ],
--- a/Limelight/Images.xcassets/UpIcon.imageset/up_arrow.pdf
+++ b/Limelight/Images.xcassets/UpIcon.imageset/up_arrow.pdf
@@ -0,0 +1,70 @@
+%PDF-1.5
+%<25><><EFBFBD><EFBFBD>
+4 0 obj
+<< /Length 5 0 R
+   /Filter /FlateDecode
+>>
+stream
+x<EFBFBD>U<EFBFBD>Q
+<EFBFBD>@D<>s<EFBFBD><73><EFBFBD>1<EFBFBD><31>F=<3D>G(<28><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>?-e`<>$
+	5<1A><15>ZIqh<71>оӗ4qA<71><41><16><> <0E>sTd<54><1C>dl><3E>؏H<D88F>	{<7B><>n|<7C>K<EFBFBD><4B><EFBFBD>,<2C>}<7D>?<3F><>5<EFBFBD><35><EFBFBD><EFBFBD>^<5E><>H;U$}
+endstream
+endobj
+5 0 obj
+   114
+endobj
+3 0 obj
+<<
+   /ExtGState <<
+      /a0 << /CA 1 /ca 1 >>
+   >>
+>>
+endobj
+2 0 obj
+<< /Type /Page % 1
+   /Parent 1 0 R
+   /MediaBox [ 0 0 75 75 ]
+   /Contents 4 0 R
+   /Group <<
+      /Type /Group
+      /S /Transparency
+      /I true
+      /CS /DeviceRGB
+   >>
+   /Resources 3 0 R
+>>
+endobj
+1 0 obj
+<< /Type /Pages
+   /Kids [ 2 0 R ]
+   /Count 1
+>>
+endobj
+6 0 obj
+<< /Producer (cairo 1.16.0 (https://cairographics.org))
+   /CreationDate (D:20190830203401-07'00)
+>>
+endobj
+7 0 obj
+<< /Type /Catalog
+   /Pages 1 0 R
+>>
+endobj
+xref
+0 8
+0000000000 65535 f 
+0000000516 00000 n 
+0000000300 00000 n 
+0000000228 00000 n 
+0000000015 00000 n 
+0000000206 00000 n 
+0000000581 00000 n 
+0000000697 00000 n 
+trailer
+<< /Size 8
+   /Root 7 0 R
+   /Info 6 0 R
+>>
+startxref
+749
+%%EOF
--- a/Limelight/ViewControllers/MainFrameViewController.h
+++ b/Limelight/ViewControllers/MainFrameViewController.h
@@ -18,8 +18,8 @@
@interface MainFrameViewController : UICollectionViewController <DiscoveryCallback, PairCallback, HostCallback, AppCallback, AppAssetCallback, NSURLConnectionDelegate, SWRevealViewControllerDelegate>

 #if !TARGET_OS_TV
-@property (strong, nonatomic) IBOutlet UIButton *limelightLogoButton;
-@property (weak, nonatomic) IBOutlet UIBarButtonItem *computerNameButton;
+@property (weak, nonatomic) IBOutlet UIBarButtonItem *settingsButton;
+@property (weak, nonatomic) IBOutlet UIBarButtonItem *upButton;
 #endif

@end
--- a/Limelight/ViewControllers/MainFrameViewController.m
+++ b/Limelight/ViewControllers/MainFrameViewController.m
@@ -50,8 +50,6 @@
    bool _background;
 #if TARGET_OS_TV
    UITapGestureRecognizer* _menuRecognizer;
-#else
-    UIButton* _pullArrow;
 #endif
 }
 static NSMutableSet* hostList;
@@ -126,10 +124,10 @@ static NSMutableSet* hostList;
                return;
            }
            
-#if TARGET_OS_TV
            self.title = host.name;
-#else
-            self->_computerNameButton.title = host.name;
+            
+#if !TARGET_OS_TV
+            [self->_upButton setImage:[UIImage imageNamed:@"UpIcon"]];
 #endif
            [self.navigationController.navigationBar setNeedsLayout];
            
@@ -174,10 +172,10 @@ static NSMutableSet* hostList;
                    return;
                }
                
-#if TARGET_OS_TV
                self.title = host.name;
-#else
-                self->_computerNameButton.title = host.name;
+                
+#if !TARGET_OS_TV
+                [self->_upButton setImage:[UIImage imageNamed:@"UpIcon"]];
 #endif
                [self.navigationController.navigationBar setNeedsLayout];
                
@@ -251,11 +249,13 @@ static NSMutableSet* hostList;
    
    [_appManager stopRetrieving];
    _selectedHost = nil;
-#if TARGET_OS_TV
+    
    self.title = @"Select Host";
-#else
-    _computerNameButton.title = @"No Host Selected";
+    
+#if !TARGET_OS_TV
+    [_upButton setImage:nil];
 #endif
+    
    [self.collectionView reloadData];
    [self.view addSubview:hostScrollView];
 }
@@ -651,30 +651,6 @@ static NSMutableSet* hostList;
        [(SettingsViewController*)[revealController rearViewController] saveSettings];
    }
    
-    // Fade out the pull arrow
-    [UIView animateWithDuration:0.1
-                     animations:^{
-                         self->_pullArrow.alpha = 0.0;
-                     }
-                     completion:^(BOOL finished) {
-                         // Flip the direction of the arrow
-                         if (position == FrontViewPositionLeft) {
-                             // Change the pull arrow back to the default rotation
-                             self->_pullArrow.imageView.transform = CGAffineTransformMakeRotation(0);
-                         }
-                         else {
-                             // Flip the pull arrow when the reveal is toggled
-                             self->_pullArrow.imageView.transform = CGAffineTransformMakeRotation(M_PI);
-                         }
-                         
-                         // Fade it back in
-                         [UIView animateWithDuration:0.2
-                                          animations:^{
-                                              self->_pullArrow.alpha = 1.0;
-                                          }
-                                          completion:nil];
-                     }];
-    
    currentPosition = position;
 }
 #endif
@@ -705,13 +681,17 @@ static NSMutableSet* hostList;
 {
    [super viewDidLoad];
    
+    self.title = @"Select Host";
+    
 #if !TARGET_OS_TV
    // Set the side bar button action. When it's tapped, it'll show the sidebar.
-    [_limelightLogoButton addTarget:self.revealViewController action:@selector(revealToggle:) forControlEvents:UIControlEventTouchDown];
+    [_settingsButton setTarget:self.revealViewController];
+    [_settingsButton setAction:@selector(revealToggle:)];
    
    // Set the host name button action. When it's tapped, it'll show the host selection view.
-    [_computerNameButton setTarget:self];
-    [_computerNameButton setAction:@selector(showHostSelectionView)];
+    [_upButton setTarget:self];
+    [_upButton setAction:@selector(showHostSelectionView)];
+    [_upButton setImage:nil];
    
    // Set the gesture
    [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
@@ -724,8 +704,6 @@ static NSMutableSet* hostList;
    _menuRecognizer.allowedPressTypes = [[NSArray alloc] initWithObjects:[NSNumber numberWithLong:UIPressTypeMenu], nil];
    
    self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
-    
-    self.title = @"Select Host";
 #endif
    
    _loadingFrame = [self.storyboard instantiateViewControllerWithIdentifier:@"loadingFrame"];
@@ -755,17 +733,6 @@ static NSMutableSet* hostList;
    [hostScrollView setShowsHorizontalScrollIndicator:NO];
    hostScrollView.delaysContentTouches = NO;
    
-#if !TARGET_OS_TV
-    _pullArrow = [[UIButton alloc] init];
-    [_pullArrow addTarget:self.revealViewController action:@selector(revealToggle:) forControlEvents:UIControlEventTouchDown];
-    [_pullArrow setImage:[UIImage imageNamed:@"PullArrow"] forState:UIControlStateNormal];
-    [_pullArrow sizeToFit];
-    _pullArrow.frame = CGRectMake(0,
-                                  self.collectionView.frame.size.height / 6 - _pullArrow.frame.size.height / 2 - self.navigationController.navigationBar.frame.size.height,
-                                  _pullArrow.frame.size.width,
-                                  _pullArrow.frame.size.height);
-#endif
-    
    self.collectionView.delaysContentTouches = NO;
    self.collectionView.allowsMultipleSelection = NO;
 #if !TARGET_OS_TV
@@ -776,9 +743,6 @@ static NSMutableSet* hostList;
    _discMan = [[DiscoveryManager alloc] initWithHosts:[hostList allObjects] andCallback:self];
    
    [self.view addSubview:hostScrollView];
-#if !TARGET_OS_TV
-    [self.view addSubview:_pullArrow];
-#endif
 }

 -(void)beginForegroundRefresh:(bool)refreshAppList
--- a/iPad.storyboard
+++ b/iPad.storyboard
@@ -45,24 +45,16 @@
                        </connections>
                    </collectionView>
                    <navigationItem key="navigationItem" id="pSu-bl-gL9">
-                        <barButtonItem key="leftBarButtonItem" style="done" id="mSL-ru-nRm">
-                            <button key="customView" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" id="Tiq-VS-Ua5">
-                                <rect key="frame" x="20" y="0.0" width="109" height="44"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" name="Roboto-Regular" family="Roboto" pointSize="16"/>
-                                <state key="normal" title="Moonlight" image="Logo">
-                                    <color key="titleShadowColor" red="0.5" green="0.5" blue="0.5" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                </state>
-                            </button>
+                        <barButtonItem key="leftBarButtonItem" image="SettingsButton" id="mSL-ru-nRm">
                            <color key="tintColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        </barButtonItem>
-                        <barButtonItem key="rightBarButtonItem" title="No Host Selected" id="KDy-JC-2sU">
+                        <barButtonItem key="rightBarButtonItem" id="KDy-JC-2sU">
                            <color key="tintColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        </barButtonItem>
                    </navigationItem>
                    <connections>
-                        <outlet property="computerNameButton" destination="KDy-JC-2sU" id="Lkg-yz-GE6"/>
-                        <outlet property="limelightLogoButton" destination="Tiq-VS-Ua5" id="cue-NW-Hty"/>
+                        <outlet property="settingsButton" destination="mSL-ru-nRm" id="NRf-lv-vlh"/>
+                        <outlet property="upButton" destination="KDy-JC-2sU" id="tXB-Rc-IvJ"/>
                        <segue destination="OIm-0n-i9v" kind="push" identifier="createStreamFrame" id="7gN-E7-Ips"/>
                    </connections>
                </viewController>
--- a/iPhone.storyboard
+++ b/iPhone.storyboard
@@ -45,26 +45,18 @@
                        </connections>
                    </collectionView>
                    <toolbarItems/>
-                    <navigationItem key="navigationItem" id="1jn-Sf-Xky">
-                        <barButtonItem key="leftBarButtonItem" style="done" id="zAn-CM-7Yz">
-                            <button key="customView" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" id="pZ9-ft-T24">
-                                <rect key="frame" x="20" y="0.0" width="109" height="32"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" name="Roboto-Regular" family="Roboto" pointSize="16"/>
-                                <state key="normal" title="Moonlight" image="Logo">
-                                    <color key="titleColor" red="0.9513210654258728" green="0.97490358352661133" blue="0.99987185001373291" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                    <color key="titleShadowColor" red="0.5" green="0.5" blue="0.5" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                </state>
-                            </button>
+                    <navigationItem key="navigationItem" id="pSu-bl-gL9">
+                        <barButtonItem key="leftBarButtonItem" image="SettingsButton" id="mSL-ru-nRm">
+                            <color key="tintColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        </barButtonItem>
-                        <barButtonItem key="rightBarButtonItem" title="No Host Selected" id="L1H-n4-HB7">
-                            <color key="tintColor" red="0.9513210654258728" green="0.97490358352661133" blue="0.99987185001373291" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <barButtonItem key="rightBarButtonItem" id="KDy-JC-2sU">
+                            <color key="tintColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        </barButtonItem>
                    </navigationItem>
                    <connections>
-                        <outlet property="computerNameButton" destination="L1H-n4-HB7" id="bng-Ky-oQs"/>
-                        <outlet property="limelightLogoButton" destination="pZ9-ft-T24" id="yRw-rK-9lQ"/>
-                        <segue destination="mI3-9F-XwU" kind="push" identifier="createStreamFrame" id="Vgc-B6-lvM"/>
+                        <outlet property="settingsButton" destination="mSL-ru-nRm" id="NRf-lv-vlh"/>
+                        <outlet property="upButton" destination="KDy-JC-2sU" id="tXB-Rc-IvJ"/>
+                        <segue destination="OIm-0n-i9v" kind="push" identifier="createStreamFrame" id="7gN-E7-Ips"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="HNf-lX-GEO" userLabel="First Responder" sceneMemberID="firstResponder"/>