quantumui / quantumui Goto Github PK

The most powerful NATIVE AngularJS and Bootstrap CSS based UI components make developer life easy.

License: MIT License

JavaScript 55.88% CSS 33.85% HTML 10.27%

quantumui's Introduction

QuantumUI

QuantumUI is the most powerful and well designed NATIVE AngularJS and Bootstrap CSS based UI components make developer life easy.

It complately MVVM structure, easy, light, fast, mobile friendly 25+ components and lots of native angular services.

It optimized and extended Bootstrap based CSS structure with pure CSS3 plugins.

To get started, check out getting started page or follow instructions below.

Dependencies:

Quick start

Three quick start options are available:

Download the latest release.
Clone the repo: git clone https://github.com/quantumui/quantumui.git.
Install with Bower: bower install quantumui.

Run npm install and bower install to install dependencies.

For running sample page, navigate to directory quantumui theni run grunt server.

Read the getting started page for information.

Examples: http://quantumui.org/appdoc/documents/quantumui/index/.

Note : There is in icons.js under the config folder. This file is include all icon configuration options for all components. If you use Bootstrap default glyphicon add this to your page Or If you want to use Fontawesome, Ionicons or any other icon package, you must customize this icon file.

Features of OuantumUI

OuantumUI Core is a free and open-source Component set. The following table details the widgets and features available in QunatumUI Core.

Feature	Core
Bottons
Pageable	No
Bottons
CheckboxGroup	Yes
RadioGroup	Yes
Loading Button	Yes
Toggle Button	Yes
Switch Button	Yes
Components
Select	Yes
Tags Input	Yes
Alert	Yes
DatePicker(full)	Yes
DropDown	Yes
Tooltip	Yes
Popover	Yes
Modal	Yes
Modalbox	Yes
Aside	Yes
Tab(responsive)	Yes
Carousel	Yes
Collapse	Yes
Accordion	Yes
Colorpicker	Yes
Scrollbar	Yes
Range Slider	Yes
Loading Service	Yes

What's included

Within the download you'll find the following directories and files, providing both compiled and minified variations. You'll see something like this:

quantumui/
├── dist/
|   ├── css/
|   |   ├── addon/
|   |        ├── effect-light.min.css
│   |   ├── quantumui.css
│   |   ├── quantumui.min.css
│   |   ├── quantumui.css.map
│   |   ├── bootstrap-quantumui.css *//include bootstrap.css*
│   |   ├── bootstrap-quantumui.min.css *//include bootstrap.css*
│   |   ├── bootstrap-quantumui.css.map *//include bootstrap.css*
|   ├── images/
|   ├── js/
│   |   ├── quantumui.js  *//exclude angular.nojq and pageable*
│   |   └── quantumui.min.js *//exclude angular.nojq  and pageable*
│   |   └── quantumui.min.js.map *//exclude angular.nojq  and pageable*
│   |   └── quantumui-nojq.js *//include angular.nojq  **exclude pageable***
│   |   └── quantumui-nojq.min.js *//include angular.nojq  **exclude pageable***
│   |   └── quantumui-nojq.js.map *//include angular.nojq  **exclude pageable***
│   |   └── quantumui-all.js
│   |   └── quantumui-all.min.js
│   |   └── quantumui-all.min.js.map
├── docs/
|   └── js/
|        ├── app.js
|        ├── indexController.js
├── images/
├── src/
└── less/
    ├── mixins/
    ...

Documentation

QuantumUI's is full documented with lots of examples on online page, http://quantumui.org/appdoc/documents/quantumui/index/.

Temporary CDN

Below source are just for demos like Plunker or JSBin. Don't use in your projects

This is a plunker example of Temporary CDN usage

http//cdn.quantumui.org/v1.2.0/quantumui.min.css
http//cdn.quantumui.org/v1.2.0/quantumui-all.min.js

Authors

Mehmet Ötkün

Contributing

Contribute to QuantumUI, http://quantumui.org/ui/contributecode/.

Support

There are some several social platforms you can get help or share your experience, http://quantumui.org/ui/community/.

Copyright and license

