Title: GSoC – Week 6: A bit of graphics work to add to all the coding. Author: Sayak Sarkar Published: July 24, 2013 --- [ ](https://profiles.wordpress.org/sayaksarkar/) [Sayak Sarkar](https://profiles.wordpress.org/sayaksarkar/) 9:18 pm _on_ July 24, 2013 Tags: [firefoxos ( 15 )](https://make.wordpress.org/mobile/tag/firefoxos/) # GSoC – Week 6: A bit of graphics work to add to all the coding. ## IMPROVING THE NEW POST USER INTERFACE Continuing my work from last week, this week I made a few modifications to the Composer UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., to adapt it better to the somewhat restricted 320x480px screen area. The primary problem with the previous UI was that the Save Draft and Publish buttons for the app, present in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. toolbar area would disappear out of the screen, due to space restrictions. To solve this issue, I replaced the text based buttons, with icon based buttons so as to reduce the required screen space. I have replaced the preview, save draft and publish buttons with the following three icons respectively:- ![Preview, Save Draft and Publish Post Icons](https://www.diigo.com/item/p/poqresezbqddpaocezbasreaso/ 9db6f84bb0c5546c9b098977a61fa899) Preview, Save Draft and Publish Post Icons ## HANDS-ON GRAPHICS WORK Earlier, I started working with a set of icons that I had very generously “borrowed” from the WordPress for Android repository. However, one week in and somehow these icons didn’t really looks quite well on the onyx based design layout for the Firefox OS app. I realized that the colors just weren’t bright enough for Onyx. Hence, I decided to jump into a bit of graphics work and put my old graphics skills to some use. I have come up with a new set of icons [still a work in progress!] for the new layout. Basically these are quite simply a re-creation of the existing icon sets with a matte white finish. As of now I have the following set of working icons:- ![Back Icon](https://www.diigo.com/item/p/poqresezbqddpbpqdzbasreear/5db40db4ae320eea707c1876e06a119c) Back ![Drawer](https://www.diigo.com/item/p/poqresezbqddpcdbbzbasreoap/945a5aee951e1f56a7431b1a56a68014) Drawer ![Preview](https://www.diigo.com/item/p/poqresezbqddpbrdqzbasreecd/1704f3e8d524e93c6bae509eecf0426b) Preview ![Post](https://www.diigo.com/item/p/poqresezbqddpcbcqzbasreeor/7aefd18ed81e6fd667cd4fd593c9e064) Post ![Refresh](https://www.diigo.com/item/p/poqresezbqddpcooozbasreobr/0a67b416fe791f0f81260a72d7098518) Refresh ![Add Post](https://www.diigo.com/item/p/poqresezbqddpcpqazbasreocp/c99437129ef3ae004e65f987b6a45aa8) Add Post ## REUSING THE COMPOSE INTERFACE The most reason why I seem to be spending a lot of time fine tuning the new post interface is because, it’s going to be a reusable module, which will be recycled into the New Page and New Comment modules, with small customizations here and there. This is turn means that ensuring that the new post layout is completely done means completing the major portion of work on the Posts, Pages and Comments modules, which is pretty much the bulk of the project. I reckon this should be complete in entirety within the next 2-3 weeks [Posts/Pages/Comments]. ## CURRENT STATUS AND NEW DEVELOPMENTS This week I have already committed a bulk of the work done to the SVNSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/. repository other than the previously mentioned bit of work. The next thing that I’ve started working upon is the Preview module. I already have a basic implementation of the same on my local stub, however, the code is still pretty messy and the UI needs quite a bit of work. For this purpose I’ve begun development of a new Preview kind for the module, which would essentially grab the data off the Compose form and show a basic preview. I expect that a basic version for this should be ready in a week. Also, I reckon this module can again be reused by the New Page module, and most importantly this one can be modified to develop the Page/ Post View module. ## DEVELOPMENT ROADMAP As per my earlier schedule for the project I have moved on to the development of newer kinds for the enyo source, which means the project is right on schedule at moment. However the completion of more reusable modules means that I would have some extra breathing time to concentrate on fine tuning things making the layouts prettier. If all goes well, we should have a 0.1 alpha of the app ready by the end of August/early September, complete with login, posts, pages, comments and stats modules. Since the completion of Posts module warrants the completion of Pages and Comments modules in quick succession, the remaining modules: login and stats should be the next major milestones to be completed within September. [#firefoxos](https://make.wordpress.org/mobile/tag/firefoxos/) ### Share this: * [ Threads ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=threads) * [ Mastodon ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=bluesky) * [ Facebook ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=facebook) * [ X ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=x) * [ LinkedIn ](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?share=linkedin) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fmobile%2F2013%2F07%2F24%2Fgsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding%2F%23respond&locale=en_US) 1. ![](https://secure.gravatar.com/avatar/479f05d4acc73915a43b24a1ee3f30477d4ee19bbec6a5a79906d396f2b2d2ad? s=32&d=mm&r=g) 2. [samuelsidler](https://profiles.wordpress.org/samuelsidler/) 11:48 pm _on_ July 24, 2013 3. Looks like great work! 4. You should consider using [dashicons](http://melchoyce.github.io/dashicons/) for the interface, since they’re being used by MP6. If there are icons you need that aren’t part of dashicons, they could probably get created pretty easily. 5. ![](https://secure.gravatar.com/avatar/d9d12d938a2c3405e664ec74ab78f0f5db46ac967eec90635af1a0c412ca6217? s=32&d=mm&r=g) 6. [Sayak Sarkar](https://profiles.wordpress.org/sayaksarkar/) 6:36 am _on_ July 25, 2013 7. Ahh! Dashicons looks awesome! That for the pointer Samuel! 🙂 8. * ![](https://secure.gravatar.com/avatar/479f05d4acc73915a43b24a1ee3f30477d4ee19bbec6a5a79906d396f2b2d2ad? s=32&d=mm&r=g) * [samuelsidler](https://profiles.wordpress.org/samuelsidler/) 5:03 pm _on_ July 25, 2013 * [@sayaksarkar](https://profiles.wordpress.org/sayaksarkar/): Apparently if it’s an “official” WordPress mobile app, you should use [Noticons](http://wordpress.com/i/noticons/example.html), which is what the iOSiOS The operating system used on iPhones and iPads. app uses. - ![](https://secure.gravatar.com/avatar/d9d12d938a2c3405e664ec74ab78f0f5db46ac967eec90635af1a0c412ca6217? s=32&d=mm&r=g) - [Sayak Sarkar](https://profiles.wordpress.org/sayaksarkar/) 7:02 pm _on_ July 25, 2013 - Wow! This looks even better! Thanks again Samuel! 🙂 ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/mobile/2013/07/24/gsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fmobile%2F2013%2F07%2F24%2Fgsoc-week-6-a-bit-of-graphics-work-to-add-to-all-the-coding%2F&locale=en_US) to post a comment. # Post navigation [← @aerych I’ve created the release 3.7 branch Feel…](https://make.wordpress.org/mobile/2013/07/24/aerych-ive-created-the-release-3-7-branch-feel/) [GSoC – week 6 : things get serious →](https://make.wordpress.org/mobile/2013/07/25/during-this-week-ive-realized-that-i-should/)