Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Cart 3,091 sales
Well Documented

Laborator supports this item

Supported

This author's response time can be up to 1 business day.

520 comments found.

Hi, I found some bugs with the less code:
button.less -> line 172
&.btn-purple { .xenon-btn-icon-standalone(@xe-purple; 4%; 11%, 9%); }
should be :
&.btn-purple { .xenon-btn-icon-standalone(@xe-purple; 4%; 11%; 9%); }
that bugs makes the color #NaNNaN…
-
forms-daterangepicker.less -> line 7
&:has(.ranges) .calendar {
should be
&:has('.ranges') .calendar {

-
there is an error in horizontal-menu.less -> line 745
 .sidebar-menu > .main-menu;
that interacts with sidebar.less -> line 53 and sidebar.less -> line 160 and produces wrong css:
@media screen and (max-width: 768px) and screen and (max-width: 768px) and
@media screen and (max-width: 768px) and screen and (min-width: 768px)

Hi luneo7

I want to thank you so much for reporting these issues, I have managed to fix them all and will be available in the next update.

Many thanks for your efforts


Arlind

Hi,

Thank you for this great template. I had issues integrating the nested list (angular mode) as jquery code was ran before angular had fully rendered ul > li … I ended up using angular-ui-tree (https://github.com/JimLiu/angular-ui-tree) which was easy…

Also question regarding the menu, (app/js/services.js) why do you copy the menu in the instantiate method (angular.copy)? Do we need to get a copy of it?

Thanks

Hi

Thank you so much for your suggestion about the nested lists plugin, we will change it in the Angular version in the next version because the old ones with jQuery are not Angular friendly.

The reason why I use this method:

item = angular.extend(angular.copy(menuItemObj), {
    parent: parent,

    title: title,
    link: link,
    icon: icon
})

Is because menuItemObj its just a model and I don’t want to override the default object with the real attribute values, so every time a new menu item is added I create a copy of this object:

http://pastebin.com/EJXszLUf

It acts like instantiating item = new menuItemObj();

I hope my answer makes sense to you.


Arlind

Hi, could you provide me a PSD of dropzone spritemaps? I need to change them to another language.

Regards ;]

Hi there,

this is the plugin we have used in the theme: http://www.dropzonejs.com/ , ask them for the PSD files and extra files because we have not included them in the theme.e

Kind Regards,
Art

Ok. Thanks you ;]

Hi,

This is an excellent theme, enjoying it pretty much. In Tocify page, an issue is found as seen in the screen capture. It occures on IE11 on Windows 8.1. The issue is – in browser maximize state, TOC box width floods the whole page. Can you please provide a fix for the issue?

Regards n

Hi nkaliya, just remove “full-width” class as in this picture

or add this code on CSS:

.tocify.full-width {
width: auto !important;
}

Ylli

Hi,

Is there any chance you can update the timepicker library used in the theme? The currently used one is no longer being maintained, and is hard to work with when using angular bindings due to working on strings and not javascript DateTime objects.

Hi tystol

All right, I have added it to our todo list for next version of Xenon. Don’t worry about the library, we will manage to separate them and use Angular UI timepicker only for Angular version and not include it for the plain html version, so this would help only them who work with Angular.

Thanks for your suggestion :)


Arlind

Great, thanks heaps!

If it helps, here’s a snippet for putting the control inside a popup when focusing on an input (rather than being inline html): http://plnkr.co/edit/h1lRMakbmoGP9pwQ0V75?p=preview

This is great, thanks for sharing the snippet, it will help me during the implementation.


Arlind

Greetings, I have bought this theme in october 2014, you updated in december, can you give me updated please?

Thanks, but angularjs version is not opening in google chrome

Angular JS Version

Hi, you need to start it from localhost (Xampp if you are using Windows) in order to open it.

Ylli

I would like to buy this theme.. but i’m a bit dissapointed. .. I don’t see register page. Can you tell me when will be added? Register page:

Email Signup with Facebook Signup with Twitter Signup with Google+ Signup with Linkedin Any chance to get these inside the theme? Thanks.

Hi there,

it’s been a while since we have last updated the theme with fresh new features and pages, we have a list of “to do” things for the theme but currently we’re busy working on a new theme which we’re planning to release by the end of the month, I think by the mid of February the theme update with new features will come out so stay tuned :).

Kind Regards,
Art

I didn’t properly format the code in the above query. How to call the event ShowChart() like that with the index value to the function to use the code made in the function? Where should I chande? In the nestable.js or else other part? Here is my question’s HTML code:

<div class="panel panel-default" style="padding:10px 20px;white-space:nowrap;overflow:hidden">
<div class="panel-heading" style="padding-bottom:5px"><i class="fa-line-chart" />  Measures</div>
<div class="panel-body dd" style="padding-top:10px">
    <ul class="uk-nestable grouped-nestables dd-list" data-uk-nestable="{maxDepth:1 group:'my-group'}" id="nestable-list-1">
     <li class="dd-item" id="nestable-listrag" ng-repeat="measure in dataSources.measures" data-id="1">
        <div class="uk-nestable-item">
        <div class="uk-nestable-handle" ng-click="showChart1($index)"> </div>
        <div data-nestable-action="toggle" />
        <div class="list-label dd-handle" ng-click="showChart1($index)">{{measure}}</div>
        </div>
    </li>
      </ul>