QuantumUI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.

You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.

Social Media:

Twitter: https://twitter.com/quantumui

Facebook: https://www.facebook.com/quantumui

Google+: https://plus.google.com/u/0/communities/113269892759760815339

LinkedIn: https://www.linkedin.com/company/angularui

LinkedIn2: http://linkedin.com/pub/mehmet-%C3%B6tk%C3%BCn/92/672/17b

quantumui's People

Contributors

Stargazers

Watchers

quantumui's Issues

modal under the backdrop

from actual master, a simple modal is misplaced under the backdrop.
take a look at the screenshot

promptTemplate is not working, accessing modalBox scope and form validation

I want to create a modalBox programatically. The user should enter an amount and a date to do an transaction. As I have to use more than one input I tried to use my own template. However the promptTemplate is not working as the template is not shown, Changing it to contentTemplate works.

Is it possible to pass information to the modalBox scope? E.g. I want to pass the users balance, to check the user doesnt exeed an amount over his limit. Is form validation possible? I imagine the confirm button would have to have the type ng-submit. Can this be changed?

    // sell shares
    $scope.sellSharesModal = function(market, market_hash, outcome, count) {
      $modalBox({
        'title': "Sell shares?",
        'boxType': "confirm",
        'contentTemplate': static_dir + "partials/sell.html",
        'showIcon': false,
        'afterConfirm': function(response) {
          var sell_order = response.sell_order;
        }
      });
    };

Datetime picker Icons not displaying

They work on the demo page:
http://quantumui.org/appdoc/documents/quantumui/datepicker/

But in the Git repo they don't work, it is blank. I found out that I had to copy the addon.css and their fonts to make them show up on my local page. Aren't they supposed to be included?

Thanks for you effort!

Overlay coming over the modal window

The modal window is getting overshadowed due to overlay. [chrome_browser-desktop]

PS: 1)I am not using UI.bootstrap.
2) Console showing ---Uncaught TypeError: a.then is not a function

More examples needed

need example of using fireEmit and fireBroadcast for modal. Not clear how to have function run when modal is opened/closed

nq-collapse error

I cannot get nq-collapse to work as part of a ng-repeat. The following template:

                <div class="panel-group" ng-repeat="product in selectedNode.Products">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a href nq-collapse="" data-target-id="#buildTeam_{{product.ProductId}}">
                                    {{product.DisplayName}}[{{product.ProductId}}]
                                </a>
                            </h4>
                        </div>
                        <div class="panel-body" id="buildTeam_{{product.ProductId}}">
                            {{product.LongDescription}}
                        </div>
                    </div>

throws this error in the console:

'undefined' error when combining tabset/tab + controller + datepicker

Below is a trivial example that generates an 'undefined' error on currentDate trying to reference scope.currentDate.clone().toDate() (line number 3070 in quantumui.js)

              ngModel.$render();
              apply(function () {
         -->         scope.modelDate = scope.currentDate.clone().toDate();
              })

The problem is reproducible on Chrome and FireFox.

(The full HTML is attached below)

The <body> of the HTML is:

<body ng-app="myApp">
<div nq-tabset="" data-effect="false">
    <div data-nq-tab="" data-heading="Tab #1" active="true">
        <div ng-controller="myCtrl">
            The date <br/>
            <input ng-model="myDate" data-nq-datepicker="" placeholder="Enter date" type="text" class="form-control"/>
        </div>
    </div>
</div>

