community/device-mgt-plugins
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-plugins.git synced 2025-09-16 23:42:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

responsive tab panel component - markup rewrite for uuf

Browse Source
This commit is contained in:
thusithakalugamage 2016-09-09 16:08:21 +05:30
parent acc3875b51
commit 30c846ef95
2 changed files with 164 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.view/public/js/device-detail.js
View File

@ -50,49 +50,61 @@ var InitiateViewOption = null;
); );
} }
$(".media.tab-responsive [data-toggle=tab]").on("shown.bs.tab", function (e) { $(".media.tab-responsive [data-toggle=tab]").on("shown.bs.tab", function (e) {
var activeTabPane = $(e.target).attr("href"), var activeTabPane = $(e.target).attr("href");
activeCollapsePane = $(activeTabPane).find("[data-toggle=collapse]").data("target"), var activeListGroupItem = $(".media .list-group-item.active");
activeCollapsePaneSiblings = $(activeTabPane).siblings().find("[data-toggle=collapse]").data("target"),
activeListGroupItem = $(".media .list-group-item.active");
$(activeCollapsePaneSiblings).collapse("hide"); $(activeTabPane).removeClass("visible-xs-block");
$(activeCollapsePane).collapse("show"); $(activeTabPane).siblings().not(".arrow-left").addClass("visible-xs-block");
positionArrow(activeListGroupItem); positionArrow(activeListGroupItem);
$(".panel-heading .caret-updown").removeClass("fw-sort-down");
$(".panel-heading.collapsed .caret-updown").addClass("fw-sort-up");
}); });
$(".media.tab-responsive .tab-content").on("shown.bs.collapse", function (e) { $(".media.tab-responsive .tab-content").on("shown.bs.collapse", function (e) {
var activeTabPane = $(e.target).parent().attr("id"); var thisParent = $(e.target).parent();
$(".media.tab-responsive [data-toggle=tab][href=#" + activeTabPane + "]").tab("show"); var activeTabPaneCaret = thisParent.find('.caret-updown');
$(".panel-heading .caret-updown").removeClass("fw-sort-up"); var activeTabPaneCaretSiblings = thisParent.siblings().find('.caret-updown');
$(".panel-heading.collapsed .caret-updown").addClass("fw-sort-down");
activeTabPaneCaret.removeClass("fw-up").addClass("fw-down");
activeTabPaneCaretSiblings.removeClass("fw-down").addClass("fw-up");
}); });
$('.media.tab-responsive a[data-toggle="collapse"]').on('click',function(){
var clickedPanel = $(this).attr('href');
if($(clickedPanel).hasClass('in')){
$(clickedPanel).collapse('hide');
}else{
$(clickedPanel).collapse('show');
}
});
function positionArrow(selectedTab) { function positionArrow(selectedTab) {
var selectedTabHeight = $(selectedTab).outerHeight(); var selectedTabHeight = $(selectedTab).innerHeight();
var arrowPosition = 0; var arrowPosition = 0;
var totalHeight = 0; var totalHeight = 0;
var arrow = $(".media .panel-group.tab-content .arrow-left"); var arrow = $(".media .panel-group.tab-content .arrow-left");
var parentHeight = $(arrow).parent().outerHeight(); var parentHeight = $(arrow).parent().innerHeight();
// if($(selectedTab).prev().length){
// $(selectedTab).prevAll().each(function() { if($(selectedTab).prev().length){
// totalHeight += $(this).outerHeight(); $(selectedTab).prevAll().each(function() {
// }); totalHeight += $(this).innerHeight();
// arrowPosition = totalHeight + (selectedTabHeight / 2); });
// }else{ arrowPosition = totalHeight + (selectedTabHeight / 2);
// arrowPosition = selectedTabHeight / 2; }else{
// } arrowPosition = selectedTabHeight / 2;
}
if(arrowPosition >= parentHeight){ if(arrowPosition >= parentHeight){
parentHeight = arrowPosition + 10; parentHeight = arrowPosition + 50;
$(arrow).parent().height(parentHeight); $(arrow).siblings(".panel.active").height(parentHeight);
}else{ }else{
$(arrow).parent().removeAttr("style"); $(arrow).parent().removeAttr("style");
} }
$(arrow).css("top", arrowPosition - 10); $(arrow).css("top", arrowPosition - 10);
} }
@ -228,8 +240,8 @@ var InitiateViewOption = null;
$("#applications-list-container").html(content); $("#applications-list-container").html(content);
} else { } else {
$("#applications-list-container"). $("#applications-list-container").
html("<div class='panel-body'><br><p class='fw-warning'>&nbsp;No applications found. " + html("<div class='message message-info'><h4><i class='icon fw fw-info'></i>No applications found.</h4>" +
"please try refreshing the list in a while.<p></div>"); "<p>Please try refreshing the list in a while.</p></div>");
} }
} }
}, },
@ -315,4 +327,5 @@ var InitiateViewOption = null;
} }
); );
} }
}()); }());

