akserg / angular.dart.ui Goto Github PK

View Code? Open in Web Editor NEW

101.0 21.0 37.0 2.06 MB

Port of Angular-UI to Dart.

Home Page: angulardartui.com

License: Other

JavaScript 0.09% HTML 8.13% Dart 91.31% Shell 0.16% CSS 0.30%

angular.dart.ui's Introduction

Angular UI

Port of Angular-UI to Dart.

Look at Demo page for this project.

You may be interesting in check out Material Design Theme for this project.

Quick-Start

Include the following code to your index.html

<!-- Latest compiled and minified bootsrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional bootstrap theme CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- angular ui CSS -->
<link rel="stylesheet" href="packages/angular_ui/css/angular.css">
<!-- your own CSS file -->
<link rel="stylesheet" href="style.css">

Add the angular-ui module in your main.dart

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular_ui/angular_ui.dart';

void main() {
  applicationFactory()
    .addModule(new AngularUIModule()) // The angular-ui module
    .addModule(new MainModule()) // Your own module
    .run();
}

Use the angular-ui components as described below or in the demo.

##Bootstrap directives and components

Checkbox and RadioButton
DropdownToggle
Collapse
Alert
ProgressBar
Modal
Accordion
Rating
Datepicker (partially implemented)
Tabs
Drag and Drop support
Carousel
Timepicker
Pagination
Tooltip
Popover
Typehead

Note: Drag and Drop support is experimental feature and API can be changed at any time in the future.

##Credits

angular.dart.ui's People

Contributors

Stargazers

Watchers

angular.dart.ui's Issues

ProgressBar tests failing with AngularDart 0.9.7/UnitTest 0.10.0

Create Datagrid

Renders data in a table with paging, sorting, and searching.

Create Tree

Provides a visual display of hierarchical node data.

Create Combobox

Combines input and dropdown for easy and flexible data selection.

Should this package include a drag-drop and sortable directive?

Drag & drop is not a real visual component, however, should angular.dart.ui provide support for it? I think it will be good to have something similar to what jquery-ui offers. I'm thinking about "sortable" too...

Create Preloader

Fully CSS-driven loading animation for visual indication of wait times.

Transition and Collapse are not working as expected

#4, #1

Timeout in Transition is called without a delay.
Its purpose seems to be to stop the transition when it takes longer than the specified timeout.
Because timeout is called without an explicit delay the default value 0 takes effect, which ends the transition (collapse/expand) immediately after it's start.

For testing purposes I added a timeout of 1s.
The expand/collapse effect is still no transition, instead it's delayed 1s and then done without the transition.

Addition
I just saw, when I expand/collapse several times it works sometimes.

Fix Progressbar unittests

Create Popup for Datepicker

Implement popup part of Datepicker.

Change copyright info

Add all authors in AUTHORS.md file.

Create Rating

Create Carousel

Create Tooltip

Create Timepicker

Modal and Mirrors - Dart2js

Some sort of problem here... When converting to JavaScript the modals just don't work. I've tried including more libraries in the @MirrorsUsed() annotation but it doesn't seem to make a difference (I could very well be missing some - but I tried to look in the modal.dart file to see what else could be in use). The console just keeps showing Unsupported operation: Can't use 'toString' in reflection because it is not included in a @MirrorsUsed annotation. ... Does the actual angular.dart.ui package need some sort of @MirrorsUsed itself?

dropdown-directive add/remove 'open' to parent element's class attribute

I'm using angular-ui package v.0.2.0+7 and I have a html code like this:

<body ng-app>
  <div id="test" class="well">
    <button class="btn" type="button"  dropdown-toggle>Test Menu</button>
    <ul class="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</body>

When I click the button, the menu is not displayed but I can see that "open" is added to div id="test" class attribute. Clicking again the button remove "open" from the div class attribute. Is this a bug or did I do something wrong ?

Create BindHtml

Create Alert

Create Timeout

Create Spinner

Provides convenient numeric input with increment and decrement buttons.

Create DropdownToggle

a lot of the ProgressBar tests are failing

While trying to integrate my changes, I merged what has changed in the repository lately,
I stumbled over the ProgressBar tests.

A lot of the ProgressBar tests are failing at the the bool animate attribute.

Testing progressbar: transcludes "bar" text. Test failed: Caught type 'String' is not a subtype of type 'bool' of 'value'. #0 ProgressBar.animate= (package:angular_ui/progressbar/progressbar.dart:48:8

I don't know if this is an Angular bug but I guess this still worked when the tests were written.
Angular seems not to be able to convert "false" to bool anymore.

Should I create a pull request in this state anyway?
Any idea how to proceed?

Create Position

Create Collapse

update pubspec.yaml to recent AngularDart and UnitTest versions

Create Accordion