</div>
</div>

Hi vembu

I realized that you are using it in Angular version, so for this use this library:

https://github.com/angular-ui/ui-sortable This also supports connected lists: http://codepen.io/thgreasi/pen/uIBKb


Arlind

hi , thanks for the great job, is it possible to get a multi step form ? it could be great to get that with the same design as the whole template

thanks again

Hi Phaoris

I am sorry but currently we do not have any plan for this feature, except the one you can find in Form Wizard.

Arlind

Hi, need some help to get Counters working (as shown on the Dashboard-4). I’ve read in the comments that just need to include the “xenon-widgets.js” to work but I’m unable to make it work… Does it nedd any external JS that I may not be using? The application I’m building is in AngularJs… the code for the counter I’m using is
<div class="xe-widget xe-counter xe-counter-blue" data-count=".num" data-from="1" data-to="117" data-suffix="k" data-duration="3" data-easing="true">
  <div class="xe-icon">
    <i class="linecons-user" />
  </div>
  <div class="xe-label">
    <strong class="num">1k</strong>
    <span>Users Total</span>
  </div>
</div>

I managed to get it working but now I’m having the problem posted by jkevinburton. I’m using angular binding and the counter doesn’t work as data-to={{total}} Can I work this around? I know the value is right because I was using it without the counter…

Hi

I am sorry about this issue, I didn’t realized that using dynamic data attributes will not work, I will look up for a solution about this because I am not very experienced in AngularJS and didn’t find a better way to implement this feature.


Arlind

Hi holoverse

This kind of error report doesn’t help me to understand the issue. Have you changed something in the code that produced this error?

Try commenting out the code you have added, or put back the code you have removed because there is something missing or something else added not properly. In plain JS you don’t have any issue, this is related to a semantic error.


Arlind

Hi!

i have set up the login page. But how is it posible to route a user to a login page, if he is not logged in?

For Example: A Users first visit is on dashboard-variant-1, but he is not logged in, so he gets routed to the login page. do i need to work with sessions oder something?

greetings!

Hi

I just need to make sure which version you mean, AngularJS or Plain HTML?

It depends on which platform do you need to implement this, and of course sessions are required to handle the login information.

Cheers


Arlind

Sorry! in HTML i know how to use it, but i mean the Angular Version Thank You!

All right I understand, you can also use cookies to identify whether user is logged in or not, we have already implemented cookies module.

So open app.js and in app.config function line 34 you have this code:

$urlRouterProvider.otherwise('/app/dashboard-variant-1');

Here you add the logic:

if($cookies["loggedIn"])
{
    $urlRouterProvider.otherwise('/app/dashboard-variant-1');
}
else
{
    $urlRouterProvider.otherwise('/app/login');
}

The way you identify whether user is logged in or not is up to you how you want to manage it. Also in controllers.js MainCtrl there you can put a similar logic when user is not logged in and tries to access the page that requires login:

if($cookies["loggedIn"] == false)
{
    $state.go('/app/login');
}

Hopefully this will help you.


Arlind

How is the main menu (horizontal) hidden and shown when you go to mobile view? I want to disable the mobile menu but can’t see why the large one hides.

Hi

The theme itself its programmed to work like that, because it is responsive and the menu will fit for mobile devices.

If you want to change it, you have to modify the CSS/LESS files and fit to your needs.

Cheers


Arlind

Hi! awesome them again!

There is a weird behavior with the TOCITY plguin page.. after a sub-item is selected.. the TOC is expanded full with behind the content :(

How to fix this? Thanks!

hmm ok it was fixed just remove the “full-width” class in the “toc” div;

Glad to hear that :)

Ylli

I’m having a hard time getting a login screen. How should it be setup? The Logout works and takes it to a page. This way iot kind of avoids the whole menu/side part. How can I setup login-light to be my start screen.

urlRouterProvider.otherwise(’/app/blank’);

If I replace in app.js it shows up but has the menus around it.

Hi Steve

Please note that when you switch to login page, you must set change these variables, in your case:

$rootScope.isLoginPage        = false;
$rootScope.isLightLoginPage   = true;
$rootScope.isLockscreenPage   = false;
$rootScope.isMainPage         = false;

For example:

http://cl.ly/ZGS2
state('login-light', {
    url: '/login-light',
    templateUrl: appHelper.templatePath('login-light'),
    controller: function()
    {
            $rootScope.isLoginPage        = false;
            $rootScope.isLightLoginPage   = true;
            $rootScope.isLockscreenPage   = false;
            $rootScope.isMainPage         = false;
    },
    resolve: {
        resources: function($ocLazyLoad){
            return $ocLazyLoad.load([
                ASSETS.forms.jQueryValidate,
            ]);
        },
    }
})

Then in default route set:

urlRouterProvider.otherwise(’/app/login-light’);

I hope this will work for you.


Arlind