What I discovered is that I can comment out the tabset and tab or comment out the ng-controller and the datepicker works. With both in it fails (I'm attaching a screenshot from Chrome).

I tried to define a date ($scope.myDate = moment() in the controller and/or via ng-init="myDate"on the HTML) - but it made no difference.

-David

This is the entire HTML:

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Quantum UI - Test</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="file:///......../Scripts/QuantumUI/css/addon/effect-light.min.css">
<link rel="stylesheet" href="file:///......../Scripts/QuantumUI/css/quantumui.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>

<script src="file:///......../Scripts/moment.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="file:///......../Scripts/angular-sanitize.js"></script>
<script src="file:///......../Scripts/angular-animate.js"></script>
<script src="file:///......../Scripts/QuantumUI/js/quantumui.js"></script>

<script>
    'use strict';
    angular.module('myApp', ['ngSanitize', 'ngAnimate', 'ngQuantum'])
        .controller('myCtrl', ['$scope', function($scope) {  }
        ]);
</script>
</head>

<body ng-app="myApp">
<div nq-tabset="" data-effect="false">
    <div data-nq-tab="" data-heading="Tab #1" active="true">
        <div ng-controller="myCtrl">
            The date <br/>
            <input ng-model="myDate" data-nq-datepicker="" placeholder="Enter date" type="text" class="form-control"/>
        </div>
    </div>
</div>
</body>

</html>

Showcase website code in github pls

Hello @mehmetotkun ,

Good day. I think you have lots of showcase coding in the website for e.g Pageable components - Datatable with layer on top of it.. IF you could keep that source code as well in github, that would be great reference for the further development / customization. If you already have that code here , pls point it to me.. Thanks very much .

Regards,
Raj

Any plans for adding Karma and Protractor testing?

See here for more detailed discussion of use cases, advantages and limitations of Karma and Protractor:

http://stackoverflow.com/questions/17070522/can-protractor-and-karma-be-used-together/29619467#29619467

Datetimepicker Time picker

Hi,
two little issue.

The first one if we use qo-mode="time" and qo-format="HH:mm" the popover is the datetime mode and not the time mode.
if we change default option timeFormat = "HH:mm", it's not used in default time format.

Best regards

Typo causes Datepicker to fail

Thanks for creating this great UI framework! Found a small bug:

line 3053: dt.hour(options.maxHour).mimute(0)

shound be:

dt.hour(options.maxHour).minute(0)

Is there an easy way to use different styling

In order to incorporate these components into an existing application it would be helpful to allow developers an easy way to use their own styling or have the basic Bootstrap styling.

how can i set nqModal in $modal's modalOptions?

  var modalOptions = {
            nqModal: vm.customer, //here?????
            title: customTitle || 'Modal as service title'
        }
        $modal(modalOptions);

Dropdown closing and opening programmatically

Hi, I m trying to implement quantum UI components in a new project. I m having troubles closing and opening dropdown.When user presses 'Yes' or 'No' , the dropdown must be closed from within respective function it calls.

I think $hide or $show can be used as mentioned in documents, but due to lack of example, I m not being able to use them as required. Could you help me out?

                        <div class="dropdown-menu deleteConfirm" tabindex="-1" role="menu">
                            <div class="dc-header"><b>Are you sure?</b></div>
                            <div class="dc-body btn-group" role="group" >
                              <button type="button" class="btn btn-info" ng-click="deleteChildRecord()">Yes</button>
                              <button type="button" class="btn btn-danger" ng-click="cancelDeleteChildRecord()">No</button>
                            </div>

                        </div>

QuantumUI, where can i find alert.less file, it's not in master.zip download

hi,
where can i find QuantumUI alert.less file, it's not in master.zip download

Name conflict

The name AngularUI is already used by another open source project. Because this other open source project is very well known, your usage of the term really looks like you are deliberately trying to confuse people.

Could you stop using the AngularUI name?

Keyboard navigation support

I'm impressed with your works. Can you direct me to or show how to create an UI that supports keyboard navigations like in native Bootstrap? Ideally, some basic navigations around navbar, menu, search, table, listvew ect.. Thanks in advance.

Not possible to set state of checkbox

Adding/removing the attribute "checked" has no effect on the state of the checkbox? Is it possible to reset a checkbox?

Can't get (simple) datepicker to work

I have an existing application that was using angular-ui and bootstrap for tabs and date picker.

I replaced the tabs with QuantumUI (QUI) tabs . This works with no issues.

I am having trouble using the QUI datepicker... see the Chrome console log below. Based on the traceback it seems that the problem is with QUI but I don't recognize enough of QUI to tell for sure.

Any ideas on how to get this thing running without errors?

-Many thanks in advance
David

Details:

The HTML snippet for the datepicker:
<td> <input ng-model="item.effectiveDate" data-nq-datepicker="" data-qo-mode="date" placeholder="Enter date" type="text" class="form-control" /> </td>

The angular, angular-sanitize, and angular-animate, are all version 1.4.1

QUI is the latest (downloaded it today and copied to my local file system).

The HTML styles and scripts:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="file:///....../Scripts/QuantumUI/css/addon/effect-light.min.css">
<link rel="stylesheet" href="file:///....../Scripts/QuantumUI/css/quantumui.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="file:///....../Scripts/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="file:///....../Scripts/angular-sanitize.js"></script>
<script src="file:///....../Scripts/angular-animate.js"></script>
<script src="file:///....../Scripts/QuantumUI/js/quantumui.js"></script>

This is the Chrome console log:

TypeError: Cannot read property 'clone' of undefined
at quantumui.js:3070
at apply (quantumui.js:3176)
at Object.fn (quantumui.js:3069)
at Scope.$get.Scope.$digest (angular.js:15667)
at Scope.$get.Scope.$apply (angular.js:15935)
at angular.js:17691
at completeOutstandingRequest (angular.js:5387)
at angular.js:5659(anonymous function) @ angular.js:12314$get @ angular.js:9101$get.Scope.$digest @ angular.js:15685$get.Scope.$apply @ angular.js:15935(anonymous function) @ angular.js:17691completeOutstandingRequest @ angular.js:5387(anonymous function) @ angular.js:5659setTimeout (async)self.defer @ angular.js:5657timeout @ angular.js:17680postLink @ quantumui.js:7298(anonymous function) @ angular.js:8636invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534publicLinkFn @ angular.js:7409$get.boundTranscludeFn @ angular.js:7553controllersBoundTransclude @ angular.js:8169ngDirective.link @ angular.js:27808invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534nodeLinkFn @ angular.js:8137(anonymous function) @ angular.js:8372processQueue @ angular.js:14551(anonymous function) @ angular.js:14567$get.Scope.$eval @ angular.js:15830$get.Scope.$digest @ angular.js:15641$get.Scope.$apply @ angular.js:15935bootstrapApply @ angular.js:1624invoke @ angular.js:4443doBootstrap @ angular.js:1622bootstrap @ angular.js:1642angularInit @ angular.js:1536(anonymous function) @ angular.js:28289jQuery.Callbacks.fire @ jquery.js:3148jQuery.Callbacks.self.fireWith @ jquery.js:3260jQuery.extend.ready @ jquery.js:3472completed @ jquery.js:3503
2angular.js:12314

TypeError: Cannot read property 'find' of undefined
at getElements (quantumui.js:2750)
at buildFirst (quantumui.js:2665)
at buildNew (quantumui.js:2688)
at quantumui.js:3065
at apply (quantumui.js:3176)
at Object.fn (quantumui.js:3052)
at Scope.$get.Scope.$digest (angular.js:15667)
at Scope.$get.Scope.$apply (angular.js:15935)
at angular.js:17691
at completeOutstandingRequest (angular.js:5387)(anonymous function) @ angular.js:12314$get @ angular.js:9101$get.Scope.$digest @ angular.js:15685$get.Scope.$apply @ angular.js:15935(anonymous function) @ angular.js:17691completeOutstandingRequest @ angular.js:5387(anonymous function) @ angular.js:5659setTimeout (async)self.defer @ angular.js:5657timeout @ angular.js:17680postLink @ quantumui.js:7298(anonymous function) @ angular.js:8636invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534publicLinkFn @ angular.js:7409$get.boundTranscludeFn @ angular.js:7553controllersBoundTransclude @ angular.js:8169ngDirective.link @ angular.js:27808invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534nodeLinkFn @ angular.js:8137(anonymous function) @ angular.js:8372processQueue @ angular.js:14551(anonymous function) @ angular.js:14567$get.Scope.$eval @ angular.js:15830$get.Scope.$digest @ angular.js:15641$get.Scope.$apply @ angular.js:15935bootstrapApply @ angular.js:1624invoke @ angular.js:4443doBootstrap @ angular.js:1622bootstrap @ angular.js:1642angularInit @ angular.js:1536(anonymous function) @ angular.js:28289jQuery.Callbacks.fire @ jquery.js:3148jQuery.Callbacks.self.fireWith @ jquery.js:3260jQuery.extend.ready @ jquery.js:3472completed @ jquery.js:3503
angular.js:12314

TypeError: scope.minDate.clone is not a function
at optimize (quantumui.js:2780)
at Object.angular.module.run.provider.$get.$picker.init (quantumui.js:2519)
at quantumui.js:4277
at processQueue (angular.js:14551)
at angular.js:14567
at Scope.$get.Scope.$eval (angular.js:15830)
at Scope.$get.Scope.$digest (angular.js:15641)
at Scope.$get.Scope.$apply (angular.js:15935)
at angular.js:17691
at completeOutstandingRequest (angular.js:5387)

(anonymous function) @ angular.js:12314$get @ angular.js:9101processQueue @ angular.js:14559(anonymous function) @ angular.js:14567$get.Scope.$eval @ angular.js:15830$get.Scope.$digest @ angular.js:15641$get.Scope.$apply @ angular.js:15935(anonymous function) @ angular.js:17691completeOutstandingRequest @ angular.js:5387(anonymous function) @ angular.js:5659setTimeout (async)self.defer @ angular.js:5657timeout @ angular.js:17680postLink @ quantumui.js:7298(anonymous function) @ angular.js:8636invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534publicLinkFn @ angular.js:7409$get.boundTranscludeFn @ angular.js:7553controllersBoundTransclude @ angular.js:8169ngDirective.link @ angular.js:27808invokeLinkFn @ angular.js:8642nodeLinkFn @ angular.js:8142compositeLinkFn @ angular.js:7534nodeLinkFn @ angular.js:8137(anonymous function) @ angular.js:8372processQueue @ angular.js:14551(anonymous function) @ angular.js:14567$get.Scope.$eval @ angular.js:15830$get.Scope.$digest @ angular.js:15641$get.Scope.$apply @ angular.js:15935bootstrapApply @ angular.js:1624invoke @ angular.js:4443doBootstrap @ angular.js:1622bootstrap @ angular.js:1642angularInit @ angular.js:1536(anonymous function) @ angular.js:28289jQuery.Callbacks.fire @ jquery.js:3148jQuery.Callbacks.self.fireWith @ jquery.js:3260jQuery.extend.ready @ jquery.js:3472completed @ jquery.js:3503

Error in console.

I generated an angular-full-stack app using yeoman.I updated the bower.json to add
"moment": ">=2.9.0",
"quantumui": "latest"
and ran bower install.
I updated app.js to include ngAnimate and ngQuantum
angular.module('yeomanTryApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ngAnimate',
'ngQuantum'
])
My index.html has css and js like below

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="bower_components/lodash/dist/lodash.compat.js"></script>
  <script src="bower_components/moment/moment.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/quantumui/dist/js/quantumui.js"></script>

