Discuss ROADMAP for Mobile Angular UI 1.1

[mcasimir]

This is an ongoing document to identify features and improvements for the first final release.

Feel free to provide feedback and suggestions here!

ROADMAP

• [x] Distribute a js not including angular.js and common angular.js modules like ngRoute, along with a standalone version.
• [x] Switch from ngTouch to fastclick
• [x] Use css 3d transforms to improve responsiveness and speed
• [x] Touch enabled carousel (#11)
• [x] Native looking switch control
• [x] Fix major issues involving scroll and overlays
• [x] Make it Phonegap/Cordova ready (it should be now, just need to be tested)
• [x] Rename bs-input to something more understandable (eg. form-control)
• [x] Feature Freeze
• [x] Use less variables in place of hard-coded colors and sizes
• [x] Profile to find possible memory leaks in callbacks
• [x] Better form styling with horizontal layout support (to be released soon)
• [x] Make switch compatible with ng-click/ng-change
• [x] Include responsive grid .sm in base.css
• [x] Include responsive grid .md .lg in desktop.css
• [x] Twitter account/Blog with changes
• [x] Update FontAwesome #74
• [ ] Support select with .form-control.
• [ ] Support form-control-feedback.
• [ ] Support scrollable in tabs
• [x] Create a grunt task to put :hover apart and re-add in desktop (Fix #75)
• [ ] Create a few toy apps / Collect existing apps made by users to prove its potential
• [ ] F.A.Q.

Bugs:

• [ ] Use 2D translateX with switch to solve #73
• [ ] Add by default -webkit-transform: translate3d(0,0,0) to .scrollable-content * to fix ios5
• [ ] Fix #77
• [ ] Fix #82
• [ ] Fix: https://muut.com/mobileangularui#!/mobileangularui/js:bug-in-demo-when-device-ori
• [ ] Decide wether to fix #14 or add an entry to the faq with possible fixes.

Wont:

• ~~Add gestures support with hammer.js~~
• ~~Profiling Demo by device~~
• ~~Separate bootstrap related css from mobile-angular-ui.css to allow use a different build of bootstrap, or another css framework at all.. maybe it would mean to drop bs-panel, bs-input~~ (mobile angular ui relies too much on bootstrap to do so)

Demanded to 1.2

• Support for drag gestures, eg. to create snap.js like sidebars and swipeable/draggable carousels, drag to refresh... (Needs a robust way to retrieve coordinates mixing translate3d and static/relative positioning) should be something as capable as http://pep.briangonzalez.org/.
• Scrollable events (i.e. foundation for drag to refresh, load more on scroll end...)
• Better support for MS Devices
• Toggle/Toggleable directive improvements:
  • fire element along with events
  • have a more concise syntax
  • support before/after-activate/inactivate events
  • control behavior on outer-clicks
  • bind toggleable state to ngModel
  • support ngChange
  • react to history back

Suggest your own!

[seven-hong]

Love your work!

Cant wait to see a version not including angular.js and common angular modules, it's kinda broke everything I built with angular and I'm really struggling.

If you can specify what's the right order to include all the js and css files that'd be fantastic, thanks :)

[mcasimir]

I'm working on it right now. I'm planning a different distribution schema. I wish to drop hardcoded dependencies on iScroll and fastclick as well.

So the final dist/js should be something like:

mobile-angular-ui.js // not including iScroll, fastclick, angular.js ... mobile-angular-ui-iscroll.js mobile-angular-ui-iscroll-lite.js mobile-angular-ui-fastclick.js

This way should be possible to provide different implementations of scrollable or not including it at all or to replace fastclick with ng-touch.

[mcasimir]

Released 1.0.14-beta.

This is how to load mobile-angular-ui now:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="mobile-angular-ui/dist/js/mobile-angular-ui-fastclick.min.js"></script>
<script src="mobile-angular-ui/dist/js/mobile-angular-ui-scrollable-iscroll.min.js"></script>

[pavei]

Now i can't click options menu in demo. Using android browser and chrome android and swipe dosen't work anymore

[mcasimir]

What is the options menu? With the android browser on my smartphone, a super-old one, i can click/tap everything.

~~Swipe for sidebar won't work since there is no swipe directive anymore, if you wish you can replace mobile-angular-ui-fastclick with angular-touch to bring it back. Another option would be to stay with fastclick and add angular-gestures to have more features.~~ (mobile-angular-ui-fastclick has now $swipe service)

The only issue i'm experiencing with my phone anyway is in scroll page where iScroll5 freezes the browser while iScroll4 seems to have some issues with forms. Now that scrollable is apart I'll try different solutions such as Overthrow.js or iScroll4 with some workaround to test which is better.

[pavei]

Using a galaxy s4 in chrome and default browser. Using a galaxy s3 only in chrome. Side menu, Home, Scroll, Forms...

[mcasimir]

Please be more specific. What is working, what does not, what is the options menu? Thank you anyway! I'll try with a different phone soon.

[pavei]

https://www.dropbox.com/s/gpl9mvw6q42sfx9/2014-03-05%2016.49.08.mp4

[mcasimir]

Released 1.1.0.beta.1 scrollables now works different cause they are relative positioned now.

<div class="scrollable">
    <!-- this has position: relative;  height: 100%; -->
   <div class="scrollable-content">
       <!-- this has position: absolute; -->
   </div>
</div>

This would make scrollables easier to use, but... In order to make it works correctly their containers must have a padding that is equal to their top margin, or better: the .scrollable height should never overflow the window size, otherwise scroll would stop before the end of content.

To overcome this i'm planning to attach a callback to window.resize event that should resize .scrollable elements according to window size. Could it be a performance issue?

[mcasimir]

1.1.0-beta.4 has carousel component.

[pavei]

I updated the new version and all list-group with ng-repeat not showing anymore

[leonardobres]

Would be nice to use the $modal defined by AngularUI. In the way that was write, Overlays aren't often a good choise, because it's necessary change the HTML file to include a directive. I think that programatically way , as $modal does, make it's more ease to write and reuse.

[mcasimir]

@pavei can you report the user agent string that is shown in the demo home page, and if it's not a problem appearing in the demo also a snippet of code? i can't reproduce the issue. thank you

[pavei]

  <div class="scrollable list-apontamento">

        <div class="scrollable-content ">

            <div class="list-group">
                <a class="list-group-item" ng-repeat="item in options" ng-click="clickOption(item)">{{item.name}}
                    <i class="fa fa-chevron-right pull-right"></i>
                </a>

                <a class="list-group-item configuration" ng-repeat="item in listCustom" ng-click="clickOptionGeneric(item)" >{{ item.name }}  <i class="fa fa-chevron-right pull-right"></i></a>

            </div>
        </div>
    </div>


.list-apontamento {
    margin-top: 90px;
    font-size: 18px;
}


.configurations .panel-heading{
    border-radius: 0px !important;
    font-size: 15px;
}

.configurations .panel{
    margin-bottom: 0px !important;
}

[mcgsoftware]

I like how this framework works. Just a suggestion, maybe make your tag-line more compelling for business. Maybe something like:

"Create a native look-and-feel mobile version of your Bootstrap/Angular Apps with minimal changes to your code. "

Being able to have a native-looking mobile app using one technology and one code base is a key selling point, and one that Bootstrap and others has not been able to deliver upon.

I think if you can demo a simple desktop web app with a mobile version of same showing a large percentage of code reuse is a huge benefit of your's over the others (jquery mobile, titanium, etc.). I imagine there's some design patterns / best practices that could be followed to better ensure that code reuse is maximized across mobile and desktop. Showing people how to make desktop + mobile from the same code base with only minimal changes, I think will resonate with a lot of people - and makes it an no-brainer choice for the business folks .

I noticed Bootstrap's http://goratchet.com CSS looks nice, but what I don't like is they have their own styling classes (e.g. Ratchet table-view instead of overriding list-group like yours does), not to mention it doesn't work at all in a desktop browser... Maybe there's some useful CSS formatting code to be gleaned from that project, but if the view partials code is a lot different for mobile, it makes the code reuse less effective.

I like the angular edition of this so, I hope that edition keeps going. I'd shy away from custom mobile-only directives like the ionic framework guys did as much as possible, since that makes the code less reusable with the desktop version and hard to debug.

[mcasimir]

@pavei I can't see anything wrong with your code. Maybe in the layout you have an element that is not contemplated by css reset eg. ng-include, this would cause your issue.

<ng-include src="sidebar.html">
   <div class="scrollable"><!-- ... --></div>
</ng-include>

Either change it to an attribute directive or apply css rules to directive elements.

ng-include {
  display: block;
}

In any case, if this isn't a valid solution i ask you to open a different issue (since this is not strictly related to the roadmap topic) reporting your user-agent string (not your phone model) and a more complete snippet including layout. This way I'll be glad to help you testing it with an emulator. Thank you!

[mcasimir]

@leobres agree, overlay/modal needs a better design.

[mcasimir]

@mcgsoftware although is relatively simple to port a desktop web app made with Bootstrap and Angular Js to Mobile Angular UI, I think the main scope of this project can be broader.

I think that there are a lot of people around that would be happy to also reuse their knowledge along with their codebases.

Mobile Angular UI should be useful to someone who wants to create a web application from scratch using Angular JS and Bootstrap 3.

Plus, porting a Mobile Angular UI application to desktop is almost for free.

Also as I go along with the code, I realize more and more that Mobile Angular UI directives and services are general enough to be used with different css frameworks like topcoat or ratchet css, and it's not unlikely that i will try to enforce this trait to build a common JS working with different css toolkits. Eg. i could release both a mobile-angular-ui-bootstrap.css and mobile-angular-ui-topcoat.css.

[AnthonyButcher]

A sliding dropdown menu/navbar, similar to the side menus, but arriving below the navbar, would be a nice addition. You can see one in action at http://oowot.com if you click on the categories button at the top.

[mcasimir]

@AnthonyButcher This can be already done using toggle.

Just add a toggleable block at the beginning of your content.

<nav toggle="off" target="myDropdown" bubble toggleable id="myDropdown" active-class="in" class="categories-nav">
<a class="pull-right" href><i class="fa fa-times"></i></a>
<ul>
   <li><!-- ... --></li>
</ul>
</nav>

<a toggle href target="myDropdown">Toggle Categories</a>

Add a little css to achieve the collapsible effect/transition

.cats-nav {
   display:block;
   max-height: 0;
   overflow: hidden;
}

.cats-nav.in {
   max-height: 9999px;
   transition: max-height 0.3s ease-in;
}

[AnthonyButcher]

An easy way to stick Google adsense into a packaged app would be nice. I would like to use the bottom nav bar to hold an adsense advert... but also to vary the size of it dependent upon the screen space available. For instance, in desktop mode it would probably show a Leaderboard, but switch to a half banner when using mobile width.

[mcasimir]

Ok working on some demo apps i realized that a more powerful swipe service is necessary to create a lot of components with touch interaction. The first improvements would be a directive, something like swipeable that will control touch events and produce specific swipe events. swipeables (funny name) should follow the movement of the touch by default, this feature can be enabled with a parameter. Other parameters should control the step of the movement and its cancellation.

A step is a fraction of the movement. When a step is reached a related event is triggered.

eg.

<div class="card" swipeable="aSwipeableElement" steps="{prev:[-0.3, null], next: [0.3, null]}" follow-x>....</div> 

$scope.$on('swipeable.step.aSwipeableElement.next', function(elem, event){
  $scope.flipCard();
});

Steps are defined as a fraction of X or Y movement respect of element width/height. If no steps are active the movement is cancelled.

In the example above it should cancel between 1/3 of the container width and activate next and prev steps according to their values.

Any thoughts/suggestions about it?

[jmaicher]

I think it's a great idea if you really need of so much control about swipes. Are steps completely generic? Do you intend to use it for something like this: steps="{one: [0.1, null], two: [0.2, null]}" ? If that's not what you have in mind, maybe swipes="..." is a better fit? IMHO there should definitely be some sane defaults for left, right, up, and down.

What do you think about splitting the bootstrap styles from the mobile-angular-ui-specific styles? Because this would allow me and others to use bootstrap-sass in combination with mobile-angular-ui. In the long run, I think supporting both, sass and less, would be beneficial. Or maybe exclude bootstrap completely from the build (if possible)?

[mcasimir]

This directive should serve as a foundation for switches, cards, and all kinds of interaction involving simple gestures. I'm thinking at the way you can dismiss a notice in android (swiping right).

So I need at least a way to specify ranges of the movement that will activate an action, and some other way to express a constraint on the movement.

I meant a sort of event: range map. Perhaps i need to find a better syntax. But for first i can drop the steps attribute in favor of a swipes attribute, like you suggested:

<div class="card" swipeable="mySwipeable" swipes="{one: [..], two: []}" id="aSwipeableElement" motion-constraints="[]">...</div>

Now i'ts clear that both swipes and motion-constraints need some way to express ranges of movement. Assuming contiguous ranges we can express them with a single number being their lower bound. Constraints are ranges for both axis, eg: x: [0, null], y: [0,0] would mean you can only swipe right.

By default the swipe should always be cancelled (the element must return to its original position), if a step is reached the movement can be canceled manually if required.

Lets try to realize an android-like interaction to dismiss notices:

<ul class="notices">
   <li class="notice" swipeable="noticeSwipeable" swipes="{delete: 0.6}" motion-constraints="{x: [0, null], y: [0,0]}" ng-repeat="notices" />
</ul>

$scope.$on("swipeable.swipe.noticeSwipeable.delete", function(evt, elem, attrs, model){
   if(! elem.hasClass('animate-notice-dismiss')){
      model.delete();
      var onAnimationEnd = function(){
         elem.remove();
      };
      elem.addEventListener("animationend", onAnimationEnd, false);
      elem.addClass('animate-notice-dismiss');
   }
});

[mcasimir]

Ok i spent a little time of my Easter holidays trying to redesing website and logo to make them a little more appealing for audience. This is what I achieved... What do you think about it?

[AnthonyButcher]

Looks really good!

On Thu, Apr 24, 2014 at 3:01 PM, mcasimir [email protected] wrote:

Ok i spent a little time of my Easter holidays trying to redesing website and logo to make them a little more appealing for audience. This is what I achieved... What do you think about it?

[image: website-redesign-draft]https://cloud.githubusercontent.com/assets/334881/2790220/c7b0fa1e-cbb8-11e3-9791-3cd9ac6bdb79.png

— Reply to this email directly or view it on GitHubhttps://github.com/mcasimir/mobile-angular-ui/issues/4#issuecomment-41283220 .

[tomcon]

Nice one mcasimir - looking good!

On 24 April 2014 15:01, mcasimir [email protected] wrote:

Ok i spent a little time of my Easter holidays trying to redesing website and logo to make them a little more appealing for audience. This is what I achieved... What do you think about it?

[image: website-redesign-draft]https://cloud.githubusercontent.com/assets/334881/2790220/c7b0fa1e-cbb8-11e3-9791-3cd9ac6bdb79.png

— Reply to this email directly or view it on GitHubhttps://github.com/mcasimir/mobile-angular-ui/issues/4#issuecomment-41283220 .

[Junctionbe]

Hi I'm in an internship, i used your UI framework to build an AngularJS mobile web app and it worked great. I've found a few bugs or quirks only happening on mobile, I'll list them, then report it here if i have some free time :)

Keep going ahead your framework is awesome :)

PS: The cross to close overlay is too small in my opinion, i edited your js and made it fa-2x, it was better looking.

[mcasimir]

Ok.. big changes before first RC.

• Updated to latest bootstrap and angular.js
• Rewritten everything in vanilla js in the hope to have more people collaborating
• Rewritten toggle/toggleable directives in a more Angular.js fashion
• A lot of work to get rid of memory leaks
• Restructured .less code to be more understandable and use bootstrap vars and mixins whenever possible (you can now customize almost everything through less vars)
• Supporting different icons sets (added same style of .fa to .icon)
• Dropped support to iScroll (sorry too much work to maintain even this)
• Removed $swipe service from fastclick touch implementation (just use ngTouch for that)
• Included everything else in the same distribution file
• Renamed bsInput to formControl
• Sidebars closes by default on outer clicks (customizable)

I'm going to document changes and then I'll release them.

[udiedrichsen]

Really nice work !

But I would great to have this package in meteor js. Can please add this to https://atmospherejs.com as package ?

Would be great !