Discuss ROADMAP for Mobile Angular UI 1.1 about mobile-angular-ui

[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//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//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 !

[mcasimir]

@udiedrichsen I really don't know how to do that. I only played with meteor for a few days. If Its just a matter of signaling the repo to https://atmospherejs.com It would be fine, but I fear this would be not enough. em I wrong?

[calidion]

awesome!

So I am really loving this mobile layout so far. What is the term of use if someone wants to contribute and use this architecture or design?

[larkintuckerllc]

Am switching from BackboneJS + Mobile jQuery to Angular + (NOW) Mobile Angular UI and am finding it rather nice. Tried Ionic but seemed too heavy (got all jammed up with Cordova, Node, etc).

Please keep to your simple install process; not a fan of software that over-reaches and tries to help too much.

[mcasimir]

@larkintuckerllc I created Mobile Angular UI for the same reason (moving from Jquery mobile to Angular.js + something I haven't found).

I think a repo/branch with some scaffolded projects would be enough for Cordova apps. Plus, although Mobile Angular UI is focused on targeting mobile devices it is also suited to create hybrid html5 desktop apps (ie, embedding webviews) or desktop web apps.

[mcasimir]

@tcosmos Anyone can contribute freely.

I haven't planned restrictions on its use.

Code is released under MIT license and I think I would rely on donations for now.

Thanks mcasimir. My next question may seem stupid but I want to learn more. What kind of setting does this style of IU require in order for someone to use it for Cordova or PhoneGab application. I have seen people who ask me this question I couldn't answer. It will be help to learn more about it and so that I can explain somethings in details though I am still walking myself through it. Thanks.

[skchandail]

Can I make “Sidebars closes by default on outer clicks” in Desktop also ? please share some idea or code. As I am very new in Angular.

[mcasimir]

@skchandail Of course yes. In fact it is the default behavior and is active on desktop either. Just open the chat in demo and click somewhere else. You should then see the chat closing.

Anyway http://mobileangularui.com/forum/ is a better place to ask for these questions.

Thank you for the interest.

[skchandail]

Thanx @mcasimir.

[lylepratt]

Hi! Loving this library so far. I am curious about the broader Swipe support. We have quite a few UI interactions planned that will require swipe detection.

For example:

• Swipe on list items to open item specific buttons/menus.
• Swiping to open/close the side bars.

Do you have any updates on this? Is there any way we can help contribute that functionality? Would a bounty help? :)

[mcasimir]

@lylepratt Swipe gestures (not drag) are already supported by angular-touch that works with mobile-angular-ui. In that case you could use ng-swipe-(left-right) to trigger desired action.

If you mean drag gestures instead (eg. dragging application area should close the sidebar) then I will work on it immediately after the first release.

I would really appreciate any kind of help for that. I'm looking for something similar to http://pep.briangonzalez.org/. Anyway I will publish a document to discuss API for that as soon as possible, since it will be one of the major feature for next release:

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/.

[lylepratt]

@mcasimir Cool. We'll do a little more research into what exactly we'll need so we can pinpoint how we can contribute.

Also a question about LESS dependancies when installing Mobile-Angular-UI with Bower:
We've installed Mobile-Angular-UI using bower and it installs Bootstrap as it should into our "bower_components" folder. However, the LESS files included with Mobile-Angular-UI are referencing Bootstrap LESS files at a local/relative path. Do you have any recommendations on how to solve this? I don't really want to hard-code override the M-A-UI LESS import paths. Should we be using M-A-UI as part of our root project instead of including it via Bower?

EDIT: I think you should be including w/e Bootstrap files you're overriding as a part of this repo and not as an imported Bower component. Bootstrap is not really a requirement for this anyway since you don't include any of its JS or CSS directly.

[mcasimir]

@lylepratt well.. I think having bootstrap as bower dependency would make easier to manage their updates.

Speaking about less path: It depends on how you compile your .less files. Anyway you are not forced to use bower to compile less, you just need to configure your less compiler to make it search for imports in the right path.

Mobile angular ui sources only requires that boostrap less sources are placed in bootstrap/less subfolder of the import path.

So.. said that you want to use vendor folder to keep your css/js dependencies then just place bootstrap less sources in vendor/bootstrap/less folder and setup vendor as import path for less compiler.

If you are using bower just specify bower_components as import path..

Then in your main.less you could use @import 'mobile-angular-ui/src/less/mobile-angular-ui' and the compiler will resolve bootstrap dependencies also.

Thank you

[lylepratt]

"Mobile angular ui sources only requires that boostrap less sources are placed in bootstrap/less subfolder of the import path."

I could totally be missing something, because I don't have a lot of experience with Bower, but that seems to be the problem. Bower doesn't place the Bootstrap less sources in the bootstrap/less subfolder. You have to manually move/link to them inside the M-A-UI sources, which defeats the whole purpose of bower?

[mcasimir]

No, you don't have to move them, leave them in bower_components.

Then if you're compiling less with lessc:

lessc --include-path="bower_components" yourlesssrc.less

Otherwise if you are using grunt and grunt-contrib-less:

    less: {
      dist: {
        options: {
          paths: ["bower_components" /* , ... */ ]
        },
        files: {
          "result.css": "src.less"
        }
      }
    }

This is exactly what I do to build dist files of mobile-angular-ui.

[lylepratt]

Hmm. Using Gulp not grunt. I'll keep digging. I really do appreciate your help! I suppose I should have opened a separate issue for this.

[larkintuckerllc]

Wondering if you all had looked at topcoat.io as another option (or starting point) for development? They seem to have a fairly large number of UI elements and it is strictly a CSS solution. I am playing around with it too and find it meets my basic needs.

[bingalls]

You can get more carousel options and performance, with https://github.com/codrops/PageTransitions
I hope these CSS transitions can be applied to a section, and not only whole pages.
Tinder is cute, powerful, and unintuitive.
You should add the new mobile features in AngularJS 2.0 beta to this roadmap.

[mcasimir]

@larkintuckerllc yes i do but generic parts of mobile angular ui css are too Boostrap-centric to make css frameworks switchable, anyway I think you can use the Js as is with other css libs as well.

[mcasimir]

@bingalls Carousels will hopefully have a better api after i'll add gesture/drag support. Thank you

[larkintuckerllc]

@mcasimir Ok, I have come full circle, gave up on topcoat.io (seemed there were too many browser issues) and spent a couple of days learning Bootstrap. With v3.x, it is very mobile-centric and I was able to create a great looking mobile UI simply by using the panel and list-group components (again was looking for a lightweight solution with no clutter of extra Javascript). BTW your framework does require quite a few files (poses a bit of a problem with HTML5 caching).

Guess, I will do what I can in the more basic Bootstrap framework and see when and if I need to get fancier with mobile-angular-ui.

See HTML source for this page at.

https://github.com/larkintuckerllc/hellomean5/blob/master/public/views/wineries-detail.html

[designed-in-india]

Great work. Presently using this as the base for my app. Being a newbie, am not sure how to implement sub page transition effects, say, after clicking on a list item, the next page that comes, needs to have a slide from right option. Can this be achieved easily? A couple of tips will be really helpful.

Can this be added as part of your framework?

[mcasimir]

@designed-in-india Hi, i think you can use ngAnimate for that. I may write a tutorial soon.

[robertobock]

Where is the tutorial? I am gonna take the example as a guide for me.