Qx mobile / style native looking toolbar/tabbar

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Qx mobile / style native looking toolbar/tabbar

Tobias Roeder
Hey folks,

I'm trying to create a native looking tab bar as known from various iOS or android apps at the bottom of my viewport in qooxdoo mobile. Using the toolbar class, i was able to do that but the buttons, of course, look nothing like a native android tabbar.
I imagine I would be able to do that using css but I really have no idea how and since qooxdoo uses scss and I don't have many properties available in the standard theme I'm all out of ideas.

Any suggestions on that matter? Probably someone has already done something similar?

Von meinem iPhone gesendet
------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Qx mobile / style native looking toolbar/tabbar

SQville
Tobias,

I highly recommend you start with the TabBar class rather than the Toolbar class for this.

Add the below entries into the .tabBar class of your flat.css or indigo.css file, which ever one your source version is currently using. This will move the tabbar buttons to the bottom of the page and keep them floating at the bottom of your viewport just like the toolbar. This will start you on the correct path to what you are after:

.tabBar {
       bottom:1rem;
       border-bottom:.1875rem solid #74a588;
       padding-top:.25rem;
       padding-left:.25rem;
       padding-right:.25rem;
       
/*new SQville tabbar items thrown to the bottom of viewport*/
       -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
       -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
       -ms-flex-order: 2;              /* TWEENER - IE 10 */
       -webkit-order: 2;               /* NEW - Chrome */
         order: 2;                     /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

As for the iOS/Android look and feel, that i can help you with too (Example iOS look and feel). All icons you see are either fonticons or pure CSS.

Chris
SQville Software
Austin, Texas
chris.eskew@sqville.com


 
Reply | Threaded
Open this post in threaded view
|

Re: Qx mobile / style native looking toolbar/tabbar

SQville
In reply to this post by Tobias Roeder
... Continuing my reply. The great thing about qx.Mobile themes is that they are all directly powered by CSS (.addCssClass quickly becomes the most used function).

For now I recommend bypassing scss and working directly with the CSS files so you see how your app works. Make backup copies before modifying CSS files.

If you look at the source version of your application via your browser's web inspector you'll see that it includes the qooxdoo framework's theme CSS files (flat.css or indigo.css or whatever theme you are using), and styles.css from your app's resource folder.  

Here are some modifications you can make to flat.css or indigo.css to get you further down the path to a more native look and feel (comment your edits if you want to translate your edits into scss at a later time):

1. Key in on the following three Css classes:
   - .tabBar
   - .tabButton
   - .tabButton.selected
2. For .tabBar (be sure to comment edits)
   - Add: background-color: rgb(218, 218, 218);
   - Comment Out: border-bottom: .1875rem solid #74a588;
3. For .tabButton (be sure to comment edits)
   - Comment Out: -moz-border-radius-topleft: .125rem;
-moz-border-radius-topright: .125rem;
-webkit-border-radius-topleft: .125rem;
-webkit-border-radius-topright: .125rem;
border-top-right-radius: .125rem;
border-top-left-radius: .125rem;
border-top: .0625rem solid #969697;
border-left: .0625rem solid #969697;
border-right: .0625rem solid #969697;
   - Modify: Match background-color to .tabBar's background-color
4. For .tabButton.selected (be sure to comment edits)
   - Comment Out everything except color
   - Modify color value to whatever color you want the selected button to have

These steps should get you closer... getting the right icons is a little more tricky, and requires a lot more thought upfront. I recommend using either SVG, CSS or a Font for your icons. I'm sure I can get you in contact with someone more than willing to help you with that piece outside of the forum :-)

Chris
chris.eskew@sqville.com