diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html
index 687b3b40e6..08d6b427ba 100644
--- a/examples/mobile/UIComponents/components/controllers/expand-button.html
+++ b/examples/mobile/UIComponents/components/controllers/expand-button.html
@@ -27,6 +27,11 @@
Expand button on list
+
+
+ Expand button on card
+
+
diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html
new file mode 100644
index 0000000000..fbb3f5be40
--- /dev/null
+++ b/examples/mobile/UIComponents/components/controllers/expandable-card.html
@@ -0,0 +1,54 @@
+
+
+
+
+ Expandable Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Subtitle 1
+
+
+ Contents area
+
+
+
+
+
+
Subtitle 2
+
+
+
+ Contents
+
+
+ Contents area
+
+
+
+
+
+
+
+
diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css
index 5f34f72998..820e448072 100644
--- a/examples/mobile/UIComponents/css/style.css
+++ b/examples/mobile/UIComponents/css/style.css
@@ -1,6 +1,6 @@
/* Header */
.btn-icon-back::after {
- -webkit-mask-image: url(./images/core_icon_back.png);
+ -webkit-mask-image: url(./images/core_icon_back.png);
mask-image: url(./images/core_icon_back.png);
}
@@ -468,7 +468,7 @@
}
/**************************************
- Slider
+ Slider
***************************************/
#slider-demo .ui-slider-vertical {
left: 50%;
@@ -624,14 +624,14 @@
}
/**************************************
- text input with buttons
+ text input with buttons
***************************************/
#textinputwithbuttons-demo .ui-content {
top: 80px;
background: white;
}
/******************************************************
- List Styles - sliders
+ List Styles - sliders
******************************************************/
#slider-description{
@@ -671,7 +671,7 @@
}
/******************************************************
- Indexscrollbar with search floating button
+ Indexscrollbar with search floating button
******************************************************/
#indexscrollbarPage .ui-header.search-active h1 {
@@ -704,4 +704,25 @@
}
.sample-unit-lines p {
margin-bottom: 2px;
+}
+
+/* Expand button example */
+.app-content-example {
+ height: 150px;
+ width: 100%;
+ background-color: #ddd;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 15px;
+}
+.app-content-example-expanded {
+ height: 150px;
+ width: 100%;
+ background-color: #ddd;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/src/css/profile/mobile/common/core.less b/src/css/profile/mobile/common/core.less
index 1d44725702..d37e2a6ba1 100644
--- a/src/css/profile/mobile/common/core.less
+++ b/src/css/profile/mobile/common/core.less
@@ -166,6 +166,10 @@
border-top-right-radius: 0;
mask-border-width: 0 26 * @px_base 26 * @px_base;
}
+
+ ~ .ui-content-area {
+ margin-top: 16 * @px_base;
+ }
}
.ui-content-subheader {
diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
index dd90f7086e..a9c2aa9391 100644
--- a/src/css/profile/mobile/common/expandable.less
+++ b/src/css/profile/mobile/common/expandable.less
@@ -1,4 +1,5 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
padding: 0 24 * @px_base;
user-select: none;
flex-direction: column;
@@ -13,10 +14,6 @@
margin: 0;
position: relative;
- &:not(.ui-expandable-heading-collapsed) {
- color: var(--primary-dark-color);
- }
-
.ui-expandable-heading-toggle {
position: relative;
display: block;
@@ -25,10 +22,6 @@
outline: 0;
}
- &:active {
- color: @color_list_divider_text_expandable_press;
- }
-
&::after {
content: "";
position: absolute;
@@ -45,11 +38,6 @@
transform: rotate(0);
}
}
- &.ui-expandable-heading-active {
- .ui-expandable-heading-toggle::after {
- background-color: @color_expandable_heading_arrow_pressed;
- }
- }
}
&.ui-expandable-collapsed {
@@ -63,8 +51,8 @@
}
.ui-expandable-content {
- display: block;
transition: all 330ms ease;
+ overflow: auto;
.ui-listview {
padding: 0;
margin-left: 18 * @px_base;
diff --git a/src/css/profile/mobile/theme-changeable/theme.color.less b/src/css/profile/mobile/theme-changeable/theme.color.less
index 26c56b3a5e..a8aa1ec083 100644
--- a/src/css/profile/mobile/theme-changeable/theme.color.less
+++ b/src/css/profile/mobile/theme-changeable/theme.color.less
@@ -40,7 +40,6 @@
@color_list_sub_text_3_normal: var(--text-secondary-color); // #[color] sub text color
@color_list_divider_text: var(--text-secondary-color); // #[color] divider text color
-@color_list_divider_text_expandable_press: var(--active); // #[color] divider text color
@color_list_divider_bg_press: var(--on-background); // #[color] divider background press color
@color_list_divider_text_press: var(--active); // #[color] divider text press color
@@ -59,7 +58,6 @@
// Expandable
//***************************************************************************
@color_expandable_heading_arrow: var(--on-background); // #[color] expandable arrow color
-@color_expandable_heading_arrow_pressed: var(--active); // #[color] expandable arrow color pressed
@color_expandable_heading_arrow_dim: var(--control-background);
//***************************************************************************
diff --git a/src/js/profile/mobile/widget/Expandable.js b/src/js/profile/mobile/widget/Expandable.js
index b061c1a07f..aca0adb354 100644
--- a/src/js/profile/mobile/widget/Expandable.js
+++ b/src/js/profile/mobile/widget/Expandable.js
@@ -156,13 +156,15 @@
*/
this.options = {
collapsed: true,
- heading: expandableSelectors.HEADING
+ heading: expandableSelectors.HEADING,
+ expander: "heading"
};
this._eventHandlers = {};
this._ui = {
- expandableHeadingElement: null,
- expandableHeadingContent: null
+ heading: null,
+ expandableHeadingContent: null,
+ expandButton: null
};
},
@@ -216,12 +218,18 @@
* @member ns.widget.mobile.Expandable
*/
uiExpandableHeadingToggle: "ui-expandable-heading-toggle",
+ /**
+ * Set active to expandable widget heading
+ * @style ui-expandable-heading-active
+ * @member ns.widget.mobile.Expandable,
+ */
+ uiExpandableHeadingActive: "ui-expandable-heading-active",
/**
* Set active to expandable widget heading
* @style ui-expandable-heading-active
* @member ns.widget.mobile.Expandable
*/
- uiExpandableHeadingActive: "ui-expandable-heading-active"
+ expandButton: "ui-expand-button"
};
@@ -240,9 +248,9 @@
function toggleExpandableHandler(self, element, event) {
var ui = self._ui,
elementClassList = element.classList,
- heading = ui.expandableHeadingElement,
+ heading = ui.heading,
headingClassList = heading.classList,
- content = ui.expandableContentElement,
+ content = ui.expandableContent,
contentClassList = content.classList,
isCollapse = event.type === "collapse";
@@ -268,7 +276,7 @@
}
function setHeadingActiveClassHandler(self, setClass) {
- var headingClassList = self._ui.expandableHeadingElement.classList;
+ var headingClassList = self._ui.heading.classList;
if (setClass) {
headingClassList.add(classes.uiExpandableHeadingActive);
@@ -279,7 +287,7 @@
function toggleEventTypeHandler(self, event) {
var element = self.element,
- heading = self._ui.expandableHeadingElement,
+ heading = self._ui.heading,
eventType = heading.classList.contains(classes.uiExpandableHeadingCollapsed) ? "expand" : "collapse";
eventUtil.trigger(element, eventType);
@@ -329,18 +337,19 @@
}
expandableHeading.classList.add(classes.uiExpandableHeading);
- // Wrap all widget content
- domUtils.wrapInHTML(element.childNodes, "");
+ expandableContent = element.querySelector("." + classes.uiExpandableContent);
+ if (!expandableContent) {
+ // Wrap all widget content
+ domUtils.wrapInHTML(element.childNodes, "");
- // Move header out
- element.insertBefore(expandableHeading, element.firstChild);
-
- domUtils.wrapInHTML(expandableHeading.childNodes, "");
-
- expandableContent = expandableHeading.nextElementSibling;
+ // Move header out
+ element.insertBefore(expandableHeading, element.firstChild);
+ domUtils.wrapInHTML(expandableHeading.childNodes, "");
+ expandableContent = expandableHeading.nextElementSibling;
+ }
- ui.expandableHeadingElement = expandableHeading;
- ui.expandableContentElement = expandableContent;
+ ui.heading = expandableHeading;
+ ui.expandableContent = expandableContent;
return element;
};
@@ -357,13 +366,14 @@
var self = this,
ui = self._ui;
- ui.expandableHeadingElement = ui.expandableHeadingElement || selectors.getChildrenByClass(element, classes.uiExpandableHeading)[0];
- ui.expandableContentElement = ui.expandableContentElement || selectors.getChildrenByClass(element, classes.uiExpandableContent)[0];
+ ui.heading = ui.heading || selectors.getChildrenByClass(element, classes.uiExpandableHeading)[0];
+ ui.expandableContent = ui.expandableContent || element.querySelector("." + classes.uiExpandableContent);
+ ui.expandButton = ui.expandButton || element.querySelector("." + classes.expandButton);
if (self.options.collapsed) {
element.classList.add(classes.uiExpandableCollapsed);
- ui.expandableHeadingElement.classList.add(classes.uiExpandableHeadingCollapsed);
- ui.expandableContentElement.classList.add(classes.uiExpandableContentCollapsed);
+ ui.heading.classList.add(classes.uiExpandableHeadingCollapsed);
+ ui.expandableContent.classList.add(classes.uiExpandableContentCollapsed);
}
return element;
@@ -379,7 +389,7 @@
Expandable.prototype._bindEvents = function (element) {
var self = this,
eventHandlers = self._eventHandlers,
- heading = self._ui.expandableHeadingElement;
+ heading = self._ui.heading;
// Declare handlers with and assign them to local variables
eventHandlers.toggleExpandable = toggleExpandableHandler.bind(null, self, element);
@@ -450,7 +460,7 @@
Expandable.prototype._destroy = function () {
var self = this,
element = self.element,
- heading = self._ui.expandableHeadingElement,
+ heading = self._ui.heading,
eventHandlers = self._eventHandlers,
parentNode = element.parentNode;