Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Cart 3,090 sales
Well Documented

Laborator supports this item

Supported

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

520 comments found.

Hi, This is a very nice theme, i want to use it to make my app. I am new to angularjs and i am very exciting. I searched on internet how to link my sql database with angularjs, but ther isnt so much info. Is it ossible to link sql to angularjs, easy?

thanks in advance

Hi Cengiz

Firstly thanks for your kind words.

Just like you I am new to angular and managed to learn AngularJS to implement Xenon in just one week, so this means that I didn’t dig deeper to link with SQL connection, but depending on my experience with AJAX related apps you need to do SQL queries via PHP or any server side scripting language and get the response via AJAX. For you to understand better please read this article and you will learn how to pull/push data from server with AngularJS:

http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/

For the second issue to set default Login page use this line:

$urlRouterProvider.otherwise('/login');

It will fix you issue.


Arlind

thank you /login worked indeed. I will read and search more about angularjs. thank you

You’re welcome!

“Its a really nice admin system code with great documentation :-)”

  Xenon received a 5 star rating from jmansa for Code Quality.

Are you using Xenon too? Don’t forget to rate it!.

Hello,

Your theme is awesome. We are using it in ASP.NET MVC, and are doing bundling and minification of JS and CSS files. There is one CSS file in this theme, which does not work properly after minification. Here are the details of file and error we get after minification:

FileName : xenon-forms.css

Error Details: Minification failed. Returning unminified contents. (1,14604): run-time error CSS1030: Expected identifier, found ’.’ (1,14611): run-time error CSS1031: Expected selector, found ‘)’ (1,14611): run-time error CSS1025: Expected comma or open brace, found ‘)’

CSS Validation Error: Validation (CSS 3.0): ”:has(.ranges)” is not a valid pseudo-class

Statement: .dropdown-menu.daterangepicker:has(.ranges) .calendar{display:none}

Can you please check and help by providing fix of this problem?

Best regards, -N

Hi there

It is very hard for me to figure out what is wrong there because my less compiler and minifier does not generate these errors when I compile thany of these files.

Can you please open xenon-forms.less and comment all the imports, then one by one remove comment (upwards-downwards) and see where the compiler fail, then try to fix the declaration in that file to allow the successful compilation and minification.


Arlind

Hi,

is it possible that I get access to the repo on bitbucket? My Username there is: https://bitbucket.org/wodka

Because when I’m fixing/updating the AngularJS Code in the app I could also create a pull request to you :) (Migrate to 1.3, bower for dependencies, $resource for api calls)

br Michael

Hi Michael

Sure buddy, I have just added you to the repository.


Arlind

Do you have a version using Material Design? https://material.angularjs.org/

Hi there,

unfortunately not, we are currently working on another theme and after releasing it we’ll do our best to release a big update for Xenon and add a lot of new features and fix the reported bugs.

The material design is trendry right now, we will check what we can do.

Kind Regards,
Art

How to make Menu items not responding to the link / href when they have sub items ?

As you can see from my previous question, I’m trying to build a menu which simulates the structure of a project. Right now when adding sub items to a menu item, the parent will get a disclosure item and will be collapsable / expandable. When that is the case, they won’t navigate to the href link when clicked.

I was wondering if there is some way to change that behaviour for a certain set of menu items. In my case I have a layout which looks like this :

Project
     System 1
          Component 1
               Subcomponent 1
               Subcomponent 2
               Subcomponent 3
               Subcomponent 4
     System 2
          Component 1
               Subcomponent 1
               Subcomponent 2
               Subcomponent 3
               Subcomponent 4

When clicking on Project, I want it to navigate to the project page, and not collapse the menu structure below it. All levels of the structure should act like that (e.g. this structure should not be collapsable, but should respond to the navigation).

Is there an easy way to achieve this?

Hi sLesage

Yes this is possible you need to modify some part of code:

Open assets/js/xenon-custom.js and go to line 1176

Change this:

sidebar_menu_item_collapse($li, $sub);

to

window.location.href = $a.attr('href');

This will walk in cases when user firstly expands the submenu, then if it clicks again in the same menu item, it will get to the page of that menu item. Otherwise if we make all links directly redirect to their path submenus will not be shown.

I hope this will help you.


Arlind

Thanks for the feedback. I had actually found a workaround by commenting out line 1162

ev.preventDefault();

But you might be right that this would not open collapsed menu items. My knowledge of Java is absolutely 0 and just started with this web stuff.