I went to the main.html page and added

and i see the check box but dont see the styles or the animation and I see the following error in the console.

TypeError: undefined is not a function
at Object.fn.unBindTriggers (quantumui.js:392)
at Object.angular.module.provider.directive.angular.module.provider.$get.$master.init (quantumui.js:4235)
at quantumui.js:4277
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)angular.js:11655 (anonymous function)angular.js:8596 $getangular.js:13256 processQueueangular.js:13264 (anonymous function)angular.js:14466 $get.Scope.$evalangular.js:14282 $get.Scope.$digestangular.js:14571 $get.Scope.$applyangular.js:9698 doneangular.js:9888 completeRequestangular.js:9829 requestLoaded

What am I doing wrong?

Alert display problem

I tried Alert but instead of getting growl like notifications....i am getting full width alert...like this

button (icon) of the select is not displayed

Hi,

The icon of the select (on the atmost right of the button) is not displayed i got a small square in his place.

Thanks

CKEditor in Quantum UI Please

Hello Team,

http://sysmagazine.com/posts/200058/
Can we have CKEditor in Quantum UI Component please. Referenced one to you .

Thanks and Regards,
raj

Controller 'tabset', required by directive 'tabContentTransclude', can't be found!

I was trying to use tabcontroller in my app. But I am getting following error in console and neither tabs not tab contents are displayed.