Hi again,you ave given solution for that nestable list,but in that what is meant by list-group,where do i have to give id for that and what is (ev) and where can i call function inside,is it this function event??

$(”.your-list-group”).on(‘stop.uk.nestable’, function(ev){ //... });

Hi,

The function you have said doesn’t work for the element. I also tried to change in the nestable.js dragStop function. I could not trigger the required function with the index value. My requirement is as follows: My html code part:
  • {{measure}}

I have to call the showChartMeas() function with the index of the dragged element in the group1. Also, when I click on other dimension group that particular group’s element could be passed to another function like ShowChartDim(). Then dragging the particular element on the list to another particular list group has to trigger the function ShowchartMeas() Like Measure -> X-axis list triggers ShowchartMeas() with the index value of the list item dragged. Please reply the solution for the triggering as soon as possible.

Hi vembu

I am sorry about it, but I don’t have too much experience with UIKit, so I suggest you to try jQuery Drag and Drop which is the best solution and has lot of documentation:

http://jqueryui.com/sortable/#connect-lists

I hope this will help you to solve this issue.


Arlind

Hi agaim

I saw this response from one other customer, it might help you as well:

Thank you for this great template. I had issues integrating the nested list (angular mode) as jquery code was ran before angular had fully rendered ul > li … I ended up using angular-ui-tree ( https://github.com/JimLiu/angular-ui-tree ) which was easy…


Arlind

Hey! When I tried to go to Layout and Skins I got an error. I had to update the controllers.js in Line 374 ff:

var setValue = function (val){ if (val !== null && val !== undefined){ val = eval(val); $layout.setOptions(val0, val1); } };

Hi Coach83

Thanks so much for providing this fix, I have added it to the theme.


Arlind

Hi again, Thanks for your previous response,You have designed for Nestable list. But i have to create event whenever list item has been dragged from one group to another,like one item from Fruits toVegetables, i have to trigger an event on such action.I have created an event in controller.But i have to trigger this, when item has been dragged to another group.

Hi vembu

Depending on the plugin page here:

http://getuikit.com/docs/addons_nestable.html

This event stop.uk.nestable can be used as triggerable event:

$(".your-list-group").on('stop.uk.nestable', function(ev){
//...
});

This may work for your case.


Arlind

I finally got the AngularJS version in the layout I wanted. Still have some issues.

The Calendar needs to be refreshed before it shows correctly. Any idea why?

Could you give this a look, see if you know why I’m having issues. The way I implemented this I’m sure I have alot of dead code hanging around. Now that you can see what I wanted to start with maybe its a little easier to understand my question.

How do I get the login as the first page?

Love the product!

Can I get a little more documentation on horizontal-menu.html. I’ve trying to only keep what is necessary http://zlabs.com/xenon

This is where I’m at with the horizontal menu. I just wanted to make sure I didn’t screw something up.

<nav class=”navbar horizontal-menu” ng-class=”{‘navbar-fixed-top’: layoutOptions.horizontalMenu.isFixed, ‘navbar-minimal’: layoutOptions.horizontalMenu.minimal, ‘click-to-expand’: layoutOptions.horizontalMenu.clickToExpand}”>
<script type="text/ng-template" id="menu-item-link-tpl">
    
     {{item.title}} 
     {{item.label.text}} 
</script>
<script type="text/ng-template" id="menu-items-tpl">
    
  • </script>
    <script type="text/ng-template" id="menu-items-recursive-tpl">
        
  • </script>
    <script type="text/ng-template" id="menu-items-sub-items">
        
  • </script>
    • <!- Navbar Brand -> <!- Mobile Toggles Links -> <!- This will toggle the mobile menu and will be visible only on mobile devices -> <!- This will open the popup with user profile settings, you can use for any purpose, just be creative -> 7 <!- data-toggle=”mobile-menu-horizontal” will show horizontal menu links only -> <!- data-toggle=”mobile-menu” will show sidebar menu links only -> <!- data-toggle=”mobile-menu-both” will show sidebar and horizontal menu links ->
        <!- notifications and other links ->
        • user-image Arlind Nushi

        </nav>

    Hi Steve

    I am not sure how you want to make it look, can you please give me an example screenshot how you want to organize this area so I can give you proper information about that.

    Cheers


    Arlind

    Hi, Could you provide me any css snippet, which will make select2 selects equal height to the rest of forms. Right now regular inputs have 32px height and select2 37px. It looks bad when I have both of them in the same row.

    Thank you ;)

    Hi imoli

    Sure, here you have the CSS fix for that, I am sorry about it:

    html .select2-container .select2-choice {
    height: 32px;
    }
    
    html .select2-container .select2-choice .select2-chosen, html .select2-container .select2-choice .select2-search-choice-close, html .select2-container .select2-choice .select2-arrow {
    line-height: 32px;
    }
    

    Hopefully it will work for you.


    Arlind

    No problem. Works perfectly now. Thank you a lot. :)

    Glad to hear that :)

    by
    by
    by
    by
    by
    by

    Tell us what you think!

    We'd like to ask you a few questions to help improve ThemeForest.

    Sure, take me to the survey