I will take a deeper look and provide a fix which will not require you to change the code in html/php


Arlind

Hi dude! how are you? Im trying to add loading-bar plugin (https://github.com/chieffancypants/angular-loading-bar) into the template without luck!

Every time I modify the file app.js and add anything as “directive” inside the loaded things of the app module I get error and the page doesnt work.

I have everything installed and uploaded, it just doesnt work, I also tried something similar with ngtables but it doesnt work. Nothing I add as directive in the app.js file is working fine. I have success adding other plugins, but none that require be activated adding it as directive.

If you can help me I will appreciate it because I wanna add some plugins and it looks like its called from another place because I cant get them work correctly.

I know xenon has a loding bar plugin, but I just wanna install it because it handles all the request in automatica, without need of add/remove the funcion on the code, it just intercepts the request and shows the loding bar until the request is completed.

Wait for your comments. Thanks Damian

Hi Damian

I am doing good and how are you buddy?

I understand your issue, but I believe that the errors are coming because you may have forgot something to add!

So what you need to do is that in index.html you need to import :

<!-- loadingbar -->
<script src="../src/loading-bar.js"></script>
<link href='../src/loading-bar.css' rel='stylesheet' />

Then in the main app.js Xenon module include loading bar too:

var app = angular.module('xenon-app', [
    'ngCookies',

    'ui.router',
    'ui.bootstrap',

    'oc.lazyLoad',

    'xenon.controllers',
    'xenon.directives',
    'xenon.factory',
    'xenon.services',

    // Added in v1.3
    'FBAngular',

    // Loading bar
    'chieffancypants.loadingBar'
]);

Then go to directives and you will have “cfpLoadingBar” available in the function arguments.

I hope this will work for you.


Arlind

Hi i just bought your theme and it is fantastic. But there is a bug in tablet view. You can compare with neon theme.

if you want i can send screenshot.

Thanks.

Hi there

Sure, it would help us a lot if you can send a screenshot so we will take a look at it.


Arlind

Hi there,

it may be the problem with the resizer, can you check it on a tablet if it s appearing in the tablet?

Kind Regards,
Art

Hi, I would like to report another bug:

Issue: Sidebar becomes fixed on expanding ‘Settings Pane’

Browser: Safari

Steps:
  • 1. Open the menu item ‘Extras’.
  • 2. Now expand the ‘Settings Pane’
  • 3. We can see the scrollbar on the sidebar disappears and it becomes fixed.

Hi

This is not a bug, I intentionally did this by meaning that when the screen size is reduced with Settings pane so users may not see the menu scrollbar properly in smaller screens.

So the menu becomes “absolute” positioned when the settings pane is toggled. If you want to change this you can modify it in xenon-toggles.js on line 37


Arlind

Ok, it makes sense. Thanks for the clarification.

Glad to hear that :)

Arlind

Hello,

Remove the comment section in sidebar-profile.html (<!- Sidebar User Info Bar – Added in 1.3 ->) which causes below error.

Error: [$compile:tplrt] Template for directive ‘sidebarProfile’ must have exactly one root element. app/layout/sidebar-profile http://errors.angularjs.org/1.2.26/$compile/tplrt?p0=sidebarProfile&p1=app%2Flayout%2Fsidebar-profile

Excellent work, thanks !!!

Hi urfanalimov

Thanks for providing this fix! It helped a lot, after saw this I also found another fix, so instead you to remove the comment open directives.js

http://cl.ly/ZoRx

Change replace value from true to false and this works fine also.


Arlind

charts-map.html:1246 Uncaught TypeError: Cannot read property ‘name’ of undefined

This one errors out. html/

Hi

Please download this archive: http://cl.ly/ZoRb

Extract and then move the folders to: /assets/js/devexpress-web-14.1x/js/ it will make map work.


Arlind

Subject: DevExtreme Web Charts JavaScript library License

I understand I need to download this library to make the charts work. But, the license terms talks about some 12 months subscription. Does this mean I need to buy the 12 months subscription from DevExpress, to include the charts in my website?

Hi

I am not sure how this API work, but we have purchased one time license in that time. You may try to use that library and if it continue working then you don’t need to worry about it.


Arlind

Hi, Thanks for your template. It has lot of features which I was searching for. Thanks again. But I would like to report one issue, which I’m facing in the plain html version:

Issue: Menu is not Responding on clicks.

Browser: Safari