can someone please check if this is real issue? pelase let me know if any more info is needed.

I am using angularjs 1.4.1 and QuantumUI 0.0.1

 <div data-nq-tabset="" data-responsive="true" >
        <div data-nq-tab="" data-heading="Basic Info">
            <form novalidate class="form-horizontal">
               ...form contents....
            </form>
         </div>

       <div data-nq-tab="" data-heading="Advanced">
            <form>
                <fieldset>
                    <legend>Advanced</legend>
                     ............Form contents.............
                </fieldset>
            </form>
        </div>
  </div>

nqModal: backdrop disappear when typeClass is used

Hi,
when you set a typeClass in a modal, its backdrop disappear. Inspecting the element I see that the typeClass value is prefixed on the backdrop element.

example: typeClass value : llpop, outer div class: "modal ng-scope pop-master llpop near-top" , backdrop class: "llpop-backdrop in"

Support for SASS

Support for SASS would be helpful in getting more collaboration in your project. A lot of people use SASS version of Bootstrap.

Standalone Pageable components from Demo page.

Hello @mehmetotkun
In Continuation to #28 , we are trying to bring your Pageable component alone into our existing bootstrap angular framework ..

So, first trying to make this pageable component , especially the demo code alone , work independent of any other frills. But i am unsuccessful .

