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 + + + + + + + +
    +
    +
    + +
    +
    + Expand button on 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..c527803af1 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,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..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..1258e189fc 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,10 +23,6 @@ outline: 0; } - &:active { - color: @color_list_divider_text_expandable_press; - } - &::after { content: ""; position: absolute; @@ -45,9 +39,25 @@ 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: 0; + top: calc(~"50% - "16 * @px_base); + + &::before { + width: 32 * @px_base; + height: 32 * @px_base; + } + &::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 +71,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;