-
-
Notifications
You must be signed in to change notification settings - Fork 256
Version 2.0 Proposal
In the past month and a half, iOctocat has emerged as a rapidly developed native GitHub client for the iPhone. Under the direction of dbloete and the newly added intabulas it has frequently been gaining features as well as stability. With the 1.0 milestone approaching, it might be useful to take a look at what the future of iOctocat could hold for version 2.0.
The 1.0 version brings easy access to your news and personal feeds, your repositories, and user and repository search. With 2.0 we will focus on improving the overall usability as well as increasing the productivity of the end user.
In order to accomidate all of the new features that we will be added there will have to be a lot of UI changes. Since one of the overall focuses is on usability we have to remember that despite the complexity of GitHub we have to try to keep it as simple as possible.
In addition to the three pages from 1.0 we add a “Profile” page which will allow access to information associated with your account.
| . | | . | | . | +------------------------------------------------+ | --+ | /// | O | Ψ | | .'| | /// | \ | ^ | | Feeds | Repos | Search | Profile | +------------------------------------------------+
(Ignore the logos. Should be RSS icon, filing cabinet, magnifying glass, and a person, respectively)
The feed view is all ready well constructed and needs virtually no modification to the layout other than integrating it with the updated UI.
+------------------------------------------------+ | .============+-------------. .-. | | ║ News Feeds ║ My Activity | |R| | | '============+-------------' '-' | +------------------------------------------------+ | | | | | | | | | | | | | | | | | | | | | | | ... | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +===========-------------------------------------+ ║ --+ ║ /// | O | Ψ | ║ .'| ║ /// | \ | ^ | ║ Feeds ║ Repos | Search | Profile | +===========-------------------------------------+
In the settings there should be an option on whether clicking a feed entry immediately takes you to the associated view or whether it displays the entry’s contents (like it does in 1.0).
Entries related to issues should take you directly to that repository’s issue sub-page. Commits should take to to the commit page, etc.
Feeds should update every 15 minutes or so (if the app is still open) and if there are new entries the “Feeds” button should have a numbered badge to indicate the amount of new items.
The repository view is likely the most used view and definitely contains the most amount of information.
+------------------------------------------------+ | .========+---------+-------+---------. | | ║ Public ║ Private | Gists | Watched | | | '========+---------+-------+---------' | +------------------------------------------------+ | .--------------------------------------------. | | | mkvdts2ac3 > | | | +--------------------------------------------+ | | | polyreviki > | | | +--------------------------------------------+ | | | pycache > | | | +--------------------------------------------+ | | | pyy > | | | +--------------------------------------------+ | | | smsbarrage-android > | | | +--------------------------------------------+ | | | smsbarrage-blackberry > | | | +--------------------------------------------+ | | | smsbarrage-iphone > | | | +--------------------------------------------+ | | | smsbarrage-windowsmobile > | | | +--------------------------------------------+ | | | smsmorse > | | | +--------------------------------------------+ | | | smspoll > | | | '--------------------------------------------' | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
In the header we have a simple switcher to change whether we are listing our public, private, or watched repos.
It also might be beneficial to have an “All” switch which would list all of the public, private, and watched repositories in one list. There would have to be icons preceeding the repository name to indicate which type it was.
In 1.0 information beyond the initial description was presented in a list form which took you to a sub-page. In 2.0 it should change to allow easier navigation between these sub-pages by implementing a UI control inspired by the Facebook iPhone application.
+------------------------------------------------+ | .--------. .-. .-. | [A] |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .----. .------. .-------. .----------. .---- | [B] | |Info| |Source| |Commits| |Network(3)| |Issu >>| | '----' '------' '-------' '----------' '---- | +------------------------------------------------+ | . | | . | | . |
FlickTabControl is a horizontally scrolling list of pages developed by Enormego Developers and can be seen as [B]. It allow the user to flick left or right to see more pages than can be display at once. It also provides a depressed button look to the active page.
When viewing a repository that is not owned by you two buttons appear in the header ([A]). The right-most is a heart button which indicates whether or not you are watching the repository and also allows you to toggle this value. The next is an icon which allows you to create a new fork of the repository under you account (the “Λ” is supposed to be the fork icon).
Gists are essentially single-file repositories so there are less sub-pages.
+------------------------------------------------+ | .------. | |‹ Gists | Gist 95341 | | '------' | +------------------------------------------------+ | .----. .------. .-------. | | |Info| |Source| |Commits| | | '----' '------' '-------' | +------------------------------------------------+ | . | | . | | . |
This is the default tab that is displayed when you first access a repository. It contains general information about the project.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .====. .------. .-------. .----------. .---- | | ║Info║ |Source| |Commits| |Network(3)| |Issu >>| | '====' '------' '-------' '----------' '---- | +------------------------------------------------+ | .--------------------------------------------. | [C] | | A native GitHub client for the iPhone and | | | | iPod Touch. | | | +--------------------------------------------+ | | | Owner: dbloete > | | | +--------------------------------------------+ | | | Website: dbloete.github.com > | | | '--------------------------------------------' | | | | .--------------------------------------------. | [D] | | IOCTOCAT | | | | | | | | ...is a GitHub app for the iPhone and iPod | | | | Touch. It is open source and available on | | | | the App Store. | | | | | | | | For further information visit the project | | | | website or the wiki. | | | | | | | | Your participation is welcome - feel free | | | | to fork, add missing features, or report | | | | issues :) | | | '--------------------------------------------' | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
In [C] you get the description, owner, and website of the repository similar to version 1.0. Beneath that information, however, in [B] is the parsed contents of the README file (if one exists).
This provides browsing of the project’s most recent files of the main branch.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .----. .======. .-------. .----------. .---- | | |Info| ║Source║ |Commits| |Network(3)| |Issu >>| | '----' '======' '-------' '----------' '---- | +------------------------------------------------+ | .--------------------------------------------. | [E] | | first part of following list. This | | | | delivery simply adds a 'Following'... > | | | | | | | | [] intabulus ~1h | | | '--------------------------------------------' | | | | .--------------------------------------------. | [F] | | D Classes/ ~1h > | | | +--------------------------------------------+ | | | D IBFiles/ ~1h > | | | +--------------------------------------------+ | | | D Images/ ~6h > | | | +--------------------------------------------+ | | | D Settings.bundle/ Mar.28 > | | | +--------------------------------------------+ | | | D iOctocat.xcodeproj/ ~1h > | | | +--------------------------------------------+ | | | F .gitignore Apr.26 > | | | +--------------------------------------------+ | | | F Entitlements.plist Apr.6 > | | | +--------------------------------------------+ | | | F FollowCell.xib ~1h > | | | +--------------------------------------------+ | | | F Following.xib ~1h > | | | +--------------------------------------------+ | | | F Info.plist ~2d > | | | +--------------------------------------------+ | | | F MIT-LICENSE Mar.28 > | | | +--------------------------------------------+ | | | F README.textile Apr.29 > | | | +--------------------------------------------+ | | | F iOctocat_Prefix.pch Apr.19 > | | | +--------------------------------------------+ | | | F main.m Mar.28 > | | | +--------------------------------------------+ | | | F styles.html Apr.28 > | | | '--------------------------------------------' | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
The [F] section provides a listing of the all files. It lists directories first to aid navigation through the directory tree. In sub-directories the first entry would be a “…” directory to take you up in the tree. The “D” and “F” should be icons to denote whether an entry is a file or directory.
The “[]” in [E] denotes the users’ 16×16 gravatar. Clicking this section will expand it to show more information about the commit. If you were to click the above commit here is what it would change to:
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .----. .======. .-------. .----------. .---- | | |Info| ║Source║ |Commits| |Network(3)| |Issu >>| | '----' '======' '-------' '----------' '---- | +------------------------------------------------+ | .--------------------------------------------. | [G] | | first part of following list. This | | | | delivery simply adds a 'Following' view to | | | | the User view that will show all the | | | | people being followed. Now to wire up the | | | | follow/unfollow buttons | | | +--------------------------------------------+ | | | Author: [] intabulus > | | | +--------------------------------------------+ | | | Date: about 1 hour ago | | | +--------------------------------------------+ | | | Commit: ca9e74eea5a7b1a46fdc964f26ee5... > | | | +--------------------------------------------+ | | | Parent: 57df89653ffac21edfdc65c6cad8f... > | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | | | | | | | | | . | | | | . | | | | . | | | | | | | | | | | '--------------------------------------------' | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
As you can see by [G] the section has expanded to show more information as well as the full description. The owner, commit SHA, and parent SHA are displayed in their own entry which is clickable to take you to its associated view.
The “…” section would still be the same as [F] above.
Here you can view the changes made to the repository from a specific commit.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .----. .------. .=======. .----------. .---- | | |Info| |Source| ║Commits║ |Network(3)| |Issu >>| | '----' '------' '=======' '----------' '---- | +------------------------------------------------+ | .--------------------------------------------. | [H] | | first part of following list. This | | | | delivery simply adds a 'Following'... > | | | | | | | | [] intabulus ~1h | | | '--------------------------------------------' | | | | .--------------------------------------------. | [I] | | [] Classes/AppConstants.h | | | +--------------------------------------------+ | | | . | | | | . | | | | . | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | [] Classes/FollowCell.h | | | +--------------------------------------------+ | | | . | | | | . | | | | . | | | '--------------------------------------------' | | | | ... | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
The [H] in this section will function the same as [E] above.
At [i] you can see one of the changes made to a file. The “[]” is an icon representing whether the file was added, changed, or deleted. If The file was deleted there will be no second entry in the section. Like GitHub, if the file is an image it should be displayed. If it is plain text a diff should be shown with red and green lines indicating the deletions and additions respectively. Line numbers are likely ommitted (or maybe an option).
This page is difficult to display due to the fact the iPhone is very slim and code is usually around 80 characters wide. It could be an option to just show the number of additions and deletions in the second entry for each file and change to just a view of that file’s diff when clicked.
A project’s network is useful for checking on the differences of forks as well as making it easy to navigate between them.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .----. .------. .-------. .==========. .---- | | |Info| |Source| |Commits| ║Network(3)║ |Issu >>| | '----' '------' '-------' '==========' '---- | +------------------------------------------------+ | | [J] | [] dbloete / ioctocat | | | | .--------------------------------------------. | | | [] unimatrixZxero / ioctocat > | | | +--------------------------------------------+ | | | [] thurload / ioctocat > | | | +--------------------------------------------+ | | | [] JSparksman / ioctocat > | | | +--------------------------------------------+ | | | [] kiddynomite71 / ioctocat > | | | '--------------------------------------------' | | | | | | | | | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
[J] Shows a simple heirarchical list of the users and the forks. The current fork should be indicated in some way and all the other forks should link to their repository view.
On GitHub this heirarchical list is a secondary view of the “Network” tab. The primary view is a nice flash UI of the current forks branches, associated commits, and their relationships. Since the iPhone lacks flash we cannot just embed this. The data for this graph is available through the API and can be accomplished with a significant amount of work. Perhaps this can constitute a feature of version 2.5 or equivilant.
GitHub’s most recent feature, the ever useful issue tracking allows projects to manage bug reports and feature requests.
This shows a list of all the open issues for the project.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .-------. .----------. .==========. .-------. | [K] |<<|Commits| |Network(3)| ║Issues(15)║ |Wiki(2)| | | '-------' '----------' '==========' '-------' | +------------------------------------------------+ | .--------------------------------------------. | [L] | | Create new... > | | | +--------------------------------------------+ | | | Brokeness under iPhone 3.0b4 #15 | | | | ~5d by ussjoin 7 comments > | | | +--------------------------------------------+ | | | Option for relative date\times #18 | | | | ~2d by JakeWharton 1 comment > | | | +--------------------------------------------+ | | | My Network #5 | | | | Mar.24 by dbloete 1 comment > | | | +--------------------------------------------+ | | | . | | | | . | | | | . | | | '--------------------------------------------' | | | | .--------------------------------------------. | [M] | | Load closed issues... (17) | | | '--------------------------------------------' | | | | | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
Before you look at the contents of this sub-page notice at [K] that the FlickTabControl is now scrolled over the left hiding the first two sub-pages.
By default, this will show a list of the currently open issues as seen by [L]. What information is displayed here is still up for debate as GitHub manages to cram a lot into effectively two lines.
To view the closed issues, a user would tap a standalone entry denoted at [M].
This displays a single issue and allows you to interact with it.
+------------------------------------------------+ [N] +------------------------------------------------+ | .-------. .----------. .==========. .-------. | |<<|Commits| |Network(3)| ║Issues(15)║ |Wiki(2)| | | '-------' '----------' '==========' '-------' | +------------------------------------------------+ | .-------. .-. | |‹ Issues | #15: Brokeness under iPhone... |C| | | '-------' '-' | +------------------------------------------------+ | .--------------------------------------------. | | | Brokeness under iPhone 3.0b4 | | | +--------------------------------------------+ | | | Author: [] ussjoin | | | +--------------------------------------------+ | | | Date: 6 days ago | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | | | | | I'm using iPhone OS 3.0b4, and with a | | | | freshly cloned and compiled version of | | | | 0.8.1, I have the following issues: | | | | | | | | * Userpics don't display anywhere in the | | | | app; instead, all I get are the greyed- | | | | out heads of the "unknown user" pic. | | | | | | | | * If I go into any of My Repositories, | | | | every cell in the TableView is | | | | individually blacked out; that is, I can | | | | see the outlines of the cell, but | | | | nothing at all inside them-- except for | | | | in the recent actions listing, where I | | | | can see the unknown userpic, and the | | | | commit action icon, inside an otherwise | | | | fully-black cell. | | | | | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | [] ussjoin > | | | +--------------------------------------------+ | | | | | | | Update for more information: | | | | | | | | The first set of issues was with iPhone OS | | | | 3.0b4 AND iPhoneSDK 3.0. Recompiling under | | | | iPhoneSDK 2.2.1 (current stable release), | | | | the black cell problem disappears, but the | | | | userpics are still all not displayed. | | | | | | | | Apr.30 | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | . | | | | . | | | | . | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | Add new comment... > | | | '--------------------------------------------' | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
Since we have to introduce a new method of traversing wiki pages it is logical to add another header toolbar. Unfortunately this would stack three toolbars in the header. Barring a better system, collapsing the top-most header as in [N] frees up more space to display the contents of the wiki page. Should the user tap the collapsed header it would expand and restore itself to allow the user to navigate backwards at the high level. This expanding and collapsing should be animated to help indicate that it is occuring.
This view is very straightforward. Just a linear presentation of the issues details, the body, and comments.
This allows you to open a new issues for a project.
+------------------------------------------------+ +------------------------------------------------+ | .-------. .----------. .==========. .-------. | |<<|Commits| |Network(3)| ║Issues(15)║ |Wiki(2)| | | '-------' '----------' '==========' '-------' | +------------------------------------------------+ | .-------. .--------. | |‹ Issues | Create Issue | Create | | | '-------' '--------' | +------------------------------------------------+ | | | Title: | | | +------------------------------------------------+ | | | Issue body goes here... | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
Joe Hewitt of Facebook has created a library of their custom UI controls used in the iPhone app (not sure why their FlickTabControl-esque control is not included). It provides a nice control for composing messages that mimics the native “Mail” application.
This view again collapses the topmost header view and prompts for a title and issue body.
The (VERY loosely) integrated wiki provides developers and users with an easy way to write documentation related to the project.
The API does not presently support wiki access. Hopefully GitHub will remedy this or better yet, make wiki pages files in a repository branch.
+------------------------------------------------+ | .--------. .-. .-. | |‹ Watched | iOctocat |Λ| |♥| | | '--------' '-' '-' | +------------------------------------------------+ | .-------. .----------. .----------. .=======. | |<<|Commits| |Network(3)| |Issues(15)| ║Wiki(2)║ | | '-------' '----------' '----------' '=======' | +------------------------------------------------+ | .--------------------------------------------. | [O] | | _Home_ > | | | +--------------------------------------------+ | | | Beta testing > | | | '--------------------------------------------' | | | | .--------------------------------------------. | [P] | | Create new... > | | | '--------------------------------------------' | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
A straightforward listing at [O] which display all of the wiki pages. The default page should be first and emphasized.
At [P] we provide a link to creating a new page. This is realtively advanced section that should function like the “Notes” application and might want to be implemented after the initial 2.0 release.
Viewing a wiki page.
+------------------------------------------------+ +------------------------------------------------+ | .-------. .----------. .----------. .=======. | |<<|Commits| |Network(3)| |Issues(15)| ║Wiki(2)║ | | '-------' '----------' '----------' '=======' | +------------------------------------------------+ | .-----. .---. | [Q] |‹ Pages| Beta Testing |TOC| | | '-----' '---' | +------------------------------------------------+ | | | BECOMING A BETA TESTER | [R] | | | Currently all beta testing seats are taken, | | but you can send your device UUID to | | [email protected] and I will inform you | | when new beta testers get accepted. If you do | | not know what your UUID is, you can use the Ad | | Hoc Helper to send it directly. | | | | . | | . | | . | | | | | | | | | | | | | | | | | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
The new header toolbar, [Q], shows the title of the current wiki page. It also has a button to overlay a list of the headings in the page over the text (in [R]). Clicking on one hides the overlay and scrolls the text to the selected section.
Shows the table of contents for a page.
+------------------------------------------------+ +------------------------------------------------+ | .-------. .----------. .----------. .=======. | |<<|Commits| |Network(3)| |Issues(15)| ║Wiki(2)║ | | '-------' '----------' '----------' '=======' | +------------------------------------------------+ | .-----. .===. | |‹ Pages| Beta Testing ║TOC║ | | '-----' '===' | +------------------------------------------------+ | | | HEADING 1 > | | | +------------------------------------------------+ | | | Sub-heading 1 > | | | +------------------------------------------------+ | | | Sub-heading 2 > | | | +------------------------------------------------+ | | | HEADING 2 > | | | +------------------------------------------------+ | | | Sub-heading 3 > | | | +------------------------------------------------+ | | | Deeper heading 1 > | | | +------------------------------------------------+ | | | Sub-heading 4 > | | | +------------------------------------------------+ | | | Deeper heading 2 > | | | +------------===========-------------------------+ | --+ ║ /// ║ O | Ψ | | .'| ║ /// ║ \ | ^ | | Feeds ║ Repos ║ Search | Profile | +------------===========-------------------------+
Searching allows you to find new users and repositories.
Search for a user by user name and real name.
+------------------------------------------------+ | .=============+--------------. .=. | [S] | ║ Users ║ Repositories | ║S║ | | '=============+--------------' '=' | +------------------------------------------------+ | .-----------------------------------. .------. | [T] | | Query Parameters... | |Search| | | '-----------------------------------' '------' | +------------------------------------------------+ | | [U] | +-+ JakeWharton - Jake Wharton | | |G| > | | +-+ 14 repos | 0 followers | Pittsburgh, PA | | | +------------------------------------------------+ | | | +-+ Someone - Some Person | | |G| > | | +-+ 1 repo | 1 follower | Pittsburgh, PA | | | +------------------------------------------------+ | | | | | | | | | | | | | | | | | | +------------------------===========-------------+ | --+ | /// ║ O ║ Ψ | | .'| | /// ║ \ ║ ^ | | Feeds | Repos ║ Search ║ Profile | +------------------------===========-------------+
[S] shows the search button as active since the search toolbar is displayed ([T]). [V] shows us typical info found in GitHub searches along with the user’s gravatar.
The user view is categorized under search and functions much like the 1.0 user view.
Serach for repositories by their name and description.
+------------------------------------------------+ | .-------------+==============. .-. | [V] | | Users ║ Repositories ║ |S| | | '-------------'==============' '-' | +------------------------------------------------+ | | | joehewitt / three20 (Objective-C) | | Three20 is an Objective-C library for... > | | 64 forks | 744 watchers 2d ago | | | +------------------------------------------------+ | | | sintaxi / phonegap (Javascript) | | access core functions on Android, iPhone... > | | 64 forks | 454 watchers 11d ago | | | +------------------------------------------------+ | | | | | | | | | | | | | | | | | | | | | | +------------------------===========-------------+ | --+ | /// ║ O ║ Ψ | | .'| | /// ║ \ ║ ^ | | Feeds | Repos ║ Search ║ Profile | +------------------------===========-------------+
Here we see that the search button is no longer selected ([V]) because the search bar is not visible. Tapping the search button activates it with our query still inside and an “X” to optionally clear it.
It might be useful to implement a way to narrow your search down by langauge too.
Access to your profile-specific information.
Access your inbox allowing you to compose and reply to messages.
Here is a list of message in your inbox. New messages would have a colorized background to indicate that they are unread.
+------------------------------------------------+ | .==========+----------. .-. | [W] | ║ Inbox(0) ║ Account | |C| | | '==========+----------' '-' | +------------------------------------------------+ | | | +-+ dbloete 20hr | | |G| Re: Display (and parse) readme [dbloe... > | | +-+ We'd need a way to discover the URL... | | | +------------------------------------------------+ | | | +-+ dbloete 20hr | | |G| Re: Display (and parse) readme [dbloe... > | | +-+ We'd need a way to discover the URL... | | | +------------------------------------------------+ | | | +-+ dbloete 20hr | | |G| Re: Display (and parse) readme [dbloe... > | | +-+ We'd need a way to discover the URL... | | | +------------------------------------------------+ | | | +-+ dbloete 20hr | | |G| Re: Display (and parse) readme [dbloe... > | | +-+ We'd need a way to discover the URL... | | | +------------------------------------============+ | --+ | /// | O ║ Ψ ║ | .'| | /// | \ ║ ^ ║ | Feeds | Repos | Search ║ Profile ║ +------------------------------------============+
You can see in [W] there is a button to compose a new message.
Also when you have new, unread messages a numbered badge should appear on the profile button.
Allows you to send a new message to a GitHub user.
+------------------------------------------------+ | .==========+----------. .=. | | ║ Inbox(0) ║ Account | ║C║ | | '==========+----------' '=' | +------------------------------------------------+ | .--------. .------. | | | Cancel | Compose Message | Send | | | '--------' '------' | +------------------------------------------------+ | | [X] | To: | | | +------------------------------------------------+ | | | Subject: | | | +------------------------------------------------+ | | | Message body goes here... | | | | | | | | | | | | | | | | | | | | | | | | | +------------------------------------============+ | --+ | /// | O ║ Ψ ║ | .'| | /// | \ ║ ^ ║ | Feeds | Repos | Search ║ Profile ║ +------------------------------------============+
The “To” field ([X]) should autocomplete usernames, watched users first (if possible). It should be noted that the compose button is now activated (mentioned in [W]).
This allows you to view the conversations between you and another user.
+------------------------------------------------+ | .==========+----------. .-. | | ║ Inbox(0) ║ Account | |C| | | '==========+----------' '-' | +------------------------------------------------+ | .---------. | |‹ Messgaes | Example Message Title | | '---------' | +------------------------------------------------+ | | | .--------------------------------------------. | | | [] JakeWharton | | | +--------------------------------------------+ | | | | | | | Check out these ASCII renderings I have | | | | been doing. I'm getting good at them. | | | | | | | | 2 days ago | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | [] SomeOtherUser > | | | +--------------------------------------------+ | | | | | | | Wow you are the probably the best ASCII | | | | artist in the WORLD. </sarcasm> | | | | | | | | 1 hour ago | | | '--------------------------------------------' | | | | .--------------------------------------------. | | | Reply to message... > | | | +--------------------------------------------+ | | | Delete conversation... > | | | '--------------------------------------------' | | | +------------------------------------============+ | --+ | /// | O ║ Ψ ║ | .'| | /// | \ ║ ^ ║ | Feeds | Repos | Search ║ Profile ║ +------------------------------------============+
If there is a new message in this thread it should scroll to the first new message when opened.
The username of the other user is clickable to go to their user view.
This should look similar to the compose view except with the title and subject already filled in and non-editable.
View and change your account information.
+------------------------------------------------+ | .----------+==========. | | | Inbox(0) ║ Account ║ | | '----------+==========' | +------------------------------------------------+ | | | User Information | | | | .--------------------------------------------. | | | Username: JakeWharton | | | +--------------------------------------------+ | | | API Token: 0123456789abcde0123456789abcdef | | | '--------------------------------------------' | | | | Email Addresses | | | | .--------------------------------------------. | | | +-+ | | | | |G| [email protected] (delete) > | | | | +-+ | | | +--------------------------------------------+ | | | Add another email address... > | | | +--------------------------------------------+ | | | Receive email notifications [√] | | | '--------------------------------------------' | | | | SSH Public Keys | | | | .--------------------------------------------. | | | somename1 > | | | +--------------------------------------------+ | | | somename2 > | | | +--------------------------------------------+ | | | Add another public key... > | | | '--------------------------------------------' | | | +------------------------------------============+ | --+ | /// | O ║ Ψ ║ | .'| | /// | \ ║ ^ ║ | Feeds | Repos | Search ║ Profile ║ +------------------------------------============+
Here are a list of conventions used in the ASCII art and what they represent. If unclear use your best judgement and always try to conform to the native UI stardards that Apple has set.
If a list entry has a > it is clickable and will take you to an associated view or sometimes (such as commit messages) expand the current entry to show more information.
List entries with [ ] or [√] are a toggle value and indicate whether they are unchecked or checked, respectively.
.--------. | Button | '--------'
.==========. ║ Selected ║ '=========='
Default behavior buttons like “Send”, “Submit”, “Search”, etc. should have blue backgrounds (like in Mail.app).
[]
+-+ |G| +-+
Precision spacing is hard to represent with ASCII characters so take all representations liberally and make a judgement for yourself.
- FlickTabControl – github.com/enormego/flicktabcontrol/tree
- Three20 – github.com/joehewitt/three20/tree
GitHub’s wiki editor does not use a monospaced font. Copy and paste the entire document to a monospaced editor, make necessary changes, copy and paste the entire document back, and submit your changes.