203
components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.view/view.hbs
View File

@ -82,66 +82,63 @@
<div class="media tab-responsive"> <div class="media tab-responsive">
<div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs"> <div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs">
<ul class="list-group nav nav-pills nav-stacked" role="tablist"> <ul class="list-group nav nav-pills nav-stacked" role="tablist">
<li class="list-group-item active"> <li role="presentation" class="list-group-item active">
<a href="#device_details" role="tab" data-toggle="tab" aria-controls="device_details"> <a href="#device_details_tab" role="tab" data-toggle="tab" aria-controls="device_details_tab">
<i class="icon fw fw-mobile"></i>Device Details <i class="icon fw fw-mobile"></i><span class="hidden-sm">Device Details</span>
</a> </a>
</li> </li>
<li class="list-group-item"> <li role="presentation" class="list-group-item">
<a href="#policy_compliance" role="tab" data-toggle="tab" aria-controls="policy_compliance"> <a href="#policy_compliance_tab" role="tab" data-toggle="tab" aria-controls="policy_compliance_tab">
<i class="icon fw fw-policy"></i>Policy Compliance <i class="icon fw fw-policy"></i><span class="hidden-sm">Policy Compliance</span>
</a> </a>
</li> </li>
<li class="list-group-item"> <li role="presentation" class="list-group-item">
<a href="#device_location" role="tab" data-toggle="tab" <a href="#device_location_tab" role="tab" data-toggle="tab"
data-lat="{{device.viewModel.location.latitude}}" data-lat="{{device.viewModel.location.latitude}}"
data-long="{{device.viewModel.location.longitude}}" data-long="{{device.viewModel.location.longitude}}"
aria-controls="device_location"> aria-controls="device_location_tab">
<i class="icon fw fw-map-location"></i> Device Location <i class="icon fw fw-map-location"></i><span class="hidden-sm">Device Location</span>
</a> </a>
</li> </li>
<li class="list-group-item"> <li role="presentation" class="list-group-item">
<a href="#installed_applications" role="tab" data-toggle="tab" aria-controls="installed_applications"> <a href="#installed_applications_tab" role="tab" data-toggle="tab" aria-controls="installed_applications_tab">
<i class="icon fw fw-application"></i> Installed Applications <i class="icon fw fw-application"></i><span class="hidden-sm">Installed Applications</span>
</a> </a>
</li> </li>
<li class="list-group-item"> <li role="presentation" class="list-group-item">
<a href="#event_log" role="tab" data-toggle="tab" aria-controls="event_log"> <a href="#event_log_tab" role="tab" data-toggle="tab" aria-controls="event_log_tab">
<i class="icon fw fw-text"></i> Operations Log <i class="icon fw fw-text"></i><span class="hidden-sm">Operations Log</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="media-body remove-padding-xs">
{{#defineZone "device-detail-properties"}} {{#defineZone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs"> <div class="media-body add-padding-left-5x remove-padding-xs">
<div class="panel-group tab-content" id="tabs"> <div class="panel-group tab-content remove-padding" id="tabs" role="tablist" aria-multiselectable="true">
<div class="arrow-left hidden-xs"></div> <div class="arrow-left hidden-xs"></div>
<div class="panel panel-default tab-pane fade in active fade-in-xs visible-block" <div class="panel panel-default" role="tabpanel" id="device_details_tab">
id="device_details" role="tabpanel" <div class="panel-heading visible-xs collapsed" id="device_details">
aria-labelledby="device_details">
<div class="panel-heading dropup visible-xs" role="tab" id="tab1" data-toggle="collapse"
data-target="#tabContent1" aria-expanded="false" data-parent="#tabs">
<h4 class="panel-title"> <h4 class="panel-title">
<i class="fw fw-map-location fw-2x"></i> <a role="button" data-toggle="collapse" data-parent="#tabs" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fw fw-mobile fw-2x"></i>
Device Details Device Details
<i class="caret-updown fw fw-sort-up"></i> <i class="caret-updown fw fw-down"></i>
</a>
</h4> </h4>
</div> </div>
<div class="panel-heading display-none-xs">Device Details</div> <div class="panel-heading display-none-xs">Device Details</div>
<div id="loading-content" class="col-centered"> <div id="loading-content" class="col-centered">
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>&nbsp;&nbsp;&nbsp;Loading Device Details . . .<br> <i class="fw fw-settings fw-spin fw-2x"></i> Loading Device Details...
</div> </div>
<div class="panel-body collapse display-block-sm display-block-md display-block-lg in" <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="device_details">
id="tabContent1"> <div class="panel-body ">
<div class="device-detail-body hidden"> <div class="device-detail-body">
<!-- device summary --> <!-- device summary -->
{{#equal device.type "windows"}} {{#equal device.type "windows"}}
<div class="panel-body"> <div class="message message-info">
Not available yet <h4 class="remove-margin"><i class="icon fw fw-info"></i>Not available yet</h4>
</div> </div>
<br class="c-both"/>
{{/equal}} {{/equal}}
{{#if device.viewModel.BatteryLevel}} {{#if device.viewModel.BatteryLevel}}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
@ -215,139 +212,137 @@
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default tab-pane fade fade-in-xs visible-block" </div>
id="policy_compliance"> <div class="panel panel-default visible-xs-block" role="tabpanel" id="policy_compliance_tab">
<div class="panel-heading dropdown visible-xs collapsed" role="tab" id="tab2" <div class="panel-heading visible-xs collapsed" id="policy_compliance">
data-toggle="collapse" data-target="#tabContent2" aria-expanded="false" <h4 class="panel-title">
data-parent="#tabs"> <a role="button" data-toggle="collapse" data-parent="#tabs" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h4 class="panel-title"><i class="fw fw-text fw-2x"></i> <i class="fw fw-policy fw-2x"></i>
Policy Compliance Policy Compliance
<i class="caret-updown fw fw-sort-down"></i> <i class="caret-updown fw fw-down"></i>
</a>
</h4> </h4>
</div> </div>
<div class="panel-heading display-none-xs"> <div class="panel-heading display-none-xs">
Policy Compliance Policy Compliance
&nbsp;&nbsp;
<span> <span>
<a href="#" id="refresh-policy"> <a href="#" id="refresh-policy">
<i class="fw fw-refresh"></i> <i class="fw fw-refresh"></i>
</a> </a>
</span> </span>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="policy_compliance">
<div class="panel-body ">
<span class="visible-xs add-padding-2x text-right">
<a href="#" id="refresh-policy">
<i class="fw fw-refresh"></i>
</a>
</span>
<div id="policy-spinner" class="wr-advance-operations-init hidden"> <div id="policy-spinner" class="wr-advance-operations-init hidden">
<br><br> <i class="fw fw-settings fw-spin fw-2x"></i> Loading Policy Compliance...
&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div> </div>
<div class="panel-body collapse display-block-sm display-block-md display-block-lg" id="tabContent2">
<div id="policy-list-container"> <div id="policy-list-container">
<div class="panel-body"> <div class="message message-info">
There is no active policy for this device. <h4 class="remove-margin"><i class="icon fw fw-info"></i>There is no active policy for this device.</h4>
</div>
<br class="c-both"/>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default tab-pane fade fade-in-xs visible-block" </div>
id="device_location"> </div>
<div class="panel-heading dropdown visible-xs collapsed" role="tab" id="tab3" <div class="panel panel-default visible-xs-block" role="tabpanel" id="device_location_tab">
data-toggle="collapse" data-target="#tabContent3" aria-expanded="false" <div class="panel-heading visible-xs collapsed" id="device_location">
data-parent="#tabs">
<h4 class="panel-title"> <h4 class="panel-title">
<i class="fw fw-text fw-2x"></i> <a role="button" data-toggle="collapse" data-parent="#tabs" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<i class="fw fw-map-location fw-2x"></i>
Device Location Device Location
<i class="caret-updown fw fw-sort-down"></i> <i class="caret-updown fw fw-down"></i>
</a>
</h4> </h4>
</div> </div>
<div class="panel-heading display-none-xs">Device Location</div> <div class="panel-heading display-none-xs">Device Location</div>
<div class="panel-body collapse display-block-sm display-block-md display-block-lg" <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="device_location">
id="tabContent3"> <div class="panel-body">
<div id="map-error" class="message message-danger">
<h4 class="remove-margin"><i class="icon fw fw-error"></i>Device location cannot be retrieved.</h4>
</div>
<div id="device-location" <div id="device-location"
data-lat="{{device.viewModel.location.latitude}}" data-lat="{{device.viewModel.location.latitude}}"
data-long="{{device.viewModel.location.longitude}}" data-long="{{device.viewModel.location.longitude}}">
class="panel-body">
</div>
<div id="map-error" class="panel-body" style="margin: auto;">
Device location cannot be retrieved.
</div>
<br class="c-both"/>
</div> </div>
</div> </div>
<div class="panel panel-default tab-pane fade fade-in-xs visible-block" </div>
id="installed_applications"> </div>
<div class="panel-heading dropdown visible-xs collapsed" role="tab" id="tab4" <div class="panel panel-default visible-xs-block" role="tabpanel" id="installed_applications_tab">
data-toggle="collapse" data-target="#tabContent4" aria-expanded="false" <div class="panel-heading visible-xs collapsed" id="installed_applications">
data-parent="#tabs">
<h4 class="panel-title"> <h4 class="panel-title">
<i class="fw fw-text fw-2x"></i> <a role="button" data-toggle="collapse" data-parent="#tabs" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<i class="fw fw-application fw-2x"></i>
Installed Applications Installed Applications
<i class="caret-updown fw fw-sort-down"></i></h4> <i class="caret-updown fw fw-down"></i>
</a>
</h4>
</div> </div>
<div class="panel-heading display-none-xs"> <div class="panel-heading display-none-xs">
Installed Applications Installed Applications
&nbsp;&nbsp;
<span> <span>
<a href="#" id="refresh-apps"> <a href="#" id="refresh-apps">
<i class="fw fw-refresh"></i> <i class="fw fw-refresh"></i>
</a> </a>
</span> </span>
</div> </div>
<div class="panel-body collapse display-block-sm display-block-md display-block-lg" <div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="installed_applications">
id="tabContent4"> <div class="panel-body ">
<span class="visible-xs add-padding-2x text-right">
<a href="#" id="refresh-apps">
<i class="fw fw-refresh"></i>
</a>
</span>
<div id="apps-spinner" class="wr-advance-operations-init hidden"> <div id="apps-spinner" class="wr-advance-operations-init hidden">
<br><br> <i class="fw fw-settings fw-spin fw-2x"></i> Loading Applications List...
&nbsp;&nbsp;&nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;Loading Applications List . . .<br><br>
</div> </div>
<div id="applications-list-container"> <div id="applications-list-container">
<div class="panel-body"> <div class="message message-info">
<br> <h4><i class="icon fw fw-info"></i>No applications found.</h4>
<p class="fw-warning"> <p>Please try refreshing the list in a while.</p>
No applications found. please try refreshing the list in a while.
<p>
</div>
<br class="c-both"/>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default tab-pane fade fade-in-xs visible-block" id="event_log"> </div>
<div class="panel-heading dropdown visible-xs collapsed" role="tab" id="tab5" </div>
data-toggle="collapse" data-target="#tabContent5" aria-expanded="false" <div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab">
data-parent="#tabs"> <div class="panel-heading visible-xs collapsed" id="event_log">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tabs" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<i class="fw fw-text fw-2x"></i> <i class="fw fw-text fw-2x"></i>
Operations Logs Operations Logs
<i class="caret-updown fw fw-sort-down"></i> <i class="caret-updown fw fw-down"></i>
</a>
</h4> </h4>
</div> </div>
<div class="panel-heading display-none-xs"> <div class="panel-heading display-none-xs">
Operations Logs Operations Logs
&nbsp;&nbsp;
<span> <span>
<a href="#" id="refresh-operations"> <a href="#" id="refresh-operations">
<i class="fw fw-refresh"></i> <i class="fw fw-refresh"></i>
</a> </a>
</span> </span>
</div> </div>
<div class="panel-body collapse display-block-sm display-block-md display-block-lg" <div id="collapseFive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="event_log">
id="tabContent5"> <div class="panel-body">
<span class="visible-xs add-padding-2x text-right">
<a href="#" id="refresh-operations">
<i class="fw fw-refresh"></i>
</a>
</span>
<div id="operations-spinner" class="wr-advance-operations-init hidden"> <div id="operations-spinner" class="wr-advance-operations-init hidden">
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>&nbsp;&nbsp;&nbsp; <i class="fw fw-settings fw-spin fw-2x"></i> Loading Operations Log...
Loading Operations Log . . .
<br><br>
</div> </div>
<div id="operations-log-container"> <div id="operations-log-container">
<div class="panel-body"> <div class="message message-info">
There are no operations, performed yet on this device. <h4 class="remove-margin"><i class="icon fw fw-info"></i>There are no operations, performed yet on this device.</h4>
</div> </div>
<br class="c-both"/>
</div> </div>
<table class="table table-striped table-hover table-bordered display data-table" <table class="table table-striped table-hover table-bordered display data-table" id="operations-log-table">
id="operations-log-table">
<thead> <thead>
<tr class="sort-row"> <tr class="sort-row">
<th>Operation Code</th> <th>Operation Code</th>