The Checkbox example in index.html is kind of weird

In th Checkbox example, the state of checkbox buttons changes after clicking again on other places, not directly changes right after clicking on the checkbox buttons.

It's weird, right?

Thank you,

Mao-Yeh

dropdown-toggle doesn't execute the menu when clicked

#16

The header of the demo page contains a dropdown with some in-page links.
They don't work. I can click an item of the dropdown menu and the menu closes, but the click has no further effect.
I had this too with my implementation. It was a problem with preventDefault() preventing the execution of the link-click.
I then just removed preventDefault() and it worked fine, but I wondered if there may be situations where this causes problems.

Create Buttons

Create Pagination

Make components work without `applyAuthorStyles`

This feature can be removed from Dart polyfills and Dartium anytime.

https://groups.google.com/forum/#!topic/polymer-dev/gNlsZDltpUY

'applyAuthorStyles' has been removed from the ShadowDOM spec and recently from Chrome Canary so I am looking for a replacement.

Polymer/old-docs-site#241

Create Transition

Create Drag&Drop

Create Drap and Drop component. Some useful links:
In dart:
http://www.directiv.es/Angular-DragDrop
http://code.makery.ch/dart/html5-drag-and-drop
https://github.com/marcojakob/dart-html5-dnd

In javascript:
https://github.com/btford/angular-dragon-drop
http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html
http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Create Typeahead

Tests are broken with AngularDart 0.9.7 or UnitTest 0.10.0

ERROR
All Tests: Alert. Test failed: Caught Bad state: Not allowed when tests are running.
package:unittest/unittest.dart 471:21 group
jasmine_syntax.dart 78:15 describe
jasmine_syntax.dart 83:5 describe
jasmine_syntax.dart 83:5 describe
tests/alert_tests.dart 10:11 alertTests
ui_tests.dart 52:35 main..
dart:async _asyncRunCallback
file:///mnt/data/b/build/slave/dartium-lucid64-full-dev/build/src/dart/tools/dom/src/native_DOMImplementation.dart 607 _handleMutation

Check selectors of all components

I found inconsistency in implementation of some components. Selectors were applied only for tag or attribute in compare to similar from JavaScript version.

Port missing collapse tests

The collapse tests are not ported.
As I need the Collapse for the Accordion #8 and it seems to have issues I'm going to port the missing tests.
(I haven't ported the tests for the elements ported either)

Fix Tabs unittests

Create Modal

Modal tests failing with AngularDart 0.9.7/UnitTest 0.10.0

#13

Create Datepicker

Accordion unittests

The Compile class in utils/compile.dart fails when built to JavaScript

Allow template paths to be configured

Hi!
I see, for things like the modal window component, you can pass the template or templateUrl for the content within the modal window (window.html's content area)...but I'd also like to be able to pass the template URL for window.html itself.

My project sits inside another site/project and since modal.dart has packages/angular_ui/modal/window.html but I actually need it as /packages/angular_ui/modal/window.html to work.

Perhaps as simple as passing the an attribute to <modal-window></modal-window> itself? I know there's two templates here and to make it less confusing the developer should only need to pass what they want inside the actual modal...I hear that, but in special circumstances here, one may have the need to path the window.html template (among other internal templates I suppose) differently...Or completely replace it.

Perhaps this is already possible in some way that I'm not clearly understanding as well. Any thoughts on this issue would be appreciated. Thanks!

Create Progressbar

Angular 0.9.10 unit test fail

I tried to check the status and saw that with Angular 0.9.10 several tests fail.
This seems to be more a problem with the test framework than with incompatibilities of AngularDart 0.9.10 and the UI elements implementation.

I started investigating alerts tests:
alert_test.dart contains two tests.
(I commented out all other tests in ui_tests.dart).
When I run those tests I get an exception/stack trace at the end.
When I comment out one of them and run only the lasting one the test succeeds.

I just wanted to share if anyone else is investigating...
I keep you updated about my progress.

Create Wizard

Easily define a multi-step process that needs to be completed in a specific order.

Create Tabs

Should this package have Bootstrap in the name

I hope it's ok to put such questions here - I have some more to come so please stop me early, if you don't like it ;-)

Why doesn't angular.dart.ui have 'bootstrap' in it's name?

I didn't do AngularJS I know only AngularDart so I lack of insight.

I had the impression that Angular UI encompasses Angular UI Bootstrap but also other UI components. Do these others all work with Bootstrap CSS too, so that it doesn't make sense to differentiate between Bootstrap an non-Bootstrap?

akserg / angular.dart.ui Goto Github PK

angular.dart.ui's Introduction

Angular UI

Quick-Start

angular.dart.ui's People

Contributors

Stargazers

Watchers

Forkers

angular.dart.ui's Issues

Recommend Projects

Recommend Topics

Recommend Org