Steps:
  • 1.Expand any of the first level menu from the sidebar(Say, Dashboard)
  • 2. Click on second level menu (Dashboard 1)
  • 3. Now collapse the side bar.
  • 4. Now hover on the dashboard icon. Submenu appears.
  • 5. Click on the dashboard icon. Submenu closes.
  • 6. Dashboard Icons gets disabled. The submenu doesn’t open anymore on click or on hover.

Please check and let me know if this can be addressed.

Hi richypm

Thanks for reporting this issue, I also tried by myself and realized that this problem has to do with the code I have made.

Will fix this issue in the next update.


Arlind

Hi, Could you please provide a patch for this, as I need to go live with the website this month.

Hi richypm

Yes here it is the patch:

http://cl.ly/ZnKp

Replace it in assets/js folder and it will get fixed.


Arlind

Hi, its me again. I have another question :D Is there any way to add the toastr dependency in global? Most pages in my app play with notifications, and I need to add ASSETS.extra.toastr, in “resolve” for each state created. I tried some things but they are not working. Any suggestion? Thanks

Damian

I just added the ASSETS.etra.toastr in app.js under the “app” state and it works globally. If there is any better way to do that please let me know. Thanks

Hi

Yes you did right, to import the dependency you can do in that way, but if you need it always you can also import in the very beginning via HTML using script tag, so choose any option that suits you the best in your case.


Arlind

Hi,

I just purchased this package and already having a lot of fun with it. I do have two small questions to start with.

In my main menu, I have a hierarchy of menu items which are all opened by default. But how do I make sure if item 1.1.1.2 gets clicked (and marked as Active) that all parent menu’s are coloured white as well? I read something about auto-inherit-active-class but can’t seem to figure out how this works.

A second question is with regards to the color styles. Is it easy to use the Navy color styles instead of the default black one? Do you have an example on how to do that?

Thanks in advance

Hi

I now realized that this option is not working well, so I need to fix this in the next update. For now you must append class “opened active” to the parent elements with active child.


Arlind

Hi,

Yeah … that’s how I solved it indeed. Adding Opened & Active to parent items in the hierarchy. Just thought there was an easier solution :-)

I understand, I also thought it was working and that is the reason that I have added the comment documentation for it wasn’t working.


Arlind

This is really an great theme. 5 stars :-) Have a question though. Is it possible, in the side menu, to have all the menus expanded/open by default?

Hey, thanks, but in the angular version the menu is generated from services.js. Where do I put the “opened” then?

Ok, sorry, got it:
<li ng-repeat="item in subItems" ng-class="{'opened expanded' : item.isOpen, 'active' : item.isActive, 'has-sub opened' : item.menuItems.length}" />

Hi jmansa, glad to hear that you solved the problem :)

Ylli

When will we get the next update from the Xenon admin theme? I’m looking forward to see some more nice features. You do a well job!

Greats comprano

Hi comprano, we don’t have ETA for that but updates will come occasionally :)

And hey, thank you for your kind words :D

Ylli

Is it possible to set an default skin without using the skin chooser, let’s say i want to use “Green”.

Thanks in advance :-)

Hi there,

of course the skin selector is just for the demo purpose, when you use the theme you have to set a skin that you want to use and you’ll always have to use it.

Kind Regards,
Art

Ok, and where do I set the default skin in the html version?

Hi jmansa,

On our documentation we have explained this, here is the link.

Here you can find Xenon documentation Xenon Documentation.

Kind Regards,
Ylli

Hi guys,

Great template the site is coming along good, thanks. I’ve searched and I dont see what font is used for he logo. Im having a problem opening the PSD in gimp t find the missing fonts, so if you can simply state what font it is that would be great.

Thanks again, this is the 2nd template we have bought from you gys.

Hi dear loyal customer,

the name of the font is Arimo, here you can download it from

FontSquirrel:
http://www.fontsquirrel.com/fonts/arimo or in Google Fonts directory:
https://www.google.com/fonts/specimen/Arimo

Kind Regards,
Art

OK Thank you. Unfortunately it does not look good with my company name instead on XENON.

Are you guys avilable to design a logo and maybe do the final touches on my site?

If so please tell me where I can contact you at. Thanks

Hi privacymatters, i’m sorry but we are very busy with our themes, and we have 0 time free to do something freelance :S

You can check someone on Envato Studio that can design a logo for you.

Ylli

Hi,

Love ur theme! However, Im getting some chinese icons. Any knowledge of this?

Hi kristerevensen

I am not aware for any library that contains this kind of icons, I am sorry!


Arlind

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