From 30c846ef95f38428789ff191cf7e0cdec0ef1294 Mon Sep 17 00:00:00 2001 From: thusithakalugamage Date: Fri, 9 Sep 2016 16:08:21 +0530 Subject: [PATCH 1/2] responsive tab panel component - markup rewrite for uuf --- .../public/js/device-detail.js | 67 +++-- .../app/units/mdm.unit.device.view/view.hbs | 253 +++++++++--------- 2 files changed, 164 insertions(+), 156 deletions(-) diff --git a/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 b/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 index 0740950349..87d902e44d 100644 --- a/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 +++ b/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 @@ -50,49 +50,61 @@ var InitiateViewOption = null; ); } + $(".media.tab-responsive [data-toggle=tab]").on("shown.bs.tab", function (e) { - var activeTabPane = $(e.target).attr("href"), - activeCollapsePane = $(activeTabPane).find("[data-toggle=collapse]").data("target"), - activeCollapsePaneSiblings = $(activeTabPane).siblings().find("[data-toggle=collapse]").data("target"), - activeListGroupItem = $(".media .list-group-item.active"); + var activeTabPane = $(e.target).attr("href"); + var activeListGroupItem = $(".media .list-group-item.active"); - $(activeCollapsePaneSiblings).collapse("hide"); - $(activeCollapsePane).collapse("show"); + $(activeTabPane).removeClass("visible-xs-block"); + $(activeTabPane).siblings().not(".arrow-left").addClass("visible-xs-block"); 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) { - var activeTabPane = $(e.target).parent().attr("id"); - $(".media.tab-responsive [data-toggle=tab][href=#" + activeTabPane + "]").tab("show"); - $(".panel-heading .caret-updown").removeClass("fw-sort-up"); - $(".panel-heading.collapsed .caret-updown").addClass("fw-sort-down"); + var thisParent = $(e.target).parent(); + var activeTabPaneCaret = thisParent.find('.caret-updown'); + var activeTabPaneCaretSiblings = thisParent.siblings().find('.caret-updown'); + + 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) { - var selectedTabHeight = $(selectedTab).outerHeight(); + var selectedTabHeight = $(selectedTab).innerHeight(); var arrowPosition = 0; var totalHeight = 0; 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() { -// totalHeight += $(this).outerHeight(); -// }); -// arrowPosition = totalHeight + (selectedTabHeight / 2); -// }else{ -// arrowPosition = selectedTabHeight / 2; -// } + + if($(selectedTab).prev().length){ + $(selectedTab).prevAll().each(function() { + totalHeight += $(this).innerHeight(); + }); + arrowPosition = totalHeight + (selectedTabHeight / 2); + }else{ + arrowPosition = selectedTabHeight / 2; + } if(arrowPosition >= parentHeight){ - parentHeight = arrowPosition + 10; - $(arrow).parent().height(parentHeight); + parentHeight = arrowPosition + 50; + $(arrow).siblings(".panel.active").height(parentHeight); }else{ $(arrow).parent().removeAttr("style"); } + $(arrow).css("top", arrowPosition - 10); } @@ -228,8 +240,8 @@ var InitiateViewOption = null; $("#applications-list-container").html(content); } else { $("#applications-list-container"). - html("

 No applications found. " + - "please try refreshing the list in a while.

"); + html("

No applications found.

" + + "

Please try refreshing the list in a while.

"); } } }, @@ -315,4 +327,5 @@ var InitiateViewOption = null; } ); } + }()); diff --git a/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 b/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 index b21c3982d8..929a866604 100644 --- a/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 +++ b/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 @@ -82,66 +82,63 @@
-
{{#defineZone "device-detail-properties"}}
-
+
-
-