Google Drive View Access for code extraction

Issue in a screen:
https://docs.google.com/file/d/0B1jv0flp8lv9ZXJTWWhUMU5LV0E

If you have sometime, can you please suggest a solution ..

This may be the use case for already up and running sites, who just need few components instead of the entire suite.

Thanks and Regards,
Raj

nqTooltip on Input

Hi,
I've just see that when I add nq-tooltip qs-title="Something" on input, I cannot click on this input.

Do you have any idea to fix it?

Best regards

nqSelect with complex object

Hi,
I have the following:

with ObjectList = [{Code:"1", Description:"Test 1", Comments:"Comments1"},{Code:"2", Description:"Test 2", Comments:"Comments2"},{Code:"3", Description:"Test 3", Comments:"Comments3"}];

it works fine when I select, change .... but the first time I load and Object is initialize with one of the value ( for example ObjectList[1]) the drop down don't show the Object.Description

Is it a easy way to fix it?
I need it because I have 3 dropdown linked together.

Thanks

Unable to show popover properly

Hello, first i have to say Quantum UI is really a game changer in building UI with angular js thanks guys for that.
I am only having a issue with the popover after i implemented it when i click the popover shows up but no style no animation. PS : i removed bootstrap UI for the conflit issue.
this is the logged error :
"Uncaught TypeError: Cannot read property 'then' of undefined" at quantumui.min.js:7

$modal sample request

Hi,
Is it possible to have a sample with an angular template (like for angularjs.bootstrap.ui $modal)
for example

Thanks for your help
Best regards

quantumui demo page's offcanvas menu not working (i.e scrolling) in mobile browser (chrome)

i recently tried to view the demo of quantumui on my phone (Android) in chrome browser... but i was not able to scroll the offcanvas menu downwards... only the page is getting scrolled on mobile devices... i dont know about other browsers... but in chrome its working.

Select and ng-model

Hi,
I've got an issue with ng-model and quantum select.
the following doesn't work has expected:

When I select an item input is enabled like expected but when I remove the selected element the input stay enable.
Do you have any idea?

Thanks

not working with custom $interpolate tags

