Hi again

I am glad that it worked for you.

To your second question:

In this file you have contents of User info navbar:

xenon-angular/app/tpls/layout/user-info-navbar.html

There you remove markup. I’ve also removed it for you, and if you want it copy here: http://cl.ly/ZCNM

It has all elements requested by you removed.

Cheers

Arlind

Hi Steve

From these errors I am unable to understand the errors where they come from.

You must use a testing tool for AngularJS -> Protractor which tests your app. Also note that you need to execute the index.html in web server, not directly open that file in chrome/firefox/or any other browser.

Arlind

Hi inmyth

You must serve same size thumbnails in order to maintain the rows of images. However you can still specify min-height css property to make all image boxes have the same height initially.

Arlind

Hi SteveZL

Sure, here the answers to your questions:

1. If you are talking about this timeline: http://themes.laborator.co/xenon/angular/#/app/extra-timeline it has nothing related to DevExpress, you can add elements to the page it doesn’t need JavaScript to add elements here.

2. Everything starts in xenon-files/angular/index.html so there are these main files

xenon-files/angular/app/js/app.js
xenon-files/angular/app/js/controllers.js
xenon-files/angular/app/js/directives.js
xenon-files/angular/app/js/factory.js

In app.js you have defined the routes, so then you can remove them if you want.

In factory.js you have menu elements.

In controllers.js is main logic of controllers.

3. To eliminate the chat footer open: ~/xenon-files/angular/app/tpls/layout/app-body.html

Remove this markup:

<footer-chat></footer-chat>

Hopefully these answers will help you to get started with.

Arlind

Hi SteveZL

We regularly publish full changelog for each new update. The changelog is available in BitBucket.org, if you have an account there I will send you the invite so you will see always what has changed in the newest updates.

Arlind

I can find them now

Glad to hear that

Hi vsrm

If you need to watch for events, then do not use the daterange directive, instead use direct instance implementation:

var $el = $("#range-picker");

$el.daterangepicker({...});

// Events
$el.on('apply.daterangepicker', function(ev){});

To read more about the events you can listed, click here: https://github.com/dangrossman/bootstrap-daterangepicker

Hopefully this will help you.

Arlind

Hi dear SaijoGeroge

Firstly I want to thank you for your generous support. We are really happy about that.

About the sticky user info navbar, we will add this feature in the next update, thanks for your idea. If you want the quickfix how to do that I will send you here the CSS (or LESS) implementation.

About the images, you can use text-center class, because images are treated as inline-block elements so we have general class for inline elements alignment.

Once again many thanks for your support

Arlind

no worries Arlind and thanks for your help. The CSS implementation would be awesome.

Also in your opinion what is the best way to future proof the html installation? I am not sure what to expect when the next update us rolled out. Do you offer a changelog which runs through the various changes to each of the files that are included?

Regards

Saijo

Hi Saijo

Sure, here you have the LESS implementation:

Just add it to the bottom of this file:

~/xe/assets/less/xenon-less/user-info-navbar.less

Or if you want just the plain CSS:

@media screen and (min-width: 768px) {
  .fixed-user-info-navbar .page-container .user-info-navbar {
    position: fixed;
    left: 340px;
    right: 0;
    top: 0;
    margin: 0;
    z-index: 100;
  }
  .fixed-user-info-navbar .page-container .main-content {
    padding-top: 105px;
  }
  .fixed-user-info-navbar .page-container .sidebar-menu.collapsed ~ .main-content .user-info-navbar {
    left: 80px;
  }
}

About the changelog, you can view it online in BitBucket.org, just give me your username and I will invite you to see the changes in GitRepository.

Arlind

Hi

I understand what do you mean. For some reasons we always applied this technique (the current in demo site) so when an item has sub elements it will not be clickable anymore.

If you want to achieve that, then open assets/js/xenon-custom.js

Go to line 1244 and replace sidebar_menu_item_collapse function contents with this one below, and it should do the trick:

function sidebar_menu_item_collapse($li, $sub)
{
    if($li.data('is-busy'))
        return;

    if($li.hasClass('active'))
    {
        var href = $li.find('> a').attr('href');
        window.location.href = href;
        return;
    }
}

Arlind

Thank you! Keep up the good works.

You’re welcome!

Hi SteveZL

If you are talking about horizontal menu open controller.js:

$rootScope.layoutOptions = {
    horizontalMenu: {
        isVisible        : false,
        isFixed            : true,
        minimal            : true, // This will do the trick
        ...
    }
}

I am not sure if I understand you properly. If not send me a screenshot of what you want to change.

Arlind

To minimize update problems, should I create a script and insert it after:

<!- JavaScripts initializations and stuff ->
<script src="app/js/xenon-custom.js"></script>
<script src="app/js/mycustom.js"></script>

here I can set my layout?

Hi Steve

You should focus on app.js and controller.js

If you know how to create angular modules, then create module and call it from app.js, see screenshot: http://cl.ly/ZC7m

So from there you can create controllers and stuff.

Arlind

Glda to hear that

Ylli

Do you have a minimal version of the horizontal-menu.html. I’m deleting alot of code and hope that it wont break anything.

Hi Steve

To handle with the Horizontal menu, open app/js/services.js

On line 214 you have this function “prepareHorizontalMenu”

So from there you can set and remove links. It is completely object oriented so its easy to understand how menu items are added.

Arlind

Hi vembu

We have moved the charts with its default implementation as DevExpress doesn’t provide any AngularJS alternative to implement.

You can assign charts to directives but this is not very flexible, the best way to do is the old way of implementation like in static HTML, there you can change parameters.

You can do only one change that will fit perfectly with AngularJS (as now its not implemented yet). Put the javascript logic executed in charts into MainCtrl controller, or any custom controller you create and then initialize the charts from that controller.

Arlind

Hi itsmill3rtime

Yes, we are aware of this, we will fix it in the next update of Xenon.

Arlind

Hi

I am now aware of this and we will fix this.

Thanks for your feedback, we would be very thankful to you if you can rate this theme.

Arlind

Sure, I’ll rate your theme. But I can’t find where I might do this, can you forward me?

Hi again,

to review/rate a theme go to the top-right menu where your username is and on the drop-down menu you’ll find “Downloads”

Kind Regards,
Art

Pershendetje i nderuar, faleminderit shume per perkrahjen tuaj, me vjen mire qe ju e pelqeni punen tone.

Shume faleminderit edhe nje here per fjalet e bukura.

Keni pershendetje nga stafi i Laborator
Arlind, Ylli, Art

Hi tdalzell

The best way to do this is to compile the less files, here are the steps:

1. Open ~/assets/less/xenon-less/variables.less
2. Edit these variables http://cl.ly/Z4ft (set your height)
3. Compile the LESS files list as described below:

bootstrap.less
xenon.less (compile only if you use)
xenon-core.less
xenon-forms.less
xenon-components.less

With output path to assets/css/ and use any Less compiler.

Whenever is new update, you repeat this process and you will not have any problem.

Arlind

Hi aomtte

Can you please open Inspect Element and go to Console to see what errors are generated in this page, then send me the screenshot of it, so I will be able to understand what is the problem.

Arlind

I forgot to add the slider resource in the app.js xD

Great to hear that you managed to fix it.

Arlind

Hi tracyliang77

This form of defining slider is only supported with numbers, so variables like {{varname}} doesn’t work. You Can do this in other way, via JS:

jQuery("input.slider-input").slider({
range: true,
min: 1,
max: 100,
});

This way will work.

Arlind

Hi vsrm

Sure you can do this, just open assets/less/bs-less/variables.less

Change variable @font-size-base to your preferred font size and compile files:

bootstrap.less xenon.less (compile only if you use) xenon-core.less xenon-forms.less xenon-components.less

With output path to assets/css/ and use any Less compiler.

It will affect the entire font size.

Arlind

Thanks for reporting this, we will try to fix that

Ylli