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..932d690fdd
--- /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..4b4b0ffa47 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);
}
@@ -460,7 +460,7 @@
}
/**************************************
- Virtual List
+ Virtual List
***************************************/
.virtual-icon {
width: 35px;
@@ -468,7 +468,7 @@
}
/**************************************
- Slider
+ Slider
***************************************/
#slider-demo .ui-slider-vertical {
left: 50%;
@@ -477,7 +477,7 @@
}
/**************************************
- Button Text
+ Button Text
***************************************/
#button-page {
color: white;
@@ -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,26 @@
}
.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;
+ margin-bottom: 15px;
}
\ 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..8acf922178 100644
--- a/src/css/profile/mobile/common/core.less
+++ b/src/css/profile/mobile/common/core.less
@@ -159,13 +159,16 @@
border-radius: 26 * @px_base;
box-sizing: border-box;
box-shadow: 0 0 0 0.25 * @px_base var(--content-area-line-color) inset;
- margin: auto;
+ margin: auto auto 16 * @px_base auto;
&-disabled-top-rounding {
border-top-left-radius: 0;
border-top-right-radius: 0;
mask-border-width: 0 26 * @px_base 26 * @px_base;
}
+ ~ .ui-content-subheader {
+ margin-top: -16 * @px_base; // margin compensation from content area
+ }
}
.ui-content-subheader {
diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
index dd90f7086e..e3a8c899d7 100644
--- a/src/css/profile/mobile/common/expandable.less
+++ b/src/css/profile/mobile/common/expandable.less
@@ -1,7 +1,9 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
padding: 0 24 * @px_base;
user-select: none;
flex-direction: column;
+ display: flex;
.ui-expandable-heading {
color: var(--text-color);
@@ -13,10 +15,6 @@
margin: 0;
position: relative;
- &:not(.ui-expandable-heading-collapsed) {
- color: var(--primary-dark-color);
- }
-
.ui-expandable-heading-toggle {
position: relative;
display: block;
@@ -25,14 +23,10 @@
outline: 0;
}
- &:active {
- color: @color_list_divider_text_expandable_press;
- }
-
&::after {
content: "";
position: absolute;
- right: 0;
+ right: -8 * @px_base;
top: calc(~"50% - "16 * @px_base);
mask-image: url("images/6_Lists/tw_expander_close_mtrl.svg");
mask-repeat: no-repeat;
@@ -45,9 +39,26 @@
transform: rotate(0);
}
}
- &.ui-expandable-heading-active {
- .ui-expandable-heading-toggle::after {
- background-color: @color_expandable_heading_arrow_pressed;
+ .ui-btn {
+ width: 32 * @px_base;
+ height: 32 * @px_base;
+ min-height: auto;
+ position: absolute;
+ right: -8 * @px_base;
+ top: calc(~"50% - "16 * @px_base);
+
+ &::before {
+ width: 32 * @px_base;
+ height: 32 * @px_base;
+ display: none;
+ }
+ &::after {
+ width: 32 * @px_base;
+ height: 32 * @px_base;
+ mask-size: 32 * @px_base;
+ background-color: var(--expander-color);
+ transition: all 330ms ease;
+ transform: translate(-50%, -50%) rotate(0);
}
}
}
@@ -61,10 +72,19 @@
}
}
}
+ &.ui-expandable-collapsed {
+ .ui-expandable-heading {
+ .ui-btn {
+ &::after {
+ transform: translate(-50%, -50%) rotate(180deg);
+ }
+ }
+ }
+ }
.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;