standart problem when using custom $interpolate symbols like [[ [%
i working on this ..

Is the getting started site down?

All down:
http://quantumui.org/
http://quantumui.org/ui/
http://quantumui.org/ui/start/

Problem installing Quantumui error on quantumui.js

Hi,

First, bravo for the framework it's very interesting and distinguished.

I have installed it (i use angular 1.3 with angular bootstrap ui) and added the module but i had this error message in the console

TypeError: undefined is not a function
    at Object.fn.unBindTriggers (quantumui.js:395)
    at Object.angular.module.provider.directive.angular.module.provider.$get.$master.init (quantumui.js:4036)
    at quantumui.js:4078
    at processQueue (angular.js:13189)
    at angular.js:13205
    at Scope.$get.Scope.$eval (angular.js:14401)
    at Scope.$get.Scope.$digest (angular.js:14217)
    at Scope.$get.Scope.$apply (angular.js:14506)
    at done (angular.js:9659)
    at completeRequest (angular.js:9849)angular.js:11607 (anonymous function)angular.js:8557 $getangular.js:13197 processQueueangular.js:13205 (anonymous function)angular.js:14401 $get.Scope.$evalangular.js:14217 $get.Scope.$digestangular.js:14506 $get.Scope.$applyangular.js:9659 doneangular.js:9849 completeRequestangular.js:9790 requestLoaded
```.

contentTemplate not working on ModalBox

//when you try to use contentTemplate the modalbox won't open.

$scope.openModalBox = function () {
var modalBoxOptions = {
//content: 'I am a modalbox created from service...',
size: 'lg',
theme: 'danger',
boxType: 'confirm',
confirmTemplate: '/app/partials/modal/add-project.html',
afterConfirm: function () {
}
}
$modalBox(modalBoxOptions);
};

Style missing

Hello,
Below are head, code and screen. It seem there is a missing style and script in the released package.

<title>Home Page - My ASP.NET Application</title>

<link href="/Content/quantumui/dist/css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

<script src="/Content/quantumui/dist/js"></script>


<link rel="stylesheet" href="/Content/css/bootstrap.min.css">
<link rel="stylesheet" href="/Content/css/bootstrap.css">
<link rel="stylesheet" href="/Content/css/site.css">

<!-- Light package of effect.css It is optional -->
<link rel="stylesheet" href="/Content/quantumui/dist/css/addon/effect-light.min.css">
<!-- VENDORS -->
<!-- Required for Datepicker Component -->
<script src="/Content/js/moment.min.js"></script>

<!-- ANGULARS -->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<!-- QuantumUI -->
<script src="/Content/quantumui/dist/js/quantumui.min.js"></script>

<script>
    var app = angular.module('myApp', [
        'ngSanitize',
        'ngAnimate',
        'ngQuantum'
    ]);
</script>

            <div class="btn-group btn-group-reset" ng-model="ContactPreferanceRadio" data-nq-radio-group="" data-show-tick="true">
                <label class="btn btn-primary"><input name="ContactPreferanceRadio" type="radio" checked="checked" value="byemail">By Email</label>
                <label class="btn btn-primary"><input name="ContactPreferanceRadio" type="radio" value="byphone"> By Phone</label>
                <label class="btn btn-primary"><input name="ContactPreferanceRadio" type="radio" value="byfax"> By Fax</label>
            </div>

            <div class="btn-group btn-group-reset" ng-model="ContactPreferances" data-nq-checkbox-group="" data-show-tick="true" data-true-value="'YES'" data-false-value="'NO'">
                <label class="btn btn-default"><input name="ContactPreferances" type="checkbox" checked="checked" value="byemail">By Email</label>
                <label class="btn btn-default"><input name="ContactPreferances" type="checkbox" value="byphone"> By Phone</label>
                <label class="btn btn-default"><input name="ContactPreferances" type="checkbox" value="byfax"> By Fax</label>
            </div>

            <div>
                <button type="button" data-nq-dropdown="" class="btn btn-inverse">Open Menu</button>
                <ul class="dropdown-menu" tabindex="-1" role="menu">
                    <li tabindex="-1" role="presentation"><a href="#" role="menuitem"><i class="fic fu-add"></i> Action</a></li>
                    <li tabindex="-1" role="presentation"><a href="#" role="menuitem"><i class="fic fu-eye"></i> Action 2</a></li>
                    <li tabindex="-1" role="presentation"><a href="#" role="menuitem"><i class="fic fu-cog"></i> Action 3</a></li>
                </ul>

            </div>

        </div>

nqDatepiker Time mode

Hi,
Just a question when Datepiker is on time mode How I can select the actual time without changing it?

Thanks
best regards

DatePicker: August 2015 is not displaying August 31

The datepicker is not displaying the entire month when the month requires 6 rows.

Example: Look at August 31, 2015.

This can easily be seen on the QUI demo page for datepicker. See attached screen shot.

-Regards
David

vertical slider doesn't work on modals

a vertical slider doesn't work when placed inside a modal

I18n support of datepicker

Hi,

Could you please extend the options of the datepicker with I18N support for months days.
Thanks.

nqTagsInput: support for custom "enter" key

Can you add support for custom key code to "create" a new tag?
I'm looking to use nqTagsInput on a email input field for a webmail, but
actually the code (here) supports only the "Enter" key code. It would be more user friendly if I can support also comma and semicolon.

nqDatePicker does not close when selecting same date

Small test case to explain the problem:

Action	Expectation	Result
Click on the datePicker input field	pop-up should appear	ok
Click on an arbitrary date	pop-up closes and input field is filled in	ok
Clear the input field
Click on the input field	pop-up should appear	ok
Click on the same date as in step 2	pop-up closes and input field is filled in	nok: nothing happens

This happens when manually cleaning the input field or programatically.

ngDatetimepicker

Hi,
when I have this configuration

I have two problems (but linked together):
1 - everytime I click on a date the focus move to the next date picker:

2 - I can have the following too:

Best regards

nqTagsInput: Empty dropdown list when inserting a tag that was previously removed

If I input a value into a nqTagsInput and then I remove it, I can't select it again from the dropdown list.
Tested with this code:

  </head>

  <body ng-cloak ng-controller="SimpleController">

      <label></label>
      <input type="text" id="highlightFriends" ng-model="friends" data-nq-tags-input="friendlist" data-qo-placeholder="insert friends..."   data-qo-multiple="true" >

  </body>

  <script>
  var app = angular.module('vtrack', [
    'ngSanitize',
    'ngAnimate',
    'ngQuantum'
  ])
  .controller('SimpleController', ['$rootScope','$scope', function ($scope) {

    $scope.log=function(){
      console.log.apply(console,arguments)
    }

    $scope.friendlist=['marco','ciccio','cristina']

  }])
  </script>
</html>

Possible to set switch button by script?

Hello,

in my controller I need to set the checked status to true or false depending which status my database item contains.
Until yet I didnt found a way how to get my needs working.

Please tell me how to set the "checked" state to true or false.

Thanks.

datetimepicker change event as attribute not working

Below works.

angular.module('ngQuantum.datepicker').config(function($datepickerProvider) {
  var mydefaults = {
      onChange: function(currentDate){
     console.log(currentDate);
    }
  };
  angular.extend($datepickerProvider.defaults, mydefaults);
});

But using it as an attribute gives me a 'string is not a function' error.

    <input type="text" ng-model="listViewModel" class="form-control" data-qo-mode="datetime" data-nq-datepicker="startDate" data-qo-time-view="list" data-qo-on-change="change()" data-qo-prefix-event="startDate" placeholder="list time view">

Also, how do I capture the change events from different datetimepicker.

Thanks
Zain

ngDatetimepicker timepicker

Hi,
I added in your time popup the following ng-show="$options.format.indexOf('ss') > 0 to get that:

I need it. I let you see if you can add it but users told me when I ask a format in HH:mm is a little distracting to see ss in the popup.

best regards

Datetimepicker minHour doesn't work

Hi,
The value 0 doesn't work for minHour option.

best regards

quantumui / quantumui Goto Github PK

quantumui's Introduction

Dependencies:

Links:

Quick start

Features of OuantumUI

What's included

Documentation

Temporary CDN

Authors

Contributing

Support

Copyright and license

quantumui's People

Contributors

Stargazers

Watchers

Forkers

quantumui's Issues

Recommend Projects

Recommend Topics

Recommend Org